mirror of
https://github.com/rsms/inter.git
synced 2024-11-26 02:43:38 +03:00
website update
This commit is contained in:
Rasmus Andersson
parent
1208ea93e0
commit
38a830d0a9
@ -16,6 +16,8 @@ for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/res/base.css" %}{%
|
||||
assign base_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/grid.css" %}{%
|
||||
assign grid_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/base.js" %}{%
|
||||
assign base_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/favicon.png" %}{%
|
||||
@ -33,6 +35,8 @@ endfor
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="{{url_root}}inter.css?v={{ release_version }}">
|
||||
<link rel="stylesheet" href="{{url_root}}res/base.css?v={{ base_css_v }}">
|
||||
<link rel="stylesheet" href="{{url_root}}res/grid.css?v={{ grid_css_v }}">
|
||||
<link rel="stylesheet" href="https://rsms.me/res/fonts/ibm-plex-mono.css">
|
||||
<link rel="icon" type="image/png" href="{{url_root}}res/favicon.png?v={{ favicon_v }}">
|
||||
{% include preload-font-files.html %}
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
@ -25,9 +25,11 @@ if [ "$1" != "" ]; then
|
||||
BINDADDR=$1
|
||||
fi
|
||||
|
||||
# --incremental
|
||||
|
||||
jekyll serve \
|
||||
--incremental \
|
||||
--watch \
|
||||
--host "$BINDADDR" \
|
||||
--port 3002 \
|
||||
--livereload
|
||||
--livereload \
|
||||
--livereload-port 30002
|
||||
|
||||
@ -1,4 +1,24 @@
|
||||
|
||||
h1 {
|
||||
color: #010101;
|
||||
font-size:110px;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.9em;
|
||||
text-indent: -0.03em;
|
||||
margin-bottom: 4rem;
|
||||
margin-top: 10px;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 565px) {
|
||||
h1 {
|
||||
/*font-size: 60px;
|
||||
letter-spacing: -0.045em;
|
||||
text-indent: -0.012em;*/
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#hidden-text-input {
|
||||
position: absolute;
|
||||
left:0;
|
||||
@ -10,27 +30,33 @@
|
||||
}
|
||||
|
||||
.dynmet-calc {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
font-weight: 440;
|
||||
font-size: 1.2rem;
|
||||
line-height: calc(var(--spacingv) * 2);
|
||||
/*font-size: 1.5rem;*/
|
||||
/*line-height: 26px;*/
|
||||
user-select: text;
|
||||
}
|
||||
.dynmet-calc input {
|
||||
border: none;
|
||||
box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
|
||||
/*box-shadow: 0 0.125rem 0 0 rgba(0, 0, 0, 0.3);*/
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
margin: 0 0.2em;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
line-height: inherit;
|
||||
color: #eee;
|
||||
color: var(--red);
|
||||
user-select: text;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
.dynmet-calc input:hover {
|
||||
box-shadow: 0 0 0 0.12rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.dynmet-calc input:focus {
|
||||
color: #fff;
|
||||
box-shadow: inset 0 -2px 0 0 rgb(43, 139, 247);
|
||||
/*box-shadow: 0 2px 0 0 var(--red);*/
|
||||
background: rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.dynmet-calc input[type=number]::-webkit-inner-spin-button,
|
||||
.dynmet-calc input[type=number]::-webkit-outer-spin-button {
|
||||
@ -40,14 +66,14 @@
|
||||
|
||||
.dynmet-calc .arrow {
|
||||
margin: 0 0.5em;
|
||||
color: #eee;
|
||||
/*color: var(--red);*/
|
||||
}
|
||||
|
||||
.dynmet-calc #dynmet-tracking {
|
||||
box-shadow: none;
|
||||
width: 57px;
|
||||
margin-right: 0.1em;
|
||||
color: #eee;
|
||||
color: var(--red);
|
||||
}
|
||||
.dynmet-calc #dynmet-tracking.percent {
|
||||
width: 34px;
|
||||
@ -62,6 +88,13 @@
|
||||
|
||||
|
||||
/* FAQ */
|
||||
grid.faq {
|
||||
grid-row-gap: calc(var(--spacingv) * 3);
|
||||
}
|
||||
.faq .q {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
ul.faq {
|
||||
list-style:none;
|
||||
display: flex;
|
||||
|
||||
298
docs/index.html
298
docs/index.html
@ -25,79 +25,96 @@ endfor
|
||||
<link rel="stylesheet" href="index-var.css?v={{ index_var_css_v }}">
|
||||
<input type="text" id="hidden-text-input">
|
||||
|
||||
<div class="row"><div>
|
||||
<h1>The Inter font family</h1>
|
||||
<p>
|
||||
Inter is a typeface specially designed for user interfaces
|
||||
with focus on high legibility of small-to-medium sized text on computer screens.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div></div>
|
||||
<div class="row white"><div>
|
||||
<h1>The Inter<br>typeface family</h1>
|
||||
<grid columns=8>
|
||||
<c span=2 span-s=row>
|
||||
Inter is a typeface specially designed for computer screens.
|
||||
</c>
|
||||
<c span=3.. span-s=row>
|
||||
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.
|
||||
</c>
|
||||
|
||||
<div class="row white" style="padding-bottom:0"><div>
|
||||
<p id="samples" class="samples items sample-images">
|
||||
<a href="samples/" class="plain"><img src="samples/img/01.png" srcset="samples/img/01@2x.png 2x" width="888"></a>
|
||||
</p>
|
||||
<p style="text-align:center">
|
||||
<a href="samples/" class="plain">More samples -></a>
|
||||
<br><br>
|
||||
</p>
|
||||
</div></div>
|
||||
<c class="spacer"></c>
|
||||
|
||||
<div class="row dark"><div>
|
||||
<c span=2 span-s=row>
|
||||
<h3><span class="only-large-screen">Inter Bold<br></span>Sample</h3>
|
||||
</c>
|
||||
<c span=3.. span-s=row>
|
||||
<a href="samples/" class="plain"><img src="samples/img/lineup-bold-red.svg" width="100%"></a>
|
||||
</c>
|
||||
|
||||
<h2><a id="usage" href="#usage">How do I use it?</a></h2>
|
||||
<p>
|
||||
Using the font is as easy as
|
||||
<a class="download-link" href="{{download_url}}">downloading & installing</a> on your computer.
|
||||
</p>
|
||||
<p>
|
||||
You're free to bundle copies of Inter with your software, even if it's
|
||||
commercial and you charge money for your software. Inter can also be used
|
||||
on the web by either hosting the font files yourself or by including this CSS:
|
||||
</p>
|
||||
<pre>@import url('https://rsms.me/inter/inter.css');
|
||||
<c class="spacer"></c>
|
||||
|
||||
<c span=2 span-s=row>
|
||||
<h3><span class="only-large-screen">Inter Regular<br></span>Sample</h3>
|
||||
</c>
|
||||
<c span=3.. span-s=row>
|
||||
<a href="samples/" class="plain"><img src="samples/img/sample-regular-text.svg" width="100%"></a>
|
||||
</c>
|
||||
|
||||
<c class="spacer"></c>
|
||||
|
||||
<c span=2 span-s=row>
|
||||
<h3><a id="usage" href="#usage">Using</a></h3>
|
||||
</c>
|
||||
<c span=3.. span-s=row>
|
||||
<p>
|
||||
Using Inter is as easy as
|
||||
<a class="download-link" href="{{download_url}}">downloading & installing</a>
|
||||
the font files. If you're making a web thing, you can simply use this CSS:
|
||||
</p>
|
||||
<pre>@import url('https://rsms.me/inter/inter.css');
|
||||
html { font-family: 'Inter', sans-serif; }
|
||||
@supports (font-variation-settings: normal) {
|
||||
html { font-family: 'Inter var', sans-serif; }
|
||||
}</pre>
|
||||
</c>
|
||||
|
||||
<p> </p>
|
||||
<c class="spacer"></c>
|
||||
|
||||
<h2 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h2>
|
||||
<p class="dynmet-calc">
|
||||
Size
|
||||
<input id="dynmet-font-size" type="number" value="16" min="4" max="99"
|
||||
><span title='Display points — "px" in CSS, "pt" on iOS, "sp" on Android, and "pt" (1/72 of an inch) in print'>dp</span>
|
||||
<span class="arrow">=</span>
|
||||
<span title='letter-spacing in CSS; also called "tracking" in some software.'>spacing
|
||||
<input id="dynmet-tracking" type="number" value="0.008">
|
||||
<span id="dynmet-unit">em</span>
|
||||
</p>
|
||||
<p>
|
||||
There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter <em>Dynamic Metrics</em> provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results.
|
||||
</p>
|
||||
<p>
|
||||
<a href="dynmetrics/">Learn more…</a>
|
||||
</p>
|
||||
<c span=2 span-s=row>
|
||||
<h3 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h3>
|
||||
</c>
|
||||
<c span=3.. span-s=row>
|
||||
<p class="dynmet-calc">
|
||||
Size
|
||||
<input id="dynmet-font-size" type="number" value="16" min="4" max="99" autocomplete="off" spellcheck="false"
|
||||
><span title='Display points — "px" in CSS, "pt" on iOS, "sp" on Android, and "pt" (1/72 of an inch) in print'>dp</span>
|
||||
<span class="arrow">=</span>
|
||||
<span title='letter-spacing in CSS; also called "tracking" in some software.'>spacing
|
||||
<input id="dynmet-tracking" type="number" value="0.008" autocomplete="off" spellcheck="false">
|
||||
<span id="dynmet-unit">em</span>
|
||||
</p>
|
||||
<p>
|
||||
There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter <em>Dynamic Metrics</em> provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results.
|
||||
</p>
|
||||
<p>
|
||||
<a href="dynmetrics/" class="plain">Explore dynamic metrics →</a>
|
||||
</p>
|
||||
</c>
|
||||
|
||||
<p> </p>
|
||||
<c class="spacer"></c>
|
||||
|
||||
<h2><a id="free" href="#free">How much does it cost?</a></h2>
|
||||
<p>
|
||||
Inter is a <a href="https://github.com/rsms/inter">free and open source</a> font family.<br>
|
||||
You are free to use this font in almost any way imaginable.<br>
|
||||
Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are.
|
||||
</p>
|
||||
<c span=2 span-s=row>
|
||||
<h3><a id="free" href="#free">Free & <br class="only-large-screen">Open source</a></h3>
|
||||
</c>
|
||||
<c span=3.. span-s=row>
|
||||
<p>
|
||||
Inter is a <a href="https://github.com/rsms/inter">free and open source</a> font family.<br>
|
||||
You are free to use this font in almost any way imaginable.<br>
|
||||
Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are.
|
||||
</p>
|
||||
</c>
|
||||
|
||||
</grid>
|
||||
</div></div>
|
||||
|
||||
|
||||
<div class="row"><div>
|
||||
<h2><a id="weights" href="#weights">Weights & Styles</a></h2>
|
||||
<p>
|
||||
@ -205,16 +222,16 @@ html { font-family: 'Inter', sans-serif; }
|
||||
|
||||
%}
|
||||
{% if has_feature_col %}
|
||||
<grid class="c8">
|
||||
<c span="1" class="low-contrast ">Feature</c>
|
||||
<c span="3" class="low-contrast">Disabled</c>
|
||||
<c span="1" class="low-contrast center-text">→</c>
|
||||
<c span="3" class="low-contrast">Enabled</c>
|
||||
<grid columns=8>
|
||||
<c span=1 class="low-contrast ">Feature</c>
|
||||
<c span=3 class="low-contrast">Disabled</c>
|
||||
<c span=1 class="low-contrast center-text">→</c>
|
||||
<c span=3 class="low-contrast">Enabled</c>
|
||||
{% else %}
|
||||
<grid class="c9">
|
||||
<c span="4" class="low-contrast">Disabled</c>
|
||||
<c span="1" class="low-contrast center-text">→</c>
|
||||
<c span="4" class="low-contrast">Enabled</c>
|
||||
<grid columns=9>
|
||||
<c span=4 class="low-contrast">Disabled</c>
|
||||
<c span=1 class="low-contrast center-text">→</c>
|
||||
<c span=4 class="low-contrast">Enabled</c>
|
||||
{% endif %}
|
||||
{% for s in f.samples %}
|
||||
{%
|
||||
@ -230,14 +247,14 @@ html { font-family: 'Inter', sans-serif; }
|
||||
assign sample_out = sample | remove: "›" | remove: "‹"
|
||||
|
||||
%} {% if has_feature_col %}
|
||||
<c span="1" class="">{{feat_tag}}</c>
|
||||
<c span="3" class="sample ff-none">{{sample_in}}</c>
|
||||
<c span="1" class="low-contrast center-text">→</c>
|
||||
<c span="3" class="sample ff-{{feat_tag}}">{{sample_out}}</c>
|
||||
<c span=1 class="">{{feat_tag}}</c>
|
||||
<c span=3 class="sample ff-none">{{sample_in}}</c>
|
||||
<c span=1 class="low-contrast center-text">→</c>
|
||||
<c span=3 class="sample ff-{{feat_tag}}">{{sample_out}}</c>
|
||||
{% else %}
|
||||
<c span="4" class="sample ff-none">{{sample_in}}</c>
|
||||
<c span="1" class="low-contrast center-text">→</c>
|
||||
<c span="4" class="sample ff-{{feat_tag}}">{{sample_out}}</c>
|
||||
<c span=4 class="sample ff-none">{{sample_in}}</c>
|
||||
<c span=1 class="low-contrast center-text">→</c>
|
||||
<c span=4 class="sample ff-{{feat_tag}}">{{sample_out}}</c>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</grid>
|
||||
@ -266,63 +283,59 @@ html { font-family: 'Inter', sans-serif; }
|
||||
<br>
|
||||
You can explore features in the <a href="lab/">interactive lab</a>.
|
||||
</p>
|
||||
|
||||
<p> </p>
|
||||
|
||||
<h2 class="banner"><a href="glyphs/">Browse all glyphs -></a></h2>
|
||||
</div></div>
|
||||
|
||||
<div class="row-divider"></div>
|
||||
|
||||
<div class="row"><div>
|
||||
<div class="row white"><div>
|
||||
<h2><a id="story" href="#story">The story behind Inter</a></h2>
|
||||
<p>
|
||||
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
|
||||
by crafting a font in a particular way, with a particular coordinate system
|
||||
(Units Per EM), and for a particular target rasterization size (11), it would
|
||||
be possible to get the best of both sharpness and readability.
|
||||
</p>
|
||||
<p>
|
||||
However after a few months of using an early version of Inter, it dawned
|
||||
on everyone exposed to the test that this approach had some serious real-world
|
||||
problems. Most notably that it was really hard to read longer text. Because of
|
||||
the pixel-aligning nature of that approach, the font took an almost
|
||||
<a href="https://www.figma.com/file/HPqDViSCB8fAWuxaV2ousFMv">mono-spaced appearance</a>,
|
||||
making it really easy to read numbers, punctuation and very short
|
||||
words, but eye-straining to read anything longer.
|
||||
</p>
|
||||
<p>
|
||||
The project was rebooted with a different approach, sticking with the
|
||||
specific UPM, but crafting glyphs and kerning in a way that made for
|
||||
more variation in the rhythm and smoother vertical and horizontal stems.
|
||||
As Inter was being developed, it was tested on an internal version of
|
||||
<a href="https://www.figma.com/">Figma</a>—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback.
|
||||
</p>
|
||||
<flow columns=2 columns-s=1>
|
||||
<p>
|
||||
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
|
||||
by crafting a font in a particular way, with a particular coordinate system
|
||||
(Units Per EM), and for a particular target rasterization size (11), it would
|
||||
be possible to get the best of both sharpness and readability.
|
||||
</p>
|
||||
<p>
|
||||
However after a few months of using an early version of Inter, it dawned
|
||||
on everyone exposed to the test that this approach had some serious real-world
|
||||
problems. Most notably that it was really hard to read longer text. Because of
|
||||
the pixel-aligning nature of that approach, the font took an almost
|
||||
<a href="https://www.figma.com/file/HPqDViSCB8fAWuxaV2ousFMv">mono-spaced appearance</a>,
|
||||
making it really easy to read numbers, punctuation and very short
|
||||
words, but eye-straining to read anything longer.
|
||||
</p>
|
||||
<p>
|
||||
The project was rebooted with a different approach, sticking with the
|
||||
specific UPM, but crafting glyphs and kerning in a way that made for
|
||||
more variation in the rhythm and smoother vertical and horizontal stems.
|
||||
As Inter was being developed, it was tested on an internal version of
|
||||
<a href="https://www.figma.com/">Figma</a>—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback.
|
||||
</p>
|
||||
</flow>
|
||||
|
||||
<p> </p>
|
||||
|
||||
<h2><a id="faq" href="#faq">FAQ</a></h2>
|
||||
<ul class="faq">
|
||||
<grid columns=2 columns-s=1 class="faq">
|
||||
|
||||
<li class="q" id="faq-using-features">
|
||||
How do I enable and disable font features?
|
||||
</li>
|
||||
<li class="a">
|
||||
<c>
|
||||
<h4 id="faq-using-features">
|
||||
How do I enable and disable font features?
|
||||
</h4>
|
||||
In web browsers you'll want to use
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings"><q>font-feature-settings</q></a>.
|
||||
In Figma you can access features via the
|
||||
<a href="https://help.figma.com/text/opentype-features">Advanced Typography panel.</a>
|
||||
<a href="https://help.figma.com/article/250-working-with-fonts#opentype">Advanced Type panel.</a>
|
||||
In Illustrator, Photoshop and friends, you can access features via the
|
||||
<a href="https://helpx.adobe.com/illustrator/using/special-characters.html#opentype_panel_overview">Characters and OpenType panels.</a>
|
||||
Sketch doesn't provide a UI for configuring font features, but there's
|
||||
<a href="https://sketchtalk.io/discussion/comment/1478/#Comment_1478">a workaround using macOS's native font UI.</a>
|
||||
</li>
|
||||
</c>
|
||||
|
||||
<li class="q" id="faq-unhinted-vs-hinted">
|
||||
What is the difference between "unhinted" and "hinted" font files?
|
||||
</li>
|
||||
<li class="a">
|
||||
<c>
|
||||
<h4 id="faq-unhinted-vs-hinted">
|
||||
What is the difference between "unhinted" and "hinted" font files?
|
||||
</h4>
|
||||
The font files in the "hinted" folders have additional data in them
|
||||
for assisting
|
||||
<a href="https://en.wikipedia.org/wiki/ClearType">ClearType</a>,
|
||||
@ -334,23 +347,22 @@ html { font-family: 'Inter', sans-serif; }
|
||||
consideration to make.
|
||||
<a href="https://www.typotheque.com/articles/hinting">
|
||||
This article explains hinting at a greater length.</a>
|
||||
</li>
|
||||
</c>
|
||||
|
||||
|
||||
<li class="q" id="faq-cdn">
|
||||
How reliable are the fonts served from rsms.me/inter? Is it on a CDN?
|
||||
</li>
|
||||
<li class="a">
|
||||
<c>
|
||||
<h4 id="faq-cdn">
|
||||
How reliable are the fonts served from rsms.me/inter? Is it on a CDN?
|
||||
</h4>
|
||||
rsms.me/inter is backed by GitHub's server network and distributed
|
||||
globally on the CloudFlare CDN, making usage of
|
||||
<q>https://rsms.me/inter/inter.css</q> and associated font
|
||||
files very reliable and fast throughout the world.
|
||||
</li>
|
||||
</c>
|
||||
|
||||
<li class="q" id="faq-contribute">
|
||||
Can I help with improving Inter?
|
||||
</li>
|
||||
<li class="a">
|
||||
<c>
|
||||
<h4 id="faq-contribute">
|
||||
Can I help with improving Inter?
|
||||
</h4>
|
||||
Yes you can! Inter is an open-source project, meaning the source
|
||||
code—or "source design" if you will—that is used to build the font files
|
||||
<a href="https://github.com/rsms/inter">are freely available</a> to improve upon.
|
||||
@ -360,12 +372,12 @@ html { font-family: 'Inter', sans-serif; }
|
||||
The <a href="https://github.com/rsms/inter/blob/master/CONTRIBUTING.md">"Contributing" document</a> is a great place to start. The document outlines where
|
||||
you can have the biggest impact, how things are setup and how to get
|
||||
started.
|
||||
</li>
|
||||
</c>
|
||||
|
||||
<li class="q" id="faq-start-date">
|
||||
This website claims work started in 2016, but the git repository's log says it started later?
|
||||
</li>
|
||||
<li class="a">
|
||||
<c>
|
||||
<h4 id="faq-start-date">
|
||||
This website claims work started in 2016, but the git repository's log says it started later?
|
||||
</h4>
|
||||
Inter was developed in an a private, internal git repository
|
||||
starting in November 2016, prior to being published on August 22, 2017.
|
||||
Between November 2016 and August 2017, there were
|
||||
@ -377,26 +389,22 @@ html { font-family: 'Inter', sans-serif; }
|
||||
all commit messages. Maybe one day we can write an elaborate git
|
||||
filter-branch program and convert the filter the old repository to make
|
||||
it public, but what would be the point of that? :—)
|
||||
</li>
|
||||
</c>
|
||||
|
||||
<li class="q" id="faq-contact">
|
||||
I've made a cool thing that uses Inter, can I share it with you?
|
||||
<dem>or</dem>
|
||||
</li>
|
||||
<li class="q">
|
||||
I have a different question
|
||||
</li>
|
||||
<li class="a">
|
||||
<c>
|
||||
<h4 id="faq-contact">
|
||||
I've made a cool thing that uses Inter, can I share it with you?<br>
|
||||
or, I have a different question.
|
||||
</h4>
|
||||
Reach out on <a href="https://twitter.com/rsms">Twitter (@rsms)</a> or over <a href="mailto:rasmus@notion.se">email</a>
|
||||
</li>
|
||||
</c>
|
||||
|
||||
|
||||
</ul>
|
||||
</grid>
|
||||
|
||||
</div></div>
|
||||
|
||||
|
||||
<div class="row"><div>
|
||||
<div class="row white"><div>
|
||||
— <a href="https://twitter.com/rsms" class="plain">@rsms</a>
|
||||
</div></div>
|
||||
|
||||
|
||||
@ -172,8 +172,8 @@ B-O B–O B‒O B—O M•N ⌘-
|
||||
-Selvece
|
||||
darest-Selvece
|
||||
b-o b–o b‒o b—o m•n
|
||||
•Xerox •xoom ◦Xerox ◦xoom
|
||||
⁃Xerox ⁃xoom ‣Xerox ‣xoom
|
||||
•Xerox •xoom ◦Xerox ◦xoom ⁍Xerox ⁍xoom
|
||||
⁃Xerox ⁃xoom ‣Xerox ‣xoom ⁌Xerox ⁌xoom
|
||||
X- . X--
|
||||
X - . X --
|
||||
X - . X --
|
||||
@ -428,20 +428,13 @@ da 27. es 38. an 87, in 68, 674
|
||||
|
||||
|
||||
samples.set('Symbols', `
|
||||
→ ⟶ ← ⟵ ↑ ↓ ↖ ↗ ↘ ↙ \u2713 \u2717
|
||||
► Next (U+25BA)
|
||||
◀ Previous (U+25C0)
|
||||
▼ AMZ (U+25BC)
|
||||
▲ FBX (U+25B2)
|
||||
◆ King (U+25C6)
|
||||
● Black Circle (U+25CF)
|
||||
○ White Circle (U+25CB)
|
||||
⌘ Place of interest (U+2318)
|
||||
\uE001 Registration (private-area, U+E001)
|
||||
\u25C6 Black Diamond (U+25C6)
|
||||
\u2756 Black Diamond crossed (U+2756)
|
||||
\u25C7 White Diamond (U+25C7)
|
||||
\uE000 White Diamond crossed (private-area, U+E000)
|
||||
← ⟵ → ⟶ ↑ ↓ ↕
|
||||
↖ ↗ ↘ ↙ ↔ ⟷ ↩ ↪
|
||||
↵ ↳ ↰ ↱ ↴ ⇤ ⇥ ⇞ ⇟ ✓ ✗
|
||||
● ○ ◆ ◇ ❖ ► ▼ ▲ ◀
|
||||
☀ ☼ ♥ ♡ ⬆ ⇧
|
||||
⌫ ⌧ ⌦ ⎋ ↺ ↻
|
||||
⌘ ⇧ ⇪ ⌃ ⌅ ⌥ ⎇ ⏏
|
||||
`)
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
:root {
|
||||
--fontSize: 15px;
|
||||
/*--emsAcrossViewport: 80;
|
||||
--fontSize: calc(100vw / var(--emsAcrossViewport));*/
|
||||
|
||||
--lineHeight: calc(var(--fontSize) * 1.5);
|
||||
|
||||
--spacing: 2rem;
|
||||
--spacingv: calc(var(--lineHeight) / 2);
|
||||
|
||||
--gridGapCol: var(--spacing);
|
||||
--gridGapRow: calc(var(--spacing) / 2);
|
||||
|
||||
--red: #F02D09;
|
||||
}
|
||||
|
||||
* { margin:0; padding:0; font-synthesis: none; }
|
||||
html { }
|
||||
body {
|
||||
@ -5,12 +21,15 @@ body {
|
||||
color: #111;
|
||||
font: 15px/22px 'Inter', system-ui, sans-serif;
|
||||
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
/*font-size: 15px;
|
||||
line-height: 1.5;*/
|
||||
|
||||
font-size: var(--fontSize);
|
||||
line-height: var(--lineHeight);
|
||||
|
||||
letter-spacing: -0.004em;
|
||||
|
||||
font-weight: 400;
|
||||
padding-bottom: 30px;
|
||||
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
@ -89,12 +108,13 @@ a[href^="#"]:hover {
|
||||
text-decoration-style: dashed;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 20px 0;
|
||||
}
|
||||
code, pre, q {
|
||||
font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace;
|
||||
font-size:0.96em;
|
||||
/*p, pre {
|
||||
margin: 1rem 0;
|
||||
}*/
|
||||
code, pre, q, tt {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-feature-settings: 'ss02' 1, 'zero' 1;
|
||||
line-height: inherit;
|
||||
}
|
||||
code {
|
||||
display: block;
|
||||
@ -102,7 +122,10 @@ code {
|
||||
padding: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
pre, q {
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
q {
|
||||
display: inline;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@ -149,29 +172,84 @@ small {
|
||||
letter-spacing: 0.012em;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 500;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
h1 {
|
||||
/*h1, .h1 {
|
||||
color: #222;
|
||||
font-size: 55px;
|
||||
letter-spacing: -0.038em;
|
||||
line-height: 1.1em;
|
||||
text-indent: -2px;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 30px;
|
||||
margin-bottom: 25px;
|
||||
h1 {
|
||||
margin-bottom: 30px;
|
||||
margin-top: 10px;
|
||||
}*/
|
||||
h1, .h1 {
|
||||
margin-left: calc(3rem / -20);
|
||||
font-weight: 700;
|
||||
font-size: 4rem;
|
||||
letter-spacing: -0.07em;
|
||||
line-height: calc(var(--spacingv) * 6);
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: calc(var(--spacingv) * 2);
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-weight: 700;
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: calc(var(--spacingv) * 3);
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: calc(var(--spacingv) * 2);
|
||||
}
|
||||
h3, .h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: -0.018em;
|
||||
line-height: calc(var(--spacingv) * 2);
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: calc(var(--spacingv) * 2);
|
||||
}
|
||||
|
||||
h3 q, h3. q {
|
||||
font-weight: 400;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
h1 > a, h2 > a, h3 > a, h4 > a,
|
||||
.h1 > a, .h2 > a, .h3 > a, .h4 > a {
|
||||
color: inherit;
|
||||
text-decoration: none !important;
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
h4, h5, h6, .h4, .h5, .h6 {
|
||||
font-weight: 640;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
margin-bottom: calc(var(--spacingv) * 1);
|
||||
}
|
||||
/* add top margin to Hn when it follows another element */
|
||||
* + h1 { margin-top: calc(var(--spacingv) * 6); }
|
||||
* + h2 { margin-top: calc(var(--spacingv) * 4); }
|
||||
* + h3 { margin-top: calc(var(--spacingv) * 3); }
|
||||
* + h4 { margin-top: calc(var(--spacingv) * 2); }
|
||||
|
||||
p, pre, p + grid, pre + grid {
|
||||
margin-bottom: var(--lineHeight);
|
||||
}
|
||||
|
||||
|
||||
.row.dark h2,
|
||||
.row.black h2 {
|
||||
letter-spacing: -0.014em;
|
||||
@ -208,26 +286,10 @@ h2.banner {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.row.dark h3,
|
||||
.row.black h3 {
|
||||
letter-spacing: -0.012em;
|
||||
}
|
||||
h3 q {
|
||||
font-weight: 400;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
h1 > a, h2 > a, h3 > a {
|
||||
color: inherit;
|
||||
text-decoration: none !important;
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 50px;
|
||||
@ -262,15 +324,18 @@ h1 > a, h2 > a, h3 > a {
|
||||
}
|
||||
|
||||
.row-divider {
|
||||
margin:0 auto;
|
||||
height: 1rem;
|
||||
/*margin: 0 auto;
|
||||
max-width: 888px;
|
||||
height: 1px;
|
||||
border-bottom: 1px dashed rgba(0,0,0,0.09);
|
||||
height: 0.11rem;
|
||||
background: black;*/
|
||||
}
|
||||
|
||||
.row.menu {
|
||||
padding: 0;
|
||||
border-bottom:1px solid rgba(0,0,0,0.1);
|
||||
background: #111;
|
||||
color: white;
|
||||
}
|
||||
.row.menu ul {
|
||||
width: auto;
|
||||
@ -284,27 +349,38 @@ h1 > a, h2 > a, h3 > a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row.menu ul li {
|
||||
margin-right: 50px;
|
||||
/*margin-right: 50px;*/
|
||||
margin-bottom: -1px;
|
||||
text-indent: -0.5px;
|
||||
text-align: center;
|
||||
}
|
||||
.row.menu ul li > a {
|
||||
color: inherit;
|
||||
opacity: 0.6;
|
||||
opacity: 0.8;
|
||||
text-decoration:none;
|
||||
display: inline-block;
|
||||
padding: 15px 0 13px 0;
|
||||
transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);
|
||||
border-bottom: 3px solid transparent;
|
||||
padding: 15px 25px 13px 25px;
|
||||
/*transition: 80ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);*/
|
||||
/*border-bottom: 3px solid transparent;*/
|
||||
}
|
||||
.row.menu ul li > a:hover, .row.menu ul li > a.active {
|
||||
color: black;
|
||||
border-bottom-color: black;
|
||||
color: white;
|
||||
background: var(--red);
|
||||
border-bottom-color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.row.menu ul li:first-child > a {
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
margin-right: 25px;
|
||||
background:transparent;
|
||||
}
|
||||
.row.menu ul li > a.active {
|
||||
font-weight:600;
|
||||
}
|
||||
.row.menu ul li.home > a {
|
||||
font-weight: 500;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -396,22 +472,21 @@ tablex {
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------- */
|
||||
/*
|
||||
grid with 4 major columns subdivided twice
|
||||
/* grid */
|
||||
|
||||
| | | | |
|
||||
| 1 | 2 | 3 | 4 |
|
||||
| | | | |
|
||||
| | | | |
|
||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|
||||
| | | | | | | | |
|
||||
| | | | | | | | |
|
||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
|
||||
| | | | | | | | | | | | | | | | |
|
||||
| | | | | | | | | | | | | | | | |
|
||||
grid {
|
||||
grid-column-gap: 2rem;
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
grid > c.spacer {
|
||||
grid-column: 1 / -1;
|
||||
height: calc(var(--spacingv) * 6);
|
||||
}
|
||||
|
||||
|
||||
*/
|
||||
@media only screen and (max-width: 565px) {
|
||||
grid { grid-column-gap: 1rem; }
|
||||
grid > c.spacer { height: calc(var(--spacingv) * 3); }
|
||||
}
|
||||
|
||||
.row.features { display:none; }
|
||||
@supports (display: grid) {
|
||||
@ -419,105 +494,28 @@ grid with 4 major columns subdivided twice
|
||||
}
|
||||
.row.features p.example { margin-top:2rem; opacity:0.4; }
|
||||
|
||||
grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
.row.features grid {
|
||||
grid-column-gap: 1rem;
|
||||
grid-row-gap: 1rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
grid.c4 { grid-template-columns: repeat(4, 1fr); }
|
||||
grid.c8 { grid-template-columns: repeat(8, 1fr); }
|
||||
grid.c9 { grid-template-columns: repeat(9, 1fr); }
|
||||
grid.c16 { grid-template-columns: repeat(16, 1fr); }
|
||||
/*grid, grid4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}*/
|
||||
c {
|
||||
display: block;
|
||||
grid-column-end: span 1;
|
||||
|
||||
/* --------------------------------------------------------------------- */
|
||||
/* flow */
|
||||
|
||||
flow { display:block; appearance: none; -webkit-appearance: none }
|
||||
flow[columns] {
|
||||
column-gap: var(--spacing);
|
||||
/*column-fill: balance;*/
|
||||
}
|
||||
c[start="1"] { grid-column-start: 1; }
|
||||
c[start="2"] { grid-column-start: 2; }
|
||||
c[start="3"] { grid-column-start: 3; }
|
||||
c[start="4"] { grid-column-start: 4; }
|
||||
c[start="5"] { grid-column-start: 5; }
|
||||
c[start="6"] { grid-column-start: 6; }
|
||||
c[start="7"] { grid-column-start: 7; }
|
||||
c[start="8"] { grid-column-start: 8; }
|
||||
c[start="9"] { grid-column-start: 9; }
|
||||
|
||||
c[span="1"] { grid-column-end: span 1; }
|
||||
c[span="2"] { grid-column-end: span 2; }
|
||||
c[span="3"] { grid-column-end: span 3; }
|
||||
c[span="4"] { grid-column-end: span 4; }
|
||||
c[span="5"] { grid-column-end: span 5; }
|
||||
c[span="6"] { grid-column-end: span 6; }
|
||||
c[span="7"] { grid-column-end: span 7; }
|
||||
c[span="8"] { grid-column-end: span 8; }
|
||||
c[span="9"] { grid-column-end: span 9; }
|
||||
|
||||
c[span="1-1"] { grid-column: 1 / 1; }
|
||||
c[span="2-5"] { grid-column: 2 / 5; }
|
||||
c[span="2-4"] { grid-column: 2 / 4; }
|
||||
|
||||
grid.c4 c[span="2..."], c[span="2.."] { grid-column: 2 / 5; }
|
||||
grid.c8 c[span="2..."], c[span="2.."] { grid-column: 2 / 9; }
|
||||
|
||||
/* .debug can be added to a grid to visualize its effective cells.
|
||||
.debug-color applies alternating colors. */
|
||||
grid.debug > *, grid.debug-color > * {
|
||||
--color: rgba(250, 230, 0, 0.2);
|
||||
background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
|
||||
flow[columns="2"] {
|
||||
column-count: 2;
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
flow[columns-s="1"] {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
grid.debug > :nth-child(4n+2) { --color: rgba(250, 0, 0, 0.1); }
|
||||
grid.debug > :nth-child(4n+3) { --color: rgba(40, 120, 255, 0.1); }
|
||||
grid.debug > :nth-child(4n+4) { --color: rgba(0, 230, 80, 0.17); }
|
||||
|
||||
.col-all { grid-column: 1 / span 16; }
|
||||
|
||||
.col-1 { grid-column: 1 / span 2; }
|
||||
.col-1-2 { grid-column: 1 / span 4; }
|
||||
.col-1-3 { grid-column: 1 / span 6; }
|
||||
.col-1-4 { grid-column: 1 / span 8; }
|
||||
.col-1-5 { grid-column: 1 / span 10; }
|
||||
.col-1-6 { grid-column: 1 / span 12; }
|
||||
.col-1-7 { grid-column: 1 / span 14; }
|
||||
.col-1-8 { grid-column: 1 / span 16; }
|
||||
|
||||
.col-2 { grid-column: 2 / span 2; }
|
||||
.col-2-2 { grid-column: 2 / span 4; }
|
||||
.col-2-3 { grid-column: 2 / span 6; }
|
||||
.col-2-4 { grid-column: 2 / span 8; }
|
||||
.col-2-5 { grid-column: 2 / span 10; }
|
||||
.col-2-6 { grid-column: 2 / span 12; }
|
||||
.col-2-7 { grid-column: 2 / span 14; }
|
||||
|
||||
.col-3 { grid-column: 3 / span 2; }
|
||||
.col-3-2 { grid-column: 3 / span 4; }
|
||||
.col-3-3 { grid-column: 3 / span 6; }
|
||||
.col-3-4 { grid-column: 3 / span 8; }
|
||||
.col-3-5 { grid-column: 3 / span 10; }
|
||||
.col-3-6 { grid-column: 3 / span 12; }
|
||||
|
||||
.col-4 { grid-column: 4 / span 2; }
|
||||
.col-4-2 { grid-column: 4 / span 4; }
|
||||
.col-4-3 { grid-column: 4 / span 6; }
|
||||
.col-4-4 { grid-column: 4 / span 8; }
|
||||
.col-4-5 { grid-column: 4 / span 10; }
|
||||
|
||||
.col-5 { grid-column: 5 / span 2; }
|
||||
.col-5-2 { grid-column: 5 / span 4; }
|
||||
.col-5-3 { grid-column: 5 / span 6; }
|
||||
.col-5-4 { grid-column: 5 / span 8; }
|
||||
|
||||
.col-6 { grid-column: 6 / span 2; }
|
||||
.col-6-2 { grid-column: 6 / span 4; }
|
||||
.col-6-3 { grid-column: 6 / span 6; }
|
||||
|
||||
.col-7 { grid-column: 7 / span 2; }
|
||||
.col-7-2 { grid-column: 7 / span 4; }
|
||||
|
||||
.col-8 { grid-column: 8 / span 2; }
|
||||
|
||||
/* --------------------------------------------------------------------- */
|
||||
|
||||
@ -593,14 +591,15 @@ box.large tablex r out {
|
||||
|
||||
/* ------------------------------------------------------ */
|
||||
|
||||
|
||||
/* wide windows */
|
||||
@media only screen and (min-width: 566px) {
|
||||
.narrow-window { display: none; }
|
||||
.narrow-window, .only-small-screen { display: none; }
|
||||
}
|
||||
|
||||
/* narrow windows */
|
||||
@media only screen and (max-width: 565px) {
|
||||
.wide-window { display: none; }
|
||||
.wide-window, .only-large-screen { display: none; }
|
||||
.row.menu ul {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
341
docs/res/grid.css
Normal file
341
docs/res/grid.css
Normal file
@ -0,0 +1,341 @@
|
||||
/* Raster Simple CSS Grid System, version 3 */
|
||||
grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
--grid-cs: 1; /* start */
|
||||
--grid-ce: -1 /* end */
|
||||
}
|
||||
|
||||
/* c -- cell or column */
|
||||
grid > c { display: block; appearance: none; -webkit-appearance: none }
|
||||
|
||||
grid[columns="1"] { grid-template-columns: repeat(1, 1fr) }
|
||||
grid[columns="2"] { grid-template-columns: repeat(2, 1fr) }
|
||||
grid[columns="3"] { grid-template-columns: repeat(3, 1fr) }
|
||||
grid[columns="4"] { grid-template-columns: repeat(4, 1fr) }
|
||||
grid[columns="5"] { grid-template-columns: repeat(5, 1fr) }
|
||||
grid[columns="6"] { grid-template-columns: repeat(6, 1fr) }
|
||||
grid[columns="7"] { grid-template-columns: repeat(7, 1fr) }
|
||||
grid[columns="8"] { grid-template-columns: repeat(8, 1fr) }
|
||||
grid[columns="9"] { grid-template-columns: repeat(9, 1fr) }
|
||||
grid[columns="10"] { grid-template-columns: repeat(10, 1fr) }
|
||||
grid[columns="11"] { grid-template-columns: repeat(11, 1fr) }
|
||||
grid[columns="12"] { grid-template-columns: repeat(12, 1fr) }
|
||||
grid[columns="13"] { grid-template-columns: repeat(13, 1fr) }
|
||||
grid[columns="14"] { grid-template-columns: repeat(14, 1fr) }
|
||||
grid[columns="15"] { grid-template-columns: repeat(15, 1fr) }
|
||||
grid[columns="16"] { grid-template-columns: repeat(16, 1fr) }
|
||||
grid[columns="17"] { grid-template-columns: repeat(17, 1fr) }
|
||||
grid[columns="18"] { grid-template-columns: repeat(18, 1fr) }
|
||||
grid[columns="19"] { grid-template-columns: repeat(19, 1fr) }
|
||||
grid[columns="20"] { grid-template-columns: repeat(20, 1fr) }
|
||||
grid[columns="21"] { grid-template-columns: repeat(21, 1fr) }
|
||||
grid[columns="22"] { grid-template-columns: repeat(22, 1fr) }
|
||||
grid[columns="23"] { grid-template-columns: repeat(23, 1fr) }
|
||||
grid[columns="24"] { grid-template-columns: repeat(24, 1fr) }
|
||||
grid[columns="25"] { grid-template-columns: repeat(25, 1fr) }
|
||||
grid[columns="26"] { grid-template-columns: repeat(26, 1fr) }
|
||||
grid[columns="27"] { grid-template-columns: repeat(27, 1fr) }
|
||||
grid[columns="28"] { grid-template-columns: repeat(28, 1fr) }
|
||||
grid[columns="29"] { grid-template-columns: repeat(29, 1fr) }
|
||||
grid[columns="30"] { grid-template-columns: repeat(30, 1fr) }
|
||||
|
||||
/* span=start... */
|
||||
grid > c[span^="1"] { --grid-cs: 1 }
|
||||
grid > c[span^="2"] { --grid-cs: 2 }
|
||||
grid > c[span^="3"] { --grid-cs: 3 }
|
||||
grid > c[span^="4"] { --grid-cs: 4 }
|
||||
grid > c[span^="5"] { --grid-cs: 5 }
|
||||
grid > c[span^="6"] { --grid-cs: 6 }
|
||||
grid > c[span^="7"] { --grid-cs: 7 }
|
||||
grid > c[span^="8"] { --grid-cs: 8 }
|
||||
grid > c[span^="9"] { --grid-cs: 9 }
|
||||
grid > c[span^="10"] { --grid-cs: 10 }
|
||||
grid > c[span^="11"] { --grid-cs: 11 }
|
||||
grid > c[span^="12"] { --grid-cs: 12 }
|
||||
grid > c[span^="13"] { --grid-cs: 13 }
|
||||
grid > c[span^="14"] { --grid-cs: 14 }
|
||||
grid > c[span^="15"] { --grid-cs: 15 }
|
||||
grid > c[span^="16"] { --grid-cs: 16 }
|
||||
grid > c[span^="17"] { --grid-cs: 17 }
|
||||
grid > c[span^="18"] { --grid-cs: 18 }
|
||||
grid > c[span^="19"] { --grid-cs: 19 }
|
||||
grid > c[span^="20"] { --grid-cs: 20 }
|
||||
grid > c[span^="21"] { --grid-cs: 21 }
|
||||
grid > c[span^="22"] { --grid-cs: 22 }
|
||||
grid > c[span^="23"] { --grid-cs: 23 }
|
||||
grid > c[span^="24"] { --grid-cs: 24 }
|
||||
grid > c[span^="25"] { --grid-cs: 25 }
|
||||
grid > c[span^="26"] { --grid-cs: 26 }
|
||||
grid > c[span^="27"] { --grid-cs: 27 }
|
||||
grid > c[span^="28"] { --grid-cs: 28 }
|
||||
grid > c[span^="29"] { --grid-cs: 29 }
|
||||
grid > c[span^="30"] { --grid-cs: 30 }
|
||||
|
||||
/* span=...+width, span=...-end */
|
||||
grid > c[span$="+1"], grid > c[span="1"] { --grid-ce: 1 }
|
||||
grid > c[span$="+2"], grid > c[span$="-1"], grid > c[span="2"] { --grid-ce: 2 }
|
||||
grid > c[span$="+3"], grid > c[span$="-2"], grid > c[span="3"] { --grid-ce: 3 }
|
||||
grid > c[span$="+4"], grid > c[span$="-3"], grid > c[span="4"] { --grid-ce: 4 }
|
||||
grid > c[span$="+5"], grid > c[span$="-4"], grid > c[span="5"] { --grid-ce: 5 }
|
||||
grid > c[span$="+6"], grid > c[span$="-5"], grid > c[span="6"] { --grid-ce: 6 }
|
||||
grid > c[span$="+7"], grid > c[span$="-6"], grid > c[span="7"] { --grid-ce: 7 }
|
||||
grid > c[span$="+8"], grid > c[span$="-7"], grid > c[span="8"] { --grid-ce: 8 }
|
||||
grid > c[span$="+9"], grid > c[span$="-8"], grid > c[span="9"] { --grid-ce: 9 }
|
||||
grid > c[span$="+10"], grid > c[span$="-9"], grid > c[span="10"] { --grid-ce: 10 }
|
||||
grid > c[span$="+11"], grid > c[span$="-10"], grid > c[span="11"] { --grid-ce: 11 }
|
||||
grid > c[span$="+12"], grid > c[span$="-11"], grid > c[span="12"] { --grid-ce: 12 }
|
||||
grid > c[span$="+13"], grid > c[span$="-12"], grid > c[span="13"] { --grid-ce: 13 }
|
||||
grid > c[span$="+14"], grid > c[span$="-13"], grid > c[span="14"] { --grid-ce: 14 }
|
||||
grid > c[span$="+15"], grid > c[span$="-14"], grid > c[span="15"] { --grid-ce: 15 }
|
||||
grid > c[span$="+16"], grid > c[span$="-15"], grid > c[span="16"] { --grid-ce: 16 }
|
||||
grid > c[span$="+17"], grid > c[span$="-16"], grid > c[span="17"] { --grid-ce: 17 }
|
||||
grid > c[span$="+18"], grid > c[span$="-17"], grid > c[span="18"] { --grid-ce: 18 }
|
||||
grid > c[span$="+19"], grid > c[span$="-18"], grid > c[span="19"] { --grid-ce: 19 }
|
||||
grid > c[span$="+20"], grid > c[span$="-19"], grid > c[span="20"] { --grid-ce: 20 }
|
||||
grid > c[span$="+21"], grid > c[span$="-20"], grid > c[span="21"] { --grid-ce: 21 }
|
||||
grid > c[span$="+22"], grid > c[span$="-21"], grid > c[span="22"] { --grid-ce: 22 }
|
||||
grid > c[span$="+23"], grid > c[span$="-22"], grid > c[span="23"] { --grid-ce: 23 }
|
||||
grid > c[span$="+24"], grid > c[span$="-23"], grid > c[span="24"] { --grid-ce: 24 }
|
||||
grid > c[span$="+25"], grid > c[span$="-24"], grid > c[span="25"] { --grid-ce: 25 }
|
||||
grid > c[span$="+26"], grid > c[span$="-25"], grid > c[span="26"] { --grid-ce: 26 }
|
||||
grid > c[span$="+27"], grid > c[span$="-26"], grid > c[span="27"] { --grid-ce: 27 }
|
||||
grid > c[span$="+28"], grid > c[span$="-27"], grid > c[span="28"] { --grid-ce: 28 }
|
||||
grid > c[span$="+29"], grid > c[span$="-28"], grid > c[span="29"] { --grid-ce: 29 }
|
||||
grid > c[span$="+30"], grid > c[span$="-29"], grid > c[span="30"] { --grid-ce: 30 }
|
||||
grid > c[span$="-30"] { --grid-ce: 31 }
|
||||
|
||||
/* connect vars */
|
||||
grid > c[span] { grid-column-end: span var(--grid-ce) }
|
||||
grid > c[span*="+"], grid > c[span*="-"], grid > c[span*=".."] {
|
||||
grid-column-start: var(--grid-cs) }
|
||||
grid > c[span*="-"], grid > c[span*=".."] {
|
||||
grid-column-end: var(--grid-ce) }
|
||||
grid > c[span="row"] { grid-column: 1 / -1 }
|
||||
|
||||
/* for window width <= 600 */
|
||||
@media only screen and (max-width: 600px) {
|
||||
grid[columns-s="1"] { grid-template-columns: repeat(1, 1fr) }
|
||||
grid[columns-s="2"] { grid-template-columns: repeat(2, 1fr) }
|
||||
grid[columns-s="3"] { grid-template-columns: repeat(3, 1fr) }
|
||||
grid[columns-s="4"] { grid-template-columns: repeat(4, 1fr) }
|
||||
grid[columns-s="5"] { grid-template-columns: repeat(5, 1fr) }
|
||||
grid[columns-s="6"] { grid-template-columns: repeat(6, 1fr) }
|
||||
grid[columns-s="7"] { grid-template-columns: repeat(7, 1fr) }
|
||||
grid[columns-s="8"] { grid-template-columns: repeat(8, 1fr) }
|
||||
grid[columns-s="9"] { grid-template-columns: repeat(9, 1fr) }
|
||||
grid[columns-s="10"] { grid-template-columns: repeat(10, 1fr) }
|
||||
grid[columns-s="11"] { grid-template-columns: repeat(11, 1fr) }
|
||||
grid[columns-s="12"] { grid-template-columns: repeat(12, 1fr) }
|
||||
grid[columns-s="13"] { grid-template-columns: repeat(13, 1fr) }
|
||||
grid[columns-s="14"] { grid-template-columns: repeat(14, 1fr) }
|
||||
grid[columns-s="15"] { grid-template-columns: repeat(15, 1fr) }
|
||||
grid[columns-s="16"] { grid-template-columns: repeat(16, 1fr) }
|
||||
grid[columns-s="17"] { grid-template-columns: repeat(17, 1fr) }
|
||||
grid[columns-s="18"] { grid-template-columns: repeat(18, 1fr) }
|
||||
grid[columns-s="19"] { grid-template-columns: repeat(19, 1fr) }
|
||||
grid[columns-s="20"] { grid-template-columns: repeat(20, 1fr) }
|
||||
grid[columns-s="21"] { grid-template-columns: repeat(21, 1fr) }
|
||||
grid[columns-s="22"] { grid-template-columns: repeat(22, 1fr) }
|
||||
grid[columns-s="23"] { grid-template-columns: repeat(23, 1fr) }
|
||||
grid[columns-s="24"] { grid-template-columns: repeat(24, 1fr) }
|
||||
grid[columns-s="25"] { grid-template-columns: repeat(25, 1fr) }
|
||||
grid[columns-s="26"] { grid-template-columns: repeat(26, 1fr) }
|
||||
grid[columns-s="27"] { grid-template-columns: repeat(27, 1fr) }
|
||||
grid[columns-s="28"] { grid-template-columns: repeat(28, 1fr) }
|
||||
grid[columns-s="29"] { grid-template-columns: repeat(29, 1fr) }
|
||||
grid[columns-s="30"] { grid-template-columns: repeat(30, 1fr) }
|
||||
|
||||
/* span-s=start... */
|
||||
grid > c[span-s^="1"] { --grid-cs: 1 }
|
||||
grid > c[span-s^="2"] { --grid-cs: 2 }
|
||||
grid > c[span-s^="3"] { --grid-cs: 3 }
|
||||
grid > c[span-s^="4"] { --grid-cs: 4 }
|
||||
grid > c[span-s^="5"] { --grid-cs: 5 }
|
||||
grid > c[span-s^="6"] { --grid-cs: 6 }
|
||||
grid > c[span-s^="7"] { --grid-cs: 7 }
|
||||
grid > c[span-s^="8"] { --grid-cs: 8 }
|
||||
grid > c[span-s^="9"] { --grid-cs: 9 }
|
||||
grid > c[span-s^="10"] { --grid-cs: 10 }
|
||||
grid > c[span-s^="11"] { --grid-cs: 11 }
|
||||
grid > c[span-s^="12"] { --grid-cs: 12 }
|
||||
grid > c[span-s^="13"] { --grid-cs: 13 }
|
||||
grid > c[span-s^="14"] { --grid-cs: 14 }
|
||||
grid > c[span-s^="15"] { --grid-cs: 15 }
|
||||
grid > c[span-s^="16"] { --grid-cs: 16 }
|
||||
grid > c[span-s^="17"] { --grid-cs: 17 }
|
||||
grid > c[span-s^="18"] { --grid-cs: 18 }
|
||||
grid > c[span-s^="19"] { --grid-cs: 19 }
|
||||
grid > c[span-s^="20"] { --grid-cs: 20 }
|
||||
grid > c[span-s^="21"] { --grid-cs: 21 }
|
||||
grid > c[span-s^="22"] { --grid-cs: 22 }
|
||||
grid > c[span-s^="23"] { --grid-cs: 23 }
|
||||
grid > c[span-s^="24"] { --grid-cs: 24 }
|
||||
grid > c[span-s^="25"] { --grid-cs: 25 }
|
||||
grid > c[span-s^="26"] { --grid-cs: 26 }
|
||||
grid > c[span-s^="27"] { --grid-cs: 27 }
|
||||
grid > c[span-s^="28"] { --grid-cs: 28 }
|
||||
grid > c[span-s^="29"] { --grid-cs: 29 }
|
||||
grid > c[span-s^="30"] { --grid-cs: 30 }
|
||||
|
||||
/* span-s=...+width, span-s=...-end */
|
||||
grid > c[span-s$="+1"], grid > c[span-s="1"] { --grid-ce: 1 }
|
||||
grid > c[span-s$="+2"], grid > c[span-s$="-1"], grid > c[span-s="2"] { --grid-ce: 2 }
|
||||
grid > c[span-s$="+3"], grid > c[span-s$="-2"], grid > c[span-s="3"] { --grid-ce: 3 }
|
||||
grid > c[span-s$="+4"], grid > c[span-s$="-3"], grid > c[span-s="4"] { --grid-ce: 4 }
|
||||
grid > c[span-s$="+5"], grid > c[span-s$="-4"], grid > c[span-s="5"] { --grid-ce: 5 }
|
||||
grid > c[span-s$="+6"], grid > c[span-s$="-5"], grid > c[span-s="6"] { --grid-ce: 6 }
|
||||
grid > c[span-s$="+7"], grid > c[span-s$="-6"], grid > c[span-s="7"] { --grid-ce: 7 }
|
||||
grid > c[span-s$="+8"], grid > c[span-s$="-7"], grid > c[span-s="8"] { --grid-ce: 8 }
|
||||
grid > c[span-s$="+9"], grid > c[span-s$="-8"], grid > c[span-s="9"] { --grid-ce: 9 }
|
||||
grid > c[span-s$="+10"], grid > c[span-s$="-9"], grid > c[span-s="10"] { --grid-ce: 10 }
|
||||
grid > c[span-s$="+11"], grid > c[span-s$="-10"], grid > c[span-s="11"] { --grid-ce: 11 }
|
||||
grid > c[span-s$="+12"], grid > c[span-s$="-11"], grid > c[span-s="12"] { --grid-ce: 12 }
|
||||
grid > c[span-s$="+13"], grid > c[span-s$="-12"], grid > c[span-s="13"] { --grid-ce: 13 }
|
||||
grid > c[span-s$="+14"], grid > c[span-s$="-13"], grid > c[span-s="14"] { --grid-ce: 14 }
|
||||
grid > c[span-s$="+15"], grid > c[span-s$="-14"], grid > c[span-s="15"] { --grid-ce: 15 }
|
||||
grid > c[span-s$="+16"], grid > c[span-s$="-15"], grid > c[span-s="16"] { --grid-ce: 16 }
|
||||
grid > c[span-s$="+17"], grid > c[span-s$="-16"], grid > c[span-s="17"] { --grid-ce: 17 }
|
||||
grid > c[span-s$="+18"], grid > c[span-s$="-17"], grid > c[span-s="18"] { --grid-ce: 18 }
|
||||
grid > c[span-s$="+19"], grid > c[span-s$="-18"], grid > c[span-s="19"] { --grid-ce: 19 }
|
||||
grid > c[span-s$="+20"], grid > c[span-s$="-19"], grid > c[span-s="20"] { --grid-ce: 20 }
|
||||
grid > c[span-s$="+21"], grid > c[span-s$="-20"], grid > c[span-s="21"] { --grid-ce: 21 }
|
||||
grid > c[span-s$="+22"], grid > c[span-s$="-21"], grid > c[span-s="22"] { --grid-ce: 22 }
|
||||
grid > c[span-s$="+23"], grid > c[span-s$="-22"], grid > c[span-s="23"] { --grid-ce: 23 }
|
||||
grid > c[span-s$="+24"], grid > c[span-s$="-23"], grid > c[span-s="24"] { --grid-ce: 24 }
|
||||
grid > c[span-s$="+25"], grid > c[span-s$="-24"], grid > c[span-s="25"] { --grid-ce: 25 }
|
||||
grid > c[span-s$="+26"], grid > c[span-s$="-25"], grid > c[span-s="26"] { --grid-ce: 26 }
|
||||
grid > c[span-s$="+27"], grid > c[span-s$="-26"], grid > c[span-s="27"] { --grid-ce: 27 }
|
||||
grid > c[span-s$="+28"], grid > c[span-s$="-27"], grid > c[span-s="28"] { --grid-ce: 28 }
|
||||
grid > c[span-s$="+29"], grid > c[span-s$="-28"], grid > c[span-s="29"] { --grid-ce: 29 }
|
||||
grid > c[span-s$="+30"], grid > c[span-s$="-29"], grid > c[span-s="30"] { --grid-ce: 30 }
|
||||
grid > c[span-s$="-30"] { --grid-ce: 31 }
|
||||
|
||||
/* connect vars */
|
||||
grid > c[span-s] { grid-column-end: span var(--grid-ce) }
|
||||
grid > c[span-s*="+"], grid > c[span-s*="-"], grid > c[span-s*=".."] {
|
||||
grid-column-start: var(--grid-cs) }
|
||||
grid > c[span-s*="-"], grid > c[span-s*=".."] {
|
||||
grid-column-end: var(--grid-ce) }
|
||||
grid > c[span-s="row"] { grid-column: 1 / -1 }
|
||||
}
|
||||
|
||||
/* for window width >= 1600 */
|
||||
@media only screen and (min-width: 1599px) {
|
||||
grid[columns-l="1"] { grid-template-columns: repeat(1, 1fr) }
|
||||
grid[columns-l="2"] { grid-template-columns: repeat(2, 1fr) }
|
||||
grid[columns-l="3"] { grid-template-columns: repeat(3, 1fr) }
|
||||
grid[columns-l="4"] { grid-template-columns: repeat(4, 1fr) }
|
||||
grid[columns-l="5"] { grid-template-columns: repeat(5, 1fr) }
|
||||
grid[columns-l="6"] { grid-template-columns: repeat(6, 1fr) }
|
||||
grid[columns-l="7"] { grid-template-columns: repeat(7, 1fr) }
|
||||
grid[columns-l="8"] { grid-template-columns: repeat(8, 1fr) }
|
||||
grid[columns-l="9"] { grid-template-columns: repeat(9, 1fr) }
|
||||
grid[columns-l="10"] { grid-template-columns: repeat(10, 1fr) }
|
||||
grid[columns-l="11"] { grid-template-columns: repeat(11, 1fr) }
|
||||
grid[columns-l="12"] { grid-template-columns: repeat(12, 1fr) }
|
||||
grid[columns-l="13"] { grid-template-columns: repeat(13, 1fr) }
|
||||
grid[columns-l="14"] { grid-template-columns: repeat(14, 1fr) }
|
||||
grid[columns-l="15"] { grid-template-columns: repeat(15, 1fr) }
|
||||
grid[columns-l="16"] { grid-template-columns: repeat(16, 1fr) }
|
||||
grid[columns-l="17"] { grid-template-columns: repeat(17, 1fr) }
|
||||
grid[columns-l="18"] { grid-template-columns: repeat(18, 1fr) }
|
||||
grid[columns-l="19"] { grid-template-columns: repeat(19, 1fr) }
|
||||
grid[columns-l="20"] { grid-template-columns: repeat(20, 1fr) }
|
||||
grid[columns-l="21"] { grid-template-columns: repeat(21, 1fr) }
|
||||
grid[columns-l="22"] { grid-template-columns: repeat(22, 1fr) }
|
||||
grid[columns-l="23"] { grid-template-columns: repeat(23, 1fr) }
|
||||
grid[columns-l="24"] { grid-template-columns: repeat(24, 1fr) }
|
||||
grid[columns-l="25"] { grid-template-columns: repeat(25, 1fr) }
|
||||
grid[columns-l="26"] { grid-template-columns: repeat(26, 1fr) }
|
||||
grid[columns-l="27"] { grid-template-columns: repeat(27, 1fr) }
|
||||
grid[columns-l="28"] { grid-template-columns: repeat(28, 1fr) }
|
||||
grid[columns-l="29"] { grid-template-columns: repeat(29, 1fr) }
|
||||
grid[columns-l="30"] { grid-template-columns: repeat(30, 1fr) }
|
||||
|
||||
/* span-l=start... */
|
||||
grid > c[span-l^="1"] { --grid-cs: 1 }
|
||||
grid > c[span-l^="2"] { --grid-cs: 2 }
|
||||
grid > c[span-l^="3"] { --grid-cs: 3 }
|
||||
grid > c[span-l^="4"] { --grid-cs: 4 }
|
||||
grid > c[span-l^="5"] { --grid-cs: 5 }
|
||||
grid > c[span-l^="6"] { --grid-cs: 6 }
|
||||
grid > c[span-l^="7"] { --grid-cs: 7 }
|
||||
grid > c[span-l^="8"] { --grid-cs: 8 }
|
||||
grid > c[span-l^="9"] { --grid-cs: 9 }
|
||||
grid > c[span-l^="10"] { --grid-cs: 10 }
|
||||
grid > c[span-l^="11"] { --grid-cs: 11 }
|
||||
grid > c[span-l^="12"] { --grid-cs: 12 }
|
||||
grid > c[span-l^="13"] { --grid-cs: 13 }
|
||||
grid > c[span-l^="14"] { --grid-cs: 14 }
|
||||
grid > c[span-l^="15"] { --grid-cs: 15 }
|
||||
grid > c[span-l^="16"] { --grid-cs: 16 }
|
||||
grid > c[span-l^="17"] { --grid-cs: 17 }
|
||||
grid > c[span-l^="18"] { --grid-cs: 18 }
|
||||
grid > c[span-l^="19"] { --grid-cs: 19 }
|
||||
grid > c[span-l^="20"] { --grid-cs: 20 }
|
||||
grid > c[span-l^="21"] { --grid-cs: 21 }
|
||||
grid > c[span-l^="22"] { --grid-cs: 22 }
|
||||
grid > c[span-l^="23"] { --grid-cs: 23 }
|
||||
grid > c[span-l^="24"] { --grid-cs: 24 }
|
||||
grid > c[span-l^="25"] { --grid-cs: 25 }
|
||||
grid > c[span-l^="26"] { --grid-cs: 26 }
|
||||
grid > c[span-l^="27"] { --grid-cs: 27 }
|
||||
grid > c[span-l^="28"] { --grid-cs: 28 }
|
||||
grid > c[span-l^="29"] { --grid-cs: 29 }
|
||||
grid > c[span-l^="30"] { --grid-cs: 30 }
|
||||
|
||||
/* span-l=...+width, span-l=...-end */
|
||||
grid > c[span-l$="+1"], grid > c[span-l="1"] { --grid-ce: 1 }
|
||||
grid > c[span-l$="+2"], grid > c[span-l$="-1"], grid > c[span-l="2"] { --grid-ce: 2 }
|
||||
grid > c[span-l$="+3"], grid > c[span-l$="-2"], grid > c[span-l="3"] { --grid-ce: 3 }
|
||||
grid > c[span-l$="+4"], grid > c[span-l$="-3"], grid > c[span-l="4"] { --grid-ce: 4 }
|
||||
grid > c[span-l$="+5"], grid > c[span-l$="-4"], grid > c[span-l="5"] { --grid-ce: 5 }
|
||||
grid > c[span-l$="+6"], grid > c[span-l$="-5"], grid > c[span-l="6"] { --grid-ce: 6 }
|
||||
grid > c[span-l$="+7"], grid > c[span-l$="-6"], grid > c[span-l="7"] { --grid-ce: 7 }
|
||||
grid > c[span-l$="+8"], grid > c[span-l$="-7"], grid > c[span-l="8"] { --grid-ce: 8 }
|
||||
grid > c[span-l$="+9"], grid > c[span-l$="-8"], grid > c[span-l="9"] { --grid-ce: 9 }
|
||||
grid > c[span-l$="+10"], grid > c[span-l$="-9"], grid > c[span-l="10"] { --grid-ce: 10 }
|
||||
grid > c[span-l$="+11"], grid > c[span-l$="-10"], grid > c[span-l="11"] { --grid-ce: 11 }
|
||||
grid > c[span-l$="+12"], grid > c[span-l$="-11"], grid > c[span-l="12"] { --grid-ce: 12 }
|
||||
grid > c[span-l$="+13"], grid > c[span-l$="-12"], grid > c[span-l="13"] { --grid-ce: 13 }
|
||||
grid > c[span-l$="+14"], grid > c[span-l$="-13"], grid > c[span-l="14"] { --grid-ce: 14 }
|
||||
grid > c[span-l$="+15"], grid > c[span-l$="-14"], grid > c[span-l="15"] { --grid-ce: 15 }
|
||||
grid > c[span-l$="+16"], grid > c[span-l$="-15"], grid > c[span-l="16"] { --grid-ce: 16 }
|
||||
grid > c[span-l$="+17"], grid > c[span-l$="-16"], grid > c[span-l="17"] { --grid-ce: 17 }
|
||||
grid > c[span-l$="+18"], grid > c[span-l$="-17"], grid > c[span-l="18"] { --grid-ce: 18 }
|
||||
grid > c[span-l$="+19"], grid > c[span-l$="-18"], grid > c[span-l="19"] { --grid-ce: 19 }
|
||||
grid > c[span-l$="+20"], grid > c[span-l$="-19"], grid > c[span-l="20"] { --grid-ce: 20 }
|
||||
grid > c[span-l$="+21"], grid > c[span-l$="-20"], grid > c[span-l="21"] { --grid-ce: 21 }
|
||||
grid > c[span-l$="+22"], grid > c[span-l$="-21"], grid > c[span-l="22"] { --grid-ce: 22 }
|
||||
grid > c[span-l$="+23"], grid > c[span-l$="-22"], grid > c[span-l="23"] { --grid-ce: 23 }
|
||||
grid > c[span-l$="+24"], grid > c[span-l$="-23"], grid > c[span-l="24"] { --grid-ce: 24 }
|
||||
grid > c[span-l$="+25"], grid > c[span-l$="-24"], grid > c[span-l="25"] { --grid-ce: 25 }
|
||||
grid > c[span-l$="+26"], grid > c[span-l$="-25"], grid > c[span-l="26"] { --grid-ce: 26 }
|
||||
grid > c[span-l$="+27"], grid > c[span-l$="-26"], grid > c[span-l="27"] { --grid-ce: 27 }
|
||||
grid > c[span-l$="+28"], grid > c[span-l$="-27"], grid > c[span-l="28"] { --grid-ce: 28 }
|
||||
grid > c[span-l$="+29"], grid > c[span-l$="-28"], grid > c[span-l="29"] { --grid-ce: 29 }
|
||||
grid > c[span-l$="+30"], grid > c[span-l$="-29"], grid > c[span-l="30"] { --grid-ce: 30 }
|
||||
grid > c[span-l$="-30"] { --grid-ce: 31 }
|
||||
|
||||
/* connect vars */
|
||||
grid > c[span-l] { grid-column-end: span var(--grid-ce) }
|
||||
grid > c[span-l*="+"], grid > c[span-l*="-"], grid > c[span-l*=".."] {
|
||||
grid-column-start: var(--grid-cs) }
|
||||
grid > c[span-l*="-"], grid > c[span-l*=".."] {
|
||||
grid-column-end: var(--grid-ce) }
|
||||
grid > c[span-l="row"] { grid-column: 1 / -1 }
|
||||
}
|
||||
|
||||
/* .debug can be added to a grid to visualize its effective cells */
|
||||
grid.debug > * {
|
||||
--color: rgba(248,110,91 ,0.3);
|
||||
background-image:
|
||||
linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
|
||||
}
|
||||
grid.debug > :nth-child(6n+2) { --color: rgba(103,126,208,0.3) }
|
||||
grid.debug > :nth-child(6n+3) { --color: rgba(224,174,72 ,0.3) }
|
||||
grid.debug > :nth-child(6n+4) { --color: rgba(77, 214,115,0.3) }
|
||||
grid.debug > :nth-child(6n+5) { --color: rgba(217,103,219,0.3) }
|
||||
grid.debug > :nth-child(6n+6) { --color: rgba(94, 204,211,0.3) }
|
||||
grid.debug > :nth-child(6n+7) { --color: rgba(248,110,91 ,0.3) }
|
||||
67
docs/samples/img/lineup-bold-red.svg
Executable file
67
docs/samples/img/lineup-bold-red.svg
Executable file
@ -0,0 +1,67 @@
|
||||
<svg width="888" height="1018" viewBox="0 0 888 1018" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.506287 116.634L40.228 1.57156H71.6277L111.297 116.634H85.1706L76.6377 90.4021H35.1125L26.5796 116.634H0.506287ZM70.5097 71.4062L56.355 27.8663H55.4585L41.2933 71.4062H70.5097Z" fill="#F02D09"/>
|
||||
<path d="M117.667 1.57156H163.739C189.137 1.57156 201.952 13.8171 201.952 31.1044C201.952 44.6473 193.124 53.138 181.163 55.8276V56.9562C194.252 57.568 206.477 67.8517 206.477 84.8753C206.477 103.196 192.765 116.676 166.861 116.676H117.667V1.57156ZM160.036 49.7207C169.983 49.7207 177.398 44.2149 177.398 35.1124C177.398 26.8011 171.269 21.232 160.522 21.232H142V49.7101L160.036 49.7207ZM161.83 96.7412C175.425 96.7412 181.332 91.0666 181.332 82.4177C181.332 72.925 174.075 66.1852 162.346 66.1852H142V96.7728L161.83 96.7412Z" fill="#F02D09"/>
|
||||
<path d="M291.753 41.8522C289.897 29.1953 280.288 21.5168 266.977 21.5168C249.162 21.5168 237.444 35.1652 237.444 59.0973C237.444 83.7151 249.299 96.6884 266.777 96.6884C279.75 96.6884 289.422 89.6111 291.721 77.3022L316.328 77.4182C313.692 98.5975 295.877 118.205 266.386 118.205C235.588 118.205 212.784 96.6357 212.784 59.1395C212.784 21.6433 235.989 0.0738136 266.386 0.0738136C293.04 -1.84726e-05 313.164 15.2832 316.328 41.8522H291.753Z" fill="#F02D09"/>
|
||||
<path d="M326.443 116.634V1.57156H367.578C402.301 1.57156 423.533 23.1411 423.533 58.9919C423.533 94.8426 402.301 116.634 367.241 116.634H326.443ZM366.218 95.7919C387.851 95.7919 399.252 84.6643 399.252 58.9919C399.252 33.3194 387.851 22.4133 366.271 22.4133H350.766V95.7919H366.218Z" fill="#F02D09"/>
|
||||
<path d="M434.112 1.57156H511.646V21.6117H458.434V49.0351H507.659V69.0752H458.434V96.583H511.868V116.623H434.112V1.57156Z" fill="#F02D09"/>
|
||||
<path d="M523.638 1.57156H599.823V21.6117H547.961V49.0351H594.781V69.0752H547.961V116.602H523.638V1.57156Z" fill="#F02D09"/>
|
||||
<path d="M660.966 21.5168C643.384 21.5168 631.433 35.0597 631.433 58.9919C631.433 82.924 642.941 96.6884 661.23 96.6884C677.41 96.6884 687.124 87.6493 687.461 73.3786H662.717V55.0577H710.866V69.5498C710.866 99.8316 690.13 118.205 661.082 118.205C628.659 118.205 606.752 95.6231 606.752 59.2134C606.752 21.907 630.178 0 660.544 0C686.544 0 706.647 16.011 709.748 38.7619H685.078C681.987 27.9402 673.497 21.5168 660.966 21.5168Z" fill="#F02D09"/>
|
||||
<path d="M719.705 59.2134C719.705 21.907 743.637 0 774.035 0C800.045 0 820.728 15.895 823.871 38.7619H799.264C796.237 27.8663 786.955 21.5168 774.425 21.5168C756.842 21.5168 744.365 34.9964 744.365 58.9919C744.365 82.9873 756.051 96.6884 774.151 96.6884C790.552 96.6884 800.382 87.3117 800.836 73.3786H775.659V55.0577H824.821V116.634H808.198L806.785 103.492H806.173C798.42 112.868 788.242 118.258 774.035 118.258C741.781 118.205 719.705 95.6231 719.705 59.2134Z" fill="#F02D09"/>
|
||||
<path d="M6.73975 146.072H31.0727V193.535H80.4558V146.072H104.715V261.134H80.4558V213.575H31.0727V261.102H6.73975V146.072Z" fill="#F02D09"/>
|
||||
<path d="M141.715 261.134H117.393V146.072H141.715V261.134Z" fill="#F02D09"/>
|
||||
<path d="M224.502 146.072V226.306C224.439 248.603 208.544 262.705 185.224 262.705C164.382 262.705 147.98 251.757 148.086 228.774H172.345C172.514 237.929 178.02 243.214 186.5 243.214C195.497 243.214 200.433 237.37 200.496 226.338V146.072H224.502Z" fill="#F02D09"/>
|
||||
<path d="M237.159 146.072H261.482V196.805H263L304.42 146.072H333.573L290.877 197.596L334.122 261.134H304.979L273.463 213.828L261.482 228.437V261.134H237.159V146.072Z" fill="#F02D09"/>
|
||||
<path d="M338.879 146.072H363.212V241.083H412.542V261.123H338.879V146.072Z" fill="#F02D09"/>
|
||||
<path d="M451.272 146.072L482.915 223.384H484.265L515.907 146.072H545.915V261.134H522.404V186.247H521.445L491.669 260.585H475.595L445.819 185.973H444.87V261.144H421.265V146.072H451.272Z" fill="#F02D09"/>
|
||||
<path d="M656.304 261.134H635.294L585.288 188.715H584.444V261.134H560.069V146.072H581.417L631.085 218.438H632.14V146.072H656.399L656.304 261.134Z" fill="#F02D09"/>
|
||||
<path d="M720.833 262.705C690.151 262.705 666.946 241.083 666.946 203.64C666.946 166.196 690.151 144.574 720.833 144.574C751.337 144.574 774.71 166.027 774.71 203.64C774.71 241.252 751.337 262.705 720.833 262.705ZM720.833 166.017C703.135 166.017 691.617 179.222 691.617 203.597C691.617 227.972 703.135 241.188 720.833 241.188C738.532 241.188 750.05 227.983 750.05 203.597C750.05 179.212 738.469 166.017 720.833 166.017V166.017Z" fill="#F02D09"/>
|
||||
<path d="M785.3 146.072H830.654C856.78 146.072 871.894 162.199 871.894 185.097C871.894 207.996 856.495 223.859 830.031 223.859H809.622V261.165H785.3V146.072ZM826.139 204.336C840.072 204.336 846.876 196.467 846.876 185.065C846.876 173.664 840.072 165.954 826.034 165.954H809.622V204.336H826.139Z" fill="#F02D09"/>
|
||||
<path d="M94.273 394.401L110.738 415.031H88.0395L78.7683 403.63C72.3172 406.025 65.4828 407.223 58.6016 407.163C27.919 407.163 4.71466 385.541 4.71466 348.097C4.71466 310.454 27.919 289.032 58.6016 289.032C89.1048 289.032 112.478 310.485 112.478 348.097C112.478 368.623 105.517 384.338 94.273 394.401ZM70.8471 365.627L79.3906 376.586C84.7276 370.257 87.8285 360.628 87.8285 348.108C87.8285 323.733 76.2263 310.527 58.6121 310.527C40.9979 310.527 29.4379 323.722 29.4379 348.097C29.4379 372.472 40.9557 385.688 58.6543 385.688C60.7787 385.692 62.8984 385.487 64.9828 385.077L50.2163 365.627H70.8471Z" fill="#F02D09"/>
|
||||
<path d="M123.173 290.572H168.527C194.695 290.572 209.799 305.338 209.799 328.152C209.799 343.889 202.553 355.291 189.464 360.912L213.902 405.634H187.059L165.257 364.847H147.506V405.634H123.173V290.572ZM164.023 345.292C177.957 345.292 184.76 339.564 184.76 328.152C184.76 316.74 177.957 310.454 163.907 310.454H147.506V345.26L164.023 345.292Z" fill="#F02D09"/>
|
||||
<path d="M262.368 309.335C250.46 309.335 243.878 314.788 243.878 322.203C243.709 330.462 252.084 334.164 262.083 336.474L272.419 338.942C292.459 343.435 306.867 353.614 306.92 372.768C306.867 393.863 290.35 407.269 262.252 407.269C234.333 407.269 216.518 394.401 215.906 369.509H239.448C240.229 381.026 249.331 386.87 261.977 386.87C274.339 386.87 282.313 381.142 282.366 372.715C282.313 364.963 275.341 361.366 262.821 358.328L250.291 355.164C230.852 350.502 218.881 340.777 218.933 323.807C218.828 302.912 237.307 289 262.536 289C288.156 289 305.011 303.155 305.348 323.659H282.028C281.132 314.62 274.001 309.335 262.368 309.335Z" fill="#F02D09"/>
|
||||
<path d="M311.434 290.572H405.982V310.612H370.753V405.623H346.705V310.612H311.477L311.434 290.572Z" fill="#F02D09"/>
|
||||
<path d="M509.568 290.572V366.64C509.568 392.713 489.676 407.269 461.862 407.269C434.048 407.269 414.167 392.713 414.167 366.64V290.572H438.489V365.796C438.489 378.105 448.435 385.583 461.862 385.583C475.458 385.583 485.404 378.105 485.404 365.796V290.572H509.568Z" fill="#F02D09"/>
|
||||
<path d="M570.775 377.989H571.83L599.707 290.572H626.676L587.007 405.634H555.66L515.939 290.572H542.961L570.775 377.989Z" fill="#F02D09"/>
|
||||
<path d="M626.075 290.572H652.655L671.703 370.521H672.653L693.663 290.572H716.425L737.382 370.732H738.437L757.475 290.572H784.055L751.083 405.634H727.373L705.466 330.409H704.569L682.715 405.634H659.004L626.075 290.572Z" fill="#F02D09"/>
|
||||
<path d="M835.611 329.787H836.507L859.828 290.572H887.304L852.139 348.097L888 405.634H860.102L836.507 366.365H835.611L812.058 405.634H784.15L820.159 348.097L784.814 290.572H812.406L835.611 329.787Z" fill="#F02D09"/>
|
||||
<path d="M27.244 435.072L53.4861 484.645H54.6147L80.8462 435.072H108.101L66.1325 509.463V550.134H41.9683V509.463L0 435.072H27.244Z" fill="#F02D09"/>
|
||||
<path d="M112.763 535.694L170.151 455.112H112.615V435.072H200.707V449.511L143.234 530.083H200.823V550.123H112.763V535.694Z" fill="#F02D09"/>
|
||||
<path d="M261.482 550.134H237.138V458.16H236.463L210.094 474.677V453.108L238.573 435.072H261.482V550.134Z" fill="#F02D09"/>
|
||||
<path d="M281.437 532.604L322.393 494.633C332.846 484.645 338.478 478.316 338.478 469.171C338.478 459.056 330.947 452.77 320.832 452.77C310.285 452.77 303.355 459.51 303.418 470.522H280.319C280.267 447.939 296.837 433.5 321.001 433.5C345.661 433.5 361.957 447.602 361.957 467.547C361.957 480.637 355.628 491.427 331.96 512.996L315.158 529.461V530.241H363.475V550.134H281.437V532.604Z" fill="#F02D09"/>
|
||||
<path d="M372.589 517.605H397.09C397.533 526.043 405.528 531.655 416.297 531.655C427.425 531.655 435.283 525.326 435.283 516.203C435.283 507.079 427.193 500.381 414.188 500.381H403.376V482.535H414.114C425.178 482.535 432.878 476.407 432.814 467.368C432.878 458.708 426.296 452.76 416.466 452.76C406.636 452.76 398.535 458.434 398.208 467.199H374.888C375.225 447.307 392.987 433.447 416.582 433.447C440.409 433.447 456.304 447.718 456.251 465.86C456.251 478.78 447.423 487.883 434.565 490.193V491.089C451.441 493.199 460.575 503.451 460.523 517.774C460.575 537.445 442.086 551.653 416.223 551.653C390.962 551.705 372.979 537.719 372.589 517.605Z" fill="#F02D09"/>
|
||||
<path d="M468.908 510.749L516.951 435.072H547.402V510.412H561.673V529.914H547.402V550.134H524.113V529.914H468.908V510.749ZM524.588 461.588H523.691L493.41 509.515V510.412H524.588V461.588Z" fill="#F02D09"/>
|
||||
<path d="M570.912 517.605H594.507C595.066 526.539 602.871 532.604 612.543 532.604C623.945 532.604 632.087 524.345 632.087 512.384C632.087 500.424 623.776 491.933 612.205 491.87C605.402 491.87 598.546 494.854 595.013 499.622L573.38 495.751L578.833 435.072H649.174V454.954H598.884L595.91 483.78H596.585C600.624 478.105 609.336 473.897 619.451 473.897C640.177 473.897 655.576 489.718 655.524 511.762C655.524 535.019 638.163 551.705 612.543 551.705C588.716 551.705 571.355 537.498 570.912 517.605Z" fill="#F02D09"/>
|
||||
<path d="M663.339 495.192C663.445 456.166 681.713 433.162 710.138 433.162C733.121 433.162 748.848 447.876 751.157 467.21H727.12C725.263 458.772 718.914 454.004 710.096 454.004C695.098 454.004 687.229 467.937 687.113 490.688H687.904C693.073 480.521 704.253 474.456 716.899 474.456C737.288 474.456 752.349 490.013 752.297 511.593C752.297 535.019 734.872 551.821 709.252 551.674C685.605 551.6 663.403 537.382 663.339 495.192ZM728.734 512.268C728.734 500.867 720.549 492.028 709.305 492.028C698.062 492.028 689.645 501.13 689.592 512.311C689.539 523.491 697.903 532.593 709.147 532.593C720.39 532.593 728.734 523.786 728.734 512.268Z" fill="#F02D09"/>
|
||||
<path d="M814.4 455.745V454.954H758.836V435.072H839.566V455.238L791.807 550.165H766.704L814.4 455.745Z" fill="#F02D09"/>
|
||||
<path d="M4.37713 663.677C4.37713 649.29 15.2832 637.551 29.3324 635.199V634.418C23.4371 633.276 18.1326 630.094 14.3501 625.43C10.5677 620.766 8.54914 614.919 8.64884 608.915C8.64884 591.1 25.6724 577.958 48.9928 577.958C72.3132 577.958 89.3368 591.174 89.3895 608.957C89.4265 614.938 87.3854 620.748 83.6149 625.391C79.8443 630.035 74.5784 633.226 68.7165 634.418V635.209C82.5337 637.509 93.598 649.248 93.6613 663.687C93.598 682.346 74.9501 696.216 48.9928 696.216C23.0356 696.216 4.32439 682.335 4.37713 663.677ZM68.3157 661.768C68.3157 651.822 60.1204 644.628 48.9928 644.628C37.8653 644.628 29.6699 651.822 29.6699 661.768C29.6699 671.493 37.4223 678.338 48.9928 678.338C60.5634 678.338 68.3157 671.545 68.3157 661.768V661.768ZM65.6261 611.478C65.6261 602.554 58.7703 596.31 48.9928 596.31C39.2153 596.31 32.3595 602.491 32.3595 611.478C32.3595 620.464 39.2681 626.93 48.9928 626.93C58.7176 626.93 65.6261 620.58 65.6261 611.478V611.478Z" fill="#F02D09"/>
|
||||
<path d="M190.814 634.123C190.814 673.148 172.493 696.205 144.015 696.205C120.979 696.205 105.242 681.544 102.996 662.158H127.002C128.848 670.533 135.197 675.363 144.025 675.363C159.024 675.363 166.945 661.483 166.998 638.679H166.217C161.102 648.784 149.869 654.912 137.222 654.912C116.834 654.912 101.772 639.354 101.888 617.774C101.772 594.401 119.133 577.546 144.869 577.694C168.517 577.715 190.814 592.039 190.814 634.123ZM125.472 617.099C125.356 628.501 133.562 637.277 144.795 637.277C156.028 637.277 164.466 628.174 164.572 616.983C164.466 605.866 156.208 596.764 145.027 596.764C133.847 596.764 125.42 605.582 125.483 617.099H125.472Z" fill="#F02D09"/>
|
||||
<path d="M198.935 637.213C198.988 599.517 216.518 578 245.397 578C274.276 578 291.922 599.57 291.869 637.213C291.806 675.184 274.339 697.165 245.397 697.165C216.455 697.165 198.819 675.026 198.935 637.213ZM267.03 637.213C267.03 611.087 258.497 597.945 245.397 597.945C232.297 597.945 223.775 611.087 223.711 637.213C223.658 663.73 232.202 676.998 245.397 676.998C258.592 676.998 267.093 663.73 267.03 637.213Z" fill="#F02D09"/>
|
||||
<path d="M297.955 670.533C297.955 651.263 313.291 645.535 330.378 643.953C345.376 642.498 351.272 641.77 351.272 636.201V635.863C351.272 628.786 346.61 624.683 338.468 624.683C329.871 624.683 324.756 628.902 323.132 634.629L300.982 632.836C304.294 617.099 317.858 607.216 338.562 607.216C357.78 607.216 375.204 615.865 375.204 636.433V694.634H352.506V682.673H351.842C347.623 690.699 339.364 696.268 326.612 696.268C310.148 696.268 297.955 687.609 297.955 670.533ZM351.441 663.793V654.638C348.583 656.547 340.039 657.802 334.818 658.509C326.38 659.69 320.822 663.002 320.822 669.742C320.822 676.481 326.095 679.751 333.479 679.751C343.973 679.772 351.441 672.832 351.441 663.793V663.793Z" fill="#F02D09"/>
|
||||
<path d="M382.366 670.533C382.366 651.263 397.702 645.535 414.789 643.953C429.787 642.498 435.683 641.77 435.683 636.201V635.863C435.683 628.786 431.021 624.683 422.879 624.683C414.283 624.683 409.167 628.902 407.543 634.629L385.393 632.836C388.705 617.099 402.269 607.216 422.974 607.216C442.191 607.216 459.615 615.865 459.615 636.433V694.634H436.917V682.673H436.253C432.034 690.699 423.775 696.269 411.023 696.269C394.559 696.269 382.366 687.609 382.366 670.533ZM404.621 580.626C404.621 570.406 413.217 561.915 423.891 561.915C428.909 561.87 433.74 563.813 437.329 567.319C440.918 570.825 442.973 575.609 443.045 580.626C443.045 590.91 434.502 599.053 423.891 599.053C413.281 599.053 404.621 590.921 404.621 580.626ZM435.852 663.782V654.627C432.994 656.536 424.45 657.791 419.229 658.498C410.791 659.679 405.233 662.991 405.233 669.731C405.233 676.471 410.507 679.741 417.89 679.741C428.384 679.772 435.852 672.832 435.852 663.793V663.782ZM432.688 580.626C432.688 578.302 431.764 576.072 430.121 574.429C428.477 572.785 426.248 571.861 423.923 571.861C421.598 571.861 419.369 572.785 417.725 574.429C416.081 576.072 415.158 578.302 415.158 580.626C415.268 582.877 416.24 584.998 417.872 586.552C419.503 588.105 421.67 588.972 423.923 588.972C426.176 588.972 428.342 588.105 429.974 586.552C431.606 584.998 432.577 582.877 432.688 580.626V580.626Z" fill="#F02D09"/>
|
||||
<path d="M471.271 579.572H495.213V622.816H495.941C499.105 615.802 506.056 607.206 520.495 607.206C539.428 607.206 555.439 621.92 555.439 651.59C555.439 680.468 540.103 696.026 520.432 696.026C506.499 696.026 499.253 687.999 495.941 680.806H494.886V694.623H471.271V579.572ZM512.849 676.998C524.598 676.998 531.001 666.546 531.001 651.484C531.001 636.422 524.672 626.255 512.849 626.255C501.246 626.255 494.707 636.095 494.707 651.484C494.707 666.873 501.331 676.998 512.849 676.998Z" fill="#F02D09"/>
|
||||
<path d="M560.459 651.822C560.459 625.358 576.639 607.216 602.818 607.216C625.358 607.216 640.472 620.306 641.474 640.251H618.892C617.595 631.655 611.984 625.864 603.219 625.864C592.091 625.864 584.792 635.188 584.792 651.484C584.792 668.001 592.038 677.389 603.219 677.389C611.425 677.389 617.489 672.22 618.892 663.002H641.474C640.356 682.842 625.917 696.321 602.934 696.321C576.365 696.321 560.459 678.064 560.459 651.822Z" fill="#F02D09"/>
|
||||
<path d="M646.274 651.6C646.274 621.93 662.285 607.216 681.228 607.216C695.657 607.216 702.576 615.813 705.772 622.827H706.51V579.572H730.379V694.634H706.784V680.827H705.73C702.418 688.02 695.182 696.047 681.238 696.047C661.61 696.036 646.274 680.479 646.274 651.6ZM707.016 651.484C707.016 636.095 700.498 626.255 688.864 626.255C677.051 626.255 670.723 636.528 670.723 651.484C670.723 666.44 677.136 676.998 688.875 676.998C700.382 676.998 707.016 666.883 707.016 651.484V651.484Z" fill="#F02D09"/>
|
||||
<path d="M739.112 651.874C739.112 625.253 755.577 607.216 780.975 607.216C803.779 607.216 821.541 621.709 821.541 651.041V657.623H762.77C762.77 670.491 770.354 678.412 782.325 678.412C790.299 678.412 796.48 674.984 798.895 668.413L821.045 669.868C817.67 685.879 803.283 696.237 781.935 696.237C755.355 696.321 739.112 679.245 739.112 651.874ZM799.011 642.772C798.948 632.499 791.755 625.084 781.365 625.084C776.559 624.982 771.907 626.784 768.424 630.097C764.94 633.41 762.908 637.966 762.77 642.772H799.011Z" fill="#F02D09"/>
|
||||
<path d="M54.6252 770.818H37.1481V839.134H12.7307V770.818H0.295288V752.834H12.7307V746.601C12.7307 727.837 25.0501 718.671 41.6202 718.671C47.448 718.689 53.2474 719.484 58.8653 721.034L54.5724 738.965C52.0241 738.193 49.3772 737.795 46.7146 737.783C39.5529 737.783 37.1481 741.211 37.1481 747.054V752.834H54.6252V770.818Z" fill="#F02D09"/>
|
||||
<path d="M56.8613 849.249L79.4433 846.274C81.4474 850.936 86.8898 855.545 97.6693 855.545C108.217 855.545 116.001 850.936 116.001 839.64V823.819H114.946C111.782 830.959 103.882 837.868 89.8431 837.868C70.0139 837.868 54.14 824.494 54.14 795.784C54.14 766.398 70.4675 751.685 89.7798 751.685C104.546 751.685 111.676 760.281 114.946 767.295H115.864V752.834H140.123V839.977C140.123 861.494 122.192 872.738 97.0787 872.738C73.3258 872.791 59.7407 862.243 56.8613 849.249ZM116.117 795.71C116.117 780.595 109.472 770.755 97.606 770.755C85.4765 770.755 79.0109 781.028 79.0109 795.71C79.0109 810.592 85.5503 819.969 97.5217 819.969C109.314 819.916 116.075 810.93 116.075 795.71H116.117Z" fill="#F02D09"/>
|
||||
<path d="M174.993 839.134H150.533V724.072H174.254V768.065H175.309C179.328 757.897 188.261 751.716 201.614 751.716C219.956 751.716 232.107 763.962 232.054 784.192V839.134H207.616V788.411C207.616 777.8 201.825 771.535 191.911 771.535C181.996 771.535 175.035 778.053 174.95 789.181L174.993 839.134Z" fill="#F02D09"/>
|
||||
<path d="M241.326 729.577C241.326 722.943 247.285 717.501 254.499 717.501C261.714 717.501 267.747 722.943 267.747 729.577C267.747 736.212 261.777 741.707 254.499 741.707C247.222 741.707 241.326 736.264 241.326 729.577ZM242.243 752.782H266.65V839.081H242.243V752.782Z" fill="#F02D09"/>
|
||||
<path d="M301.562 752.834V843.121C301.562 863.161 288.958 871.778 267.81 871.219C266.492 871.219 265.173 871.219 263.285 871.103V852.392C264.337 852.483 265.393 852.522 266.449 852.508C274.297 852.508 277.113 849.249 277.113 842.73V752.834H301.562ZM276.121 729.63C276.121 722.996 282.081 717.553 289.306 717.553C296.531 717.553 302.543 722.996 302.543 729.63C302.543 736.264 296.583 741.76 289.306 741.76C282.028 741.76 276.069 736.264 276.069 729.577L276.121 729.63Z" fill="#F02D09"/>
|
||||
<path d="M311.962 724.072H336.369V785.595H337.687L365.901 752.834H393.926L361.229 790.204L395.55 839.134H366.956L342.94 804.327L336.348 811.71V839.134H311.962V724.072Z" fill="#F02D09"/>
|
||||
<path d="M421.202 839.134H396.795V724.072H421.202V839.134Z" fill="#F02D09"/>
|
||||
<path d="M431.654 752.834H454.922V768.065H455.977C459.637 757.897 468.634 751.716 480.499 751.716C492.597 751.716 501.594 758.045 504.4 768.065H505.318C508.925 758.171 518.955 751.716 531.855 751.716C548.246 751.716 559.595 762.39 559.595 781.102V839.113H535.23V785.816C535.23 776.208 529.387 771.43 521.592 771.43C512.711 771.43 507.49 777.505 507.49 786.439V839.176H483.801V785.384C483.801 776.946 478.411 771.503 470.395 771.503C462.379 771.503 456.061 777.832 456.061 787.409V839.207H431.654V752.834Z" fill="#F02D09"/>
|
||||
<path d="M594.19 839.134H569.783V752.834H593.051V768.065H594.106C598.061 758.003 607.522 751.716 620.59 751.716C638.932 751.716 650.967 764.067 650.967 784.192V839.134H626.518V788.411C626.518 777.864 620.675 771.535 610.866 771.535C601.057 771.535 594.254 778.053 594.19 789.181V839.134Z" fill="#F02D09"/>
|
||||
<path d="M657.538 796.322C657.538 769.584 674.15 751.716 700.857 751.716C727.563 751.716 744.185 769.584 744.185 796.322C744.185 823.059 727.563 840.821 700.857 840.821C674.15 840.821 657.538 822.901 657.538 796.322ZM719.367 796.153C719.367 781.102 713.039 769.974 700.973 769.974C688.653 769.974 682.325 781.102 682.325 796.153C682.325 811.204 688.653 822.279 700.951 822.279C713.07 822.279 719.367 811.215 719.367 796.153Z" fill="#F02D09"/>
|
||||
<path d="M751.073 752.834H775.142V767.316H776.197C779.456 760.302 786.512 751.706 801.237 751.706C820.549 751.706 836.887 766.42 836.887 796.09C836.887 824.968 821.245 840.526 801.184 840.526C786.966 840.526 779.572 832.499 776.197 825.306H775.448V871.483H751.073V752.834ZM793.484 821.498C805.466 821.498 811.995 811.046 811.995 795.984C811.995 780.922 805.582 770.755 793.484 770.755C781.618 770.755 774.973 780.595 774.973 795.984C774.973 811.373 781.734 821.498 793.484 821.498Z" fill="#F02D09"/>
|
||||
<path d="M64.6559 1015.99V969.827H63.907C60.5318 977.02 53.138 985.047 38.9201 985.047C18.8799 985.047 3.21698 969.489 3.21698 940.611C3.21698 910.941 19.555 896.227 38.8673 896.227C53.6338 896.227 60.6478 904.823 63.907 911.837H64.9617V897.334H89.0732V1015.99H64.6559ZM46.6619 915.255C34.564 915.255 28.1511 925.538 28.1511 940.484C28.1511 955.43 34.7117 965.998 46.6619 965.998C58.4118 965.998 65.1727 955.883 65.1727 940.484C65.1727 925.085 58.5172 915.255 46.6619 915.255Z" fill="#F02D09"/>
|
||||
<path d="M99.515 897.334H123.183V912.396H124.101C127.265 901.722 135.387 896.1 145.249 896.1C147.831 896.116 150.404 896.399 152.927 896.944V918.145C149.555 917.291 146.09 916.859 142.612 916.858C131.832 916.858 123.922 924.157 123.922 934.788V983.613H99.515V897.334Z" fill="#F02D09"/>
|
||||
<path d="M207.331 923.292C206.118 917.733 201.076 913.177 192.565 913.177C185.002 913.177 179.043 916.552 179.095 921.72C179.095 925.876 182.08 928.629 190.276 930.369L206.202 933.533C223.279 936.961 231.59 944.429 231.653 956.906C231.59 973.93 215.263 985.385 192.449 985.385C169.128 985.385 154.794 975.217 152.505 958.699L176.522 957.465C178.009 964.48 183.8 968.139 192.512 968.139C201.045 968.139 206.719 964.48 206.835 959.375C206.719 955.04 203.228 952.287 195.55 950.778L180.298 947.793C163.106 944.429 154.794 936.054 154.857 923.133C154.794 906.5 169.624 896.28 192.164 896.28C214.398 896.28 227.466 906.11 229.649 922.005L207.331 923.292Z" fill="#F02D09"/>
|
||||
<path d="M284.876 915.318H268.317V957.17C268.317 963.794 271.692 965.608 276.565 965.608C278.61 965.532 280.644 965.268 282.64 964.817L286.479 982.632C282.194 983.998 277.738 984.754 273.242 984.878C255.533 985.606 243.783 977.242 243.899 960.324V915.318H231.865V897.334H243.899V876.661H268.317V897.334H284.876V915.318Z" fill="#F02D09"/>
|
||||
<path d="M348.161 897.334H372.578V983.634H349.142V967.96H348.224C344.269 978.075 334.755 984.762 321.518 984.762C303.798 984.762 291.763 972.453 291.711 952.287V897.334H316.128V948.015C316.181 958.183 322.14 964.532 331.369 964.532C340.134 964.532 348.245 958.467 348.161 946.886V897.334Z" fill="#F02D09"/>
|
||||
<path d="M434.312 983.634H406.804L376.027 897.334H401.815L420.105 959.079H421.012L439.238 897.334H465.047L434.312 983.634Z" fill="#F02D09"/>
|
||||
<path d="M461.946 897.334H486.649L500.286 955.345H501.088L515.306 897.334H539.565L554.015 954.976H554.753L568.17 897.334H592.809L568.908 983.634H543.098L527.91 929.356H526.855L511.72 983.634H485.9L461.946 897.334Z" fill="#F02D09"/>
|
||||
<path d="M633.258 927.511L649.818 897.334H674.868L649.364 940.484L675.553 983.634H650.683L633.311 953.805L616.235 983.634H590.963L617.099 940.484L591.881 897.334H617.099L633.258 927.511Z" fill="#F02D09"/>
|
||||
<path d="M679.804 1014.59L685.31 996.048C693.906 998.632 699.812 998.157 703.24 990.268L704.843 986.112L673.264 897.334H698.937L717.131 960.714H718.049L736.444 897.334H762.295L727.911 993.527C722.922 1007.34 712.322 1017.24 694.433 1017.24C689.43 1017.33 684.457 1016.43 679.804 1014.59Z" fill="#F02D09"/>
|
||||
<path d="M765.323 969.363L808.419 917.09V916.467H766.82V897.334H837.826V912.871L797.366 963.878V964.553H839.313V983.655H765.323V969.363Z" fill="#F02D09"/>
|
||||
<path d="M849.523 971.61C849.576 968.02 851.048 964.598 853.618 962.092C856.187 959.585 859.645 958.199 863.235 958.235C865.03 958.185 866.818 958.495 868.491 959.148C870.165 959.8 871.691 960.781 872.979 962.034C874.266 963.286 875.29 964.784 875.989 966.438C876.688 968.093 877.048 969.871 877.048 971.668C877.048 973.464 876.688 975.242 875.989 976.897C875.29 978.551 874.266 980.049 872.979 981.301C871.691 982.554 870.165 983.535 868.491 984.187C866.818 984.84 865.03 985.15 863.235 985.1C861.448 985.115 859.676 984.778 858.02 984.108C856.364 983.438 854.856 982.449 853.583 981.196C852.31 979.943 851.296 978.452 850.599 976.807C849.902 975.162 849.537 973.396 849.523 971.61V971.61Z" fill="#F02D09"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 24 KiB |
67
docs/samples/img/lineup-semi-bold-red.svg
Executable file
67
docs/samples/img/lineup-semi-bold-red.svg
Executable file
@ -0,0 +1,67 @@
|
||||
<svg width="889" height="1035" viewBox="0 0 889 1035" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.407715 118.67L41.617 1.599H67.8021L109.076 118.67H86.4322L76.7737 89.802H32.7742L23.1158 118.67H0.407715ZM71.0001 72.7709L55.171 25.6056H54.2481L38.419 72.7709H71.0001Z" fill="#F02D09"/>
|
||||
<path d="M117.092 1.599H161.907C187.288 1.599 199.865 14.4769 199.865 31.9587C199.865 46.1888 190.829 54.1945 179.4 56.8774V57.9935C191.859 58.6159 204.437 69.0256 204.437 86.7434C204.437 104.987 191.291 118.638 164.483 118.638H117.092V1.599ZM159.278 51.3936C170.31 51.3936 178.659 44.9546 178.659 34.6952C178.659 25.67 172.22 19.0915 159.74 19.0915H138.276V51.3936H159.278ZM161.103 100.952C176.481 100.952 182.888 94.438 182.888 85.123C182.888 74.6597 174.775 66.6539 161.682 66.6539H138.298V100.995L161.103 100.952Z" fill="#F02D09"/>
|
||||
<path d="M294.314 41.102C291.856 27.1509 280.717 19.0378 266.476 19.0378C247.331 19.0378 233.831 33.7294 233.831 60.1398C233.831 86.9688 247.438 101.242 266.423 101.242C280.427 101.242 291.631 93.5258 294.325 79.7787L315.702 79.8967C312.483 102.251 293.981 120.258 266.144 120.258C235.279 120.258 212.486 97.9043 212.486 60.1613C212.486 22.4183 235.516 0.0643921 266.144 0.0643921C292.093 0.0643921 312.107 15.153 315.702 41.1664L294.314 41.102Z" fill="#F02D09"/>
|
||||
<path d="M327.775 118.67V1.599H368.244C403.111 1.599 424.263 23.5558 424.263 60.0218C424.263 96.4877 403.111 118.67 367.439 118.67H327.775ZM366.409 100.33C390.823 100.33 403.186 86.9688 403.186 60.0218C403.186 33.0748 390.78 19.95 366.999 19.95H348.981V100.33H366.409Z" fill="#F02D09"/>
|
||||
<path d="M436.969 1.599H513.11V19.3598H458.175V51.1575H509.171V68.9397H458.175V100.92H513.571V118.691H436.969V1.599Z" fill="#F02D09"/>
|
||||
<path d="M527.361 1.599H602.364V19.3598H548.567V51.1575H597.213V68.9397H548.567V118.67H527.361V1.599Z" fill="#F02D09"/>
|
||||
<path d="M665.144 19.0378C646.224 19.0378 632.563 33.665 632.563 60.0218C632.563 86.5503 645.988 101.242 665.595 101.242C683.205 101.242 694.355 90.6605 694.699 73.9729H667.72V57.3926H715.218V71.4617C715.218 101.639 694.463 120.28 665.487 120.28C633.185 120.28 611.239 97.2926 611.239 60.2472C611.239 22.5256 634.216 0 664.897 0C690.793 0 710.689 16.0115 714.263 38.9879H692.638C688.872 26.5822 679.267 19.0378 665.144 19.0378Z" fill="#F02D09"/>
|
||||
<path d="M725.348 60.2471C725.348 22.5793 748.904 0.0429077 779.489 0.0429077C805.384 0.0429077 825.957 15.9901 829.509 39.0308H807.896C804.354 26.5285 793.816 19.0378 779.768 19.0378C760.848 19.0378 746.672 33.665 746.672 60.0218C746.672 86.5503 760.161 101.242 779.714 101.242C797.604 101.242 808.979 90.0917 809.495 73.9728H781.829V57.3925H830.367V118.67H815.161L813.615 104.955H812.982C804.751 114.785 794.352 120.237 779.596 120.237C747.359 120.237 725.348 97.2926 725.348 60.2471Z" fill="#F02D09"/>
|
||||
<path d="M8.00562 148.622H29.2112V198.18H83.4594V148.622H104.729V265.693H83.4594V215.963H29.2112V265.693H8.00562V148.622Z" fill="#F02D09"/>
|
||||
<path d="M141.56 265.693H120.344V148.622H141.56V265.693Z" fill="#F02D09"/>
|
||||
<path d="M224.398 148.622V230.944C224.344 253.577 209.202 267.303 186.612 267.303C166.093 267.303 150.317 256.206 150.317 234.603H171.384C171.555 244.09 177.898 249.864 187.384 249.864C197.558 249.864 203.278 243.285 203.331 230.944V148.622H224.398Z" fill="#F02D09"/>
|
||||
<path d="M240.066 148.622H261.271V202.419H262.699L308.383 148.622H334.278L289.002 201.207L334.675 265.746H309.134L274.203 215.566L261.228 230.879V265.746H240.066V148.622Z" fill="#F02D09"/>
|
||||
<path d="M341.565 148.622H362.771V247.943H414.336V265.714H341.565V148.622Z" fill="#F02D09"/>
|
||||
<path d="M451.22 148.622L485.969 233.455H487.343L522.103 148.622H548.062V265.693H527.672V185.27H526.599L494.243 265.36H479.058L446.702 185.099H445.629V265.693H425.239V148.622H451.22Z" fill="#F02D09"/>
|
||||
<path d="M662.118 265.693H643.252L588.08 185.957H587.115V265.693H565.909V148.622H584.882L639.989 228.422H641.062V148.622H662.161L662.118 265.693Z" fill="#F02D09"/>
|
||||
<path d="M728.557 267.26C697.8 267.26 674.76 244.906 674.76 207.163C674.76 169.42 697.8 147.066 728.557 147.066C759.314 147.066 782.344 169.355 782.344 207.163C782.344 244.97 759.25 267.26 728.557 267.26ZM728.557 166.018C709.519 166.018 696.083 180.473 696.083 207.12C696.083 233.766 709.519 248.222 728.557 248.222C747.595 248.222 761.02 233.756 761.02 207.12C761.02 180.484 747.67 166.061 728.557 166.061V166.018Z" fill="#F02D09"/>
|
||||
<path d="M795.05 148.622H838.953C865.878 148.622 880.226 165.03 880.226 187.384C880.226 209.921 865.707 226.136 838.663 226.136H816.255V265.693H795.05V148.622ZM835.83 208.719C851.605 208.719 858.634 199.854 858.634 187.395C858.634 174.936 851.584 166.383 835.669 166.383H816.255V208.751L835.83 208.719Z" fill="#F02D09"/>
|
||||
<path d="M93.5793 401.973L109.816 422.782H89.2438L79.5853 410.494C72.9688 413.058 65.9261 414.343 58.8304 414.282C28.0737 414.282 5.0437 391.971 5.0437 354.185C5.0437 316.4 28.0844 294.089 58.8412 294.089C89.5979 294.089 112.628 316.378 112.628 354.185C112.617 375.391 105.363 391.682 93.5793 401.973ZM70.8284 373.395L80.7765 386.273C87.4087 379.351 91.2935 368.544 91.2935 354.143C91.2935 327.496 77.9219 313.041 58.8304 313.041C39.7389 313.041 26.3566 327.539 26.3566 354.185C26.3566 380.832 39.7926 395.287 58.8304 395.287C61.727 395.309 64.6137 394.948 67.4157 394.214L51.6188 373.395H70.8284Z" fill="#F02D09"/>
|
||||
<path d="M125.441 295.645H169.344C196.173 295.645 210.618 310.733 210.618 333.087C210.618 348.981 203.353 360.753 189.573 366.355L214.9 412.769H191.237L168.25 369.843H146.701V412.769H125.441V295.645ZM166.221 352.243C181.933 352.243 189.026 345.547 189.026 333.087C189.026 320.628 181.911 313.405 166.082 313.405H146.701V352.286L166.221 352.243Z" fill="#F02D09"/>
|
||||
<path d="M264.308 312C251.044 312 243.156 318.439 243.092 327.26C242.985 337.036 253.384 341.093 262.988 343.357L273.967 346.105C291.577 350.279 308.308 359.541 308.383 379.834C308.319 400.471 292.028 414.476 263.965 414.476C236.696 414.476 219.375 401.383 218.517 378.117H239.379C240.237 390.405 250.529 396.361 263.793 396.361C277.626 396.361 287.113 389.675 287.167 379.673C287.113 370.583 278.764 366.634 266.133 363.436L252.815 360.002C233.552 355.033 221.597 345.364 221.597 328.558C221.597 307.868 240.012 294.035 264.587 294.035C289.517 294.035 306.376 308.04 306.784 327.818H286.394C285.289 317.88 276.939 312 264.308 312Z" fill="#F02D09"/>
|
||||
<path d="M314.682 295.645H408.047V313.405H371.903V412.694H350.869V313.405H314.682V295.645Z" fill="#F02D09"/>
|
||||
<path d="M513.635 295.645V373.052C513.635 399.569 493.159 414.497 466.126 414.497C439.094 414.497 418.618 399.569 418.618 373.052V295.645H439.834V372.536C439.834 386.992 451.435 395.395 466.126 395.395C480.818 395.395 492.483 386.992 492.483 372.536V295.645H513.635Z" fill="#F02D09"/>
|
||||
<path d="M575.439 387.797H576.641L607.086 295.645H630.374L589.1 412.716H562.915L521.706 295.645H544.972L575.439 387.797Z" fill="#F02D09"/>
|
||||
<path d="M629.987 295.645H652.792L673.89 381.68H674.963L697.5 295.645H718.255L740.791 381.733H741.864L762.952 295.645H785.767L752.725 412.716H731.798L708.36 330.576H707.448L683.956 412.716H663.03L629.987 295.645Z" fill="#F02D09"/>
|
||||
<path d="M836.538 338.517H837.45L863.346 295.645H887.524L851.455 354.185L888.104 412.716H863.571L837.504 370.133H836.592L810.525 412.716H786.057L822.984 354.185L786.497 295.645H810.793L836.538 338.517Z" fill="#F02D09"/>
|
||||
<path d="M23.9529 442.667L52.5955 494.458H53.7438L82.3757 442.667H106.329L63.7457 516.072V559.738H42.6044V516.072L0 442.667H23.9529Z" fill="#F02D09"/>
|
||||
<path d="M111.834 546.539L171.856 460.428H111.49V442.667H198.148V455.878L138.18 541.988H198.491V559.76H111.834V546.539Z" fill="#F02D09"/>
|
||||
<path d="M258.127 559.738H236.921V463.304H236.234L208.847 480.818V461.362L237.919 442.667H258.095L258.127 559.738Z" fill="#F02D09"/>
|
||||
<path d="M280.491 544.424L321.143 504.578C332.69 492.859 338.635 485.884 338.635 476.107C338.635 465.075 330.34 458.271 319.19 458.271C307.535 458.271 299.991 465.783 299.991 477.706H279.772C279.772 455.47 296.235 441.068 319.479 441.068C343.035 441.068 358.982 455.417 358.982 475.023C358.982 488.234 352.694 498.858 329.943 520.697L309.821 541.226V541.988H360.807V559.706H280.491V544.424Z" fill="#F02D09"/>
|
||||
<path d="M372.193 527.898H393.656C394.171 537.449 403.315 543.566 415.044 543.566C427.557 543.566 436.508 536.472 436.508 526.127C436.572 515.556 427.761 508.119 412.962 508.119H402.606V491.775H412.962C425.078 491.775 433.535 484.971 433.481 474.733C433.481 464.903 426.28 458.271 415.356 458.271C404.431 458.271 395.406 464.388 395.062 474.229H374.672C375.123 454.612 392.733 441.068 415.452 441.068C438.836 441.068 454.086 455.642 453.979 473.478C454.043 486.624 445.522 496.014 432.827 498.804V499.717C449.235 502.067 458.379 512.594 458.325 527.222C458.379 547 440.146 561.348 415.109 561.348C390.437 561.305 372.773 547.687 372.193 527.898Z" fill="#F02D09"/>
|
||||
<path d="M468.477 521.158L518.153 442.667H544.564V520.59H559.588V538.018H544.564V559.738H524.324V538.018H468.52L468.477 521.158ZM524.56 466.674H523.637L490.198 519.667V520.59H524.539L524.56 466.674Z" fill="#F02D09"/>
|
||||
<path d="M570.599 527.898H591.182C591.922 537.556 600.443 544.199 611.014 544.199C623.538 544.199 632.574 534.873 632.477 521.781C632.541 508.527 623.28 499.03 610.413 498.976C603.384 498.922 595.947 501.831 592.008 506.177L572.852 503.033L578.969 442.667H646.89V460.428H596.601L593.221 491.475H593.908C598.2 486.334 606.657 482.557 616.144 482.557C637.414 482.557 653.082 498.794 653.082 521.319C653.082 544.585 635.815 561.391 611.057 561.391C588.198 561.305 571.221 547.354 570.599 527.898Z" fill="#F02D09"/>
|
||||
<path d="M662.89 504.524C662.89 464.163 680.673 440.725 708.789 440.725C730.918 440.725 746.178 455.019 748.7 474.229H727.859C725.713 464.968 718.888 459.076 708.822 459.076C692.595 459.076 683.559 474.1 683.506 499.03H684.354C689.955 488.974 701.052 482.857 713.629 482.857C734.148 482.857 749.924 498.858 749.87 520.987C749.87 544.135 732.946 561.52 707.684 561.348C685.158 561.23 662.89 547.451 662.89 504.524ZM729.201 521.437C729.201 508.871 720.165 499.03 707.738 499.03C695.31 499.03 685.845 509.321 685.738 521.566C685.631 533.811 694.935 544.102 707.459 544.102C719.982 544.102 729.287 534.251 729.233 521.437H729.201Z" fill="#F02D09"/>
|
||||
<path d="M815.741 461.19V460.428H757.94V442.667H837.687V460.793L787.956 559.738H765.914L815.741 461.19Z" fill="#F02D09"/>
|
||||
<path d="M4.91499 675.382C4.88967 668.414 7.33331 661.662 11.8124 656.325C16.2915 650.987 22.5165 647.409 29.383 646.224V645.43C17.3207 642.801 9.20763 632.134 9.26128 619.47C9.26128 601.409 25.7879 588.091 48.4745 588.091C71.0109 588.091 87.5804 601.463 87.6341 619.47C87.6341 632.166 79.3493 642.801 67.5124 645.43V646.224C74.35 647.468 80.5374 651.064 85.0037 656.389C89.4701 661.713 91.9342 668.432 91.9697 675.382C91.9697 694.377 73.8011 708.328 48.4745 708.328C22.9226 708.328 4.86133 694.377 4.91499 675.382ZM70.206 673.901C70.088 662.751 60.9446 654.745 48.4745 654.745C36.0044 654.745 26.6465 662.686 26.7538 673.901C26.6465 684.697 35.221 692.016 48.4745 692.016C61.728 692.016 70.088 684.718 70.206 673.901ZM66.9865 621.477C66.8792 611.411 59.3886 604.671 48.4638 604.671C37.539 604.671 29.8337 611.411 29.9411 621.477C29.8337 631.651 37.6034 638.648 48.4638 638.648C59.3242 638.648 66.8899 631.704 66.9973 621.477H66.9865Z" fill="#F02D09"/>
|
||||
<path d="M188.779 644.625C188.715 684.933 170.943 708.371 142.87 708.371C120.687 708.371 105.373 694.248 102.97 674.867H123.832C125.978 684.182 132.75 690.02 142.87 690.02C159.053 690.02 168.143 675.092 168.196 650.055H167.391C161.736 660.122 150.757 666.239 138.126 666.239C117.607 666.239 101.832 650.291 101.832 628.109C101.832 605.015 118.691 587.63 144.072 587.748C166.544 587.919 188.715 601.699 188.779 644.625ZM122.404 627.648C122.404 640.279 131.44 650.12 143.868 650.12C156.295 650.12 165.825 639.71 165.825 627.583C165.825 615.457 156.617 604.95 144.093 604.95C131.569 604.95 122.404 614.899 122.404 627.648V627.648Z" fill="#F02D09"/>
|
||||
<path d="M198.502 648.338C198.567 610.102 215.49 588.091 243.575 588.091C271.659 588.091 288.648 610.155 288.648 648.338C288.648 686.757 271.788 709.058 243.575 708.993C215.362 708.929 198.502 686.704 198.502 648.338ZM267.335 648.338C267.335 620.436 258.191 605.755 243.607 605.755C229.023 605.755 219.998 620.447 219.944 648.338C219.89 676.466 229.034 691.157 243.607 691.157C258.181 691.157 267.335 676.466 267.335 648.338V648.338Z" fill="#F02D09"/>
|
||||
<path d="M296.385 682.132C296.385 662.354 312.676 657.256 329.717 655.432C345.203 653.779 351.438 653.49 351.438 647.544V647.158C351.438 638.573 346.18 633.615 336.575 633.615C326.455 633.615 320.628 638.755 318.567 644.754L299.25 642.018C303.833 626.006 318.009 617.775 336.467 617.775C353.22 617.775 372.139 624.75 372.139 647.963V706.718H352.232V694.71H351.545C347.779 702.082 339.547 708.543 325.79 708.543C309.016 708.543 296.385 699.389 296.385 682.132ZM351.492 675.264V664.919C348.809 667.065 337.948 668.471 332.518 669.211C323.257 670.521 316.335 673.837 316.335 681.789C316.335 689.387 322.516 693.336 331.145 693.336C343.604 693.304 351.492 685.04 351.492 675.264V675.264Z" fill="#F02D09"/>
|
||||
<path d="M381.465 682.132C381.465 662.354 397.756 657.256 414.787 655.432C430.283 653.779 436.507 653.49 436.507 647.544V647.158C436.507 638.573 431.249 633.615 421.644 633.615C411.535 633.615 405.697 638.755 403.637 644.754L384.32 642.017C388.891 626.006 403.068 617.775 421.537 617.775C438.289 617.775 457.209 624.75 457.209 647.963V706.718H437.312V694.71H436.625C432.848 702.082 424.617 708.543 410.87 708.543C394.096 708.543 381.465 699.389 381.465 682.132ZM436.572 675.264V664.919C433.878 667.065 423.018 668.471 417.588 669.211C408.326 670.521 401.415 673.837 401.415 681.789C401.415 689.387 407.586 693.336 416.214 693.336C428.684 693.304 436.572 685.04 436.572 675.264ZM402.499 590.431C402.62 585.235 404.768 580.293 408.485 576.661C412.203 573.03 417.193 570.996 422.39 570.996C427.587 570.996 432.577 573.03 436.295 576.661C440.012 580.293 442.16 585.235 442.281 590.431C442.281 601.012 433.599 609.415 422.449 609.415C411.299 609.415 402.499 601.012 402.499 590.431V590.431ZM432.054 590.431C431.803 588.058 430.683 585.863 428.909 584.267C427.136 582.672 424.835 581.789 422.449 581.789C420.063 581.789 417.762 582.672 415.989 584.267C414.216 585.863 413.095 588.058 412.844 590.431C413.095 592.803 414.216 594.998 415.989 596.594C417.762 598.19 420.063 599.072 422.449 599.072C424.835 599.072 427.136 598.19 428.909 596.594C430.683 594.998 431.803 592.803 432.054 590.431V590.431Z" fill="#F02D09"/>
|
||||
<path d="M471.568 589.69H492.258V633.475H493.117C496.261 627.133 502.721 617.818 518.218 617.818C538.511 617.818 554.458 633.711 554.458 662.976C554.458 691.952 538.962 708.306 518.271 708.306C503.183 708.306 496.379 699.335 493.117 692.928H491.915V706.761H471.525L471.568 589.69ZM512.498 691.329C526.159 691.329 533.36 679.331 533.36 662.858C533.36 646.385 526.277 634.795 512.498 634.795C499.18 634.795 491.861 645.827 491.861 662.858C491.861 679.889 499.287 691.329 512.498 691.329V691.329Z" fill="#F02D09"/>
|
||||
<path d="M560.94 663.255C560.94 636.426 577.177 617.871 602.901 617.871C624.364 617.871 639.195 630.395 640.633 649.422H620.833C619.234 640.966 613.117 634.559 603.169 634.559C590.431 634.559 581.91 645.194 581.91 662.912C581.91 680.866 590.259 691.673 603.169 691.673C612.259 691.673 619.063 686.242 620.833 676.809H640.623C639.131 695.439 625.072 708.532 602.998 708.532C576.759 708.478 560.94 689.784 560.94 663.255Z" fill="#F02D09"/>
|
||||
<path d="M646.632 662.976C646.632 633.711 662.579 617.818 682.873 617.818C698.369 617.818 704.83 627.133 707.974 633.475H708.822V589.69H729.577V706.761H709.187V692.928H707.963C704.744 699.367 697.897 708.306 682.808 708.306C662.118 708.328 646.632 691.909 646.632 662.976ZM709.229 662.858C709.229 645.827 701.911 634.795 688.593 634.795C674.813 634.795 667.72 646.514 667.72 662.858C667.72 679.202 674.931 691.329 688.593 691.329C701.793 691.329 709.229 679.9 709.229 662.858V662.858Z" fill="#F02D09"/>
|
||||
<path d="M740.512 663.373C740.512 636.287 756.921 617.818 782.065 617.818C803.678 617.818 822.201 631.361 822.201 662.182V668.524H761.031C761.203 683.549 770.067 692.359 783.439 692.359C792.357 692.359 799.214 688.475 802.015 681.038L821.332 683.184C817.672 698.444 803.603 708.446 783.149 708.446C756.685 708.478 740.512 690.932 740.512 663.373ZM802.358 654.573C802.251 642.629 794.245 633.937 782.355 633.937C770.003 633.937 761.718 643.37 761.085 654.573H802.358Z" fill="#F02D09"/>
|
||||
<path d="M53.2502 781.99H34.6524V853.784H13.5433V781.99H0.311279V765.978H13.5433V757.693C13.5433 739.975 25.9598 731.229 41.5313 731.229C46.9874 731.207 52.4151 732.014 57.6287 733.622L53.3361 749.634C50.785 748.836 48.1317 748.414 45.4591 748.378C37.5928 748.378 34.7275 752.21 34.7275 759.11V766.021H53.2502V781.99Z" fill="#F02D09"/>
|
||||
<path d="M56.652 866.361L75.6576 861.854C78.2225 866.651 83.8244 872.586 96.5413 872.586C108.55 872.586 117.296 867.22 117.296 854.685V838.051H116.223C113.004 844.49 105.792 852.571 90.4672 852.571C69.8196 852.571 53.5505 838.287 53.5505 809.645C53.5505 780.777 69.8196 764.883 90.5209 764.883C106.318 764.883 113.057 774.198 116.277 780.541H117.446V765.978H138.266V855.222C138.266 877.34 120.419 888.2 96.2193 888.2C73.3825 888.2 60.5046 878.316 56.652 866.361ZM117.414 809.484C117.414 792.85 109.902 781.818 96.3589 781.818C82.3112 781.818 75.0781 793.537 75.0781 809.484C75.0781 825.667 82.4292 836.313 96.3589 836.313C109.827 836.302 117.414 826.236 117.414 809.484V809.484Z" fill="#F02D09"/>
|
||||
<path d="M171.823 853.784H150.714V736.713H171.383V780.906H172.457C176.588 770.958 185.334 764.808 199.103 764.808C217.701 764.808 229.946 776.613 229.946 797.851V853.752H208.794V801.081C208.794 789.276 202.269 782.333 191.183 782.333C179.872 782.333 171.866 789.652 171.866 802.337L171.823 853.784Z" fill="#F02D09"/>
|
||||
<path d="M240.527 742.315C240.527 736.091 246.011 731.057 252.772 731.057C259.533 731.057 264.963 736.091 264.963 742.315C264.963 748.539 259.479 753.519 252.772 753.519C246.065 753.519 240.527 748.486 240.527 742.315ZM242.212 765.978H263.321V853.784H242.212V765.978Z" fill="#F02D09"/>
|
||||
<path d="M296.879 765.978V858.645C296.879 877.63 285.503 886.891 265.446 886.548C264.222 886.483 262.999 886.548 261.421 886.429V869.57C262.591 869.57 263.407 869.677 264.448 869.677C272.561 869.677 275.77 865.739 275.77 858.366V765.978H296.879ZM274.01 742.315C274.01 736.091 279.493 731.057 286.265 731.057C293.037 731.057 298.445 736.091 298.445 742.315C298.445 748.539 292.962 753.519 286.265 753.519C279.569 753.519 274.01 748.486 274.01 742.315V742.315Z" fill="#F02D09"/>
|
||||
<path d="M309.37 736.713H330.479V801.253H331.939L364.134 765.978H388.816L354.089 803.839L390.823 853.741H365.625L338.217 816.18L330.522 824.24V853.73H309.37V736.713Z" fill="#F02D09"/>
|
||||
<path d="M414.69 853.784H393.581V736.713H414.69V853.784Z" fill="#F02D09"/>
|
||||
<path d="M427.182 765.978H447.357V780.906H448.43C452.165 770.904 461.136 764.808 473.113 764.808C485.089 764.808 493.868 770.925 497.313 780.906H498.246C502.206 771.129 512.122 764.808 525.075 764.808C541.516 764.808 553.063 775.207 553.063 794.857V853.795H531.965V798.055C531.965 787.194 525.204 782.279 516.694 782.279C506.488 782.279 500.478 789.137 500.478 799.021V853.752H479.777V797.196C479.777 788.16 473.66 782.279 464.753 782.279C455.663 782.279 448.312 789.588 448.312 800.394V853.784H427.182V765.978Z" fill="#F02D09"/>
|
||||
<path d="M586.503 853.784H565.394V765.978H585.623V780.906H586.696C590.785 771.129 599.992 764.808 613.407 764.808C631.897 764.808 644.142 776.817 644.078 797.851V853.752H622.883V801.081C622.883 789.362 616.358 782.333 605.455 782.333C594.315 782.333 586.503 789.652 586.503 802.337V853.784Z" fill="#F02D09"/>
|
||||
<path d="M652.459 810.278C652.459 783.073 669.136 764.894 695.386 764.894C721.635 764.894 738.312 783.073 738.312 810.278C738.312 837.483 721.635 855.555 695.386 855.555C669.136 855.555 652.459 837.386 652.459 810.278ZM716.849 810.224C716.849 794.127 709.734 781.303 695.45 781.303C680.93 781.303 673.815 794.181 673.815 810.224C673.815 826.268 680.93 838.985 695.45 838.985C709.777 838.931 716.892 826.236 716.892 810.171L716.849 810.224Z" fill="#F02D09"/>
|
||||
<path d="M746.94 765.978H767.695V780.498H768.919C772.138 774.156 778.717 764.84 794.524 764.84C815.215 764.84 831.484 780.734 831.484 809.999C831.484 838.974 815.687 855.329 794.578 855.329C779.178 855.329 772.246 846.358 768.919 839.951H768.06V886.719H746.94V765.978ZM788.686 838.352C802.637 838.352 809.967 826.354 809.967 809.881C809.967 793.408 802.745 781.818 788.686 781.818C775.1 781.818 767.642 792.85 767.642 809.881C767.642 826.912 775.218 838.352 788.686 838.352V838.352Z" fill="#F02D09"/>
|
||||
<path d="M67.0724 1033.74V986.974H66.2139C62.8871 993.413 55.9437 1002.35 40.5546 1002.35C19.4456 1002.35 3.63794 985.954 3.63794 957.022C3.63794 927.757 19.907 911.863 40.6083 911.863C56.4159 911.863 63.0051 921.178 66.2139 927.521H67.4373V913.001H88.1814V1033.74H67.0724ZM46.4355 928.841C32.3771 928.841 25.1441 940.56 25.1441 956.904C25.1441 973.248 32.4952 985.375 46.4355 985.375C59.9037 985.375 67.4802 973.946 67.4802 956.904C67.4802 939.862 60.0217 928.841 46.4355 928.841Z" fill="#F02D09"/>
|
||||
<path d="M100.673 913.001H121.138V927.639H122.072C125.291 917.465 133.876 911.745 144.168 911.745C146.707 911.753 149.243 911.944 151.755 912.314V931.352C148.548 930.566 145.259 930.166 141.957 930.161C130.356 930.161 121.782 938.049 121.782 949.188V1000.81H100.673V913.001Z" fill="#F02D09"/>
|
||||
<path d="M208.15 938.274C206.519 932.5 201.432 927.252 191.656 927.252C182.845 927.252 176.138 931.373 176.202 937.319C176.138 942.405 179.754 945.485 188.855 947.492L204.126 950.712C221.039 954.318 229.259 961.98 229.323 974.493C229.259 991.127 213.462 1002.5 191.065 1002.5C169.087 1002.5 155.265 992.962 152.646 976.843L173.219 974.89C175.032 982.788 181.332 986.899 191.012 986.899C201.035 986.899 207.689 982.381 207.689 976.382C207.689 971.413 203.836 968.151 195.616 966.38L180.334 963.236C163.163 959.748 155.093 951.281 155.147 938.478C155.093 922.241 169.785 911.842 191.355 911.842C212.357 911.842 224.484 921.329 227.392 936.192L208.15 938.274Z" fill="#F02D09"/>
|
||||
<path d="M282.284 929.013H264.609V974.396C264.609 982.746 268.901 984.581 274.171 984.581C276.256 984.557 278.33 984.287 280.352 983.776L283.915 999.959C279.894 1001.24 275.708 1001.93 271.488 1002.01C255.626 1002.47 243.382 994.357 243.5 977.831V929.013H230.793V913.001H243.5V891.967H264.609V913.001H282.284V929.013Z" fill="#F02D09"/>
|
||||
<path d="M347.832 913.001H368.941V1000.81H348.455V985.203H347.521C343.443 995.044 333.999 1001.96 320.585 1001.96C302.974 1001.96 290.729 990.011 290.729 968.913V913.001H311.86V965.715C311.86 976.865 318.621 983.894 328.773 983.894C338.099 983.894 347.832 977.262 347.832 963.879V913.001Z" fill="#F02D09"/>
|
||||
<path d="M429.543 1000.81H406.212L374.318 913.001H396.854L417.437 978.228H418.371L439.008 913.001H461.458L429.543 1000.81Z" fill="#F02D09"/>
|
||||
<path d="M459.988 913.001H481.526L497.27 974.74H498.085L514.183 913.001H535.463L551.561 974.396H552.441L567.948 913.001H589.518L564.16 1000.81H542.149L525.354 941.472H524.131L507.336 1000.81H485.293L459.988 913.001Z" fill="#F02D09"/>
|
||||
<path d="M630.438 945.421L648.81 913.001H671.143L644.142 956.904L671.615 1000.81H649.39L630.438 969.202L611.668 1000.81H589.271L616.562 956.904L589.98 913.001H612.366L630.438 945.421Z" fill="#F02D09"/>
|
||||
<path d="M677.335 1032.66L682.207 1016.08C691.415 1018.71 697.543 1017.9 701.524 1008.24L703.671 1002.64L671.154 913.001H693.551L714.187 979.322H715.121L735.865 913.001H758.316L722.118 1012.25C717.106 1026.08 706.954 1035 690.632 1035C686.093 1035.05 681.584 1034.25 677.335 1032.66V1032.66Z" fill="#F02D09"/>
|
||||
<path d="M762.48 987.661L808.626 930.901V930.161H763.993V912.99H834.499V927.113L790.5 982.917V983.658H835.98V1000.83H762.48V987.661Z" fill="#F02D09"/>
|
||||
<path d="M846.873 989.496C846.891 987.833 847.238 986.191 847.893 984.663C848.548 983.135 849.499 981.752 850.691 980.593C851.883 979.434 853.292 978.522 854.838 977.91C856.383 977.298 858.035 976.997 859.697 977.026C863.019 977.026 866.204 978.345 868.553 980.694C870.901 983.042 872.221 986.228 872.221 989.549C872.221 992.871 870.901 996.056 868.553 998.405C866.204 1000.75 863.019 1002.07 859.697 1002.07C858.026 1002.1 856.367 1001.8 854.815 1001.18C853.263 1000.56 851.849 999.635 850.656 998.465C849.463 997.295 848.514 995.899 847.865 994.36C847.216 992.82 846.878 991.167 846.873 989.496Z" fill="#F02D09"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 24 KiB |
5
docs/samples/img/sample-regular-text.svg
Normal file
5
docs/samples/img/sample-regular-text.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 935 KiB |
@ -148,6 +148,8 @@ hills.
|
||||
<img src="img/sfs-pid-30.png" srcset="img/sfs-pid-30@2x.png 2x" width="888">
|
||||
<img src="img/thin-beta.png" srcset="img/thin-beta@2x.png 2x" width="888">
|
||||
|
||||
<img src="img/lineup-bold-red.svg" width="888">
|
||||
|
||||
<img src="img/framed-poster-regular.png" srcset="img/framed-poster-regular@2x.png 2x" width="888">
|
||||
<img src="img/framed-poster-medium.png" srcset="img/framed-poster-medium@2x.png 2x" width="888">
|
||||
<img src="img/framed-poster-semi-bold.png" srcset="img/framed-poster-semi-bold@2x.png 2x" width="888">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user