From caa2570c5177246cb59808de4a225d6fee19c524 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 17 Jun 2022 10:59:19 +0200
Subject: Update
---
assets/css/_declare-vars.scss | 8 ---
assets/css/components/_hnav.scss | 5 +-
assets/css/layouts/_card-list.scss | 4 +-
templates/layouts/categorized_list.html | 104 +++++++++++++++++---------------
templates/layouts/list.html | 46 +++++++-------
templates/layouts/page.html | 12 +++-
yarn.lock | 2 +-
7 files changed, 94 insertions(+), 87 deletions(-)
diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss
index 1adec10..3422588 100644
--- a/assets/css/_declare-vars.scss
+++ b/assets/css/_declare-vars.scss
@@ -19,14 +19,6 @@
--1000: iro.fn-px-to-rem(60px),
--1100: iro.fn-px-to-rem(70px),
),
-
- --paragraph: (
- --margin-top: fn.dim(--size --400, null),
- ),
-
- --heading: (
- --margin-top: fn.dim(--size --700, null),
- ),
)
), 'dims');
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 1b57cc0..4023c82 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -11,7 +11,8 @@
@include iro.props-store((
--dims: (
- --gap: 1.5em,
+ --gap-x: fn.global-dim(--size --300),
+ --gap-y: fn.global-dim(--size --150),
--font-size: .9em,
--margin-top: fn.global-dim(--paragraph --margin-top),
--margin-bottom: fn.global-dim(--size --1000),
@@ -22,7 +23,7 @@
@include iro.bem-component(iro.props-namespace()) {
display: flex;
flex-wrap: wrap;
- gap: calc(.5 * fn.dim(--gap)) fn.dim(--gap);
+ gap: fn.dim(--gap-y) fn.dim(--gap-x);
align-items: baseline;
margin: fn.dim(--margin-top) 0 fn.dim(--margin-bottom);
padding-top: fn.dim(--pad-top);
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index d983f8d..2d9d58f 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -13,7 +13,7 @@
),
--grid-3: (
--gap: fn.global-dim(--size --75),
- --col-width: fn.global-dim(--size --2300),
+ --col-width: fn.global-dim(--size --2400),
),
--gallery-2: (
--gap: fn.global-dim(--size --200),
@@ -21,7 +21,7 @@
),
--gallery-3: (
--gap: fn.global-dim(--size --200),
- --col-width: fn.global-dim(--size --2300),
+ --col-width: fn.global-dim(--size --2400),
),
)
), 'dims');
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 101f759..206c566 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,59 +1,63 @@
-<main itemprop="mainPart" itemscope itemtype="https://schema.org/DataFeed" itemid="$url.full$">
- <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow h-feed">
- <header class="s-colored-links">
- <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
- <span class="o-heading__primary">$title$</span>
- </h1>
+<main
+ class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 h-feed"
+ itemprop="mainPart"
+ itemscope
+ itemtype="https://schema.org/DataFeed"
+ itemid="$url.full$"
+>
+ <header class="s-colored-links">
+ <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
+ <span class="o-heading__primary">$title$</span>
+ </h1>
$body$
- </header>
+ </header>
- $if(notoc)$$else$
- <nav class="c-hnav s-invisible-links" aria-label="Sections">
- <h2 class="u-mt-0">Jump to</h2>
- $for(list)$
- <a class="c-hnav__item" href="#$it.slug$">$it.title$</a>
- $endfor$
- </nav>
- $endif$
-
- <div class="l-card-list">
+ $if(notoc)$$else$
+ <nav class="c-hnav s-invisible-links" aria-label="Sections">
+ <h2 class="u-mt-0">Jump to</h2>
$for(list)$
- <section class="h-entry h-feed" itemprop="dataFeedElement" itemscope itemtype="https://schema.org/DataFeed">
- <header class="l-card-list__header">
- <h2 class="s-invisible-links u-mt-0 p-name" id="$it.slug$" itemprop="name headline">
- $if(it.url)$
- <a href="$it.url.rel$">$it.title$</a>
- $else$
- $it.title$
- $endif$
- </h2>
- $if(it.description)$
- <div class="s-small s-colored-links">$it.description$</div>
- $endif$
- </header>
- <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
- $if(it.layout.is_grid-2)$
- $it.items:partials/grid_card()$
- $elseif(it.layout.is_grid-3)$
- $it.items:partials/grid_card()$
- $elseif(it.layout.is_gallery-2)$
- $it.items:partials/gallery_card()$
- $elseif(it.layout.is_gallery-3)$
- $it.items:partials/gallery_card()$
+ <a class="c-hnav__item" href="#$it.slug$">$it.title$</a>
+ $endfor$
+ </nav>
+ $endif$
+
+ <div class="l-card-list">
+ $for(list)$
+ <section class="h-entry h-feed" itemprop="dataFeedElement" itemscope itemtype="https://schema.org/DataFeed">
+ <header class="l-card-list__header">
+ <h2 class="s-invisible-links u-mt-0 p-name" id="$it.slug$" itemprop="name headline">
+ $if(it.url)$
+ <a href="$it.url.rel$">$it.title$</a>
$else$
- $it.items:partials/list_card()$
+ $it.title$
$endif$
- </div>
- $if(it.omitted)$
- <footer class="l-card-list__footer">
- <a class="l-media__block o-badge o-badge--200" href="$it.url.rel$" aria-label="$it.omitted$ more items in '$it.title$'">
- $it.omitted$ more items <span class="u-ml-10">→</span>
- </a>
- </footer>
+ </h2>
+ $if(it.description)$
+ <div class="s-small s-colored-links">$it.description$</div>
+ $endif$
+ </header>
+ <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
+ $if(it.layout.is_grid-2)$
+ $it.items:partials/grid_card()$
+ $elseif(it.layout.is_grid-3)$
+ $it.items:partials/grid_card()$
+ $elseif(it.layout.is_gallery-2)$
+ $it.items:partials/gallery_card()$
+ $elseif(it.layout.is_gallery-3)$
+ $it.items:partials/gallery_card()$
+ $else$
+ $it.items:partials/list_card()$
$endif$
- </section>
- $endfor$
- </div>
+ </div>
+ $if(it.omitted)$
+ <footer class="l-card-list__footer">
+ <a class="l-media__block o-badge o-badge--200" href="$it.url.rel$" aria-label="$it.omitted$ more items in '$it.title$'">
+ $it.omitted$ more items <span class="u-ml-10">→</span>
+ </a>
+ </footer>
+ $endif$
+ </section>
+ $endfor$
</div>
</main>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 105c7f5..66a08fd 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,27 +1,31 @@
-<main itemprop="mainPart" itemscope itemtype="https://schema.org/DataFeed" itemid="$url.full$">
- <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow">
- <header class="s-colored-links">
- <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
- <span class="o-heading__primary">$title$</span>
- </h1>
+<main
+ class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 h-feed"
+ itemprop="mainPart"
+ itemscope
+ itemtype="https://schema.org/DataFeed"
+ itemid="$url.full$"
+>
+ <header class="s-colored-links">
+ <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
+ <span class="o-heading__primary">$title$</span>
+ </h1>
$body$
- </header>
+ </header>
- <div class="l-card-list">
- <div class="l-card-list__cards l-card-list__cards--$list_layout.id$">
- $if(list_layout.is_grid-2)$
- $list:partials/grid_card()$
- $elseif(list_layout.is_grid-3)$
- $list:partials/grid_card()$
- $elseif(list_layout.is_gallery-2)$
- $list:partials/gallery_card()$
- $elseif(list_layout.is_gallery-3)$
- $list:partials/gallery_card()$
- $else$
- $list:partials/list_card()$
- $endif$
- </div>
+ <div class="l-card-list">
+ <div class="l-card-list__cards l-card-list__cards--$list_layout.id$">
+ $if(list_layout.is_grid-2)$
+ $list:partials/grid_card()$
+ $elseif(list_layout.is_grid-3)$
+ $list:partials/grid_card()$
+ $elseif(list_layout.is_gallery-2)$
+ $list:partials/gallery_card()$
+ $elseif(list_layout.is_gallery-3)$
+ $list:partials/gallery_card()$
+ $else$
+ $list:partials/list_card()$
+ $endif$
</div>
</div>
</main>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 554ba45..a91d6ad 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,5 +1,11 @@
-<main itemprop="hasPart" itemscope itemtype="https://schema.org/$schema_type$" itemid="$url.full$">
- <article class="l-container l-container--pad-x l-container--pad-y l-container--narrow h-entry">
+<main
+ class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125"
+ itemprop="hasPart"
+ itemscope
+ itemtype="https://schema.org/$schema_type$"
+ itemid="$url.full$"
+>
+ <article class="h-entry">
$if(date)$
<div class="o-badge s-body__meta u-mb-125 dt-updated">
$date.long$
@@ -10,7 +16,7 @@
<span class="s-headings__primary">$title$</span>
</h1>
- <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
+ <div class="l-container l-container--narrow u-ml-0 s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
$body$
</div>
diff --git a/yarn.lock b/yarn.lock
index 50b4b6f..d30d7dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1280,7 +1280,7 @@ internal-slot@^1.0.3:
"iro-design@git+https://git.vulpes.one/git/iro-design.git":
version "1.0.0"
- resolved "git+https://git.vulpes.one/git/iro-design.git#41f9a249af7ee5decaecb3084cd2a7a2de96e4bf"
+ resolved "git+https://git.vulpes.one/git/iro-design.git#7cf8a77dd78df22376aa60e25d77029394276cf8"
dependencies:
"@oddbird/blend" "^0.2.3"
include-media "^1.4.9"
--
cgit v1.2.3-70-g09d2