From fc78b8c5e852327660a2d7616d765393ff407d1f Mon Sep 17 00:00:00 2001 From: Volpeon 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()}
- - +
+