1@import 'util';
  2@import 'diff';
  3@import 'tables';
  4@import 'code';
  5@import 'colours';
  6
  7@media (prefers-color-scheme: dark) {
  8  html {
  9    background: #000;
 10    color: $darkModeTextColour;
 11  }
 12
 13  h2, h3 {
 14    color: darken($darkModeHighlightColour, 20%);
 15  }
 16}
 17
 18body {
 19  font-family: sans-serif;
 20  font-size: 0.9rem;
 21  tab-size: 4;
 22}
 23
 24header {
 25  border-bottom: solid 1px #ccc;
 26}
 27
 28nav {
 29  margin-top: 2rem;
 30  border-bottom: solid 3px #ccc;
 31  display: flex;
 32
 33  .grow {
 34    flex-grow: 1;
 35  }
 36
 37  @media (prefers-color-scheme: dark) {
 38    border-bottom-color: $darkModeHighlightColour;
 39  }
 40
 41  a {
 42    padding: 2px 0.75em;
 43    color: #777;
 44    font-size: 110%;
 45
 46    @media (prefers-color-scheme: dark) {
 47      color: $darkModeHighlightColour;
 48    }
 49
 50    &.active {
 51      color: #000;
 52      background-color: #ccc;
 53
 54      @media (prefers-color-scheme: dark) {
 55        background: $darkModeHighlightColour;
 56      }
 57    }
 58  }
 59}
 60
 61main {
 62  padding: 2rem;
 63  margin: 0;
 64  border-bottom: solid 3px #ccc;
 65
 66  @media (prefers-color-scheme: dark) {
 67    border-bottom-color: $darkModeHighlightColour;
 68  }
 69}
 70
 71footer {
 72  margin-top: 0.5em;
 73  text-align: center;
 74  font-size: 80%;
 75  color: #ccc;
 76
 77  @media (prefers-color-scheme: dark) {
 78    color: $darkModeTextColour;
 79  }
 80}
 81
 82a {
 83  text-decoration: none;
 84  color: blue;
 85
 86  @media (prefers-color-scheme: dark) {
 87    color: darken($darkModeHighlightColour, 10%);
 88  }
 89
 90  &.no-style {
 91    color: inherit;
 92
 93    @media (prefers-color-scheme: dark) {
 94      color: darken($darkModeHighlightColour, 10%);
 95    }
 96  }
 97
 98  &:hover {
 99    text-decoration: underline;
100  }
101}