◊(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
 <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> •
    <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>
 ◊(html$-series-list)
 </footer>})

(define (html$-page-body-close)
  ◊string-append{
 </main>
 ◊(html$-page-footer)







|
|


|
|







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">
 <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&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
...
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
...
689
690
691
692
693
694
695









696









697
698
699
700
701










702
703
704
705
706
707
708
...
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
...
882
883
884
885
886
887
888

889
    100% {background: transparent;}
}

main > aside {
    text-align: center;
}

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 {
    list-style-type: none;
    margin: 0.2em auto;
    padding: 0;
}

nav li {
    display: none; /* Numbers not displayed on mobile */
    color: gray;
}

nav li.nav-text {
    display: inline;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-size: 0.6rem;
}

nav li.inactive-link {
    color: #545454; /* Accessibility (contrast) */
}

nav li.current-page {
    color: ◊color-bodytext;
    padding: 0.2rem 0.5rem;
    border-bottom: dotted ◊color-bodytext 2px;
}

nav li a {
    padding: 0.2rem 0.5rem;
}

nav li a:link, nav li a:visited {
    color: ◊color-bodytext;
}

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. */
................................................................................
    font-size: 1.2rem;
}

/* ******* (Mobile first) Columnar series list styling *******
 */

.column-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;






}

.column-list div {
    padding-left: 0.25em; /* Keeps some italic descenders inside the box */
    margin: 0 0.5rem;
    text-align: left;
    width: 8rem;

}

.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;

}

/* ******* (Mobile first) Keyword Index styling *******
 */

#keywordindex {
    column-width: 7rem;
................................................................................
    margin-left: 0.5em;
    font-size: smaller;
}

/* Footer ***** */

footer#main {









  text-align: center;









  margin-top: ◊x-lineheight[1];
  padding-top: ◊x-lineheight[1];
  background: #dedede;
  border-top: dotted ◊color-bodytext 2px;
}











/* 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. */

................................................................................
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 30rem;
        max-width: 90%;
    }

    nav li { display: inline; } /* Display page numbers on larger screens */

    @supports (grid-area: auto) {
        main { 
            width: 42rem;
            background: none;
        }

................................................................................
        box-shadow: none;
        border: none;
        }
    a:link, a:visited, a:hover, a:active {
        color: black;
        border-bottom: dotted 1px black;
    }

}







|








|





|




|






|



|





|



|



|







 







|
|
|
>
>
>
>
>
>




<

<
>







 







>







 







>
>
>
>
>
>
>
>
>
|
>
>
>
>
>
>
>
>
>
|
|
<
<

>
>
>
>
>
>
>
>
>
>







 







|







 







>

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
...
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
...
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
...
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
...
914
915
916
917
918
919
920
921
922
    100% {background: transparent;}
}

main > aside {
    text-align: center;
}

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;
}

main nav ul {
    list-style-type: none;
    margin: 0.2em auto;
    padding: 0;
}

main nav li {
    display: none; /* Numbers not displayed on mobile */
    color: gray;
}

main nav li.nav-text {
    display: inline;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-size: 0.6rem;
}

main nav li.inactive-link {
    color: #545454; /* Accessibility (contrast) */
}

main nav li.current-page {
    color: ◊color-bodytext;
    padding: 0.2rem 0.5rem;
    border-bottom: dotted ◊color-bodytext 2px;
}

main nav li a {
    padding: 0.2rem 0.5rem;
}

main nav li a:link, nav li a:visited {
    color: ◊color-bodytext;
}

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. */
................................................................................
    font-size: 1.2rem;
}

/* ******* (Mobile first) Columnar series list styling *******
 */

.column-list {
    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 */

    text-align: left;

    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;
................................................................................
    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[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. */

................................................................................
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 30rem;
        max-width: 90%;
    }

    main nav li { display: inline; } /* Display page numbers on larger screens */

    @supports (grid-area: auto) {
        main { 
            width: 42rem;
            background: none;
        }

................................................................................
        box-shadow: none;
        border: none;
        }
    a:link, a:visited, a:hover, a:active {
        color: black;
        border-bottom: dotted 1px black;
    }
    footer#main { display: none; }
}