| ︙ | | | ︙ | |
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
@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: 18px; }
/* Start increasing type size dynamically at screen widths of 768px */
@media only screen and (min-width: 768px) {
html { font-size: 2.3vw; }
}
/* Top out at 23px for screens up to 800px TALL */
@media only screen and (min-width: 1000px) and (max-height: 800px) {
html { font-size: 23px; } /* = 2.3% of 1000px (min-width) */
}
6px for screens 801px-1000px TALL */
@media only screen and (min-width: 1130px) and (min-height: 801px) and (max-height: 1000px) {
html { font-size: 26px; } /* = 2.3% of 1130px (min-width) */
@media only screen and (min-width: 1400px) and (min-height: 1001px) {
html { font-size: 32px; } /* = 2.3% of 1400px (min-width) */
}
◊; Since line height is used in so many places...
◊(define LINEHEIGHT 1.3)
◊(define lineheight (string-append (number->string LINEHEIGHT) "rem"))
◊(define (x-lineheight multiple)
(string-append (real->decimal-string (* LINEHEIGHT multiple) 2) "rem"))
|
|
|
|
|
>
|
<
|
|
|
|
|
|
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
@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 only screen and (min-width: 768px) {
html { font-size: 2.8vw; }
}
/* Top out at 23px for screens up to 800px TALL */
◊; @media only screen and (min-width: 1000px) and (max-height: 800px) {
◊; html { font-size: 26px; } /* = 2.6% of 1000px (min-width) */
◊; }
/* Top out at 28px for screens 801px-1000px TALL */
@media only screen and (min-width: 1000px) and (max-height: 920px) {
html { font-size: 28px; } /* = 2.8% of 1000px (min-width) */
}
/* For screens taller than 1000 px, top out at 32px */
@media only screen and (min-width: 1178px) and (min-height: 921px) {
html { font-size: 33px; } /* = 2.8% of 1178px (min-width) */
}
◊; Since line height is used in so many places...
◊(define LINEHEIGHT 1.3)
◊(define lineheight (string-append (number->string LINEHEIGHT) "rem"))
◊(define (x-lineheight multiple)
(string-append (real->decimal-string (* LINEHEIGHT multiple) 2) "rem"))
|
| ︙ | | | ︙ | |
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
font-size: ◊x-lineheight[1];
line-height: ◊x-lineheight[1];
margin: 0 0 ◊x-lineheight[1] 0;
font-style: italic;
font-weight: normal;
}
/* If you DO add an actual, formal title to an article, we’ll put it in small caps (Fabiol comes with
some really nice small caps).
*/
article>h1.entry-title {
margin: 0 0 0 0;
font-feature-settings: "smcp" on;
|
|
<
<
<
|
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
font-size: ◊x-lineheight[1];
line-height: ◊x-lineheight[1];
margin: 0 0 ◊x-lineheight[1] 0;
font-style: italic;
font-weight: normal;
}
/* Titles non-bold, non-smallcaps by default. This can be overridden in document markup. */
article>h1.entry-title {
margin: 0 0 0 0;
text-transform: none;
font-style: normal;
line-height: 1.7rem;
}
/* This <SPAN> class is used in titles for Notes appended to earlier articles */
h1.entry-title .cross-reference {
|
| ︙ | | | ︙ | |
394
395
396
397
398
399
400
401
402
403
404
405
406
407
|
pre code {
border: 0;
background: none;
font-style: italic;
font-size: 0.75rem;
}
pre.verse {
font-family: ◊body-font;
font-size: 1rem;
line-height: ◊x-lineheight[1];
width: auto;
margin: ◊x-lineheight[1] auto;
|
>
>
>
>
>
|
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
|
pre code {
border: 0;
background: none;
font-style: italic;
font-size: 0.75rem;
}
pre.code {
border: dotted #aaa 2px;
padding-left: 0.2em;
}
pre.verse {
font-family: ◊body-font;
font-size: 1rem;
line-height: ◊x-lineheight[1];
width: auto;
margin: ◊x-lineheight[1] auto;
|
| ︙ | | | ︙ | |
652
653
654
655
656
657
658
659
660
661
662
663
664
665
|
article.no-title footer.article-info {
padding-top: 1.5rem;
}
section.entry-content {
grid-area: main;
}
section.entry-content:first-child {
margin-top: 0 !important;
}
article>:last-child::after {
|
>
>
>
|
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
|
article.no-title footer.article-info {
padding-top: 1.5rem;
}
section.entry-content {
grid-area: main;
/* Prevent content from overriding grid column sizing */
/* See https://css-tricks.com/preventing-a-grid-blowout/ */
min-width: 0;
}
section.entry-content:first-child {
margin-top: 0 !important;
}
article>:last-child::after {
|
| ︙ | | | ︙ | |
