diff options
author | Rasmus Andersson <rasmus@notion.se> | 2023-11-19 07:05:55 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2023-11-19 07:05:55 +0300 |
commit | 6bf45a2c890bb292439c5eec36907782a4247726 (patch) | |
tree | 991444d05ab50f30771e1ec78bbca4b1a36455b4 | |
parent | c52a1b9951ad92db85139b8ddd7e15856d6a3930 (diff) | |
download | inter-6bf45a2c890bb292439c5eec36907782a4247726.tar.xz |
website: minor nits
-rw-r--r-- | docs/index.html | 37 | ||||
-rw-r--r-- | docs/res/base.css | 3 |
2 files changed, 21 insertions, 19 deletions
diff --git a/docs/index.html b/docs/index.html index 37b271671..63ca91b6e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -52,6 +52,9 @@ h1.title { .row.examples .label { font-size: var(--font-size); opacity: 0.3; } .row.examples a.label:hover { opacity: 1; } .row.examples .label.r { text-align: right } +@media only screen and (max-width: 719px) { /* window width <= 719 */ + .row.examples .example-note { margin: 1em 0 } +} .example2 { font-size: 10vw; line-height: initial; @@ -1033,20 +1036,19 @@ At a later date we find the word applied to very different objects, though alway <r-cell span=row id="features/cv"> <r-feat>cvXX</r-feat> Character variants </r-cell> - <r-cell span=row class="example2 features" style="font-weight:600;margin-bottom:-1rem"> 1234567890</r-cell> <r-cell span=row class="example2 features" style="font-weight:600;font-feature-settings:'cv01' 1,'cv02' 1,'cv03' 1,'cv04' 1,'cv09' 1,'zero' 1,'liga' 1,'calt' 1"> 1234567890</r-cell> - <r-cell span=2>Alternative digits</r-cell> - <r-cell span=3-4 span-s=3-6> + <r-cell span=2 span-s=row class=example-note>Alternative digits</r-cell> + <r-cell span=3-4 span-s=row> <r-feat>cv01</r-feat> Alternate one<br> <r-feat>cv09</r-feat> Flat-top three<br> <r-feat>cv02</r-feat> Open four<br> </r-cell> - <r-cell span=5-6 span-s=3-6> + <r-cell span=5-6 span-s=row> <r-feat>cv03</r-feat> Open six<br> <r-feat>cv04</r-feat> Open nine<br> <r-feat>zero</r-feat> Slashed zero<br> @@ -1060,10 +1062,10 @@ At a later date we find the word applied to very different objects, though alway <r-cell span=row class="example2 features" style="font-feature-settings:'cv06' 1,'cv10' 1,'cv11' 1,'liga' 1,'calt' 1"> Guillable ürá</r-cell> - <r-cell span=2> + <r-cell span=2 span-s=row class=example-note> Character variants is a mood </r-cell> - <r-cell span=3..> + <r-cell span=3.. span-s=row> <r-feat>cv10</r-feat> Capital G with spur<br> <r-feat>cv06</r-feat> Simplified u<br> <r-feat>cv11</r-feat> Single-story a<br> @@ -1077,10 +1079,10 @@ At a later date we find the word applied to very different objects, though alway <r-cell span=row class="example2 features" style="font-weight:300;font-feature-settings:'cv12' 1,'cv13' 1,'liga' 1,'calt' 1"> Efficient after</r-cell> - <r-cell span=2> + <r-cell span=2 span-s=row class=example-note> Give it a compact character </r-cell> - <r-cell span=3..> + <r-cell span=3.. span-s=row> <r-feat>cv12</r-feat> Compact f<br> <r-feat>cv13</r-feat> Compact t<br> </r-cell> @@ -1106,10 +1108,10 @@ At a later date we find the word applied to very different objects, though alway <r-cell span=row class="example2 features" style="font-size:10vw;font-variant:tabular-nums;line-height:1.1;margin-bottom:2rem"> <span style="font-weight:100">1</span><span style="font-weight:200">2</span><span style="font-weight:300">3.</span><span style="font-weight:400">4</span><span style="font-weight:500">5</span><span style="font-weight:600">6</span><span style="font-weight:700">7</span><span style="font-weight:800">8</span><span style="font-weight:900">90</span>[1]<span style="font-weight:600">,</span><span style="font-weight:800">3</span></r-cell> - <r-cell span=2> + <r-cell span=2 span-s=row class=example-note> Tabular figures are excellent for tables of numeric data. <code>tnum</code> enables an entire set of dedicated glyphs that have the same width across all weights. </r-cell> - <r-cell span=3..> + <r-cell span=3.. span-s=row> <r-feat>tnum</r-feat> Tabular figures </r-cell> @@ -1121,11 +1123,11 @@ At a later date we find the word applied to very different objects, though alway <r-cell span=row class="example2 features" style="font-feature-settings:'ss02' 1,'liga' 1,'calt' 1"> Illusion A03</r-cell> - <r-cell span=2> + <r-cell span=2 span-s=row class=example-note> Disambiguate between similar-looking characters with <r-feat>ss02</r-feat> or individual character variants </r-cell> - <r-cell span=3..> + <r-cell span=3.. span-s=row> <r-feat>ss02</r-feat> Disambiguation, or<br> <r-feat>cv08</r-feat> Upper-case i with serif<br> <r-feat>cv05</r-feat> Lower-case L with tail<br> @@ -1134,18 +1136,19 @@ At a later date we find the word applied to very different objects, though alway <hr style="margin-top:3rem"> - <r-cell span=row class="example2" style="font-weight:500;white-space:nowrap;font-size:9.5vw"> + <r-cell span=row class="example2" + style="font-weight:500;white-space:nowrap;font-size:9.5vw"> It’s “fun” here, Möbius</r-cell> <r-cell span=row class="example2" - style="font-weight:500;white-space:nowrap;font-size:9.5vw;font-feature-settings:'ss03' 1,'liga' 1,'calt' 1;margin-bottom:1rem"> + style="font-weight:500;white-space:nowrap;font-size:9.5vw;font-feature-settings:'ss03' 1,'liga' 1,'calt' 1"> It’s “fun” here, Möbius</r-cell> <r-cell span=row class="example2" - style="font-weight:500;white-space:nowrap;font-size:9.5vw;font-feature-settings:'ss07' 1,'ss08' 1,'liga' 1,'calt' 1;margin-bottom:1rem"> + style="font-weight:500;white-space:nowrap;font-size:9.5vw;font-feature-settings:'ss07' 1,'ss08' 1,'liga' 1,'calt' 1;margin-bottom:1rem"> It’s “fun” here, Möbius</r-cell> - <r-cell span=2> + <r-cell span=2 span-s=row class=example-note> Add a little personality to titles </r-cell> - <r-cell span=3..> + <r-cell span=3.. span-s=row> <r-feat>ss03</r-feat> Round quotes & commas<br> <r-feat>ss07</r-feat> Square punctuation<br> <r-feat>ss08</r-feat> Square quotes<br> diff --git a/docs/res/base.css b/docs/res/base.css index e7efa8825..c6b5582c2 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -111,8 +111,7 @@ layout: none --link-hover-color: var(--light-yellow); --grid-color: #555; /* must be opaque */ --unit-background-color: #333; - --warm-yellow: color(display-p3 0.57 0.44 0); - --active-bgcolor: var(--warm-yellow); + --active-bgcolor: color(display-p3 0.57 0.44 0); font-weight: 400; }} |