/* base.css: Style common to all pages on oilshell.org.
 */

@media screen and (max-width: 800px) {
  /* mobile: distance from left/right edge */
  body {
    padding: 0 1em;
  }
  /* mobile: horizontal scrollbar for code, so the long lines don't make the page small */
  pre {
    overflow: auto;
  }
}

/* wide screens: Center and limit width for readability */
@media screen and (min-width: 801px) {
  body {
    margin: 0 auto;
    line-height: 1.4;  /* http://bettermotherfuckingwebsite.com/ */
    font-size: large;  /* 2024-01 - all pages deserve this */
  }

  .skinny { width: 30em; }  /* Most blog posts */
  .wider { width: 45em; }   /* A few posts with tables */

  /* We don't want too many distinct widths, so pre-declare them here. */
  .width40 { width: 40em; }  /* the default for doc/*.md */
  .width50 { width: 50em; }  /* releases.html uses this */
  .width60 { width: 60em; }  /* test/wild, benchmarks */

  .width35 { width: 35em; }  /* May 2022 update.  Make more room for code. */
}

body {
  color: #444;
}

pre {
  background-color: #EEE;
  padding: 1em;
}

/* Remove left indent of bullet.  0em puts the bullet to the LEFT of
 * surrounding text. */
ul { padding-left: 1.2em; }
ol { padding-left: 1.2em; }

#home-link {
  text-align: right;
}

#version-in-header {
  color: darkgreen;
  font-weight: bold;
}

#why-sponsor a:link { text-decoration: none }
#why-sponsor a:hover { text-decoration: underline }
#why-sponsor a { color: darkgreen; }

#build-timestamp {
  margin-top: 2em;
  padding-top: 0.5em;
  padding-bottom: 2em;
  border-top: solid 1px #BBB;
}

.in-progress {
  color: darkred;
}


/* 
 * Usage: <table class="col3-right col5-right">
 *
 * colgroup/col doesn't work for right-justifying columns
 */

.col1-right td:nth-child(1),
.col2-right td:nth-child(2),
.col3-right td:nth-child(3),
.col4-right td:nth-child(4),
.col5-right td:nth-child(5),
.col6-right td:nth-child(6),
.col6-right td:nth-child(7),
.col6-right td:nth-child(8) {
  text-align: right
}
/* oilshell/oil/web/blog-v4.css 
 *
 * Blog style as of January 2021.
 */

@media screen and (min-width: 801px) {
  body {
    font-size: large;
  }
}

#latch-status {
  text-align: center;
  color: grey;
}

h1 {
  text-align: center;
}

.blog-post-title {
  text-align: left;
  font-size: 1.3em;
}

h2 {
  /* x-large is too big; causes most titles to wrap badly (on Chrome/Firefox desktop). */
  font-size: 1.2em;
}

h3 {
  margin: 0em;
  color: darkgreen;
  font-size: 1.0em;  /* Similar to default h4 */
}

/* Same as h4, but doesn't appear in TOC */
h4 {
  margin: 0em;
  color: darkgreen;
  font-size: 1.0em;
}

/* Exclude <pre><code>.  Is there a better way to do this?  */
p code, div code, li code, h2 code, h3 code {
  color: green;
}

blockquote {
  font-family: sans-serif;
  font-size: medium;  /* seems to look better */
  background: #EEE;  /* same color as pre */

  margin: 0;
  border-left: 10px solid #ccc;
  /* Only 1px vertical because <blockquote><p> produces "bulge" */
  padding: 1px 1em;
}

.link-box {
  margin: 1em 0;  /* div needs separation */
  padding: 1px 1em;
  background-color: #eee;
}

.title-without-link {
  color: darkgreen;
}

.footnotes {
  font-size: small;
}

.date {
  font-size: medium;
  color: #555;
  padding-left: 1em;
  padding-right: 1em;
  white-space: nowrap;
}

/* BEGIN blog/ */

.sep-row {
  vertical-align: center;
}

.post-list tr {
  vertical-align: top;
}
.post-list a {
  text-decoration: none;
}
.post-list a:hover {
  text-decoration: underline;
}
/* Save space */
.post-list .date {
  padding-left: 0em;
}

/* Subtly stand out */
.alt-month .date {
  color: #000;
}

#all-posts tbody {
  /* NOTE: This seems to make the table background solid like border-collapse:
   * collapse, but doesn't mess with spacing.
   */
  display: block;
}

/* on blog/index.html */
#blog-tag-list {
  /* text-align: justify; */
  color: gray;
}

.tag-count {
  white-space: nowrap;
}

/* END blog/ */

/* For post bodies: */

.blog-tag {
  font-family: sans-serif;
}

#post-footer {
  background-color: #DEE;
  padding: 0.5em;
}

.attention {
  text-align: center;
  background-color: #DEE;
  padding: 1px 0.5em;
}

/* anchors in cross-ref.html */
a[name] {
  color: green;
}

/* Links to cross-ref.html.  I copied color values from code.css for visual
harmony. */
a[href^="/cross-ref.html"] {
  color: #4070a0 /* Literal.String */
}

a[href^="/cross-ref.html"]:visited {
  /* color: #bb60d5 /* Name.Variable */
  color: purple;
}

/* Internal links.  This is so that cross-ref.html is consistent.  Technically
we might want to exclude other internal links, but I don't have many of those
right now. */
a[href^="#"] {
  color: #4070a0 /* Literal.String (light blue) */
}

a[href^="#"]:visited {
  /* color: #bb60d5 /* Name.Variable (light purple) */
  color: purple;
}
.book-text-link-td {
  padding: 1em;
  border-top: solid 1px #BBB;
}

.book-image-td {
  width: 30%
}

.book-desc-td {
  vertical-align: top;
}

/* For books and others */
hr {
  border: none;
  height: 1px;
  background-color: #BBB;
}

/* For blog release notes.  Copied from web/changelog.css */
.checksum {
  font-family: monospace;
}
.issue-num {
  font-family: monospace;
  width: 3em;
}
.issue-title {
  font-family: sans-serif;
}
.subject {
  font-family: sans-serif;
}
.bp { color: #007020 } /* Name.Builtin.Pseudo */
.c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
.c { color: #60a0b0; font-style: italic } /* Comment */
.ch { color: #60a0b0; font-style: italic } /* Comment.Hashbang */
.cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
.cp { color: #007020 } /* Comment.Preproc */
.cpf { color: #60a0b0; font-style: italic } /* Comment.PreprocFile */
.cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
.dl { color: #4070a0 } /* Literal.String.Delimiter */
.err { border: 1px solid #FF0000 } /* Error */
.fm { color: #06287e } /* Name.Function.Magic */
.gd { color: #A00000 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
.gi { color: #00A000 } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.gr { color: #FF0000 } /* Generic.Error */
.gs { font-weight: bold } /* Generic.Strong */
.gt { color: #0044DD } /* Generic.Traceback */
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.hll { background-color: #ffffcc }
.il { color: #40a070 } /* Literal.Number.Integer.Long */
.kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.k { color: #007020; font-weight: bold } /* Keyword */
.kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.kp { color: #007020 } /* Keyword.Pseudo */
.kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.kt { color: #902000 } /* Keyword.Type */
.mb { color: #40a070 } /* Literal.Number.Bin */
.m { color: #40a070 } /* Literal.Number */
.mf { color: #40a070 } /* Literal.Number.Float */
.mh { color: #40a070 } /* Literal.Number.Hex */
.mi { color: #40a070 } /* Literal.Number.Integer */
.mo { color: #40a070 } /* Literal.Number.Oct */
.na { color: #4070a0 } /* Name.Attribute */
.nb { color: #007020 } /* Name.Builtin */
.nc { color: #0e84b5; font-weight: bold } /* Name.Class */
.nd { color: #555555; font-weight: bold } /* Name.Decorator */
.ne { color: #007020 } /* Name.Exception */
.nf { color: #06287e } /* Name.Function */
.ni { color: #d55537; font-weight: bold } /* Name.Entity */
.nl { color: #002070; font-weight: bold } /* Name.Label */
.nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.no { color: #60add5 } /* Name.Constant */
.nt { color: #062873; font-weight: bold } /* Name.Tag */
.nv { color: #bb60d5 } /* Name.Variable */
.o { color: #666666 } /* Operator */
.ow { color: #007020; font-weight: bold } /* Operator.Word */
.s1 { color: #4070a0 } /* Literal.String.Single */
.s2 { color: #4070a0 } /* Literal.String.Double */
.sa { color: #4070a0 } /* Literal.String.Affix */
.sb { color: #4070a0 } /* Literal.String.Backtick */
.sc { color: #4070a0 } /* Literal.String.Char */
.s { color: #4070a0 } /* Literal.String */
.sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
.se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
.sh { color: #4070a0 } /* Literal.String.Heredoc */
.si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
.sr { color: #235388 } /* Literal.String.Regex */
.ss { color: #517918 } /* Literal.String.Symbol */
.sx { color: #c65d09 } /* Literal.String.Other */
.vc { color: #bb60d5 } /* Name.Variable.Class */
.vg { color: #bb60d5 } /* Name.Variable.Global */
.vi { color: #bb60d5 } /* Name.Variable.Instance */
.vm { color: #bb60d5 } /* Name.Variable.Magic */
.w { color: #bbbbbb } /* Text.Whitespace */
/*
 * For toc.js -- also taken from asciidoc.
 */

div#toc {
  margin-top: 2em;
  background-color: oldlace;
  padding: 1em;
}

div#toc a {
  text-decoration: none;
}

#toctitle, #dense-toc-title {
  text-align: center;
  color: #666;
  font-weight: bold;
  margin-bottom: 0.2em;
}

div.toclevel1, div.toclevel2, div.toclevel3, div.toclevel4 {
  margin-top: 0;
  margin-bottom: 0;
}
div.toclevel1 {
  margin-left: 2em;
  font-size: 0.9em;
}
div.toclevel2 {
  margin-left: 4em;
  font-size: 0.9em;
}

/* Dense TOC style for doc/ref */

/* The whole TOC */
div#dense-toc {
  /* copied from toc */
  margin-top: 2em;
  background-color: oldlace;
  padding: 1em;
}

div#dense-toc-cols {
  column-width: 10em;
}

div#dense-toc a {
  text-decoration: none;
}

/* Represents ONE h2 and ALL h3 children
   They are an UNBREAKABLE unit
 */
.dense-toc-group {
  /* 
  'overflow: hidden' is an older thing that seems prevent breaking
   */
  overflow: hidden;
  /*
  'page-break-inside: avoid' is newer
  https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element
  */
  page-break-inside: avoid;

  margin-left: 1em;
  margin-bottom: 1em;
}

/* One h3 child */
.dense-toc-h3 {
  margin-left: 1em;
  font-size: 0.9em;
}
/* For syntax highlighting ``` blocks */

.sh-prompt {
  font-weight: bold;
  color: #666;
}

.sh-command {
  color: darkblue;
}

.sh-comment {
  font-style: italic;
  color: green;
}

.sh-tab-complete {
  color: #666;
}