Overview
| Comment: | Proper sticky footer |
|---|---|
| Timelines: | family | ancestors | descendants | both | trunk |
| Files: | files | file ages | folders |
| SHA3-256: |
cd7ac6e383905dd8dd30345f2f10ec2a |
| User & Date: | joel on 2020-02-29 16:35:27 |
| Other Links: | manifest | tags |
Context
|
2020-02-29
| ||
| 17:09 | Add credit for emblem to NOTICES check-in: 83ec0bcf user: joel tags: trunk | |
| 16:35 | Proper sticky footer check-in: cd7ac6e3 user: joel tags: trunk | |
| 16:12 | Implement excerpts ([10e20e5ab65]) check-in: 8af3b9ce user: joel tags: trunk | |
Changes
Modified web-extra/martin.css.pp from [bcad2246] to [2e1ac04c].
| ︙ | ︙ | |||
22 23 24 25 26 27 28 |
@import url('font.css');
@import url('normalize.css');
/* Let us first address the matter of font size in different screen sizes. */
/* Mobile portrait screens will see a minimum 18px font. */
| > | > > | 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
@import url('font.css');
@import url('normalize.css');
/* Let us first address the matter of font size in different screen sizes. */
/* Mobile portrait screens will see a minimum 18px font. */
html {
font-size: 22px;
height: 100%;
}
/* Start increasing type size dynamically at screen widths of 768px */
@media (min-width: 768px) {
html { font-size: 2.8vw; }
}
/* Top out at 23px for screens up to 800px TALL */
|
| ︙ | ︙ | |||
71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
1.1 All Pages
1.2 Front page
1.3 Individual post body markup
1.4 Journal views (article listings)
*/
body {
margin: 0;
background: ◊color-background;
/* Typography: `line-height` is important!
All verticle rhythm based on this value. */
line-height: ◊lineheight;
font-family: ◊body-font;
| > > > | 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
1.1 All Pages
1.2 Front page
1.3 Individual post body markup
1.4 Journal views (article listings)
*/
body {
height: 100%; /* height and flex are to keep footer stuck to bottom of page */
display: flex;
flex-direction: column;
margin: 0;
background: ◊color-background;
/* Typography: `line-height` is important!
All verticle rhythm based on this value. */
line-height: ◊lineheight;
font-family: ◊body-font;
|
| ︙ | ︙ | |||
100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
font-variant-alternates: normal;
}
main {
background: white;
margin: 0;
padding: ◊x-lineheight[0.5] ◊x-lineheight[1];
}
main > a > header {
text-align: center;
}
main > a > header h1 {
| > | 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
font-variant-alternates: normal;
}
main {
background: white;
margin: 0;
padding: ◊x-lineheight[0.5] ◊x-lineheight[1];
flex: 1 0 auto;
}
main > a > header {
text-align: center;
}
main > a > header h1 {
|
| ︙ | ︙ | |||
341 342 343 344 345 346 347 348 349 350 351 352 353 354 |
font-weight: bold;
margin-left: 3px;
}
p.time {
margin: 0 0 ◊x-lineheight[1] 0;
}
footer.article-info {
margin: ◊x-lineheight[1] 0;
text-align: center;
font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
color: #555555; /* Accessibility (contrast) */
}
| > | 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 |
font-weight: bold;
margin-left: 3px;
}
p.time {
margin: 0 0 ◊x-lineheight[1] 0;
}
footer.article-info {
margin: ◊x-lineheight[1] 0;
text-align: center;
font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
color: #555555; /* Accessibility (contrast) */
}
|
| ︙ | ︙ | |||
720 721 722 723 724 725 726 727 728 729 730 731 732 733 |
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%);
| > | 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 |
footer#main {
text-align: left;
font-size: 0.8rem;
line-height: 1rem;
width: 90%;
margin: 0 auto;
flex-shrink: 0;
}
@media (min-width: 667px) {
footer#main {
text-align: center;
width: 100%;
background: linear-gradient(◊color-background 5%, #dedede 100%);
|
| ︙ | ︙ |