From fc78b8c5e852327660a2d7616d765393ff407d1f Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 30 Dec 2021 09:45:40 +0100
Subject: Improved lightbox

---
 assets/css/_basics.scss              |  8 ++------
 assets/css/components/_lightbox.scss |  2 +-
 assets/css/objects/_badge.scss       | 25 +++++++++++++++++++++++++
 assets/css/scopes/_body.scss         | 19 -------------------
 assets/css/style.scss                |  1 +
 templates/base.html                  |  4 ++--
 templates/layouts/page.html          |  2 +-
 7 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 assets/css/objects/_badge.scss

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 393aae3..7689379 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -170,12 +170,8 @@ p {
 }
 
 figure {
-    display:          flex;
-    flex-direction:   column;
-    align-items:      center;
-    margin:           ($line-height * 1rem) 0 0;
-    padding:          0;
-    background-color: prop(--colors --bg-hi);
+    margin:  ($line-height * 1rem) 0 0;
+    padding: 0;
 
     img {
         display:    block;
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
index 01c1219..165e21c 100644
--- a/assets/css/components/_lightbox.scss
+++ b/assets/css/components/_lightbox.scss
@@ -36,7 +36,7 @@
             left:             0;
             width:            100%;
             height:           100%;
-            opacity:          .95;
+            opacity:          .85;
             background-color: prop(--colors --bg);
         }
 
diff --git a/assets/css/objects/_badge.scss b/assets/css/objects/_badge.scss
new file mode 100644
index 0000000..216bb89
--- /dev/null
+++ b/assets/css/objects/_badge.scss
@@ -0,0 +1,25 @@
+@include namespace('badge') {
+    @include store((
+        --colors: (
+            --fg: prop(--colors --bg-hi, $global: true),
+            --bg: prop(--colors --fg-lo, $global: true),
+        ),
+        --dims: (
+            --pad-x: .6em,
+            --pad-y: .2em
+        )
+    ));
+
+    @include object(namespace()) {
+        display:          inline-block;
+        padding:          prop(--dims --pad-y) prop(--dims --pad-x);
+        background-color: prop(--colors --bg);
+        color:            prop(--colors --fg);
+        font-size:        iro-px-to-rem(14px);
+
+        &::selection {
+            background-color: prop(--colors --select --inverted --bg, $global: true);
+            color:            prop(--colors --select --inverted --fg, $global: true);
+        }
+    }
+}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 96e1f04..1fc8166 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,10 +1,6 @@
 @include namespace('body') {
     @include store((
         --colors: (
-            --meta: (
-                --fg: prop(--colors --bg-hi, $global: true),
-                --bg: prop(--colors --fg-lo, $global: true),
-            ),
             --code: (
                 --fg: prop(--colors --accent --strong, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
@@ -18,10 +14,6 @@
             )
         ),
         --dims: (
-            --meta: (
-                --pad-x: .6em,
-                --pad-y: .2em
-            ),
             --code: (
                 --pad-x: .3em,
                 --pad-y: .1em
@@ -46,17 +38,6 @@
 
     @include scope(namespace()) {
         @include element('meta') {
-            display:          inline-block;
-            padding:          prop(--dims --meta --pad-y) prop(--dims --meta --pad-x);
-            background-color: prop(--colors --meta --bg);
-            color:            prop(--colors --meta --fg);
-            font-size:        iro-px-to-rem(14px);
-
-            &::selection {
-                background-color: prop(--colors --select --inverted --bg, $global: true);
-                color:            prop(--colors --select --inverted --fg, $global: true);
-            }
-
             + h1 {
                 margin-top: $line-height * .5rem;
             }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index bbdf2af..535bc72 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -12,6 +12,7 @@
 @import 'layouts/container';
 
 @import 'objects/icon';
+@import 'objects/badge';
 
 @import 'components/header';
 @import 'components/footer';
diff --git a/templates/base.html b/templates/base.html
index 6da1065..68c70dd 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -85,8 +85,8 @@ ${layouts/page()}
         <div class="c-lightbox__bg"></div>
 
         <div class="c-lightbox__infobar">
-            <span class="c-lightbox__count"></span>
-            
+            <div class="o-badge c-lightbox__count"></div>
+
             <button class="c-lightbox__close">
                 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-x"></use>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index e4078cc..ee7437d 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,6 +1,6 @@
 <article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines $if(intro)$s-intro$endif$">
     $if(date)$
-        <div class="s-body__meta">
+        <div class="o-badge s-body__meta">
             $date.long$
         </div>
     $endif$
-- 
cgit v1.2.3-70-g09d2