main.css

/* Copyright (C) 2020  Matthew "strager" Glazar */
/* See end of file for extended copyright information. */

body {
  font-family: sans-serif;
  margin-left: auto;
  margin-right: auto;
  max-width: 45rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

figure {
  margin: 0;
  margin-bottom: 1rem;
}

h1 {
  margin-top: 1rem;
}

header nav.main-nav {
  margin-top: 1rem;
  text-align: right;
}
header nav.main-nav > ul {
  margin: 0;
  padding: 0;
}
header nav.main-nav li {
  --nav-entry-padding: 0px;
  list-style: none;
  padding: 0;
  margin: 0;
}
header nav.main-nav li.side-bar-only {
  display: none;
}
header nav.main-nav li a:link,
header nav.main-nav li .current-page {
  padding: var(--nav-entry-padding);
}

/* For sub-nav entries, show bullets (circles) connected with a vertical
   line. This visually groups the sub-nav entries under its parent nav entry.

   :before holds the vertical line. :after holds the bullet. */
header nav.main-nav li li {
  --bullets-circle-width: 5px;
  --bullets-current-color: #000;
  --bullets-line-color: #999;
  --bullets-line-width: 1px;
  --bullets-link-color: #999;
}
header nav.main-nav li li a:link,
header nav.main-nav li li .current-page {
  position: relative;
}
header nav.main-nav li li a:link:before,
header nav.main-nav li li .current-page:before {
  /* Vertical line */
  background-color: var(--bullets-line-color);
  bottom: 0;
  content: " ";
  display: inline-block;
  position: absolute;
  right: calc(
    var(--nav-entry-padding) + (var(--bullets-circle-width) / 2) -
      (var(--bullets-line-width) / 2)
  );
  top: 0;
  width: var(--bullets-line-width);
}
header nav.main-nav li li a:link:after,
header nav.main-nav li li .current-page:after {
  /* Bullet (circle) */
  border-radius: 100%;
  content: " ";
  display: inline-block;
  height: var(--bullets-circle-width);
  margin-left: 0.25em;
  width: var(--bullets-circle-width);
  /* Center the bullet vertically within the nav entry. */
  bottom: calc((1em - var(--bullets-circle-width)) / 2);
  vertical-align: bottom;
  /* Show the bullet in front of the vertical line. */
  position: relative;
  z-index: 1;
}
header nav.main-nav li li a:link:after {
  background-color: var(--bullets-link-color);
}
header nav.main-nav li li .current-page:after {
  background-color: var(--bullets-current-color);
}
header nav.main-nav li li:nth-last-child(1) a:link:before,
header nav.main-nav li li:nth-last-child(1) .current-page:before {
  /* Don't extend the vertical line past the bottom (last) bullet. */
  bottom: 50%;
}
header nav.main-nav li li:first-child a:link:before,
header nav.main-nav li li:first-child .current-page:before {
  /* Extend the vertical line to the baseline of the parent nav entry. */
  top: calc(var(--nav-entry-padding) * -1);
}
@media (prefers-color-scheme: dark) {
  header nav.main-nav li li {
    --bullets-current-color: #eee;
    --bullets-line-color: #999;
    --bullets-link-color: #999;
  }
}

header {
  display: grid;
  grid-template-areas:
    "title main-nav"
    "tag-line main-nav"
    "breadcrumbs main-nav";
}
header > h1 {
  grid-area: title;
}
header > .tag-line {
  grid-area: tag-line;
}
header > nav.main-nav {
  grid-area: main-nav;
}
header > nav.breadcrumbs {
  grid-area: breadcrumbs;
}

footer,
h2 {
  border-top: 1px solid #ccc;
  padding-top: 1rem;
}

main > h2:first-child {
  border-top: 0;
  padding-top: 0;
}

nav.breadcrumbs ol {
  display: flex;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
nav.breadcrumbs ol > li {
  margin: 0 0.125em;
  padding: 0;
}

nav.breadcrumbs ol > li {
  list-style-type: none;
}
nav.breadcrumbs ol > li:not(:first-child)::before {
  content: "➤ ";
}

@media (prefers-color-scheme: dark) {
  a:link {
    color: #3398e0;
  }
  a:visited {
    color: #979ef8;
  }
  html,
  body {
    /* HACK(strager): !important on html is needed to work around quirks in the
       Dark Reader browser extension (https://darkreader.org/). */
    background-color: #002b36 !important;
  }
  body {
    color: white;
  }
  .os-logo[src="macos.svg"],
  .os-logo[src$="/macos.svg"] {
    filter: invert(100%);
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: black;
  }
}

/* Comparison tables */
.comparison td.good {
  background-color: #ddffdd;
}
.comparison td.bad {
  background-color: #ffdddd;
}
.comparison td.meh {
  background-color: #ffeecc;
}
@media (prefers-color-scheme: dark) {
  .comparison td.bad {
    color: rgb(255, 255, 255);
    background-color: #661919;
  }
  .comparison td.meh {
    color: rgb(255, 255, 255);
    background-color: #665519;
  }
  .comparison td.good {
    color: rgb(255, 255, 255);
    background-color: #195519;
  }
}

/* Make errors stand out. */
pre mark {
  color: unset;
  text-decoration: underline;
  background-color: #ffdddd;
  text-decoration-color: red;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-decoration-style: wavy;
}
pre mark:empty::before {
  color: red;
  content: url("demo/carat.svg") / "^";
  content: url("demo/carat.svg");
  margin-left: -2px; /* (width of SVG) / 2 */
  margin-top: 4px; /* height of SVG */
  position: absolute;
}
@media (prefers-color-scheme: dark) {
  pre mark {
    background-color: #7a1965;
  }
}

.install-logo,
.os-logo {
  height: 1.2em;
  vertical-align: text-bottom;
}

.os-column-table {
  display: grid;
  grid-template-areas: "linux macos windows";
}
.os-column-table h3 {
  margin-top: 0;
}
.os-column-table {
  margin-bottom: 1em;
  margin-top: 1em;
}

.os-column-table > * {
  border-left: 1px solid #ccc;
  padding-left: 1rem;
  padding-right: 1rem;
}
.os-column-table > .linux {
  border-left-color: transparent;
  grid-area: linux;
}
.os-column-table > .macos {
  grid-area: macos;
}
.os-column-table > .windows {
  grid-area: windows;
}

code.shell-session .long-shell-command-line {
  /* 6 = "$ ".length + 4 spaces of indentation */
  display: inline-block;
  padding-left: 6ch;
  text-indent: -6ch;
  white-space: normal;
}

code.shell-session kbd::before {
  content: "$ ";
}

@media only screen and (min-width: 34em) and (max-width: 40em) {
  .os-column-table ul {
    margin-left: 0;
    padding-left: 1em;
  }
}

/* Stack items on top of each other if the screen isn't wide enough to
         arrange them horizontally. */
@media only screen and (max-width: 34em) {
  .os-column-table {
    grid-template-areas: "linux" "macos" "windows";
  }
  .os-column-table > * {
    border-left: 0;
  }
}

/* Side-bar navigation, if the viewport is wide enough. */
/* HACK(strager): max-width in this query should equal body's max-width (plus
   padding-left and padding-right), but we need to add a little bit in case of a
   scroll bar. 1em seems to be enough. */
@media only screen and (min-width: 51em) {
  body.side-bar-nav {
    --page-width: 49em;
    --side-bar-width: 7rem;
    max-width: var(--page-width);
  }

  /* Move the main content to the right to make room for the side bar. */
  .side-bar-nav > #content,
  .side-bar-nav > #header,
  .side-bar-nav > footer,
  .side-bar-nav > header,
  .side-bar-nav > main {
    margin-left: calc(var(--side-bar-width) + 0.5rem);
  }

  /* Make the side bar colors inverted from the main content's colors. */
  .side-bar-nav header nav.main-nav {
    background-color: #073642;
    color: #93a1a1;
  }
  .side-bar-nav header nav.main-nav a:link,
  .side-bar-nav header nav.main-nav a:visited {
    color: #eee8d5;
  }
  .side-bar-nav header nav.main-nav li a:hover {
    background-color: #586e75;
  }
  @media (prefers-color-scheme: dark) {
    .side-bar-nav header nav.main-nav {
      background-color: #93a1a1;
      color: #586e75;
    }
    .side-bar-nav header nav.main-nav a:link,
    .side-bar-nav header nav.main-nav a:visited {
      color: #073642;
    }
    .side-bar-nav header nav.main-nav li a:hover {
      background-color: #839496;
    }
  }

  /* Move the side bar to the left of the content. */
  .side-bar-nav header nav.main-nav {
    bottom: 0;
    left: 0;
    margin-top: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: calc((100% - var(--page-width)) / 2 + var(--side-bar-width));
  }

  .side-bar-nav header nav.main-nav {
    word-break: break-word;
    padding-top: 2rem;
    padding-bottom: 1rem;
  }

  .side-bar-nav header nav.main-nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .side-bar-nav header nav.main-nav ul li {
    padding: 0;
    --nav-entry-padding: 0.5em;
  }

  .side-bar-nav header nav.main-nav li a:link,
  .side-bar-nav header nav.main-nav li .current-page {
    display: block;
    text-decoration: none;
  }

  .side-bar-nav header nav.main-nav li .current-page li {
    font-weight: initial;
  }

  .side-bar-nav header nav.main-nav li .current-page {
    font-weight: bold;
  }

  .side-bar-nav header nav.main-nav li.side-bar-only {
    display: unset;
  }

  .side-bar-nav header nav.main-nav li li a:link:after,
  .side-bar-nav header nav.main-nav li li .current-page:after {
    margin-left: 0.5em;
  }
  .side-bar-nav header nav.main-nav li li {
    --bullets-circle-width: 7px;
    --bullets-current-color: #93a1a1;
    --bullets-line-color: #93a1a1;
    --bullets-link-color: #eee8d5;
  }
  @media (prefers-color-scheme: dark) {
    .side-bar-nav header nav.main-nav li li {
      --bullets-current-color: #586e75;
      --bullets-line-color: #073642;
      --bullets-link-color: #073642;
    }
  }
}

/*
 * quick-lint-js finds bugs in JavaScript programs.
 * Copyright (C) 2020  Matthew "strager" Glazar
 *
 * quick-lint-js is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * quick-lint-js is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with quick-lint-js.  If not, see <https://www.gnu.org/licenses/>.
 */