summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/components/_exhibit.scss8
-rw-r--r--assets/css/components/_header.scss6
-rw-r--r--templates/layouts/exhibit.html89
-rw-r--r--yarn.lock2
4 files changed, 49 insertions, 56 deletions
diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss
index 96ed1ae..a68c5f6 100644
--- a/assets/css/components/_exhibit.scss
+++ b/assets/css/components/_exhibit.scss
@@ -4,12 +4,6 @@
4 4
5@include iro.props-namespace('exhibit') { 5@include iro.props-namespace('exhibit') {
6 @include iro.props-store(( 6 @include iro.props-store((
7 --dims: (
8 --height: 100vh,
9 )
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: ( 7 --colors: (
14 --footer: ( 8 --footer: (
15 --bg: fn.global-color(--bg-hi), 9 --bg: fn.global-color(--bg-hi),
@@ -22,7 +16,7 @@
22 grid-template-rows: 1fr auto; 16 grid-template-rows: 1fr auto;
23 grid-template-areas: 'content' 'footer'; 17 grid-template-areas: 'content' 'footer';
24 box-sizing: border-box; 18 box-sizing: border-box;
25 height: fn.dim(--height); 19 height: 100vh;
26 20
27 @include iro.bem-elem('content') { 21 @include iro.bem-elem('content') {
28 grid-area: content; 22 grid-area: content;
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index c8b50f8..2d8818f 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -19,7 +19,7 @@
19 19
20 @include iro.props-store(( 20 @include iro.props-store((
21 --dims: ( 21 --dims: (
22 --height: fn.global-dim(--header --height), 22 --height: calc(fn.global-dim(--header --height) - 2 * fn.dim(--gap, null)),
23 --icon: 1.5rem, 23 --icon: 1.5rem,
24 --pad-x: calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))), 24 --pad-x: calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))),
25 --gap: fn.global-dim(--size --25), 25 --gap: fn.global-dim(--size --25),
@@ -36,8 +36,8 @@
36 display: flex; 36 display: flex;
37 position: absolute; 37 position: absolute;
38 z-index: 100; 38 z-index: 100;
39 top: 0; 39 top: fn.dim(--gap);
40 left: 0; 40 left: fn.dim(--gap);
41 height: fn.dim(--height); 41 height: fn.dim(--height);
42 gap: fn.dim(--gap); 42 gap: fn.dim(--gap);
43 43
diff --git a/templates/layouts/exhibit.html b/templates/layouts/exhibit.html
index 091859a..22f4bcf 100644
--- a/templates/layouts/exhibit.html
+++ b/templates/layouts/exhibit.html
@@ -1,66 +1,65 @@
1<main 1<main
2 class="h-entry"
2 itemprop="hasPart" 3 itemprop="hasPart"
3 itemscope 4 itemscope
4 itemtype="https://schema.org/$schema_type$" 5 itemtype="https://schema.org/$schema_type$"
5 itemid="$url.full$" 6 itemid="$url.full$"
6> 7>
7 <article class="h-entry"> 8 <section class="c-exhibit js-lightbox">
8 <section class="c-exhibit js-lightbox"> 9 <div class="c-exhibit__content o-lightbox">
9 <div class="c-exhibit__content o-lightbox"> 10 <img class="o-lightbox__img" />
10 <img class="o-lightbox__img" /> 11
11 12 <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
12 <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round"> 13 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
13 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> 14 <use href="/icons.svg#chevron-left"></use>
14 <use href="/icons.svg#chevron-left"></use> 15 </svg>
15 </svg> 16 </button>
16 </button> 17
17 18 <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
18 <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round"> 19 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
19 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> 20 <use href="/icons.svg#chevron-right"></use>
20 <use href="/icons.svg#chevron-right"></use> 21 </svg>
21 </svg> 22 </button>
22 </button> 23
23 24 <footer class="o-lightbox__footer"></footer>
24 <footer class="o-lightbox__footer"></footer> 25 </div>
25 </div>
26 26
27 <footer class="c-exhibit__footer"> 27 <footer class="c-exhibit__footer">
28 <div class="l-container l-container--pad-x l-container--narrow-125"> 28 <div class="l-container l-container--pad-x l-container--narrow-125">
29 <div class="l-media l-media--200 u-pl-0 u-pr-0"> 29 <div class="l-media l-media--200 u-pl-0 u-pr-0">
30 <div class="l-media__block l-media__block--main"> 30 <div class="l-media__block l-media__block--main">
31 $if(date)$
32 <small class="u-d-block u-d-none@sm-hi">
33 <time datetime="$date.yyyy_mm_dd$" class="dt-updated" itemprop="dateCreated">
34 $date.short$
35 </time>
36 </small>
37 $endif$
38 <strong class="u-d-block u-elp" itemprop="name headline">$title$</strong>
39 </div>
40 $if(date)$ 31 $if(date)$
41 <small class="l-media__block u-d-none@sm-lo"> 32 <small class="u-d-block u-d-none@sm-hi">
42 <time datetime="$date.yyyy_mm_dd$" itemprop="dateCreated"> 33 <time datetime="$date.yyyy_mm_dd$" class="dt-updated" itemprop="dateCreated">
43 $date.short$ 34 $date.short$
44 </time> 35 </time>
45 </small> 36 </small>
46 $endif$ 37 $endif$
38 <strong class="u-d-block u-elp" itemprop="name headline">$title$</strong>
47 </div> 39 </div>
40 $if(date)$
41 <small class="l-media__block u-d-none@sm-lo">
42 <time datetime="$date.yyyy_mm_dd$" itemprop="dateCreated">
43 $date.short$
44 </time>
45 </small>
46 $endif$
48 </div> 47 </div>
49 </footer> 48 </div>
50 </section> 49 </footer>
50 </section>
51 51
52 <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-400"> 52 <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-400">
53 <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody"> 53 <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
54$body$ 54$body$
55 55
56 $for(images)$ 56 $for(images)$
57 <figure class="c-figure js-lightbox__image u-d-none@js"> 57 <figure class="c-figure js-lightbox__image u-d-none@js">
58 <img src="$it$" /> 58 <img src="$it$" />
59 </figure> 59 </figure>
60 $endfor$ 60 $endfor$
61 </div>
62 </div> 61 </div>
63 </article> 62 </div>
64</main> 63</main>
65 64
66<script src="/lightbox.js"></script> 65<script src="/lightbox.js"></script>
diff --git a/yarn.lock b/yarn.lock
index 655697b..e7c2fd1 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#a3296360acb08cf19d358aa140f8d3c4d054b169" 1283 resolved "git+https://git.vulpes.one/git/iro-design.git#3f9783606896b9d51055c38a052d3612c9181421"
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"
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-26 03:08:25 +0000