Update

author: Volpeon <git@volpeon.ink> 2022-06-18 07:21:26 +0200
committer: Volpeon <git@volpeon.ink> 2022-06-18 07:21:26 +0200
commit: 52e2f1b9edcf7507dbef073e4978d5deef04b672 (patch)
tree: 47daade08333d2594b020d00133a05a1ba702a83
parent: Update (diff)
download: volpeon.ink-52e2f1b9edcf7507dbef073e4978d5deef04b672.tar.gz
volpeon.ink-52e2f1b9edcf7507dbef073e4978d5deef04b672.tar.bz2
volpeon.ink-52e2f1b9edcf7507dbef073e4978d5deef04b672.zip
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 @@
 @include iro.props-namespace('exhibit') {
    @include iro.props-store((
-        --dims: (
-            --height:  100vh,
-        )
-    ), 'dims');
-    @include iro.props-store((
        --colors: (
            --footer: (
                --bg: fn.global-color(--bg-hi),
@@ -22,7 +16,7 @@
        grid-template-rows:  1fr auto;
        grid-template-areas: 'content' 'footer';
        box-sizing:          border-box;
-        height:              fn.dim(--height);
+        height:              100vh;
        @include iro.bem-elem('content') {
            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 @@
    @include iro.props-store((
        --dims: (
-            --height: fn.global-dim(--header --height),
+            --height: calc(fn.global-dim(--header --height) - 2 * fn.dim(--gap, null)),
            --icon:   1.5rem,
            --pad-x:  calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))),
            --gap:    fn.global-dim(--size --25),
@@ -36,8 +36,8 @@
        display:  flex;
        position: absolute;
        z-index:  100;
-        top:      0;
+        top:      fn.dim(--gap);
-        left:     0;
+        left:     fn.dim(--gap);
        height:   fn.dim(--height);
        gap:      fn.dim(--gap);
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 @@
 <main
+    class="h-entry"
    itemprop="hasPart"
    itemscope
    itemtype="https://schema.org/$schema_type$"
    itemid="$url.full$"
 >
-    <article class="h-entry">
+    <section class="c-exhibit js-lightbox">
-        <section class="c-exhibit js-lightbox">
+        <div class="c-exhibit__content o-lightbox">
-            <div class="c-exhibit__content o-lightbox">
+            <img class="o-lightbox__img" />
-                <img class="o-lightbox__img" />
+        
-            
+            <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
-                <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
-                    <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                    <use href="/icons.svg#chevron-left"></use>
-                        <use href="/icons.svg#chevron-left"></use>
+                </svg>
-                    </svg>
+            </button>
-                </button>
+        
-            
+            <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
-                <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
-                    <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                    <use href="/icons.svg#chevron-right"></use>
-                        <use href="/icons.svg#chevron-right"></use>
+                </svg>
-                    </svg>
+            </button>
-                </button>
+        
-            
+            <footer class="o-lightbox__footer"></footer>
-                <footer class="o-lightbox__footer"></footer>
+        </div>            
-            </div>            
-            <footer class="c-exhibit__footer">
+        <footer class="c-exhibit__footer">
-                <div class="l-container l-container--pad-x l-container--narrow-125">
+            <div class="l-container l-container--pad-x l-container--narrow-125">
-                    <div class="l-media l-media--200 u-pl-0 u-pr-0">
+                <div class="l-media l-media--200 u-pl-0 u-pr-0">
-                        <div class="l-media__block l-media__block--main">
+                    <div class="l-media__block l-media__block--main">
-                            $if(date)$
-                                <small class="u-d-block u-d-none@sm-hi">
-                                    <time datetime="$date.yyyy_mm_dd$" class="dt-updated" itemprop="dateCreated">
-                                        $date.short$
-                                    </time>
-                                </small>
-                            $endif$
-                            <strong class="u-d-block u-elp" itemprop="name headline">$title$</strong>
-                        </div>
                        $if(date)$
-                            <small class="l-media__block u-d-none@sm-lo">
+                            <small class="u-d-block u-d-none@sm-hi">
-                                <time datetime="$date.yyyy_mm_dd$" itemprop="dateCreated">
+                                <time datetime="$date.yyyy_mm_dd$" class="dt-updated" itemprop="dateCreated">
                                    $date.short$
                                </time>
                            </small>
                        $endif$
+                        <strong class="u-d-block u-elp" itemprop="name headline">$title$</strong>
                    </div>
+                    $if(date)$
+                        <small class="l-media__block u-d-none@sm-lo">
+                            <time datetime="$date.yyyy_mm_dd$" itemprop="dateCreated">
+                                $date.short$
+                            </time>
+                        </small>
+                    $endif$
                </div>
-            </footer>
+            </div>
-        </section>
+        </footer>
+    </section>
-        <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-400">
+    <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-400">
-            <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="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
 $body$
-                $for(images)$
+            $for(images)$
-                    <figure class="c-figure js-lightbox__image u-d-none@js">
+                <figure class="c-figure js-lightbox__image u-d-none@js">
-                        <img src="$it$" />
+                    <img src="$it$" />
-                    </figure>
+                </figure>
-                $endfor$
+            $endfor$
-            </div>
        </div>
-    </article>
+    </div>
 </main>
 <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:
 "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#a3296360acb08cf19d358aa140f8d3c4d054b169"
+  resolved "git+https://git.vulpes.one/git/iro-design.git#3f9783606896b9d51055c38a052d3612c9181421"
  dependencies:
    "@oddbird/blend" "^0.2.3"
    include-media "^1.4.9"
author	Volpeon <git@volpeon.ink>	2022-06-18 07:21:26 +0200
committer	Volpeon <git@volpeon.ink>	2022-06-18 07:21:26 +0200
commit	52e2f1b9edcf7507dbef073e4978d5deef04b672 (patch)
tree	47daade08333d2594b020d00133a05a1ba702a83
parent	Update (diff)
download	volpeon.ink-52e2f1b9edcf7507dbef073e4978d5deef04b672.tar.gz volpeon.ink-52e2f1b9edcf7507dbef073e4978d5deef04b672.tar.bz2 volpeon.ink-52e2f1b9edcf7507dbef073e4978d5deef04b672.zip

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"