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

Login
About History Code Code Docs Road Map Issues
Overview
Comment:Enable/improve browser print media styles in CSS
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: ffd042471069c1d01365ccbda06ff798456efd3f724e49a66a933013a6b4008f
User & Date: joel on 2020-01-22 04:41:42
Other Links: manifest | tags
Context
2020-01-26
23:31
Add support for concealing articles/notes in different listing contexts (finishes [1f6233035e7d8cc8]) check-in: 8bd52721 user: joel tags: trunk
2020-01-22
04:41
Enable/improve browser print media styles in CSS check-in: ffd04247 user: joel tags: trunk
02:47
Improve front page a bit check-in: 23737623 user: joel tags: trunk
Changes
Hide Diffs Unified Diffs Show Whitespace Changes Patch

Modified web-extra/martin.css.pp from [16e6b3ef] to [7cbcbc97].

︙︙
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


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








|









|



|








25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


/* 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 */
◊; @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 (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 (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)
︙︙
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

 **** 1. Mobile-first layout ***
      1.1 All Pages
      1.2 Front page
      1.3 Individual post body markup
      1.4 Journal views (article listings)  
 */

@media screen {
    body {
        margin: 0;
        background: ◊color-background;

        /* Typography: `line-height` is important!
           All verticle rhythm based on this value. */
        line-height: ◊lineheight;








<








70
71
72
73
74
75
76

77
78
79
80
81
82
83

 **** 1. Mobile-first layout ***
      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;
︙︙
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705


    #keywordindex ul ul {
        margin-left: 0.5em;
        font-size: smaller;
    }

    /* 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 only screen and (min-width: 667px) {
    main {
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 30rem;
        max-width: 90%;
    }








<





|








684
685
686
687
688
689
690

691
692
693
694
695
696
697
698
699
700
701
702
703


    #keywordindex ul ul {
        margin-left: 0.5em;
        font-size: smaller;
    }

    /* 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%;
    }
︙︙
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756

            border-radius: 2px;
        }
        
        article>h1 {
            grid-area: margin;
            font-size: 1.1rem;
            text-align: right;
            /* padding-right: 1rem; */
            color: ◊color-bodytext;
        }

        article>h1.entry-title {
            grid-area: title;
            font-size: ◊x-lineheight[1];
            text-align: left;
            padding-right: 0;








<
<








739
740
741
742
743
744
745


746
747
748
749
750
751
752

            border-radius: 2px;
        }
        
        article>h1 {
            grid-area: margin;
            font-size: 1.1rem;
            text-align: right;


        }

        article>h1.entry-title {
            grid-area: title;
            font-size: ◊x-lineheight[1];
            text-align: left;
            padding-right: 0;
︙︙
859
860
861
862
863
864
865
















        }

        div.content-block-main > :first-child {
            margin-top: 0 !important;
        }
    }
}























>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876

        }

        div.content-block-main > :first-child {
            margin-top: 0 !important;
        }
    }
}

@media print {
    html { font-size: 13pt; }
    body { background: white; color: black; }
    main { width: 100%; }
    footer.article-info { color: black; }
    article, section.content-block {
        box-shadow: none;
        border: none;
        }
    a:link, a:visited, a:hover, a:active {
        color: black;
        border-bottom: dotted 1px black;
    }
}

This page was generated in about 0.011s by Fossil 2.19 [318ab802db] 2022-05-27 02:05:21