◊(Local Yarn Code "Check-in [75502f96]")

Overview
Comment:Improved footer
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 75502f965c186ac9222c3aa444ade283d04f8431cabb1d0073b7e6b0f209739d
User & Date: joel on 2020-02-10 17:28:22
Other Links: manifest | tags
Context
2020-02-19
07:25
Merge doc updates. Closes [2e658da] check-in: 2cd87113 user: joel tags: trunk
2020-02-10
21:15
Merge updates from trunk check-in: e52e53c8 user: joel tags: doc-expansion
17:28
Improved footer check-in: 75502f96 user: joel tags: trunk
2020-02-08
17:56
The footer is here. Closes [87f985fb5b] and [751a7ebc2a] check-in: 2c0b202b user: joel tags: trunk
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&nbsp;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;
    text-align: left;
    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;
    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[1];
  padding-top: ◊x-lineheight[1];
  background: #dedede;
  border-top: dotted ◊color-bodytext 2px;
  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; }
}