Added lightbox

2 files changed, 93 insertions, 25 deletions

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;
+        }
+    }
+}