diff options
-rw-r--r-- | assets/css/_declare-vars.scss | 8 | ||||
-rw-r--r-- | assets/css/components/_hnav.scss | 5 | ||||
-rw-r--r-- | assets/css/layouts/_card-list.scss | 4 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 104 | ||||
-rw-r--r-- | templates/layouts/list.html | 46 | ||||
-rw-r--r-- | templates/layouts/page.html | 12 | ||||
-rw-r--r-- | 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 @@ | |||
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 | ||
@@ -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" |