mirror of
https://github.com/rsms/inter.git
synced 2024-11-26 02:43:38 +03:00
website: misc updates with added samples
This commit is contained in:
Rasmus Andersson
parent
eb4608cb7a
commit
357497d433
@ -3,7 +3,14 @@
|
||||
capture url_root
|
||||
%}{% if site.safe == false %}/{% else %}/inter/{% endif
|
||||
%}{%
|
||||
endcapture
|
||||
endcapture %}{%
|
||||
|
||||
%}<link rel="preload" href="{{url_root}}font-files/Inter-upright.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin>
|
||||
for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/font-files/Inter-Regular.woff2" %}{%
|
||||
assign font_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
endif %}{%
|
||||
endfor
|
||||
|
||||
%}<link rel="preload" href="{{url_root}}font-files/Inter-upright.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin>
|
||||
@ -158,7 +158,7 @@ html { font-family: 'Inter', sans-serif; }
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="row white variable-sample-row">
|
||||
<div class="variable-sample" contenteditable>
|
||||
<div class="variable-sample" contenteditable spellcheck="false">
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
|
||||
?!()[]{}&*^%$#@~
|
||||
</div>
|
||||
|
||||
113
docs/inter.css
113
docs/inter.css
@ -1,136 +1,149 @@
|
||||
---
|
||||
layout: none
|
||||
---
|
||||
{%
|
||||
|
||||
for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/font-files/Inter-Regular.woff2" %}{%
|
||||
assign font_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
endif %}{%
|
||||
endfor
|
||||
|
||||
%}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: url("font-files/Inter-Thin.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-Thin.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
src: url("font-files/Inter-ThinItalic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-ThinItalic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url("font-files/Inter-ExtraLight.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-ExtraLight.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
src: url("font-files/Inter-ExtraLightItalic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-ExtraLightItalic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url("font-files/Inter-Light.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-Light.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-Light.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: url("font-files/Inter-LightItalic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-LightItalic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("font-files/Inter-Regular.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-Regular.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url("font-files/Inter-Italic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-Italic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url("font-files/Inter-Medium.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-Medium.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: url("font-files/Inter-MediumItalic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-MediumItalic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url("font-files/Inter-SemiBold.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-SemiBold.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: url("font-files/Inter-SemiBoldItalic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-SemiBoldItalic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("font-files/Inter-Bold.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-Bold.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url("font-files/Inter-BoldItalic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-BoldItalic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url("font-files/Inter-ExtraBold.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-ExtraBold.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
src: url("font-files/Inter-ExtraBoldItalic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-ExtraBoldItalic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("font-files/Inter-Black.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-Black.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-Black.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: url("font-files/Inter-BlackItalic.woff2?v=3.3") format("woff2"),
|
||||
url("font-files/Inter-BlackItalic.woff?v=3.3") format("woff");
|
||||
src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
|
||||
url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff");
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------
|
||||
@ -147,18 +160,18 @@ Usage:
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2 supports variations(gvar)"),
|
||||
url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2-variations"),
|
||||
url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2");
|
||||
src: url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"),
|
||||
url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2-variations"),
|
||||
url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2 supports variations(gvar)"),
|
||||
url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2-variations"),
|
||||
url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2");
|
||||
src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"),
|
||||
url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2-variations"),
|
||||
url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
/* Legacy naming compatibility */
|
||||
@ -167,18 +180,18 @@ Usage:
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2 supports variations(gvar)"),
|
||||
url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2-variations"),
|
||||
url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2");
|
||||
src: url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"),
|
||||
url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2-variations"),
|
||||
url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter var alt';
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2 supports variations(gvar)"),
|
||||
url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2-variations"),
|
||||
url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2");
|
||||
src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"),
|
||||
url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2-variations"),
|
||||
url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
|
||||
@ -199,6 +212,6 @@ explicitly, e.g.
|
||||
font-family: 'Inter var experimental';
|
||||
font-weight: 100 900;
|
||||
font-style: oblique 0deg 10deg;
|
||||
src: url("font-files/Inter.var.woff2?v=3.3") format("woff2-variations"),
|
||||
url("font-files/Inter.var.woff2?v=3.3") format("woff2");
|
||||
src: url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2-variations"),
|
||||
url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@ -14,15 +14,21 @@ body {
|
||||
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
font-kerning: normal;
|
||||
-moz-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
|
||||
-ms-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
|
||||
-o-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
|
||||
-webkit-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
|
||||
font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
|
||||
-webkit-font-kerning: normal;
|
||||
-ms-font-kerning: normal;
|
||||
-moz-font-kerning: normal;
|
||||
-o-font-kerning: normal;
|
||||
|
||||
font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
|
||||
-webkit-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
|
||||
-ms-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
|
||||
-moz-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
|
||||
-o-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
|
||||
}
|
||||
|
||||
/* Font style classifiers used by samples and dynmetrics */
|
||||
@ -521,3 +527,39 @@ box h3 {
|
||||
}*/
|
||||
}
|
||||
|
||||
/*
|
||||
Feature helpers.
|
||||
|
||||
Note: font-variant-alternates:character-variant is not yet supported by
|
||||
most browsers, which is why we use the "low leve" font-feature-settings
|
||||
instead.
|
||||
|
||||
*/
|
||||
|
||||
.ff-dlig { font-feature-settings: 'dlig' 1; }
|
||||
.ff-numr { font-feature-settings: 'numr' 1; }
|
||||
.ff-dnom { font-feature-settings: 'dnom' 1; }
|
||||
.ff-tnum { font-feature-settings: 'tnum' 1; }
|
||||
.ff-case { font-feature-settings: 'case' 1; }
|
||||
.ff-zero { font-feature-settings: 'zero' 1; }
|
||||
.ff-frac { font-feature-settings: 'frac' 1; }
|
||||
.ff-sups { font-feature-settings: 'sups' 1; }
|
||||
.ff-subs { font-feature-settings: 'subs' 1; }
|
||||
.ff-cpsp { font-feature-settings: 'cpsp' 1; }
|
||||
.ff-salt { font-feature-settings: 'salt' 1; }
|
||||
.ff-salt-zero { font-feature-settings: 'salt' 1, 'zero' 1; }
|
||||
.ff-cv07-salt-zero { font-feature-settings: 'cv07' 1, 'salt' 1, 'zero' 1; }
|
||||
|
||||
.ff-ss01 { font-feature-settings: 'ss01' 1; }
|
||||
.ff-ss02 { font-feature-settings: 'ss02' 1; }
|
||||
|
||||
.ff-cv01 { font-feature-settings: 'cv01' 1; }
|
||||
.ff-cv02 { font-feature-settings: 'cv02' 1; }
|
||||
.ff-cv03 { font-feature-settings: 'cv03' 1; }
|
||||
.ff-cv04 { font-feature-settings: 'cv04' 1; }
|
||||
.ff-cv05 { font-feature-settings: 'cv05' 1; }
|
||||
.ff-cv06 { font-feature-settings: 'cv06' 1; }
|
||||
.ff-cv07 { font-feature-settings: 'cv07' 1; }
|
||||
.ff-cv08 { font-feature-settings: 'cv08' 1; }
|
||||
.ff-cv09 { font-feature-settings: 'cv09' 1; }
|
||||
.ff-cv10 { font-feature-settings: 'cv10' 1; }
|
||||
|
||||
@ -20,7 +20,7 @@ livesample {
|
||||
color: #111;
|
||||
outline: none;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/*livesample {
|
||||
@ -50,6 +50,7 @@ livesample.s1 {
|
||||
livesample.s2 {
|
||||
/*max-width: 400px;*/
|
||||
font-size: 1em;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
livesample.s3 {
|
||||
font-size: 13px;
|
||||
|
||||
@ -28,29 +28,57 @@ endfor
|
||||
|
||||
<div class="row"><div>
|
||||
<div class="live">
|
||||
<livesample data-ctxedit="sample-x1"
|
||||
style="font-size:80px;line-height:1.0" contenteditable>
|
||||
Interfacing mechanisms
|
||||
|
||||
<livesample data-ctxedit="sample-800-1" spellcheck="false"
|
||||
style="font-weight:800;font-size:60px;line-height:0.72;letter-spacing:-0.04em" contenteditable>
|
||||
Martian™<br>Language Systems Inc.
|
||||
</livesample>
|
||||
|
||||
<livesample data-ctxedit="sample-x2"
|
||||
style="font-weight:100;font-size:80px;line-height:1.2" contenteditable>
|
||||
XP–45 / vessel
|
||||
<livesample data-ctxedit="sample-400-1" spellcheck="false"
|
||||
style="font-weight:400;font-size:18px;line-height:1.0" contenteditable>
|
||||
Interfacing mechanisms are periodically sequencing state
|
||||
</livesample>
|
||||
|
||||
<livesample data-ctxedit="sample-100-1" spellcheck="false"
|
||||
style="font-weight:100;font-size:120px;line-height:1.0;letter-spacing:-0.05em" contenteditable>
|
||||
XP–45 SERVICE
|
||||
</livesample>
|
||||
|
||||
<livesample data-ctxedit="sample-500-1" spellcheck="false"
|
||||
style="font-weight:500;font-size:50px;line-height:1.0;letter-spacing:-0.03em" contenteditable>
|
||||
Default forms G r l ß 1234567890
|
||||
</livesample>
|
||||
|
||||
<livesample data-ctxedit="sample-500-2" spellcheck="false"
|
||||
class="ff-cv07-salt-zero"
|
||||
style="font-weight:500;font-size:50px;line-height:1.0;letter-spacing:-0.03em" contenteditable>
|
||||
Alternate forms G r l ß 1234567890
|
||||
</livesample>
|
||||
|
||||
<livesample data-ctxedit="sample-900-1" spellcheck="false"
|
||||
style="font-weight:900;font-size:170px;line-height:1.0;letter-spacing:-0.05em" contenteditable>
|
||||
Melvetica
|
||||
</livesample>
|
||||
|
||||
<livesample data-ctxedit="sample-600-1" spellcheck="false"
|
||||
style="font-weight:600;font-size:50px;line-height:1.1;letter-spacing:-0.03em" contenteditable>
|
||||
Production filaments are awaiting 340-type transportation in docking bay
|
||||
<span class="ff-cv02">4</span>
|
||||
</livesample>
|
||||
|
||||
<hr>
|
||||
|
||||
<livesample contenteditable class="s1" data-ctxedit="sample1">
|
||||
<livesample contenteditable class="s1" data-ctxedit="sample1" spellcheck="false">
|
||||
Fabulous typography encountering spring
|
||||
</livesample>
|
||||
|
||||
<livesample contenteditable class="s2" data-ctxedit="sample2">
|
||||
<livesample contenteditable class="s2" data-ctxedit="sample2" spellcheck="false">
|
||||
The user interface (UI), in the industrial design field of<br>
|
||||
human-computer interaction, is the space where<br>
|
||||
interactions between humans and machines occur.
|
||||
</livesample>
|
||||
|
||||
<livesample contenteditable class="s3 col3" data-ctxedit="sample3">
|
||||
<livesample contenteditable class="s3 col3" data-ctxedit="sample3" spellcheck="false">
|
||||
<p><b>Fire Island Beach</b> is a barrier of sand, stretching for twenty miles
|
||||
along the south coast of Long Island, and separating the Great South Bay
|
||||
from the Atlantic ocean.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user