4 --body-background: white;
5 --header-background: #3c113e;
7 --text-background: white;
9 --light-text-color: lighten(#222, 20%);
10 --lighter-text-color: lighten(#222, 30%);
11 --link-color: #0000ee;
12 --visited-link-color: #551a8b;
14 --note-background: #fbf7c1;
15 --blockquote-background: #eeeefd;
18 @media (prefers-color-scheme: dark) {
20 --body-background: #113;
21 --header-background: black;
22 --text-background: #113;
24 --light-text-color: lighten(#eef, 20%);
25 --lighter-text-color: lighten(#eef2, 30%);
27 --visited-link-color: #b767ff;
29 --note-background: #867f11;
30 --blockquote-background: #223;
37 font-family: "Open Sans", sans-serif;
38 background: var(--body-background);
39 color: var(--text-color);
44 @media screen and (max-width: 50em) {
45 flex-direction: column;
50 color: var(--link-color);
51 text-decoration: none;
52 border-bottom: 0.1em dotted var(--link-color);
54 color: var(--visited-link-color);
55 border-color: var(--visited-link-color);
58 border-bottom-style: solid;
63 background: var(--header-background);
64 color: var(--header-color);
65 display: inline-block;
69 text-transform: uppercase;
70 margin: 4rem 1rem 2rem 1rem;
72 display: inline-block;
73 transform: rotate(-2deg);
77 border-color: var(--header-color);
80 border-color: inherit;
110 @media screen and (max-width: 50em) {
142 border: 1px solid black;
153 @media screen and (max-width: 50em) {
160 background: var(--text-background);
171 @media screen and (max-width: 50em) {
175 text-transform: uppercase;
179 padding-left: 0.5rem;
180 color: var(--lighter-text-color);
186 border: 1px solid var(--gray);
207 background: var(--note-background);
208 padding: 0.2em 0.5em 0.2em 2em;
214 background: var(--blockquote-background);
216 clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px);
225 @media screen and (max-width: 50em) {
229 text-transform: uppercase;
235 display: inline-block;
241 text-transform: uppercase;
242 display: inline-block;
243 text-decoration: none;
257 border-top: 0.1em dotted var(--link-color);
258 border-bottom: 0.1em dotted var(--link-color);
277 div[contenteditable=true]:focus-within {
278 outline: 1px solid var(--gray);
285 box-shadow: 0 0 5px #666;
289 border: 1px inset #ccc;
292 transition: width ease 2s;
294 display: inline-block;
307 &[data-action=createLink] {
309 text-decoration: underline;
316 &.inline-style-popup button {
320 &.block-style-popup {
334 justify-content: flex-end;
336 display: inline-block;
346 display: inline-block;
349 border: 1px solid #386ede;
350 box-shadow: 0 0 0 5px white;
355 letter-spacing: inherit;
356 line-height: inherit;
368 background: darken(red, 10%);
372 input:checked + span {
379 [contenteditable=true] div.figure {
384 line-height: initial;
403 #image-upload, #document-upload {