From ab4715013a26a1185b31a1793395f37b52632c11 Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Mon, 25 Feb 2019 09:17:53 -0800 Subject: website --- docs/_config.yml | 2 + docs/_layouts/default.html | 12 +-- docs/_scripts/optimize-resources.sh | 18 +++-- docs/index.css | 22 ++++- docs/index.html | 48 ++++++----- docs/res/base.css | 150 +++++++++++++++++++++-------------- docs/samples/img/regular-text.png | Bin 114115 -> 65933 bytes docs/samples/img/regular-text@2x.png | Bin 279996 -> 165236 bytes docs/samples/img/subway.svg | 6 +- 9 files changed, 164 insertions(+), 94 deletions(-) mode change 100755 => 100644 docs/samples/img/regular-text.png mode change 100755 => 100644 docs/samples/img/regular-text@2x.png diff --git a/docs/_config.yml b/docs/_config.yml index f00875d90..b66780472 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -8,3 +8,5 @@ kramdown: input: GFM auto_ids: true hard_wrap: false +exclude: + - README.md diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 1618ab47f..c3f80ca25 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -70,12 +70,12 @@ endfor
diff --git a/docs/_scripts/optimize-resources.sh b/docs/_scripts/optimize-resources.sh index 68f55324a..2ff2e4e27 100755 --- a/docs/_scripts/optimize-resources.sh +++ b/docs/_scripts/optimize-resources.sh @@ -2,18 +2,26 @@ set -e cd "$(dirname "$0")/.." +MISSING_UTILS=() if ! (which svgo >/dev/null); then - echo 'svgo not found in $PATH (try `brew install svgo` on mac)' >&2 - exit 1 + echo 'svgo not found in $PATH' >&2 + MISSING_UTILS+=( svgo ) fi if ! (which pngcrush >/dev/null); then - echo 'pngcrush not found in $PATH (try `brew install pngcrush` on mac)' >&2 - exit 1 + echo 'pngcrush not found in $PATH' >&2 + MISSING_UTILS+=( pngcrush ) fi if ! (which convert >/dev/null); then - echo 'convert not found in $PATH (try `brew install imagemagick` on mac)' >&2 + echo 'convert not found in $PATH' >&2 + MISSING_UTILS+=( imagemagick ) +fi + +if ! [ -z $MISSING_UTILS ]; then + if [[ "$(uname)" = *Darwin* ]]; then + echo 'try `brew install '"${MISSING_UTILS[@]}"'` on mac' + fi exit 1 fi diff --git a/docs/index.css b/docs/index.css index aa1495f5a..9c787e830 100644 --- a/docs/index.css +++ b/docs/index.css @@ -1,7 +1,7 @@ h1 { color: #010101; - font-size:110px; + font-size:81px; letter-spacing: -0.055em; line-height: 0.9em; text-indent: -0.03em; @@ -9,6 +9,19 @@ h1 { margin-top: 10px; font-weight: 740; } +/* title scales as window shrinks */ +@media only screen and (max-width: 988px) { + h1 { font-size: calc(100vw / 12.2); } +} +@media only screen and (max-width: 900px) { + h1 { font-size: calc(100vw / 12.5); } +} +@media only screen and (max-width: 760px) { + h1 { font-size: calc(100vw / 12.8); } +} +@media only screen and (max-width: 660px) { + h1 { font-size: calc(100vw / 13.2); } +} @media only screen and (max-width: 565px) { h1 { @@ -19,6 +32,13 @@ h1 { } } +.weights-and-styles { + display: block; + opacity: 0.98; + width: 100%; + margin: 3em 0 3em 0; +} + #hidden-text-input { position: absolute; left:0; diff --git a/docs/index.html b/docs/index.html index 7bb1ab037..6d17d10b7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -26,20 +26,30 @@ endfor
-

The Inter
typeface family

+ - - Inter is a typeface specially designed for computer screens. + +

The Inter typeface family

+ + + Inter is a typeface carefully crafted & designed for + computer screens. - The family features a tall x-height to aid in readability of mixed-case and - lower-case text. Several OpenType features are provided as well, - like contextual alternates that adjusts punctuation depending on the shape of - surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", - tabular numbers, etc. + +

+ Inter features a tall x-height to aid in readability of mixed-case and + lower-case text. Several OpenType features are provided as well, + like contextual alternates that adjusts punctuation depending on the + shape of surrounding glyphs, slashed zero for when you need to + disambiguate "0" from "o", tabular numbers, etc. +

+ + + + -

Inter Regular
Sample

 @@ -47,10 +57,6 @@ endfor - - - -

Inter Bold
Sample

 @@ -120,13 +126,13 @@ html { font-family: 'Inter', sans-serif; }
-
+

Weights & Styles

There are nine weights, each with italic counterparts, making a total of 18 styles.

- +
@@ -134,11 +140,11 @@ html { font-family: 'Inter', sans-serif; }

Variable

-

+

Inter is offered as both traditional constant font files (one per style, e.g. Bold Italic, Medium, etc.) as well as a Variable Font - file which contains all styles in a much smaller file size. + which contains all styles in a much smaller file size. Additionally, a variable font is ...variable! You can mix and match weight and italic angle as you please, forming theoretically infinite variations.

@@ -190,7 +196,7 @@ html { font-family: 'Inter', sans-serif; }

Variable fonts is a new technology and support is somewhat in flux at - the time of writing this (fall 2018.) + the time of writing this (fall 2018.)
This test can be used to discover what a web browser is capable of.

@@ -200,7 +206,7 @@ html { font-family: 'Inter', sans-serif; }

Features

-

+

Inter comes with many OpenType features that can be used to tailor functionality and aesthetics to your specific needs. Some of these features can be combined to form a great number of @@ -292,7 +298,7 @@ html { font-family: 'Inter', sans-serif; }

The story behind Inter

- +

Inter started out in late 2016 as an experiment to build a perfectly pixel-fitting font at a specific small size (11px.) The idea was that @@ -316,7 +322,7 @@ html { font-family: 'Inter', sans-serif; } As Inter was being developed, it was tested on an internal version of Figma—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback.

- +

 

diff --git a/docs/res/base.css b/docs/res/base.css index 0c5dc7e77..2105a3e3e 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -8,8 +8,7 @@ --spacing: 2rem; --spacingv: calc(var(--lineHeight) / 2); - --gridGapCol: var(--spacing); - --gridGapRow: calc(var(--spacing) / 2); + --columnGap: 2rem; --red: #F03009; --yellow: #FFE310; @@ -295,6 +294,11 @@ h2.banner { letter-spacing: -0.012em; } +.row.yellow { + background: var(--yellow); + color: rgba(0, 0, 0, 0.98); +} + .row { padding: 50px; display: flex; @@ -340,6 +344,8 @@ h2.banner { border-bottom:1px solid rgba(0,0,0,0.1); background: #111; color: white; + border-top: 40px solid red; + margin-top: -40px; } .row.menu ul { width: auto; @@ -388,6 +394,60 @@ h2.banner { opacity: 1; } +/* narrow windows */ +@media only screen and (max-width: 565px) { + .row.menu ul { + justify-content: space-between; + margin: 0 35px; + padding-bottom: 5px; + } + .row.menu ul li > a { + /*background:#666;*/ + padding: 10px 15px; + } + .row.menu ul li.home { + text-align:center; + margin: 0 0 -12px 0; + width: 100%; + } + .row.menu ul li.home > a { + border-bottom: none; + padding: 0 1em; + margin: 0.5em 0; + line-height: 34px; + border-radius: 90px; + } + .row.menu ul li.home > a:hover { + color: white; + background-color: #222; + text-decoration: none; + } +} + +/* small devices (<= iPhone 6+) */ +@media only screen and (max-device-width: 414px) { + .row.menu ul { + margin: 0 5px; + } +} + +.glyphs {} +.dynmetrics {} +.download {} + +@media only screen and (max-width: 800px) { + .menu .dynmetrics { display: none; } +} +@media only screen and (max-width: 640px) { + .menu .download { display: none; } +} +@media only screen and (max-width: 319px) { + .menu .source { display: none; } +} +@media only screen and (max-width: 250px) { + .menu .lab { display: none; } +} + .row.white { background: white; @@ -479,7 +539,7 @@ tablex { /* grid */ grid { - grid-column-gap: 2rem; + grid-column-gap: var(--columnGap); grid-row-gap: 0; } grid > c.spacer { @@ -509,18 +569,44 @@ grid > c.spacer { flow { display:block; appearance: none; -webkit-appearance: none } flow[columns] { - column-gap: var(--spacing); - /*column-fill: balance;*/ + column-gap: var(--columnGap); + column-fill: balance; } flow[columns="2"] { column-count: 2; } -@media only screen and (max-width: 600px) { +@media only screen and (max-width: 565px) { flow[columns-s="1"] { column-count: 1; } } +/* column flow */ +[flow-cols], [flow-cols-s], [flow-cols-l] { + column-gap: var(--columnGap); + column-fill: balance; +} +[flow-cols="1"] { column-count: 1 } +[flow-cols="2"] { column-count: 2 } +[flow-cols="3"] { column-count: 3 } +[flow-cols="4"] { column-count: 4 } +[flow-cols="5"] { column-count: 5 } +[flow-cols="6"] { column-count: 6 } +[flow-cols="7"] { column-count: 7 } +[flow-cols="8"] { column-count: 8 } + +@media only screen and (max-width: 565px) { + [flow-cols-s="1"] { column-count: 1 } + [flow-cols-s="2"] { column-count: 2 } + [flow-cols-s="3"] { column-count: 3 } + [flow-cols-s="4"] { column-count: 4 } + [flow-cols-s="5"] { column-count: 5 } + [flow-cols-s="6"] { column-count: 6 } + [flow-cols-s="7"] { column-count: 7 } + [flow-cols-s="8"] { column-count: 8 } +} + + /* --------------------------------------------------------------------- */ boxes { @@ -604,37 +690,6 @@ box.large tablex r out { /* narrow windows */ @media only screen and (max-width: 565px) { .wide-window, .only-large-screen { display: none; } - .row.menu ul { - justify-content: space-between; - } - .row.menu ul li { - margin-right: 15px; - } - .row.menu ul li:last-child { - margin-right: 0; - } - .row.menu ul li.home { - /*color: red; - clear: both;*/ - /*display: block;*/ - text-align:center; - margin:0 0 -12px 0; - width: 100%; - } - .row.menu ul li.home > a { - border-bottom: none; - padding: 0 1em; - margin: 0.5em 0; - line-height:34px; - border-radius: 90px; - - /*color: white; - background-color: rgba(3, 102, 214, 1);*/ - } - .row.menu ul li.home > a:hover { - color: white; - background-color: #222; - } } /* small devices (<= iPhone 6+) */ @@ -649,10 +704,6 @@ box.large tablex r out { padding-left: 20px; padding-right: 20px; } - .row.menu ul { - margin-left: 20px; - margin-right: 20px; - } } /* small devices (<= iPhone 5) */ @@ -661,23 +712,6 @@ box.large tablex r out { font-size: 0.8em; min-width: 240px; } - /*.row.menu { - font-size:13px; - } - .row.menu ul { - margin-left: 0; - margin-right: 0; - } - .row.menu ul li { - flex: 1 0 auto; - text-align: center; - border-right: 1px solid rgba(0,0,0,0.1); - margin-left:0; - margin-right:0; - } - .row.menu ul li:last-child { - border-right: none; - }*/ } /* diff --git a/docs/samples/img/regular-text.png b/docs/samples/img/regular-text.png old mode 100755 new mode 100644 index f9084a3f1..eb62b08aa Binary files a/docs/samples/img/regular-text.png and b/docs/samples/img/regular-text.png differ diff --git a/docs/samples/img/regular-text@2x.png b/docs/samples/img/regular-text@2x.png old mode 100755 new mode 100644 index 0bb8177c1..9e27f11e6 Binary files a/docs/samples/img/regular-text@2x.png and b/docs/samples/img/regular-text@2x.png differ diff --git a/docs/samples/img/subway.svg b/docs/samples/img/subway.svg index cf7df0a26..759bb9a39 100644 --- a/docs/samples/img/subway.svg +++ b/docs/samples/img/subway.svg @@ -1,7 +1,7 @@ - - - + + + -- cgit v1.2.3