| Revision 3500:dd7dd67cc76f,
1.8 KB
checked in by franck <carnet.franck.paul@…>, 9 years ago
(diff) |
|
Reduce base font size on very small devices (19.6px to 16.8px for main content, with 16px based browser)
|
| Line | |
|---|
| 1 | /* Typographie */ |
|---|
| 2 | |
|---|
| 3 | :root { |
|---|
| 4 | // May be superseed by user pref (typically from 50% to 75%, default 62.5%) |
|---|
| 5 | --html-font-size: #{$html-font-size}; |
|---|
| 6 | } |
|---|
| 7 | |
|---|
| 8 | // base // |
|---|
| 9 | html { |
|---|
| 10 | font-size: $html-font-size; // html font-size for IE and Edge |
|---|
| 11 | font-size: var(--html-font-size); // html font-size for modern browsers |
|---|
| 12 | } |
|---|
| 13 | |
|---|
| 14 | body { |
|---|
| 15 | font-size: $body-font-size; |
|---|
| 16 | line-height: 1.5; |
|---|
| 17 | font-family: $sans-serif; |
|---|
| 18 | &.responsive-font { |
|---|
| 19 | @media screen and(max-width: $small-screen) { |
|---|
| 20 | font-size: $body-font-size-small; |
|---|
| 21 | line-height: 1.3; |
|---|
| 22 | } |
|---|
| 23 | @media screen and(min-width: $large-screen) { |
|---|
| 24 | font-size: $body-font-size-large; |
|---|
| 25 | line-height: 1.5; |
|---|
| 26 | } |
|---|
| 27 | @media screen and(min-width: $small-screen) and (max-width: $large-screen) { |
|---|
| 28 | font-size: calc( #{$body-font-size-small} + #{strip-unit($body-font-size-large - $body-font-size-small)} * (100vw - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}rem) / (#{strip-unit(relative-to-screen($large-screen,$html-font-size))} - #{strip-unit(relative-to-screen($small-screen,$html-font-size))})); |
|---|
| 29 | line-height: calc( 1.3em + (1.5 - 1.3) * (100vw - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}rem) / (#{strip-unit(relative-to-screen($large-screen,$html-font-size))} - #{strip-unit(relative-to-screen($small-screen,$html-font-size))})); |
|---|
| 30 | } |
|---|
| 31 | } |
|---|
| 32 | } |
|---|
| 33 | |
|---|
| 34 | #wrapper { |
|---|
| 35 | @media screen and (max-width: $small-screen) { |
|---|
| 36 | font-size: 1.2em; |
|---|
| 37 | } |
|---|
| 38 | } |
|---|
| 39 | |
|---|
| 40 | // titres // |
|---|
| 41 | h2, |
|---|
| 42 | h3, |
|---|
| 43 | .as_h3, |
|---|
| 44 | h4, |
|---|
| 45 | .as_h4, |
|---|
| 46 | h5, |
|---|
| 47 | h6 { |
|---|
| 48 | margin-top: 0; |
|---|
| 49 | margin-bottom: 1em; |
|---|
| 50 | } |
|---|
| 51 | |
|---|
| 52 | h2 { |
|---|
| 53 | font-size: 1.5em; |
|---|
| 54 | font-weight: normal; |
|---|
| 55 | line-height: 1.25; |
|---|
| 56 | padding: 0 0 1.5em; |
|---|
| 57 | } |
|---|
| 58 | |
|---|
| 59 | h3, |
|---|
| 60 | .as_h3 { |
|---|
| 61 | font-size: 1.34em; |
|---|
| 62 | font-weight: normal; |
|---|
| 63 | line-height: 1.5; |
|---|
| 64 | margin-top: 1em; |
|---|
| 65 | } |
|---|
| 66 | |
|---|
| 67 | h4, |
|---|
| 68 | .as_h4 { |
|---|
| 69 | font-size: 1.16em; |
|---|
| 70 | line-height: 1.5; |
|---|
| 71 | } |
|---|
| 72 | |
|---|
| 73 | h5 { |
|---|
| 74 | font-size: 1em; |
|---|
| 75 | line-height: 1.5; |
|---|
| 76 | font-weight: bold; |
|---|
| 77 | } |
|---|
| 78 | |
|---|
| 79 | h6 { |
|---|
| 80 | font-size: 1em; |
|---|
| 81 | line-height: 1.5; |
|---|
| 82 | } |
|---|
Note: See
TracBrowser
for help on using the repository browser.