summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/_declare-vars.scss8
-rw-r--r--assets/css/components/_hnav.scss5
-rw-r--r--assets/css/layouts/_card-list.scss4
-rw-r--r--templates/layouts/categorized_list.html104
-rw-r--r--templates/layouts/list.html46
-rw-r--r--templates/layouts/page.html12
-rw-r--r--yarn.lock2
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 @@
19 --1000: iro.fn-px-to-rem(60px), 19 --1000: iro.fn-px-to-rem(60px),
20 --1100: iro.fn-px-to-rem(70px), 20 --1100: iro.fn-px-to-rem(70px),
21 ), 21 ),
22
23 --paragraph: (
24 --margin-top: fn.dim(--size --400, null),
25 ),
26
27 --heading: (
28 --margin-top: fn.dim(--size --700, null),
29 ),
30 ) 22 )
31), 'dims'); 23), 'dims');
32 24
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 @@
11 11
12 @include iro.props-store(( 12 @include iro.props-store((
13 --dims: ( 13 --dims: (
14 --gap: 1.5em, 14 --gap-x: fn.global-dim(--size --300),
15 --gap-y: fn.global-dim(--size --150),
15 --font-size: .9em, 16 --font-size: .9em,
16 --margin-top: fn.global-dim(--paragraph --margin-top), 17 --margin-top: fn.global-dim(--paragraph --margin-top),
17 --margin-bottom: fn.global-dim(--size --1000), 18 --margin-bottom: fn.global-dim(--size --1000),
@@ -22,7 +23,7 @@
22 @include iro.bem-component(iro.props-namespace()) { 23 @include iro.bem-component(iro.props-namespace()) {
23 display: flex; 24 display: flex;
24 flex-wrap: wrap; 25 flex-wrap: wrap;
25 gap: calc(.5 * fn.dim(--gap)) fn.dim(--gap); 26 gap: fn.dim(--gap-y) fn.dim(--gap-x);
26 align-items: baseline; 27 align-items: baseline;
27 margin: fn.dim(--margin-top) 0 fn.dim(--margin-bottom); 28 margin: fn.dim(--margin-top) 0 fn.dim(--margin-bottom);
28 padding-top: fn.dim(--pad-top); 29 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 @@
13 ), 13 ),
14 --grid-3: ( 14 --grid-3: (
15 --gap: fn.global-dim(--size --75), 15 --gap: fn.global-dim(--size --75),
16 --col-width: fn.global-dim(--size --2300), 16 --col-width: fn.global-dim(--size --2400),
17 ), 17 ),
18 --gallery-2: ( 18 --gallery-2: (
19 --gap: fn.global-dim(--size --200), 19 --gap: fn.global-dim(--size --200),
@@ -21,7 +21,7 @@
21 ), 21 ),
22 --gallery-3: ( 22 --gallery-3: (
23 --gap: fn.global-dim(--size --200), 23 --gap: fn.global-dim(--size --200),
24 --col-width: fn.global-dim(--size --2300), 24 --col-width: fn.global-dim(--size --2400),
25 ), 25 ),
26 ) 26 )
27 ), 'dims'); 27 ), '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 @@
1<main itemprop="mainPart" itemscope itemtype="https://schema.org/DataFeed" itemid="$url.full$"> 1<main
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow h-feed"> 2 class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 h-feed"
3 <header class="s-colored-links"> 3 itemprop="mainPart"
4 <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline"> 4 itemscope
5 <span class="o-heading__primary">$title$</span> 5 itemtype="https://schema.org/DataFeed"
6 </h1> 6 itemid="$url.full$"
7>
8 <header class="s-colored-links">
9 <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
10 <span class="o-heading__primary">$title$</span>
11 </h1>
7 12
8$body$ 13$body$
9 </header> 14 </header>
10 15
11 $if(notoc)$$else$ 16 $if(notoc)$$else$
12 <nav class="c-hnav s-invisible-links" aria-label="Sections"> 17 <nav class="c-hnav s-invisible-links" aria-label="Sections">
13 <h2 class="u-mt-0">Jump to</h2> 18 <h2 class="u-mt-0">Jump to</h2>
14 $for(list)$
15 <a class="c-hnav__item" href="#$it.slug$">$it.title$</a>
16 $endfor$
17 </nav>
18 $endif$
19
20 <div class="l-card-list">
21 $for(list)$ 19 $for(list)$
22 <section class="h-entry h-feed" itemprop="dataFeedElement" itemscope itemtype="https://schema.org/DataFeed"> 20 <a class="c-hnav__item" href="#$it.slug$">$it.title$</a>
23 <header class="l-card-list__header"> 21 $endfor$
24 <h2 class="s-invisible-links u-mt-0 p-name" id="$it.slug$" itemprop="name headline"> 22 </nav>
25 $if(it.url)$ 23 $endif$
26 <a href="$it.url.rel$">$it.title$</a> 24
27 $else$ 25 <div class="l-card-list">
28 $it.title$ 26 $for(list)$
29 $endif$ 27 <section class="h-entry h-feed" itemprop="dataFeedElement" itemscope itemtype="https://schema.org/DataFeed">
30 </h2> 28 <header class="l-card-list__header">
31 $if(it.description)$ 29 <h2 class="s-invisible-links u-mt-0 p-name" id="$it.slug$" itemprop="name headline">
32 <div class="s-small s-colored-links">$it.description$</div> 30 $if(it.url)$
33 $endif$ 31 <a href="$it.url.rel$">$it.title$</a>
34 </header>
35 <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
36 $if(it.layout.is_grid-2)$
37 $it.items:partials/grid_card()$
38 $elseif(it.layout.is_grid-3)$
39 $it.items:partials/grid_card()$
40 $elseif(it.layout.is_gallery-2)$
41 $it.items:partials/gallery_card()$
42 $elseif(it.layout.is_gallery-3)$
43 $it.items:partials/gallery_card()$
44 $else$ 32 $else$
45 $it.items:partials/list_card()$ 33 $it.title$
46 $endif$ 34 $endif$
47 </div> 35 </h2>
48 $if(it.omitted)$ 36 $if(it.description)$
49 <footer class="l-card-list__footer"> 37 <div class="s-small s-colored-links">$it.description$</div>
50 <a class="l-media__block o-badge o-badge--200" href="$it.url.rel$" aria-label="$it.omitted$ more items in '$it.title$'"> 38 $endif$
51 $it.omitted$ more items <span class="u-ml-10">→</span> 39 </header>
52 </a> 40 <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
53 </footer> 41 $if(it.layout.is_grid-2)$
42 $it.items:partials/grid_card()$
43 $elseif(it.layout.is_grid-3)$
44 $it.items:partials/grid_card()$
45 $elseif(it.layout.is_gallery-2)$
46 $it.items:partials/gallery_card()$
47 $elseif(it.layout.is_gallery-3)$
48 $it.items:partials/gallery_card()$
49 $else$
50 $it.items:partials/list_card()$
54 $endif$ 51 $endif$
55 </section> 52 </div>
56 $endfor$ 53 $if(it.omitted)$
57 </div> 54 <footer class="l-card-list__footer">
55 <a class="l-media__block o-badge o-badge--200" href="$it.url.rel$" aria-label="$it.omitted$ more items in '$it.title$'">
56 $it.omitted$ more items <span class="u-ml-10">→</span>
57 </a>
58 </footer>
59 $endif$
60 </section>
61 $endfor$
58 </div> 62 </div>
59</main> 63</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 @@
1<main itemprop="mainPart" itemscope itemtype="https://schema.org/DataFeed" itemid="$url.full$"> 1<main
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow"> 2 class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 h-feed"
3 <header class="s-colored-links"> 3 itemprop="mainPart"
4 <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline"> 4 itemscope
5 <span class="o-heading__primary">$title$</span> 5 itemtype="https://schema.org/DataFeed"
6 </h1> 6 itemid="$url.full$"
7>
8 <header class="s-colored-links">
9 <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
10 <span class="o-heading__primary">$title$</span>
11 </h1>
7 12
8$body$ 13$body$
9 </header> 14 </header>
10 15
11 <div class="l-card-list"> 16 <div class="l-card-list">
12 <div class="l-card-list__cards l-card-list__cards--$list_layout.id$"> 17 <div class="l-card-list__cards l-card-list__cards--$list_layout.id$">
13 $if(list_layout.is_grid-2)$ 18 $if(list_layout.is_grid-2)$
14 $list:partials/grid_card()$ 19 $list:partials/grid_card()$
15 $elseif(list_layout.is_grid-3)$ 20 $elseif(list_layout.is_grid-3)$
16 $list:partials/grid_card()$ 21 $list:partials/grid_card()$
17 $elseif(list_layout.is_gallery-2)$ 22 $elseif(list_layout.is_gallery-2)$
18 $list:partials/gallery_card()$ 23 $list:partials/gallery_card()$
19 $elseif(list_layout.is_gallery-3)$ 24 $elseif(list_layout.is_gallery-3)$
20 $list:partials/gallery_card()$ 25 $list:partials/gallery_card()$
21 $else$ 26 $else$
22 $list:partials/list_card()$ 27 $list:partials/list_card()$
23 $endif$ 28 $endif$
24 </div>
25 </div> 29 </div>
26 </div> 30 </div>
27</main> 31</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 @@
1<main itemprop="hasPart" itemscope itemtype="https://schema.org/$schema_type$" itemid="$url.full$"> 1<main
2 <article class="l-container l-container--pad-x l-container--pad-y l-container--narrow h-entry"> 2 class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125"
3 itemprop="hasPart"
4 itemscope
5 itemtype="https://schema.org/$schema_type$"
6 itemid="$url.full$"
7>
8 <article class="h-entry">
3 $if(date)$ 9 $if(date)$
4 <div class="o-badge s-body__meta u-mb-125 dt-updated"> 10 <div class="o-badge s-body__meta u-mb-125 dt-updated">
5 $date.long$ 11 $date.long$
@@ -10,7 +16,7 @@
10 <span class="s-headings__primary">$title$</span> 16 <span class="s-headings__primary">$title$</span>
11 </h1> 17 </h1>
12 18
13 <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody"> 19 <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">
14$body$ 20$body$
15 </div> 21 </div>
16 22
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:
1280 1280
1281"iro-design@git+https://git.vulpes.one/git/iro-design.git": 1281"iro-design@git+https://git.vulpes.one/git/iro-design.git":
1282 version "1.0.0" 1282 version "1.0.0"
1283 resolved "git+https://git.vulpes.one/git/iro-design.git#41f9a249af7ee5decaecb3084cd2a7a2de96e4bf" 1283 resolved "git+https://git.vulpes.one/git/iro-design.git#7cf8a77dd78df22376aa60e25d77029394276cf8"
1284 dependencies: 1284 dependencies:
1285 "@oddbird/blend" "^0.2.3" 1285 "@oddbird/blend" "^0.2.3"
1286 include-media "^1.4.9" 1286 include-media "^1.4.9"