From 38a830d0a968c1c24a29cfc9ff4f1bf38b3705c6 Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Tue, 19 Feb 2019 07:23:24 -0800 Subject: [PATCH] website update --- docs/_layouts/default.html | 4 + docs/_scripts/serve.sh | 6 +- docs/index.css | 51 +++- docs/index.html | 298 ++++++++++--------- docs/lab/index.html | 25 +- docs/res/base.css | 321 ++++++++++---------- docs/res/grid.css | 341 ++++++++++++++++++++++ docs/samples/img/lineup-bold-red.svg | 67 +++++ docs/samples/img/lineup-semi-bold-red.svg | 67 +++++ docs/samples/img/sample-regular-text.svg | 5 + docs/samples/index.html | 2 + 11 files changed, 854 insertions(+), 333 deletions(-) create mode 100644 docs/res/grid.css create mode 100755 docs/samples/img/lineup-bold-red.svg create mode 100755 docs/samples/img/lineup-semi-bold-red.svg create mode 100644 docs/samples/img/sample-regular-text.svg diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 3017293a8..a7a2a2faa 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -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 + + {% include preload-font-files.html %} diff --git a/docs/_scripts/serve.sh b/docs/_scripts/serve.sh index e48fd67db..aee2fa5c4 100755 --- a/docs/_scripts/serve.sh +++ b/docs/_scripts/serve.sh @@ -25,9 +25,11 @@ if [ "$1" != "" ]; then BINDADDR=$1 fi +# --incremental + jekyll serve \ - --incremental \ --watch \ --host "$BINDADDR" \ --port 3002 \ - --livereload + --livereload \ + --livereload-port 30002 diff --git a/docs/index.css b/docs/index.css index 261643d88..5fe9fc24b 100644 --- a/docs/index.css +++ b/docs/index.css @@ -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; diff --git a/docs/index.html b/docs/index.html index c5dc67aee..02172cc3c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,79 +25,96 @@ endfor -
-

The Inter font family

-

- Inter is a typeface specially designed for user interfaces - with focus on high legibility of small-to-medium sized text on computer screens. -

-

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

-
+
+

The Inter
typeface family

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

- -

-

- More samples -> -

-

-
+ -
+ +

Inter Bold
Sample

+ + + + -

How do I use it?

-

- Using the font is as easy as - downloading & installing on your computer. -

-

- 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: -

- 
@import url('https://rsms.me/inter/inter.css');
+    
+
+    
+      
Inter Regular
Sample

+    
+    
+      
+    
+
+    
+
+    
+      
Using

+    
+    
+      

+        Using Inter is as easy as
+        downloading & installing
+        the font files. If you're making a web thing, you can simply use this CSS:
+      

+      
@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; }
 }

+    
 
-  
 

+    
 
-  
Dynamic Metrics

-  

-    Size
-    dp
-    =
-    spacing
-    
-    em
-  

-  

-    There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter Dynamic Metrics 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.
-  

-  

-    Learn more…
-  

+    
+      
Dynamic Metrics

+    
+    
+      

+        Size
+        dp
+        =
+        spacing
+        
+        em
+      

+      

+        There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter Dynamic Metrics 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.
+      

+      

+        Explore dynamic metrics →
+      

+    
 
-  
 

+    
 
-  
How much does it cost?

-  

-    Inter is a free and open source font family.

-    You are free to use this font in almost any way imaginable.

-    Refer to the SIL Open Font License 1.1 for exact details on what the conditions and restrictions are.
-  

+    
+      
Free & 
Open source

+    
+    
+      

+        Inter is a free and open source font family.

+        You are free to use this font in almost any way imaginable.

+        Refer to the SIL Open Font License 1.1 for exact details on what the conditions and restrictions are.
+      

+    
 
+
+

Weights & Styles

@@ -205,16 +222,16 @@ html { font-family: 'Inter', sans-serif; } %} {% if has_feature_col %} - - Feature - Disabled - → - Enabled + + Feature + Disabled + → + Enabled {% else %} - - Disabled - → - Enabled + + Disabled + → + Enabled {% 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 %} - {{feat_tag}} - {{sample_in}} - → - {{sample_out}} + {{feat_tag}} + {{sample_in}} + → + {{sample_out}} {% else %} - {{sample_in}} - → - {{sample_out}} + {{sample_in}} + → + {{sample_out}} {% endif %} {% endfor %} @@ -266,63 +283,59 @@ html { font-family: 'Inter', sans-serif; }
You can explore features in the interactive lab.

- -

 

- -
-
- -
+

The story behind Inter

-

- Inter started out in late 2016 as an experiment to build a perfectly - pixel-fitting font at a specific small size (11px.) The idea was that - 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. -

-

- 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 - mono-spaced appearance, - making it really easy to read numbers, punctuation and very short - words, but eye-straining to read anything longer. -

-

- 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 - Figma—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback. -

+ +

+ 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. +

+

+ 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 + mono-spaced appearance, + making it really easy to read numbers, punctuation and very short + words, but eye-straining to read anything longer. +

+

+ 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 + Figma—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback. +

+

 

FAQ

-
    + -
  • - How do I enable and disable font features? -
    • -
  • + +

    + How do I enable and disable font features? +

    In web browsers you'll want to use font-feature-settings. In Figma you can access features via the - Advanced Typography panel. + Advanced Type panel. In Illustrator, Photoshop and friends, you can access features via the Characters and OpenType panels. Sketch doesn't provide a UI for configuring font features, but there's a workaround using macOS's native font UI. -
    • + -
  • - What is the difference between "unhinted" and "hinted" font files? -
    • -
  • + +

    + What is the difference between "unhinted" and "hinted" font files? +

    The font files in the "hinted" folders have additional data in them for assisting ClearType, @@ -334,23 +347,22 @@ html { font-family: 'Inter', sans-serif; } consideration to make. This article explains hinting at a greater length. -
    • + - -
  • - How reliable are the fonts served from rsms.me/inter? Is it on a CDN? -
    • -
  • + +

    + How reliable are the fonts served from rsms.me/inter? Is it on a CDN? +

    rsms.me/inter is backed by GitHub's server network and distributed globally on the CloudFlare CDN, making usage of https://rsms.me/inter/inter.css and associated font files very reliable and fast throughout the world. -
    • + -
  • - Can I help with improving Inter? -
    • -
  • + +

    + Can I help with improving Inter? +

    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 are freely available to improve upon. @@ -360,12 +372,12 @@ html { font-family: 'Inter', sans-serif; } The "Contributing" document 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. -
    • + -
  • - This website claims work started in 2016, but the git repository's log says it started later? -
    • -
  • + +

    + This website claims work started in 2016, but the git repository's log says it started later? +

    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?  :—) -
    • + -
  • - I've made a cool thing that uses Inter, can I share it with you? -  or -
    • -
  • - I have a different question -
    • -
  • + +

    + I've made a cool thing that uses Inter, can I share it with you?
    + or, I have a different question. +

    Reach out on Twitter (@rsms) or over email -
    • + - -
+
-
+
— @rsms
diff --git a/docs/lab/index.html b/docs/lab/index.html index 6b1803028..000ecb7be 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -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) +← ⟵ → ⟶ ↑ ↓ ↕ +↖ ↗ ↘ ↙ ↔ ⟷ ↩ ↪ +↵ ↳ ↰ ↱ ↴ ⇤ ⇥ ⇞ ⇟ ✓ ✗ +● ○ ◆ ◇ ❖  ► ▼ ▲ ◀ +☀ ☼ ♥ ♡ ⬆ ⇧ +⌫ ⌧ ⌦ ⎋ ↺ ↻ +⌘ ⇧ ⇪ ⌃ ⌅ ⌥ ⎇ ⏏ `) diff --git a/docs/res/base.css b/docs/res/base.css index b4254200d..1f349f903 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -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; } diff --git a/docs/res/grid.css b/docs/res/grid.css new file mode 100644 index 000000000..3d5a70bdc --- /dev/null +++ b/docs/res/grid.css @@ -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) } diff --git a/docs/samples/img/lineup-bold-red.svg b/docs/samples/img/lineup-bold-red.svg new file mode 100755 index 000000000..61835bb5e --- /dev/null +++ b/docs/samples/img/lineup-bold-red.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/samples/img/lineup-semi-bold-red.svg b/docs/samples/img/lineup-semi-bold-red.svg new file mode 100755 index 000000000..b15a861e6 --- /dev/null +++ b/docs/samples/img/lineup-semi-bold-red.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/samples/img/sample-regular-text.svg b/docs/samples/img/sample-regular-text.svg new file mode 100644 index 000000000..2a0df234f --- /dev/null +++ b/docs/samples/img/sample-regular-text.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/samples/index.html b/docs/samples/index.html index b3763ebab..825640bfb 100644 --- a/docs/samples/index.html +++ b/docs/samples/index.html @@ -148,6 +148,8 @@ hills. + +