pupate

base.css

  1/* https://paletton.com/#uid=2370u0kllllaFw0g0qFqFg0w0aF */
  2:root {
  3    color-scheme: light dark;
  4    --p0: #71aa97;
  5    --p1: #478d76;
  6    --p2: #267158;
  7    --p3: #0e553e;
  8    --p4: #003926;
  9
 10    --c0: #ffc7aa;
 11    --c1: #d48e6a;
 12    --c2: #aa5f39;
 13    --c3: #803915;
 14    --c4: #551d00;
 15
 16    --background: light-dark(#eee, #111);
 17    --white: light-dark(white, black);
 18    --black: light-dark(black, white);
 19    --light-gray: light-dark(#e8e8e8, #181818);
 20    --gray: light-dark(#ddd, #222);
 21
 22    --lightest: light-dark(var(--p0), var(--p4));
 23    --lighter: light-dark(var(--p1), var(--p3));
 24    --primary: var(--p2);
 25    --darker: light-dark(var(--p3), var(--p1));
 26    --darkest: light-dark(var(--p4), var(--p0));
 27
 28    --c-lightest: light-dark(var(--c0), var(--c4));
 29    --c-lighter: light-dark(var(--c1), var(--c3));
 30    --c-primary: var(--c2);
 31    --c-darker: light-dark(var(--c3), var(--c1));
 32    --c-darkest: light-dark(var(--c4), var(--c0));
 33}
 34
 35@font-face {
 36    font-family: Lora;
 37    font-style: italic;
 38    font-display: swap;
 39    src: url(fonts/Lora-Italic-VariableFont_wght.ttf);
 40}
 41@font-face {
 42    font-family: Lora;
 43    font-style: normal;
 44    font-display: swap;
 45    src: url(fonts/Lora-VariableFont_wght.ttf);
 46}
 47
 48@font-face {
 49    font-family: Outfit;
 50    font-style: normal;
 51    font-display: swap;
 52    src: url(fonts/Outfit-VariableFont_wght.ttf);
 53}
 54
 55body {
 56    font-family: Lora, serif;
 57    color: var(--black);
 58    background: var(--background);
 59}
 60h1, h2, h3, h4, h5, h6 {
 61    font-family: Outfit, serif;
 62    clear: both;
 63}
 64h1.title {
 65    color: var(--primary);
 66    border-bottom: 2pt solid var(--primary);
 67}
 68section {
 69    h1 {
 70        font-size: 1.7em;
 71    }
 72}
 73
 74.loading {
 75    width: 100%;
 76    height: 100vh;
 77    position: fixed;
 78    top: 0;
 79    left: 0;
 80    cursor: progress;
 81}
 82.loading progress {
 83    position: fixed;
 84    top: 33%;
 85    left: 10vw;
 86    width: 80vw;
 87}
 88
 89.content {
 90    max-width: 50em;
 91}
 92
 93footer {
 94    border-top: 1pt solid black;
 95    font-size: smaller;
 96}
 97
 98.hidden {
 99    display: none;
100}
101
102pre, code {
103    background: var(--gray);
104    color: var(--black);
105    overflow: auto;
106}
107img {
108    max-width: 100%;
109    transition: max-width 0.2s; /* BUG(neale): This doesn't work */
110}
111img:hover {
112    max-width: inherit;
113}
114a {
115    color: var(--darker);
116}
117
118/** Aside is sort of like a sidebar */
119aside {
120  max-width: 20em;
121  padding-left: 0.5rem;
122  margin-left: 0.5rem;
123  float: right;
124  font-size: 85%;
125  box-shadow: inset 5px 0 5px -5px var(--primary);
126  color: var(--darker);
127  background-color: var(--background);
128}
129aside p {
130    margin: 0;
131}
132aside p + p {
133    margin-top: 1em;
134}
135
136/** Table */
137table {
138    border-collapse: collapse;
139}
140thead {
141    border-bottom: 2px solid var(--darkest);
142}
143tbody tr:nth-child(even) {
144    background: var(--light-gray);
145}
146tbody tr:hover {
147    background: var(--lightest);
148}
149td, th {
150    padding: 0 0.2em;
151}
152
153/** Toasts are little pop-up informational messages. */
154 .toasts {
155  position: fixed;
156  z-index: 100;
157  bottom: 10px;
158  left: 10px;
159  text-align: center;
160  width: calc(100% - 20px);
161  display: flex;
162  flex-direction: column;
163}
164.toast {
165  border-radius: 0.5em;
166  padding:  0.2em 2em;
167  animation: fadeIn ease-in 250ms;
168  margin: 2px auto;
169  background: var(--darker);
170  color: var(--white);
171  box-shadow: 0px 0px 8px 0px var(--darker);
172}
173@keyframes fadeIn {
174  0% { opacity: 0; }
175  100% { opacity: 1; }
176}
177
178/** Form */
179form {
180    font-family: Outfit, sans-serif;
181}
182
183input {
184    margin: 0.5em;
185}
186
187
188/** Syntax highlighting */
189.hljs,
190.hljs-subst {
191    color: var(--black);
192}
193.hljs-built_in,
194.hljs-literal,
195.hljs-keyword {
196    font-weight: bold;
197}
198.hljs-string {
199  color: var(--c-primary);
200}
201.hljs-meta,
202.hljs-comment {
203    font-style: italic;
204}
205.hljs-function {
206    color: var(--primary);
207}