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

Overview
Comment:Proper sticky footer
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: cd7ac6e383905dd8dd30345f2f10ec2ad636fe9f0d989949ebb735b90395dc75
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

29


30
31
32
33
34
35
36
..
71
72
73
74
75
76
77



78
79
80
81
82
83
84
...
100
101
102
103
104
105
106

107
108
109
110
111
112
113
...
341
342
343
344
345
346
347

348
349
350
351
352
353
354
...
720
721
722
723
724
725
726

727
728
729
730
731
732
733

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



/* 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 */
................................................................................
      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;
................................................................................
    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 {
................................................................................
    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) */
}

................................................................................

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%);







>
|
>
>







 







>
>
>







 







>







 







>







 







>







22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
..
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
...
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
...
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
...
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742

@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 */
................................................................................
      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;
................................................................................
    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 {
................................................................................
    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) */
}

................................................................................

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%);