Overview
Context
Changes
Modified snippets-html.rkt
from [56f8da66]
to [f524862a].
| ︙ | | |
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
-
-
+
+
-
-
+
+
|
<div class="article-list-date caps">◊(ymd->english pubdate)</div>
<div class="article-list-title">◊|title|</div>
</a></li>})
(define (html$-page-footer)
◊string-append{
<footer id="main">
<h1>The Local Yarn</h1>
<p><a href="/">Home</a> •
<p class="title">The Local Yarn</p>
<nav><a href="/">Home</a> •
<a href="/blog-pg1.html">Blog</a> •
<a href="/keyword-index.html">Keyword Index</a> •
<a href="/code"><i><code>(Source Code)</code></i></a>
</p>
<a href="/code"><i><code>◊"◊"(Source Code)</code></i></a>
</nav>
◊(html$-series-list)
</footer>})
(define (html$-page-body-close)
◊string-append{
</main>
◊(html$-page-footer)
|
| ︙ | | |
Modified web-extra/martin.css.pp
from [f7b75dc6]
to [6da40fde].
| ︙ | | |
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
|
100% {background: transparent;}
}
main > aside {
text-align: center;
}
nav {
main nav {
font-family: 'Triplicate T4c', monospace;
font-feature-settings: "onum" off;
font-size: 0.7rem;
margin: 0;
margin-top: 0.5rem;
text-align: center;
}
nav ul {
main nav ul {
list-style-type: none;
margin: 0.2em auto;
padding: 0;
}
nav li {
main nav li {
display: none; /* Numbers not displayed on mobile */
color: gray;
}
nav li.nav-text {
main nav li.nav-text {
display: inline;
text-transform: uppercase;
letter-spacing: 0.05rem;
font-size: 0.6rem;
}
nav li.inactive-link {
main nav li.inactive-link {
color: #545454; /* Accessibility (contrast) */
}
nav li.current-page {
main nav li.current-page {
color: ◊color-bodytext;
padding: 0.2rem 0.5rem;
border-bottom: dotted ◊color-bodytext 2px;
}
nav li a {
main nav li a {
padding: 0.2rem 0.5rem;
}
nav li a:link, nav li a:visited {
main nav li a:link, nav li a:visited {
color: ◊color-bodytext;
}
nav li a:hover, nav li a:active {
main nav li a:hover, nav li a:active {
color: ◊color-linkhover;
background: #ebebeb;
}
i > em { font-style: normal; }
/* On mobile, an <ARTICLE> is just a box. Later we'll do fancy stuff if grid support is detected. */
|
| ︙ | | |
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
|
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
|
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
|
font-size: 1.2rem;
}
/* ******* (Mobile first) Columnar series list styling *******
*/
.column-list {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
max-width: 17rem;
margin: 0;
columns: 8rem auto;
}
@media (min-width: 667px) {
.column-list {
margin: 0 auto;
}
}
.column-list div {
padding-left: 0.25em; /* Keeps some italic descenders inside the box */
margin: 0 0.5rem;
width: 8rem;
break-inside: avoid;
}
.column-list h2 {
font-feature-settings: "smcp" on;
text-transform: lowercase;
font-weight: normal;
font-size: 1em;
margin: 0;
}
.column-list ul {
margin-top: 0;
list-style-type: none;
padding: 0;
margin-bottom: 0.5rem;
}
/* ******* (Mobile first) Keyword Index styling *******
*/
#keywordindex {
column-width: 7rem;
|
| ︙ | | |
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
|
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
|
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
|
margin-left: 0.5em;
font-size: smaller;
}
/* Footer ***** */
footer#main {
text-align: left;
font-size: 0.8rem;
line-height: 1rem;
width: 90%;
margin: 0 auto;
}
@media (min-width: 667px) {
footer#main {
text-align: center;
margin-top: ◊x-lineheight[1];
padding-top: ◊x-lineheight[1];
background: #dedede;
border-top: dotted ◊color-bodytext 2px;
text-align: center;
width: 100%;
background: linear-gradient(◊color-background 5%, #dedede 100%);
}
}
footer#main p.title {
font-size: 1rem;
font-feature-settings: "smcp" on;
text-transform: lowercase;
margin-top: ◊x-lineheight[2];
margin-bottom: ◊x-lineheight[0.5];
}
footer#main nav {
font-feature-settings: "smcp" on;
text-transform: lowercase;
}
footer#main nav code {
font-size: 0.6rem;
}
/* End of mobile-first typography and layout */
/* Here’s where we start getting funky for any viewport wider than mobile portrait.
An iPhone 6 is 667px wide in landscape mode, so that’s our breakpoint. */
@media (min-width: 667px) {
main {
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
width: 30rem;
max-width: 90%;
}
nav li { display: inline; } /* Display page numbers on larger screens */
main nav li { display: inline; } /* Display page numbers on larger screens */
@supports (grid-area: auto) {
main {
width: 42rem;
background: none;
}
|
| ︙ | | |
882
883
884
885
886
887
888
889
|
914
915
916
917
918
919
920
921
922
|
+
|
box-shadow: none;
border: none;
}
a:link, a:visited, a:hover, a:active {
color: black;
border-bottom: dotted 1px black;
}
footer#main { display: none; }
}
|
