diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-10-08 04:32:03 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 09:38:33 +0300 |
commit | a0df8aa6d40ab7b1e96dafd93a197c6859580454 (patch) | |
tree | 0d1ca583a4ea9cbb2112a114b66698e3a3ed9358 /docs/res/base.css | |
parent | f6050df80182f7bfc55e5f2df7c715969a1cb67d (diff) | |
download | inter-a0df8aa6d40ab7b1e96dafd93a197c6859580454.tar.xz |
website: big update with samples and vf stuff
Diffstat (limited to 'docs/res/base.css')
-rw-r--r-- | docs/res/base.css | 145 |
1 files changed, 46 insertions, 99 deletions
diff --git a/docs/res/base.css b/docs/res/base.css index 464d3db56..9580ac3e9 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -2,7 +2,7 @@ html { } body { background-color: #f4f4f4; - color: #414141; + color: #111; font: 15px/22px 'Inter UI', system-ui, sans-serif; font-size: 15px; @@ -25,6 +25,30 @@ body { font-feature-settings:"kern" 1, "liga" 1; } +/* Font style classifiers used by samples and dynmetrics */ +/* Note: font-variation-settings is needed for Safari. */ +.font-style-regular { font-variation-settings: "wght" 400, "slnt" 0 !important; font-weight:400 !important; font-style:normal !important; } +.font-style-italic { font-variation-settings: "wght" 400, "slnt" 100 !important; font-weight:400 !important; font-style:oblique !important; } +.font-style-medium { font-variation-settings: "wght" 500, "slnt" 0 !important; font-weight:500 !important; font-style:normal !important; } +.font-style-medium-italic { font-variation-settings: "wght" 500, "slnt" 100 !important; font-weight:500 !important; font-style:oblique !important; } +.font-style-semi-bold { font-variation-settings: "wght" 600, "slnt" 0 !important; font-weight:600 !important; font-style:normal !important; } +.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "slnt" 100 !important; font-weight:600 !important; font-style:oblique !important; } +.font-style-bold { font-variation-settings: "wght" 700, "slnt" 0 !important; font-weight:700 !important; font-style:normal !important; } +.font-style-bold-italic { font-variation-settings: "wght" 700, "slnt" 100 !important; font-weight:700 !important; font-style:oblique !important; } +.font-style-extra-bold { font-variation-settings: "wght" 800, "slnt" 0 !important; font-weight:800 !important; font-style:normal !important; } +.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "slnt" 100 !important; font-weight:800 !important; font-style:oblique !important; } +.font-style-black { font-variation-settings: "wght" 900, "slnt" 0 !important; font-weight:900 !important; font-style:normal !important; } +.font-style-black-italic { font-variation-settings: "wght" 900, "slnt" 100 !important; font-weight:900 !important; font-style:oblique !important; } + +@supports (font-variation-settings: normal) { + body { + font-family: 'Inter UI var', system-ui, sans-serif; + } + html.safari body { + font-family: 'Inter UI var safari-fix', system-ui, sans-serif; + } +} + :target:before { content:""; display: block; @@ -108,8 +132,7 @@ num { /* number */ } em, i, .italic { - font-style: italic; - /*font-variation-settings: 'slnt' 10;*/ + font-style: oblique; } small { @@ -133,8 +156,9 @@ h1 { font-weight: 700; } h2 { - font-size: 24px; - letter-spacing: -0.02em; + font-size: 30px; + font-weight: 600; + letter-spacing: -0.015em; line-height: 30px; margin-bottom: 25px; margin-top: 10px; @@ -172,7 +196,12 @@ h2.banner { } h3 { - font-size: inherit; + font-size: 20px; + font-weight: 600; +} +h3 q { + font-weight: 400; + padding-left: 0.5em; } h1 > a, h2 > a, h3 > a { @@ -182,20 +211,6 @@ h1 > a, h2 > a, h3 > a { background: none; } -/* font style classifiers used by samples and dynmetrics */ -.font-style-regular { font-variation-settings: "wght" 400, "ital" 0 !important; font-weight:400 !important; font-style:normal !important; } -.font-style-italic { font-variation-settings: "wght" 400, "ital" 100 !important; font-weight:400 !important; font-style:italic !important; } -.font-style-medium { font-variation-settings: "wght" 500, "ital" 0 !important; font-weight:500 !important; font-style:normal !important; } -.font-style-medium-italic { font-variation-settings: "wght" 500, "ital" 100 !important; font-weight:500 !important; font-style:italic !important; } -.font-style-semi-bold { font-variation-settings: "wght" 600, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; } -.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; } -.font-style-bold { font-variation-settings: "wght" 700, "ital" 0 !important; font-weight:700 !important; font-style:normal !important; } -.font-style-bold-italic { font-variation-settings: "wght" 700, "ital" 100 !important; font-weight:700 !important; font-style:italic !important; } -.font-style-extra-bold { font-variation-settings: "wght" 800, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; } -.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; } -.font-style-black { font-variation-settings: "wght" 900, "ital" 0 !important; font-weight:900 !important; font-style:normal !important; } -.font-style-black-italic { font-variation-settings: "wght" 900, "ital" 100 !important; font-weight:900 !important; font-style:italic !important; } - .row { padding: 50px; display: flex; @@ -279,19 +294,26 @@ h1 > a, h2 > a, h3 > a { background: white; } -.row.dark { +.row.dark, +.row.black { background: #2b2b2b; color: #99999b; } -.row.dark a { +.row.black { + background: #010101; +} +.row.dark a, +.row.black a { text-decoration-color: rgba(255, 255, 255, 0.2); color: #aaa; } -.row.dark a:hover { +.row.dark a:hover, +.row.black a:hover { color: rgb(95, 170, 255); text-decoration: underline rgb(95, 170, 255); } -.row.dark h2, .row.dark h2 > a { +.row.dark h2, .row.dark h2 > a, +.row.black h2, .row.black h2 > a { color: #ccc; background: none; } @@ -379,81 +401,6 @@ tablex { text-decoration: none; display: table-row; } - tablex in, tablex to, tablex out { - display: table-cell; - width: 5%; - white-space: pre; - padding-bottom:0.5em; - } - /*tablex to { - width:0; - }*/ - tablex to::after { - -moz-font-feature-settings: 'calt' 1, 'case' 1; - -ms-font-feature-settings: 'calt' 1, 'case' 1; - -o-font-feature-settings: 'calt' 1, 'case' 1; - -webkit-font-feature-settings: 'calt' 1, 'case' 1; - font-feature-settings: 'calt' 1, 'case' 1; - content: " → "; - color: rgba(0,0,0,0.2); - } - tablex in, tablex out { - color: rgba(0,0,0,0.8); - } - tablex in { - -moz-font-feature-settings: 'calt' 0; - -ms-font-feature-settings: 'calt' 0; - -o-font-feature-settings: 'calt' 0; - -webkit-font-feature-settings: 'calt' 0; - font-feature-settings: 'calt' 0; - } - tablex out { - -moz-font-feature-settings: 'calt' 1; - -ms-font-feature-settings: 'calt' 1; - -o-font-feature-settings: 'calt' 1; - -webkit-font-feature-settings: 'calt' 1; - font-feature-settings: 'calt' 1; - } - tablex out.zero { - -moz-font-feature-settings: 'calt' 1, 'zero' 1; - -ms-font-feature-settings: 'calt' 1, 'zero' 1; - -o-font-feature-settings: 'calt' 1, 'zero' 1; - -webkit-font-feature-settings: 'calt' 1, 'zero' 1; - font-feature-settings: 'calt' 1, 'zero' 1; - } - tablex out.tnum { - -moz-font-feature-settings: 'calt' 1, 'tnum' 1; - -ms-font-feature-settings: 'calt' 1, 'tnum' 1; - -o-font-feature-settings: 'calt' 1, 'tnum' 1; - -webkit-font-feature-settings: 'calt' 1, 'tnum' 1; - font-feature-settings: 'calt' 1, 'tnum' 1; - } - tablex out.case { - -moz-font-feature-settings: 'calt' 1, 'case' 1; - -ms-font-feature-settings: 'calt' 1, 'case' 1; - -o-font-feature-settings: 'calt' 1, 'case' 1; - -webkit-font-feature-settings: 'calt' 1, 'case' 1; - font-feature-settings: 'calt' 1, 'case' 1; - } - tablex out.frac { - -moz-font-feature-settings: 'calt' 1, 'frac' 1; - -ms-font-feature-settings: 'calt' 1, 'frac' 1; - -o-font-feature-settings: 'calt' 1, 'frac' 1; - -webkit-font-feature-settings: 'calt' 1, 'frac' 1; - font-feature-settings: 'calt' 1, 'frac' 1; - } - tablex out.ss01 { - -moz-font-feature-settings: 'calt' 1, 'ss01' 1; - -ms-font-feature-settings: 'calt' 1, 'ss01' 1; - -o-font-feature-settings: 'calt' 1, 'ss01' 1; - -webkit-font-feature-settings: 'calt' 1, 'ss01' 1; - font-feature-settings: 'calt' 1, 'ss01' 1; - } - tablex em { - font-style: inherit; - background: #FBE9A3; - color: rgba(0,0,0,1); - } boxes { |