From 26c099aa807d8e67944f72be04a325f37da305d5 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 18 Jun 2022 00:04:21 +0200 Subject: Added page type for art pieces --- assets/css/_declare-vars.scss | 8 ++++++++ assets/css/components/_exhibit.scss | 38 +++++++++++++++++++++++++++++++++++++ assets/css/components/_header.scss | 38 +++++++++++-------------------------- assets/css/components/_main.scss | 15 +++++++++++++++ assets/css/layouts/_card-list.scss | 4 ++-- assets/css/scopes/_body.scss | 10 ++++++++++ assets/css/style.scss | 3 +++ 7 files changed, 87 insertions(+), 29 deletions(-) create mode 100644 assets/css/components/_exhibit.scss create mode 100644 assets/css/components/_main.scss create mode 100644 assets/css/scopes/_body.scss (limited to 'assets/css') diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss index 3422588..38aaa21 100644 --- a/assets/css/_declare-vars.scss +++ b/assets/css/_declare-vars.scss @@ -19,6 +19,10 @@ --1000: iro.fn-px-to-rem(60px), --1100: iro.fn-px-to-rem(70px), ), + + --header: ( + --height: fn.dim(--size --800), + ), ) ), 'dims'); @@ -40,6 +44,10 @@ --1000: iro.fn-px-to-rem(45px), --1100: iro.fn-px-to-rem(50px), ), + + --header: ( + --height: fn.dim(--size --700), + ), ) ), 'sm'); diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss new file mode 100644 index 0000000..96ed1ae --- /dev/null +++ b/assets/css/components/_exhibit.scss @@ -0,0 +1,38 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use 'include-media/dist/include-media' as media; + +@include iro.props-namespace('exhibit') { + @include iro.props-store(( + --dims: ( + --height: 100vh, + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --footer: ( + --bg: fn.global-color(--bg-hi), + ), + ) + ), 'colors'); + + @include iro.bem-component(iro.props-namespace()) { + display: grid; + grid-template-rows: 1fr auto; + grid-template-areas: 'content' 'footer'; + box-sizing: border-box; + height: fn.dim(--height); + + @include iro.bem-elem('content') { + grid-area: content; + height: auto; + overflow: hidden; + } + + @include iro.bem-elem('footer') { + grid-area: footer; + background-color: fn.color(--footer --bg); + } + } +} diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index ce216ee..c8b50f8 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss @@ -19,10 +19,10 @@ @include iro.props-store(( --dims: ( - --height: 4rem, + --height: fn.global-dim(--header --height), --icon: 1.5rem, - --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), - --gap: 2px, + --pad-x: calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))), + --gap: fn.global-dim(--size --25), ) ), 'dims'); @@ -32,18 +32,14 @@ ) ), 'colors-dark'); - @include iro.props-store(( - --dims: ( - --height: 3.4rem, - ) - ), 'sm'); - @include iro.bem-component(iro.props-namespace()) { - display: flex; - width: 0; - height: fn.dim(--height); - padding: fn.dim(--gap); - gap: fn.dim(--gap); + display: flex; + position: absolute; + z-index: 100; + top: 0; + left: 0; + height: fn.dim(--height); + gap: fn.dim(--gap); @include iro.bem-elem('item') { padding: 0 fn.dim(--pad-x); @@ -52,7 +48,6 @@ color: fn.color(--fg); line-height: fn.dim(--height); text-decoration: none; - white-space: nowrap; &:hover, &:focus { @@ -78,19 +73,8 @@ height: fn.dim(--icon); } - @include iro.bem-modifier('fixed') { - position: fixed; - } - @include media.media('>=lg') { - position: sticky; - z-index: 100; - top: 0; - margin-bottom: calc(-.75 * #{fn.dim(--height)}); - - @include iro.bem-modifier('fixed') { - position: fixed; - } + position: fixed; } @media print { diff --git a/assets/css/components/_main.scss b/assets/css/components/_main.scss new file mode 100644 index 0000000..f0a839e --- /dev/null +++ b/assets/css/components/_main.scss @@ -0,0 +1,15 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use 'include-media/dist/include-media' as media; + +@include iro.props-namespace('main') { + @include iro.props-store(( + --dims: ( + --pad-top: fn.global-dim(--header --height), + ) + ), 'dims'); + + @include iro.bem-component(iro.props-namespace()) { + margin-top: fn.dim(--pad-top); + } +} diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss index 2d9d58f..92c89b7 100644 --- a/assets/css/layouts/_card-list.scss +++ b/assets/css/layouts/_card-list.scss @@ -9,7 +9,7 @@ --gap: fn.global-dim(--size --25), --grid-2: ( --gap: fn.global-dim(--size --75), - --col-width: fn.global-dim(--size --3400), + --col-width: fn.global-dim(--size --3200), ), --grid-3: ( --gap: fn.global-dim(--size --75), @@ -17,7 +17,7 @@ ), --gallery-2: ( --gap: fn.global-dim(--size --200), - --col-width: fn.global-dim(--size --3400), + --col-width: fn.global-dim(--size --3200), ), --gallery-3: ( --gap: fn.global-dim(--size --200), diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss new file mode 100644 index 0000000..1c76843 --- /dev/null +++ b/assets/css/scopes/_body.scss @@ -0,0 +1,10 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('body') { + @include iro.bem-scope(iro.props-namespace()) { + > :first-child { + margin-top: 0; + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 3fce2f4..046210f 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -18,11 +18,13 @@ @use 'iro-design/src/objects/alert' as iro-alert; @use 'iro-design/src/objects/lightbox' as iro-lightbox; +@use 'components/main'; @use 'components/footer'; @use 'components/header'; @use 'components/hnav'; @use 'components/card'; @use 'components/figure'; +@use 'components/exhibit'; @use 'iro-design/src/scopes/blockquotes' as iro-blockquotes; @use 'iro-design/src/scopes/code' as iro-code; @@ -31,6 +33,7 @@ @use 'iro-design/src/scopes/invisible-links' as iro-invisible-links; @use 'iro-design/src/scopes/lists' as iro-lists; @use 'iro-design/src/scopes/tables' as iro-tables; +@use 'scopes/body'; @use 'scopes/small'; @use 'scopes/alerts'; -- cgit v1.2.3-54-g00ecf