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,
 14  h3 {
 15    color: darken($darkModeHighlightColour, 20%);
 16  }
 17}
 18
 19body {
 20  font-family: sans-serif;
 21  font-size: 0.9rem;
 22  tab-size: 4;
 23}
 24
 25header {
 26  border-bottom: solid 1px #ccc;
 27}
 28
 29nav {
 30  margin-top: 2rem;
 31  border-bottom: solid 3px #ccc;
 32  display: flex;
 33
 34  .grow {
 35    flex-grow: 1;
 36  }
 37
 38  @media (prefers-color-scheme: dark) {
 39    border-bottom-color: $darkModeHighlightColour;
 40  }
 41
 42  a {
 43    padding: 2px 0.75em;
 44    color: #777;
 45    font-size: 110%;
 46
 47    @media (prefers-color-scheme: dark) {
 48      color: $darkModeHighlightColour;
 49    }
 50
 51    &.active {
 52      color: #000;
 53      background-color: #ccc;
 54
 55      @media (prefers-color-scheme: dark) {
 56        background: $darkModeHighlightColour;
 57      }
 58    }
 59  }
 60}
 61
 62aside {
 63  background: #f7f7f7;
 64  padding: 0.3rem 2rem;
 65
 66  @media (prefers-color-scheme: dark) {
 67    background: #111;
 68  }
 69}
 70
 71main {
 72  padding: 2rem;
 73  margin: 0;
 74  border-bottom: solid 3px #ccc;
 75
 76  @media (prefers-color-scheme: dark) {
 77    border-bottom-color: $darkModeHighlightColour;
 78  }
 79}
 80
 81.two-col {
 82  display: flex;
 83  gap: 1rem;
 84
 85  .sidebar {
 86    display: none;
 87    overflow: hidden;
 88    white-space: nowrap;
 89    resize: horizontal;
 90    max-width: 50%;
 91    min-width: 18rem;
 92    width: 10%;
 93  }
 94}
 95
 96.sidebar-toggle {
 97  display: inline-block;
 98  user-select: none;
 99  cursor: pointer;
100  width: 1rem;
101  height: 0.75rem;
102  position: relative;
103  margin-bottom: 1rem;
104
105  span {
106    display: block;
107    position: absolute;
108    height: 0.125rem;
109    width: 100%;
110    background: #333;
111    border-radius: 0.125rem;
112    transition: 0.3s ease;
113
114    @media (prefers-color-scheme: dark) {
115      background: #abb2bf;
116    }
117
118    @media (prefers-reduced-motion) {
119      transition-duration: 0s;
120    }
121
122    &:nth-of-type(1) {
123      top: 0;
124    }
125
126    &:nth-of-type(2) {
127      top: 0.3rem;
128    }
129
130    &:nth-of-type(3) {
131      top: 0.6rem;
132    }
133  }
134
135  input:checked~span:nth-of-type(1) {
136    transform: rotate(45deg);
137    top: 0.23rem;
138  }
139
140  input:checked~span:nth-of-type(2) {
141    opacity: 0;
142  }
143
144  input:checked~span:nth-of-type(3) {
145    transform: rotate(-45deg);
146    top: 0.23rem;
147  }
148
149  input {
150    display: none;
151  }
152
153  &:has(input[type="checkbox"]:checked)+.two-col>.sidebar {
154    display: block;
155  }
156}
157
158.dropdown-link {
159  .dropdown-label {
160    display: flex;
161    width: 100%;
162    border-radius: .25rem;
163    overflow: hidden;
164    cursor: pointer;
165
166    &:hover {
167      background: rgba(0, 0, 255, .1);
168
169      @media (prefers-color-scheme: dark) {
170        background: rgba(255, 255, 255, .1);
171      }
172    }
173
174    .dropdown-toggle {
175      font-size: 1.25rem;
176      padding: .2rem .3rem;
177      cursor: pointer;
178      user-select: none;
179      display: flex;
180      align-items: center;
181
182      &:hover {
183        background: rgba(0, 0, 255, .1);
184
185        @media (prefers-color-scheme: dark) {
186          background: rgba(255, 255, 255, .1);
187        }
188      }
189    }
190  }
191
192  .link {
193    display: inline-block;
194    padding: .35rem .5rem;
195    overflow: hidden;
196    text-overflow: ellipsis;
197    width: 100%;
198    text-decoration: none;
199    color: inherit;
200
201    &.selected {
202      background: rgba(0, 0, 255, .1);
203
204      @media (prefers-color-scheme: dark) {
205        background: rgba(0, 255, 0, .2);
206      }
207    }
208  }
209
210  .dropdown-content {
211    border-left: .15rem solid rgba(0, 0, 255, .1);
212    padding-left: .4rem;
213    margin-left: .4rem;
214    display: none;
215
216    @media (prefers-color-scheme: dark) {
217      border-left: .15rem solid rgba(0, 255, 0, .2);
218    }
219  }
220
221  input[type="checkbox"] {
222    display: none;
223  }
224
225  .dropdown-label:has(label input[type="checkbox"]:checked)+.dropdown-content {
226    display: block;
227  }
228
229  .dropdown-toggle span {
230    display: inline-block;
231    transition: transform 0.2s;
232
233    @media (prefers-reduced-motion) {
234      transition-duration: 0s;
235    }
236  }
237
238  input[type="checkbox"]:checked+.dropdown-toggle span {
239    transform: rotate(90deg);
240  }
241}
242
243.sr-only {
244  position: absolute;
245  width: 1px;
246  height: 1px;
247  padding: 0;
248  margin: -1px;
249  overflow: hidden;
250  clip: rect(0, 0, 0, 0);
251  white-space: nowrap;
252  border-width: 0;
253}
254
255footer {
256  margin-top: 0.5em;
257  text-align: center;
258  font-size: 80%;
259  color: #ccc;
260
261  @media (prefers-color-scheme: dark) {
262    color: $darkModeTextColour;
263  }
264}
265
266a {
267  text-decoration: none;
268  color: blue;
269
270  @media (prefers-color-scheme: dark) {
271    color: darken($darkModeHighlightColour, 10%);
272  }
273
274  &.no-style {
275    color: inherit;
276
277    @media (prefers-color-scheme: dark) {
278      color: darken($darkModeHighlightColour, 10%);
279    }
280  }
281
282  &:hover {
283    text-decoration: underline;
284  }
285}