Improved lightbox

5 files changed, 29 insertions, 26 deletions

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';