Added lightbox

5 files changed, 112 insertions, 28 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 9619862..393aae3 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -169,6 +169,22 @@ p {
     margin: ($line-height * 1rem) 0 0;
 }
 
+figure {
+    display:          flex;
+    flex-direction:   column;
+    align-items:      center;
+    margin:           ($line-height * 1rem) 0 0;
+    padding:          0;
+    background-color: prop(--colors --bg-hi);
+
+    img {
+        display:    block;
+        max-width:  100%;
+        max-height: 70vh;
+        object-fit: contain;
+    }
+}
+
 :link,
 :visited {
     color: prop(--colors --link --default);
diff --git a/assets/css/components/_gallery.scss b/assets/css/components/_gallery.scss
deleted file mode 100644
index 651d873..0000000
--- a/assets/css/components/_gallery.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@include namespace('gallery') {
-    @include store((
-        --dims: (
-            --col-width: 17em
-        )
-    ));
-
-    @include component(namespace()) {
-        margin-top: $line-height * 1rem;
-
-        @include element('items') {
-            display:               grid;
-            grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
-            gap:                   20px;
-        }
-
-        @include element('item') {
-            display: block;
-        }
-
-        @include element('img') {
-            display: block;
-        }
-    }
-}
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
new file mode 100644
index 0000000..ece2b4b
--- /dev/null
+++ b/assets/css/components/_lightbox.scss
@@ -0,0 +1,93 @@
+@include namespace('lightbox') {
+    @include store((
+        --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
+            --button: (
+                --idle:  prop(--colors --fg-hi, $global: true),
+                --hover: prop(--colors --fg-lo, $global: true),
+            )
+        ),
+        --dims: (
+            --col-width: 17em
+        )
+    ));
+
+    @include component(namespace()) {
+        display:         flex;
+        visibility:      hidden;
+        position:        fixed;
+        z-index:         5000;
+        top:             0;
+        left:            0;
+        box-sizing:      border-box;
+        align-items:     center;
+        justify-content: center;
+        width:           100%;
+        height:          100%;
+        padding:         2em calc(3em + 1rem);
+        transition:      opacity .2s, visibility .2s;
+        opacity:         0;
+
+        @include element('bg') {
+            position:         absolute;
+            z-index:          -10;
+            top:              0;
+            left:             0;
+            width:            100%;
+            height:           100%;
+            opacity:          .95;
+            background-color: prop(--colors --bg);
+        }
+
+        @include is('shown') {
+            visibility: visible;
+            transition: opacity .2s, visibility 0 .2s;
+            opacity:    1;
+        }
+
+        @include element('img') {
+            max-width:  100%;
+            max-height: 100%;
+        }
+
+        @include element('close', 'prev', 'next') {
+            margin:           0;
+            transition:       color .2s;
+            border:           0;
+            background-color: transparent;
+            color:            currentColor;
+
+            &:hover {
+                color: prop(--colors --button --hover);
+            }
+        }
+
+        @include element('close') {
+            position:  absolute;
+            top:       0;
+            right:     0;
+            padding:   1rem;
+            font-size: 1.5em;
+        }
+
+        @include element('prev', 'next') {
+            position:  absolute;
+            top:       50%;
+            padding:   .5rem;
+            transform: translate(0, -50%);
+            font-size: 3em;
+
+            > * {
+                stroke-width: .75px;
+            }
+        }
+
+        @include element('prev') {
+            left: 0;
+        }
+
+        @include element('next') {
+            right: 0;
+        }
+    }
+}
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
index 53f6f78..7c5d03a 100644
--- a/assets/css/objects/_icon.scss
+++ b/assets/css/objects/_icon.scss
@@ -7,8 +7,8 @@
     
     @include object(namespace()) {
         display:         block;
-        width:           iro-px-to-rem(16px);
-        height:          iro-px-to-rem(16px);
+        width:           1em;
+        height:          1em;
         stroke-width:    1.5px;
         stroke-linecap:  round;
         stroke-linejoin: round;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 45b733d..bbdf2af 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -17,7 +17,7 @@
 @import 'components/footer';
 @import 'components/card';
 @import 'components/note';
-@import 'components/gallery';
+@import 'components/lightbox';
 
 @import 'layouts/card-list';