summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-30 07:41:17 +0100
committerVolpeon <git@volpeon.ink>2021-12-30 07:41:17 +0100
commit1f57750948b4b6fea541e5ed4f473b592b66e47e (patch)
treed2ff81165f605e1d0fcdd4864963d06c9a77f9b6
parentLightbox optimizations (diff)
downloadvolpeon.ink-1f57750948b4b6fea541e5ed4f473b592b66e47e.tar.gz
volpeon.ink-1f57750948b4b6fea541e5ed4f473b592b66e47e.tar.bz2
volpeon.ink-1f57750948b4b6fea541e5ed4f473b592b66e47e.zip
Improved lightbox
-rw-r--r--assets/css/components/_lightbox.scss45
-rw-r--r--content/lightbox.js2
-rw-r--r--templates/base.html14
3 files changed, 44 insertions, 17 deletions
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
index b23943a..d980c41 100644
--- a/assets/css/components/_lightbox.scss
+++ b/assets/css/components/_lightbox.scss
@@ -6,9 +6,6 @@
6 --idle: prop(--colors --fg-hi, $global: true), 6 --idle: prop(--colors --fg-hi, $global: true),
7 --hover: prop(--colors --fg-lo, $global: true), 7 --hover: prop(--colors --fg-lo, $global: true),
8 ) 8 )
9 ),
10 --dims: (
11 --col-width: 17em
12 ) 9 )
13 )); 10 ));
14 11
@@ -20,11 +17,11 @@
20 top: 0; 17 top: 0;
21 left: 0; 18 left: 0;
22 box-sizing: border-box; 19 box-sizing: border-box;
20 flex-direction: column;
23 align-items: center; 21 align-items: center;
24 justify-content: center; 22 justify-content: center;
25 width: 100%; 23 width: 100%;
26 height: 100%; 24 height: 100%;
27 padding: 1em calc(3em + 1rem);
28 transition: opacity .2s, visibility .2s; 25 transition: opacity .2s, visibility .2s;
29 opacity: 0; 26 opacity: 0;
30 27
@@ -45,9 +42,22 @@
45 opacity: 1; 42 opacity: 1;
46 } 43 }
47 44
45 @include element('infobar') {
46 display: flex;
47 box-sizing: border-box;
48 flex: 0 0 auto;
49 align-items: center;
50 width: 100%;
51 padding: 0 1rem;
52 }
53
48 @include element('img') { 54 @include element('img') {
49 max-width: 100%; 55 max-width: 100%;
50 max-height: 100%; 56 min-height: 0;
57 max-height: 100%;
58 margin-top: auto;
59 margin-bottom: auto;
60 padding-bottom: 2rem;
51 } 61 }
52 62
53 @include element('close', 'prev', 'next') { 63 @include element('close', 'prev', 'next') {
@@ -63,20 +73,31 @@
63 } 73 }
64 74
65 @include element('close') { 75 @include element('close') {
66 position: absolute; 76 margin: 0 -1rem 0 auto;
67 top: 0; 77 padding: 1rem;
68 right: 0; 78 font-size: 1.5em;
69 padding: 1rem;
70 font-size: 1.5em;
71 } 79 }
72 80
73 @include element('prev', 'next') { 81 @include element('prev', 'next') {
74 position: absolute; 82 position: absolute;
75 top: 50%; 83 top: 50%;
76 padding: .5rem; 84 padding: 2rem .5rem;
77 transform: translate(0, -50%); 85 transform: translate(0, -50%);
78 font-size: 3em; 86 font-size: 3em;
79 87
88 &::before {
89 content: '';
90 display: block;
91 position: absolute;
92 z-index: -1;
93 top: 50%;
94 left: 50%;
95 width: 1.2em;
96 height: 1.2em;
97 transform: translate(-50%, -50%);
98 background-color: rgba(#000, .25);
99 }
100
80 > * { 101 > * {
81 stroke-width: .75px; 102 stroke-width: .75px;
82 } 103 }
diff --git a/content/lightbox.js b/content/lightbox.js
index d6115b4..4ec959d 100644
--- a/content/lightbox.js
+++ b/content/lightbox.js
@@ -5,6 +5,7 @@
5 const mainEl = document.querySelector("main"); 5 const mainEl = document.querySelector("main");
6 const lightboxEl = document.querySelector(".c-lightbox"); 6 const lightboxEl = document.querySelector(".c-lightbox");
7 const lightboxBgEl = lightboxEl.querySelector(".c-lightbox__bg"); 7 const lightboxBgEl = lightboxEl.querySelector(".c-lightbox__bg");
8 const lightboxCountEl = lightboxEl.querySelector(".c-lightbox__count");
8 const lightboxCloseEl = lightboxEl.querySelector(".c-lightbox__close"); 9 const lightboxCloseEl = lightboxEl.querySelector(".c-lightbox__close");
9 const lightboxPrevEl = lightboxEl.querySelector(".c-lightbox__prev"); 10 const lightboxPrevEl = lightboxEl.querySelector(".c-lightbox__prev");
10 const lightboxNextEl = lightboxEl.querySelector(".c-lightbox__next"); 11 const lightboxNextEl = lightboxEl.querySelector(".c-lightbox__next");
@@ -24,6 +25,7 @@
24 const setIndex = (i) => { 25 const setIndex = (i) => {
25 currentIndex = i; 26 currentIndex = i;
26 lightboxImgEl.src = figureEls[i].href; 27 lightboxImgEl.src = figureEls[i].href;
28 lightboxCountEl.textContent = (i + 1) + " / " + figureEls.length;
27 lightboxPrevEl.classList.toggle("u-dn", i === 0); 29 lightboxPrevEl.classList.toggle("u-dn", i === 0);
28 lightboxNextEl.classList.toggle("u-dn", i === figureEls.length - 1); 30 lightboxNextEl.classList.toggle("u-dn", i === figureEls.length - 1);
29 }; 31 };
diff --git a/templates/base.html b/templates/base.html
index 0690ee1..6da1065 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -84,11 +84,15 @@ ${layouts/page()}
84 <div class="c-lightbox"> 84 <div class="c-lightbox">
85 <div class="c-lightbox__bg"></div> 85 <div class="c-lightbox__bg"></div>
86 86
87 <button class="c-lightbox__close"> 87 <div class="c-lightbox__infobar">
88 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 88 <span class="c-lightbox__count"></span>
89 <use href="/symbols.svg#icon-x"></use> 89
90 </svg> 90 <button class="c-lightbox__close">
91 </button> 91 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
92 <use href="/symbols.svg#icon-x"></use>
93 </svg>
94 </button>
95 </div>
92 96
93 <button class="c-lightbox__prev"> 97 <button class="c-lightbox__prev">
94 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 98 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">