Commit fed4e39

Eric Bower  ·  2026-09-28 22:33:46 -0400 EDT
parent f18b96d 
style(prose): design tweaks
4 files changed,  +445, -145
M pkg/apps/pastes/public/smol.css
M pkg/apps/prose/html/marketing-footer.partial.tmpl
M pkg/apps/prose/html/read.page.tmpl
M pkg/apps/prose/public/smol-v2.css
M pkg/apps/pastes/public/smol.css
+213, -64
......@@ -18,6 +18,7 @@
1818 :root {
1919 --line-height: 1.3rem;
2020 --grid-height: 0.65rem;
21+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
2122 }
2223
2324 @media (prefers-color-scheme: light) {
......@@ -36,6 +37,7 @@
3637 --hover: #c11e7a;
3738 --grey: #ccc;
3839 --grey-light: #6a708e;
40+ --green: #1a7f37;
3941 }
4042 }
4143
......@@ -55,13 +57,13 @@
5557 --hover: #ff80bf;
5658 --grey: #414558;
5759 --grey-light: #6a708e;
60+ --green: #50fa7b;
5861 }
5962 }
6063
6164 html {
6265 background-color: var(--bg-color);
6366 color: var(--text-color);
64- font-size: 16px;
6567 line-height: var(--line-height);
6668 font-family:
6769 -apple-system,
......@@ -103,7 +105,8 @@ code,
103105 kbd,
104106 samp,
105107 pre {
106- font-family: monospace;
108+ font-family: var(--font-mono);
109+ font-variant-numeric: tabular-nums;
107110 }
108111
109112 code,
......@@ -120,13 +123,11 @@ pre > code {
120123 }
121124
122125 code {
123- font-size: 90%;
124126 border-radius: 0.3rem;
125127 padding: 0.025rem 0.3rem;
126128 }
127129
128130 pre {
129- font-size: 0.8rem;
130131 border-radius: 1px;
131132 padding: var(--line-height);
132133 overflow-x: auto;
......@@ -155,15 +156,48 @@ summary {
155156 h1,
156157 h2,
157158 h3,
158-h4 {
159+h4,
160+h5,
161+h6 {
159162 margin: 0;
160163 padding: 0;
161164 border: 0;
162- font-style: normal;
163- font-weight: inherit;
164- font-size: inherit;
165+ font-family: var(--font-mono);
166+ font-weight: bold;
167+}
168+
169+h1 {
170+ font-size: 1.6rem;
171+ line-height: calc(var(--line-height) * 1.5);
172+ margin-top: calc(var(--line-height) * 2.5);
173+ margin-bottom: var(--grid-height);
174+}
175+
176+h2 {
177+ font-size: 1.3rem;
178+ line-height: var(--line-height);
179+ margin-top: calc(var(--line-height) * 2);
180+ margin-bottom: var(--grid-height);
181+}
182+
183+h3 {
184+ font-size: 1.1rem;
185+ line-height: var(--line-height);
186+ margin-top: calc(var(--line-height) * 1.5);
187+ margin-bottom: var(--grid-height);
188+}
189+
190+h4,
191+h5,
192+h6 {
193+ font-size: 1rem;
194+ line-height: var(--line-height);
195+ margin-top: var(--line-height);
196+ margin-bottom: var(--grid-height);
197+ color: var(--white-dark);
165198 }
166199
200+
167201 path {
168202 fill: var(--text-color);
169203 stroke: var(--text-color);
......@@ -172,25 +206,45 @@ path {
172206 hr {
173207 color: inherit;
174208 border: 0;
175- height: 2px;
176- background: var(--grey);
177- margin: calc(var(--grid-height) - 2px) auto;
209+ height: 1px;
210+ background: var(--grey-light);
211+ margin: calc(var(--grid-height) - 1px) auto;
212+}
213+
214+hr.dashed {
215+ border: none;
216+ border-top: 1px dashed var(--grey-light);
217+ background: none;
218+ height: 0;
219+ margin: calc(var(--grid-height) - 1px) auto;
178220 }
179221
180222 a {
181- text-decoration: none;
182223 color: var(--link-color);
224+ text-decoration: underline;
225+ text-decoration-thickness: 1px;
226+ text-underline-offset: 2px;
227+ padding: 0 2px;
228+ border-radius: 1px;
229+ transition: background-color 0.1s ease, color 0.1s ease;
183230 }
184231
185-a:hover,
186-a:visited:hover {
187- text-decoration: underline;
232+a:hover {
233+ background-color: var(--link-color);
234+ color: var(--bg-color);
235+ text-decoration: none;
188236 }
189237
190238 a:visited {
191239 color: var(--visited);
192240 }
193241
242+a:visited:hover {
243+ background-color: var(--visited);
244+ color: var(--bg-color);
245+ text-decoration: none;
246+}
247+
194248 section {
195249 margin-bottom: 1.4rem;
196250 }
......@@ -227,39 +281,73 @@ blockquote code {
227281 border: 1px solid var(--blockquote);
228282 }
229283
230-ul {
231- padding: 0 0 0 var(--line-height);
284+ul,
285+ol {
286+ padding: 0 15px;
232287 list-style-position: inside;
233288 list-style-type: square;
234- margin: var(--line-height) 0;
289+ margin: var(--grid-height) 0;
235290 }
236291
237292 ul[style*="list-style-type: none;"] {
238293 padding: 0;
239294 }
240295
241-ol {
296+ol ul, ol ol, ul ol, ul ul {
242297 padding: 0 0 0 var(--line-height);
243- list-style-type: decimal;
244- margin: var(--line-height) 0;
298+ margin: 0;
245299 }
246300
247-ol[style*="list-style-type: none;"] {
301+li {
302+ margin: var(--grid-height) 0;
248303 padding: 0;
249304 }
250305
251-ol ul, ol ol, ul ol, ul ul {
252- padding: 0 0 0 3ch;
253- margin: 0;
306+li::marker {
307+ line-height: 0;
308+ color: var(--grey-light);
254309 }
255310
256-li {
311+li blockquote,
312+li pre {
313+ display: inline-block;
257314 margin: 0;
258- padding: 0;
315+ width: 100%;
259316 }
260317
261-li::marker {
262- line-height: 0;
318+li pre {
319+ padding: var(--grid-height);
320+}
321+
322+[role="list"] {
323+ display: flex;
324+ flex-direction: column;
325+ gap: var(--grid-height);
326+}
327+
328+[role="list"] [role="list"] {
329+ margin-left: 1.3rem;
330+}
331+
332+[role="listitem"] {
333+ display: flex;
334+ align-items: flex-start;
335+ gap: 5px;
336+}
337+
338+[role="listitem"]:has(pre, img, blockquote) {
339+ align-items: center;
340+}
341+
342+table {
343+ border-collapse: collapse;
344+ margin: var(--line-height) 0;
345+}
346+
347+th,
348+td {
349+ border: 1px solid var(--white);
350+ padding: var(--grid-height);
263351 }
264352
265353 footer {
......@@ -301,8 +389,11 @@ sup {
301389 width: 100%;
302390 }
303391
304-.mono {
305- font-family: monospace;
392+.mono,
393+time,
394+nav {
395+ font-family: var(--font-mono);
396+ font-variant-numeric: tabular-nums;
306397 }
307398
308399 .link-alt-hover,
......@@ -315,6 +406,7 @@ sup {
315406
316407 .link-alt-hover:visited:hover,
317408 .link-alt-hover:hover {
409+ background-color: transparent;
318410 text-decoration: underline;
319411 }
320412
......@@ -328,6 +420,20 @@ sup {
328420
329421 .link-alt:visited:hover,
330422 .link-alt:hover {
423+ background-color: transparent;
424+ text-decoration: underline;
425+}
426+
427+.link-grey,
428+.link-grey:visited {
429+ color: var(--grey-light);
430+ text-decoration: none;
431+}
432+
433+.link-grey:hover,
434+.link-grey:visited:hover {
435+ background-color: transparent;
436+ color: var(--text-color);
331437 text-decoration: underline;
332438 }
333439
......@@ -336,19 +442,35 @@ sup {
336442 }
337443
338444 .text-2xl {
339- font-size: var(--line-height);
445+ font-size: 1.6rem;
446+ font-weight: bold;
447+ line-height: calc(var(--line-height) * 1.5);
448+ margin-bottom: var(--grid-height);
449+}
450+
451+.text-xl {
452+ font-size: 1.3rem;
453+ font-weight: bold;
454+ line-height: var(--line-height);
455+ margin-bottom: var(--grid-height);
456+}
457+
458+.text-lg {
459+ font-size: 1.1rem;
340460 font-weight: bold;
341461 line-height: var(--line-height);
342462 margin-bottom: var(--grid-height);
343- text-transform: uppercase;
344463 }
345464
346-.text-xl, .text-lg, .text-md {
465+.text-md {
347466 font-size: 1rem;
348467 font-weight: bold;
349468 line-height: var(--line-height);
350469 margin-bottom: var(--grid-height);
351- text-transform: uppercase;
470+}
471+
472+.text-right {
473+ text-align: right;
352474 }
353475
354476 .text-sm {
......@@ -563,13 +685,15 @@ sup {
563685
564686 /* ==== MARKDOWN ==== */
565687
688+.md > :first-child {
689+ margin-top: 0 !important;
690+}
691+
566692 .md h1,
567693 .md h2,
568694 .md h3,
569695 .md h4 {
570696 padding: 0;
571- margin: 0;
572- /* margin: 1.5rem 0 0.9rem 0; */
573697 font-weight: bold;
574698 }
575699
......@@ -581,25 +705,17 @@ sup {
581705 text-decoration: none;
582706 }
583707
584-h1 code, h2 code, h3 code, h4 code {
585- text-transform: none;
586-}
587-
588-.md h1 {
589- font-size: 1rem;
590- line-height: var(--line-height);
591- margin-top: calc(var(--line-height) * 2);
592- margin-bottom: var(--grid-height);
593- text-transform: uppercase;
708+.md h1 a:hover,
709+.md h2 a:hover,
710+.md h3 a:hover,
711+.md h4 a:hover {
712+ background-color: transparent;
713+ color: var(--hover);
714+ text-decoration: underline;
594715 }
595716
596-.md h2, .md h3, .md h4 {
597- font-size: 1rem;
598- line-height: var(--line-height);
599- margin-top: calc(var(--line-height) * 2);
600- margin-bottom: var(--line-height);
601- text-transform: uppercase;
602- color: var(--white-dark);
717+h1 code, h2 code, h3 code, h4 code {
718+ text-transform: none;
603719 }
604720
605721 /* ==== HELPERS ==== */
......@@ -630,6 +746,11 @@ h1 code, h2 code, h3 code, h4 code {
630746 display: inline-block;
631747 }
632748
749+.btn:hover {
750+ background-color: var(--link-color);
751+ color: var(--bg-color);
752+}
753+
633754 .btn-link,
634755 .btn-link:visited {
635756 border: 2px solid var(--link-color);
......@@ -640,26 +761,51 @@ h1 code, h2 code, h3 code, h4 code {
640761 display: inline-block;
641762 }
642763
764+.btn-link:hover,
765+.btn-link:visited:hover {
766+ background-color: var(--link-color);
767+ color: var(--bg-color);
768+ text-decoration: none;
769+}
770+
643771 .box {
644- border: 2px solid var(--grey-light);
772+ border: 1px solid var(--grey-light);
645773 padding: var(--grid-height);
774+ background-color: var(--pre);
646775 }
647776
648777 .box-sm {
649- border: 2px solid var(--grey-light);
778+ border: 1px solid var(--grey-light);
779+ padding: var(--grid-height);
780+ background-color: var(--pre);
781+}
782+
783+.box-dashed {
784+ border: 1px dashed var(--grey-light);
650785 padding: var(--grid-height);
651786 }
652787
653788 .box-alert {
654- border: 2px solid var(--hover);
789+ border: 1px solid var(--hover);
655790 padding: var(--line-height);
656791 }
657792
658793 .box-sm-alert {
659- border: 2px solid var(--hover);
794+ border: 1px solid var(--hover);
660795 padding: var(--grid-height);
661796 }
662797
798+.text-green {
799+ color: var(--green);
800+}
801+
802+.prompt,
803+pre.cmd::before {
804+ content: "$ ";
805+ color: var(--green);
806+ font-weight: bold;
807+}
808+
663809 .list-none {
664810 list-style-type: none;
665811 }
......@@ -693,7 +839,7 @@ h1 code, h2 code, h3 code, h4 code {
693839
694840 @media only screen and (max-width: 40em) {
695841 body {
696- padding: 0 1rem;
842+ padding: 0 var(--grid-height);
697843 }
698844
699845 header {
......@@ -705,11 +851,12 @@ h1 code, h2 code, h3 code, h4 code {
705851 }
706852 }
707853
708-#debug {
854+body {
709855 position: relative;
710856 }
711857
712-#debug .debug-grid {
858+/*
859+.debug-grid {
713860 width: 100%;
714861 height: 100%;
715862 position: absolute;
......@@ -717,10 +864,12 @@ h1 code, h2 code, h3 code, h4 code {
717864 left: 0;
718865 right: 0;
719866 bottom: 0;
720- z-index: -1;
867+ z-index: 1000;
868+ pointer-events: none;
721869 background-image:
722- repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
723- repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
870+ repeating-linear-gradient(rgba(255, 121, 198, 0.18) 0 1px, transparent 1px 100%),
871+ repeating-linear-gradient(90deg, rgba(139, 233, 253, 0.10) 0 1px, transparent 1px 100%);
724872 background-size: 1ch var(--grid-height);
725873 margin: 0;
726874 }
875+*/
M pkg/apps/prose/html/marketing-footer.partial.tmpl
+1, -5
......@@ -1,9 +1,5 @@
11 {{define "marketing-footer"}}
2-<footer>
3- <hr />
2+<footer class="mono text-sm text-grey my-4">
43 <p class="font-italic">Built and maintained by <a href="https://pico.sh">pico.sh</a>.</p>
5- <div>
6- <a href="/rss.atom">rss</a>
7- </div>
84 </footer>
95 {{end}}
M pkg/apps/prose/html/read.page.tmpl
+18, -12
......@@ -31,27 +31,33 @@
3131 {{define "attrs"}}{{end}}
3232
3333 {{define "body"}}
34-<header class="text-center">
35- <h1 class="text-2xl font-bold">prose.sh</h1>
36- <p class="text-lg">A blog platform for hackers</p>
37- <div>
38- <a href="https://pico.sh/prose" class="btn-link mt inline-block">LEARN MORE</a>
34+<header>
35+ <h1>prose.sh</h1>
36+ <p>A blog platform for hackers</p>
37+ <div class="flex items-center gap my">
38+ <span class="box-sm mono text-sm"><span class="text-green">$</span> ssh pico.sh</span>
39+ <a href="https://pico.sh/prose" class="mono">[docs]</a>
40+ <a href="/rss" class="mono">[rss]</a>
3941 </div>
40- <hr class="mt-2" />
4142 </header>
4243
4344 <main>
45+ <div class="flex items-center text-sm text-grey mono my">
46+ <span class="post-date">DATE</span>
47+ <span class="flex-1">POST</span>
48+ <span>SCORE</span>
49+ </div>
4450 {{range .Posts}}
4551 <article class="my">
4652 <div class="flex items-center">
47- <time datetime="{{.PublishAtISO}}" class="font text-sm post-date">{{.PublishAt}}</time>
53+ <time datetime="{{.PublishAtISO}}" class="mono text-sm post-date">{{.PublishAt}}</time>
4854 <div class="flex-1">
49- <a class="text-md transform-none" href="{{.URL}}" style="text-transform: lowercase;">{{.Title}}</a>
50- <address class="text-sm inline">
51- <a href="{{.BlogURL}}" class="link-grey">({{.Username}})</a>
52- </address>
55+ <a class="text-md transform-none" href="{{.URL}}">{{.Title}}</a>
56+ <span class="text-sm mono">
57+ <a href="{{.BlogURL}}" class="text-grey">~{{.Username}}</a>
58+ </span>
5359 </div>
54- <span class="text-sm text-grey font-italic">{{.Score}}</span>
60+ <span class="text-sm text-grey mono">[{{.Score}}]</span>
5561 </div>
5662 </article>
5763 {{end}}
M pkg/apps/prose/public/smol-v2.css
+213, -64
......@@ -18,6 +18,7 @@
1818 :root {
1919 --line-height: 1.3rem;
2020 --grid-height: 0.65rem;
21+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
2122 }
2223
2324 @media (prefers-color-scheme: light) {
......@@ -36,6 +37,7 @@
3637 --hover: #c11e7a;
3738 --grey: #ccc;
3839 --grey-light: #6a708e;
40+ --green: #1a7f37;
3941 }
4042 }
4143
......@@ -55,13 +57,13 @@
5557 --hover: #ff80bf;
5658 --grey: #414558;
5759 --grey-light: #6a708e;
60+ --green: #50fa7b;
5861 }
5962 }
6063
6164 html {
6265 background-color: var(--bg-color);
6366 color: var(--text-color);
64- font-size: 16px;
6567 line-height: var(--line-height);
6668 font-family:
6769 -apple-system,
......@@ -103,7 +105,8 @@ code,
103105 kbd,
104106 samp,
105107 pre {
106- font-family: monospace;
108+ font-family: var(--font-mono);
109+ font-variant-numeric: tabular-nums;
107110 }
108111
109112 code,
......@@ -120,13 +123,11 @@ pre > code {
120123 }
121124
122125 code {
123- font-size: 90%;
124126 border-radius: 0.3rem;
125127 padding: 0.025rem 0.3rem;
126128 }
127129
128130 pre {
129- font-size: 0.8rem;
130131 border-radius: 1px;
131132 padding: var(--line-height);
132133 overflow-x: auto;
......@@ -155,15 +156,48 @@ summary {
155156 h1,
156157 h2,
157158 h3,
158-h4 {
159+h4,
160+h5,
161+h6 {
159162 margin: 0;
160163 padding: 0;
161164 border: 0;
162- font-style: normal;
163- font-weight: inherit;
164- font-size: inherit;
165+ font-family: var(--font-mono);
166+ font-weight: bold;
167+}
168+
169+h1 {
170+ font-size: 1.6rem;
171+ line-height: calc(var(--line-height) * 1.5);
172+ margin-top: calc(var(--line-height) * 2.5);
173+ margin-bottom: var(--grid-height);
174+}
175+
176+h2 {
177+ font-size: 1.3rem;
178+ line-height: var(--line-height);
179+ margin-top: calc(var(--line-height) * 2);
180+ margin-bottom: var(--grid-height);
181+}
182+
183+h3 {
184+ font-size: 1.1rem;
185+ line-height: var(--line-height);
186+ margin-top: calc(var(--line-height) * 1.5);
187+ margin-bottom: var(--grid-height);
188+}
189+
190+h4,
191+h5,
192+h6 {
193+ font-size: 1rem;
194+ line-height: var(--line-height);
195+ margin-top: var(--line-height);
196+ margin-bottom: var(--grid-height);
197+ color: var(--white-dark);
165198 }
166199
200+
167201 path {
168202 fill: var(--text-color);
169203 stroke: var(--text-color);
......@@ -172,25 +206,45 @@ path {
172206 hr {
173207 color: inherit;
174208 border: 0;
175- height: 2px;
176- background: var(--grey);
177- margin: calc(var(--grid-height) - 2px) auto;
209+ height: 1px;
210+ background: var(--grey-light);
211+ margin: calc(var(--grid-height) - 1px) auto;
212+}
213+
214+hr.dashed {
215+ border: none;
216+ border-top: 1px dashed var(--grey-light);
217+ background: none;
218+ height: 0;
219+ margin: calc(var(--grid-height) - 1px) auto;
178220 }
179221
180222 a {
181- text-decoration: none;
182223 color: var(--link-color);
224+ text-decoration: underline;
225+ text-decoration-thickness: 1px;
226+ text-underline-offset: 2px;
227+ padding: 0 2px;
228+ border-radius: 1px;
229+ transition: background-color 0.1s ease, color 0.1s ease;
183230 }
184231
185-a:hover,
186-a:visited:hover {
187- text-decoration: underline;
232+a:hover {
233+ background-color: var(--link-color);
234+ color: var(--bg-color);
235+ text-decoration: none;
188236 }
189237
190238 a:visited {
191239 color: var(--visited);
192240 }
193241
242+a:visited:hover {
243+ background-color: var(--visited);
244+ color: var(--bg-color);
245+ text-decoration: none;
246+}
247+
194248 section {
195249 margin-bottom: 1.4rem;
196250 }
......@@ -227,39 +281,73 @@ blockquote code {
227281 border: 1px solid var(--blockquote);
228282 }
229283
230-ul {
231- padding: 0 0 0 var(--line-height);
284+ul,
285+ol {
286+ padding: 0 15px;
232287 list-style-position: inside;
233288 list-style-type: square;
234- margin: var(--line-height) 0;
289+ margin: var(--grid-height) 0;
235290 }
236291
237292 ul[style*="list-style-type: none;"] {
238293 padding: 0;
239294 }
240295
241-ol {
296+ol ul, ol ol, ul ol, ul ul {
242297 padding: 0 0 0 var(--line-height);
243- list-style-type: decimal;
244- margin: var(--line-height) 0;
298+ margin: 0;
245299 }
246300
247-ol[style*="list-style-type: none;"] {
301+li {
302+ margin: var(--grid-height) 0;
248303 padding: 0;
249304 }
250305
251-ol ul, ol ol, ul ol, ul ul {
252- padding: 0 0 0 3ch;
253- margin: 0;
306+li::marker {
307+ line-height: 0;
308+ color: var(--grey-light);
254309 }
255310
256-li {
311+li blockquote,
312+li pre {
313+ display: inline-block;
257314 margin: 0;
258- padding: 0;
315+ width: 100%;
259316 }
260317
261-li::marker {
262- line-height: 0;
318+li pre {
319+ padding: var(--grid-height);
320+}
321+
322+[role="list"] {
323+ display: flex;
324+ flex-direction: column;
325+ gap: var(--grid-height);
326+}
327+
328+[role="list"] [role="list"] {
329+ margin-left: 1.3rem;
330+}
331+
332+[role="listitem"] {
333+ display: flex;
334+ align-items: flex-start;
335+ gap: 5px;
336+}
337+
338+[role="listitem"]:has(pre, img, blockquote) {
339+ align-items: center;
340+}
341+
342+table {
343+ border-collapse: collapse;
344+ margin: var(--line-height) 0;
345+}
346+
347+th,
348+td {
349+ border: 1px solid var(--white);
350+ padding: var(--grid-height);
263351 }
264352
265353 footer {
......@@ -301,8 +389,11 @@ sup {
301389 width: 100%;
302390 }
303391
304-.mono {
305- font-family: monospace;
392+.mono,
393+time,
394+nav {
395+ font-family: var(--font-mono);
396+ font-variant-numeric: tabular-nums;
306397 }
307398
308399 .link-alt-hover,
......@@ -315,6 +406,7 @@ sup {
315406
316407 .link-alt-hover:visited:hover,
317408 .link-alt-hover:hover {
409+ background-color: transparent;
318410 text-decoration: underline;
319411 }
320412
......@@ -328,6 +420,20 @@ sup {
328420
329421 .link-alt:visited:hover,
330422 .link-alt:hover {
423+ background-color: transparent;
424+ text-decoration: underline;
425+}
426+
427+.link-grey,
428+.link-grey:visited {
429+ color: var(--grey-light);
430+ text-decoration: none;
431+}
432+
433+.link-grey:hover,
434+.link-grey:visited:hover {
435+ background-color: transparent;
436+ color: var(--text-color);
331437 text-decoration: underline;
332438 }
333439
......@@ -336,19 +442,35 @@ sup {
336442 }
337443
338444 .text-2xl {
339- font-size: var(--line-height);
445+ font-size: 1.6rem;
446+ font-weight: bold;
447+ line-height: calc(var(--line-height) * 1.5);
448+ margin-bottom: var(--grid-height);
449+}
450+
451+.text-xl {
452+ font-size: 1.3rem;
340453 font-weight: bold;
341454 line-height: var(--line-height);
342455 margin-bottom: var(--grid-height);
343- text-transform: uppercase;
344456 }
345457
346-.text-xl, .text-lg, .text-md {
458+.text-lg {
459+ font-size: 1.1rem;
460+ font-weight: bold;
461+ line-height: var(--line-height);
462+ margin-bottom: var(--grid-height);
463+}
464+
465+.text-md {
347466 font-size: 1rem;
348467 font-weight: bold;
349468 line-height: var(--line-height);
350469 margin-bottom: var(--grid-height);
351- text-transform: uppercase;
470+}
471+
472+.text-right {
473+ text-align: right;
352474 }
353475
354476 .text-sm {
......@@ -563,13 +685,15 @@ sup {
563685
564686 /* ==== MARKDOWN ==== */
565687
688+.md > :first-child {
689+ margin-top: 0 !important;
690+}
691+
566692 .md h1,
567693 .md h2,
568694 .md h3,
569695 .md h4 {
570696 padding: 0;
571- margin: 0;
572- /* margin: 1.5rem 0 0.9rem 0; */
573697 font-weight: bold;
574698 }
575699
......@@ -581,25 +705,17 @@ sup {
581705 text-decoration: none;
582706 }
583707
584-h1 code, h2 code, h3 code, h4 code {
585- text-transform: none;
586-}
587-
588-.md h1 {
589- font-size: 1rem;
590- line-height: var(--line-height);
591- margin-top: calc(var(--line-height) * 2);
592- margin-bottom: var(--grid-height);
593- text-transform: uppercase;
708+.md h1 a:hover,
709+.md h2 a:hover,
710+.md h3 a:hover,
711+.md h4 a:hover {
712+ background-color: transparent;
713+ color: var(--hover);
714+ text-decoration: underline;
594715 }
595716
596-.md h2, .md h3, .md h4 {
597- font-size: 1rem;
598- line-height: var(--line-height);
599- margin-top: calc(var(--line-height) * 2);
600- margin-bottom: var(--line-height);
601- text-transform: uppercase;
602- color: var(--white-dark);
717+h1 code, h2 code, h3 code, h4 code {
718+ text-transform: none;
603719 }
604720
605721 /* ==== HELPERS ==== */
......@@ -630,6 +746,11 @@ h1 code, h2 code, h3 code, h4 code {
630746 display: inline-block;
631747 }
632748
749+.btn:hover {
750+ background-color: var(--link-color);
751+ color: var(--bg-color);
752+}
753+
633754 .btn-link,
634755 .btn-link:visited {
635756 border: 2px solid var(--link-color);
......@@ -640,26 +761,51 @@ h1 code, h2 code, h3 code, h4 code {
640761 display: inline-block;
641762 }
642763
764+.btn-link:hover,
765+.btn-link:visited:hover {
766+ background-color: var(--link-color);
767+ color: var(--bg-color);
768+ text-decoration: none;
769+}
770+
643771 .box {
644- border: 2px solid var(--grey-light);
772+ border: 1px solid var(--grey-light);
645773 padding: var(--grid-height);
774+ background-color: var(--pre);
646775 }
647776
648777 .box-sm {
649- border: 2px solid var(--grey-light);
778+ border: 1px solid var(--grey-light);
779+ padding: var(--grid-height);
780+ background-color: var(--pre);
781+}
782+
783+.box-dashed {
784+ border: 1px dashed var(--grey-light);
650785 padding: var(--grid-height);
651786 }
652787
653788 .box-alert {
654- border: 2px solid var(--hover);
789+ border: 1px solid var(--hover);
655790 padding: var(--line-height);
656791 }
657792
658793 .box-sm-alert {
659- border: 2px solid var(--hover);
794+ border: 1px solid var(--hover);
660795 padding: var(--grid-height);
661796 }
662797
798+.text-green {
799+ color: var(--green);
800+}
801+
802+.prompt,
803+pre.cmd::before {
804+ content: "$ ";
805+ color: var(--green);
806+ font-weight: bold;
807+}
808+
663809 .list-none {
664810 list-style-type: none;
665811 }
......@@ -693,7 +839,7 @@ h1 code, h2 code, h3 code, h4 code {
693839
694840 @media only screen and (max-width: 40em) {
695841 body {
696- padding: 0 1rem;
842+ padding: 0 var(--grid-height);
697843 }
698844
699845 header {
......@@ -705,11 +851,12 @@ h1 code, h2 code, h3 code, h4 code {
705851 }
706852 }
707853
708-#debug {
854+body {
709855 position: relative;
710856 }
711857
712-#debug .debug-grid {
858+/*
859+.debug-grid {
713860 width: 100%;
714861 height: 100%;
715862 position: absolute;
......@@ -717,13 +864,15 @@ h1 code, h2 code, h3 code, h4 code {
717864 left: 0;
718865 right: 0;
719866 bottom: 0;
720- z-index: -1;
867+ z-index: 1000;
868+ pointer-events: none;
721869 background-image:
722- repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
723- repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
870+ repeating-linear-gradient(rgba(255, 121, 198, 0.18) 0 1px, transparent 1px 100%),
871+ repeating-linear-gradient(90deg, rgba(139, 233, 253, 0.10) 0 1px, transparent 1px 100%);
724872 background-size: 1ch var(--grid-height);
725873 margin: 0;
726874 }
875+*/
727876 body {
728877 max-width: var(--body-max-width, 720px);
729878 }