Overview
Comment: | Improved footer |
---|---|
Timelines: | family | ancestors | descendants | both | trunk |
Files: | files | file ages | folders |
SHA3-256: |
75502f965c186ac9222c3aa444ade283 |
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 | <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"> | | | | | | 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 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 | 100% {background: transparent;} } main > aside { text-align: center; } | | | | | | | | | | | 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; } 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. */ |
︙ | ︙ | |||
631 632 633 634 635 636 637 | font-size: 1.2rem; } /* ******* (Mobile first) Columnar series list styling ******* */ .column-list { | | | > > | > > > > < | > | 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 { 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; |
︙ | ︙ | |||
689 690 691 692 693 694 695 | margin-left: 0.5em; font-size: smaller; } /* Footer ***** */ footer#main { | > > > > > > > > > | > > > > > > > > > | | > | > > > > | > > > | | 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[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%; } 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 | box-shadow: none; border: none; } a:link, a:visited, a:hover, a:active { color: black; border-bottom: dotted 1px black; } } | > | 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; } } |