Overview
Comment: | Enable/improve browser print media styles in CSS |
---|---|
Timelines: | family | ancestors | descendants | both | trunk |
Files: | files | file ages | folders |
SHA3-256: |
ffd042471069c1d01365ccbda06ff798 |
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
Modified web-extra/martin.css.pp from [16e6b3ef] to [7cbcbc97].
︙ | ︙ | |||
25 26 27 28 29 30 31 | /* 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 */ | | | | | 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 | **** 1. Mobile-first layout *** 1.1 All Pages 1.2 Front page 1.3 Individual post body markup 1.4 Journal views (article listings) */ | < | 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 | #keywordindex ul ul { margin-left: 0.5em; font-size: smaller; } /* End of mobile-first typography and layout */ | < | | 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 | border-radius: 2px; } article>h1 { grid-area: margin; font-size: 1.1rem; text-align: right; | < < | 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; } } |