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
 61aside {
 62  background: #f7f7f7;
 63  padding: 0.3rem 2rem;
 64
 65  @media (prefers-color-scheme: dark) {
 66    background: #111;
 67  }
 68}
 69
 70main {
 71  padding: 2rem;
 72  margin: 0;
 73  border-bottom: solid 3px #ccc;
 74
 75  @media (prefers-color-scheme: dark) {
 76    border-bottom-color: $darkModeHighlightColour;
 77  }
 78}
 79
 80footer {
 81  margin-top: 0.5em;
 82  text-align: center;
 83  font-size: 80%;
 84  color: #ccc;
 85
 86  @media (prefers-color-scheme: dark) {
 87    color: $darkModeTextColour;
 88  }
 89}
 90
 91a {
 92  text-decoration: none;
 93  color: blue;
 94
 95  @media (prefers-color-scheme: dark) {
 96    color: darken($darkModeHighlightColour, 10%);
 97  }
 98
 99  &.no-style {
100    color: inherit;
101
102    @media (prefers-color-scheme: dark) {
103      color: darken($darkModeHighlightColour, 10%);
104    }
105  }
106
107  &:hover {
108    text-decoration: underline;
109  }
110}