dotfiles

  1@import "variables";
  2
  3html {
  4  box-sizing: border-box;
  5  scroll-behavior: smooth;
  6}
  7
  8body {
  9  background-color: var(--background);
 10  color: var(--color);
 11  font-family:
 12    "JetBrainsMono",
 13    Menlo,
 14    DejaVu Sans Mono,
 15    monospace;
 16  font-feature-settings: "liga";
 17  font-size: $font-size;
 18  line-height: 1.54;
 19  margin: 0;
 20  padding: 0;
 21  text-rendering: optimizeLegibility;
 22  -webkit-font-smoothing: antialiased;
 23  -webkit-overflow-scrolling: touch;
 24  -webkit-text-size-adjust: 100%;
 25
 26  @media (max-width: $phone-max-width) {
 27    font-size: 1rem;
 28  }
 29}
 30
 31*,
 32*:after,
 33*:before {
 34  box-sizing: inherit;
 35}
 36
 37.container {
 38  border-right: 1px solid var(--border-color);
 39  display: flex;
 40  flex-direction: column;
 41  max-width: calc(#{$tablet-max-width} - 2px);
 42  min-height: 100vh;
 43  padding: 30px;
 44
 45  &.full,
 46  &.center {
 47    margin: 0 auto;
 48  }
 49
 50  &.full {
 51    border: none;
 52    max-width: 100%;
 53  }
 54
 55  &.center {
 56    border-left: 1px solid var(--border-color);
 57  }
 58
 59  @media (max-width: calc(#{$tablet-max-width} - 2px)) {
 60    border: none;
 61  }
 62
 63  @media (max-width: $phone-max-width) {
 64    padding: 20px;
 65  }
 66}
 67
 68.content {
 69  display: flex;
 70  min-width: 0;
 71}
 72
 73.skip-link {
 74  position: absolute;
 75  left: 20px;
 76  top: -100px;
 77  padding: 10px;
 78  background: var(--background);
 79  z-index: 200;
 80
 81  &:focus {
 82    top: 10px;
 83  }
 84}
 85
 86:focus-visible {
 87  outline: 2px dotted var(--accent-secondary);
 88  outline-offset: 3px;
 89}
 90
 91@media (prefers-reduced-motion: reduce) {
 92  html {
 93    scroll-behavior: auto;
 94  }
 95  *,
 96  *::before,
 97  *::after {
 98    scroll-behavior: auto !important;
 99    transition: none !important;
100    animation: none !important;
101  }
102}
103
104h1 {
105  font-size: 1.4rem;
106}
107
108h2 {
109  font-size: 1.3rem;
110}
111
112h3 {
113  font-size: 1.2rem;
114}
115
116h4,
117h5,
118h6 {
119  font-size: 1.15rem;
120}
121
122h1,
123h2,
124h3,
125h4,
126h5,
127h6 {
128  line-height: 1.2;
129
130  &:not(:first-child) {
131    margin-top: 40px;
132  }
133
134  .zola-anchor {
135    opacity: 0;
136  }
137}
138
139.hidden {
140  display: none;
141}
142
143hr {
144  width: 100%;
145  border: none;
146  background: var(--border-color);
147  height: 1px;
148}
149
150a {
151  color: inherit;
152  background: linear-gradient(
153    to bottom,
154    var(--accent-secondary-alpha-20) 0%,
155    var(--accent-secondary-alpha-20) 100%
156  );
157
158  background-position: 0 100%;
159  background-repeat: repeat-x;
160  background-size: 0.5px 0.5px;
161  transition: background-size 0.2s;
162
163  &:hover {
164    background-size: 4px 50px;
165    color: var(--accent-alpha-70);
166  }
167}
168
169p {
170  margin-bottom: 20px;
171}
172
173ul,
174ol {
175  margin-left: 30px;
176  padding: 0;
177
178  li {
179    position: relative;
180    margin-top: 5px;
181    margin-bottom: 5px;
182  }
183
184  @media (max-width: $phone-max-width) {
185    margin-left: 20px;
186  }
187
188  ul,
189  ol {
190    margin-top: 10px;
191    margin-bottom: 10px;
192  }
193}
194
195ol ol {
196  list-style-type: lower-alpha;
197}
198
199sup {
200  color: var(--accent-secondary);
201}
202
203table {
204  table-layout: fixed;
205  border-collapse: collapse;
206  width: 100%;
207  margin: 40px 0;
208}
209
210th {
211  color: var(--accent);
212}
213
214table,
215th,
216td {
217  border: 1px dashed var(--accent);
218  padding: 10px;
219}
220
221input {
222  background: var(--background);
223  border-color: var(--accent-secondary);
224  color: var(--color);
225  font-family: inherit;
226  padding: 0.2rem;
227
228  &[type="checkbox"] {
229    appearance: none;
230    display: inline-flex;
231    vertical-align: bottom;
232    align-items: center;
233    justify-content: center;
234    border: 1px solid var(--accent-secondary);
235    height: 1rem;
236    width: 1rem;
237
238    &:checked:after {
239      content: "";
240      background-color: var(--accent);
241      height: 100%;
242      width: 100%;
243    }
244  }
245}
246
247@media (max-width: $phone-max-width) {
248  .katex-display {
249    overflow: auto;
250  }
251}