From 6662a2dfb60cd24a60225c40a91f3ba9019b718d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 20 Jun 2021 17:30:37 +0200 Subject: CSS/Markup improvements --- assets/css/components/_card.scss | 16 ++++++ assets/css/components/_outer-button.scss | 10 +--- assets/css/layouts/_landing.scss | 2 + assets/css/layouts/_section.scss | 43 ++++++++++----- templates/layouts/categorized_list.html | 2 +- templates/layouts/index.html | 92 +++++++++++++++++--------------- templates/layouts/list.html | 2 +- templates/layouts/page.html | 2 +- 8 files changed, 101 insertions(+), 68 deletions(-) diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 066a00d..0a64f1f 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -13,6 +13,7 @@ --bg: prop(--colors --bg-lo, $global: true), --fg: prop(--colors --fg, $global: true), --unread: prop(--colors --bg, $global: true), + --border: prop(--colors --obj-hi, $global: true), --hover: ( --bg: prop(--colors --fg-lo, $global: true), --fg: prop(--colors --bg-hi, $global: true), @@ -24,6 +25,7 @@ --colors: ( --bg: prop(--colors --bg-hi, $global: true), --unread: prop(--colors --bg-lo, $global: true), + --border: prop(--colors --bg-lo, $global: true), ) ), 'light'); @@ -98,6 +100,20 @@ width: 100%; } + /*@include modifier('separator') { + align-self: stretch; + padding-top: 0; + padding-bottom: 0; + + &::before { + content: ''; + display: block; + width: 1px; + height: 100%; + background-color: prop(--colors --border); + } + }*/ + @include modifier('indicator') { transition: color .2s; color: prop(--colors --unread); diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index f3d3276..fb3a51e 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -3,7 +3,7 @@ --colors: ( --fg: prop(--colors --bg-hi, $global: true), --bg: prop(--colors --fg-lo, $global: true), - --border: rgba(#000, .1), + --border: prop(--colors --fg, $global: true), --hover: ( --bg: prop(--colors --accent --color, $global: true), --fg: prop(--colors --bg-hi, $global: true), @@ -18,12 +18,6 @@ ) )); - @include store(( - --colors: ( - --border: rgba(#fff, .1), - ) - ), 'light'); - @include component(namespace()) { display: flex; height: prop(--dims --outer, $global: true); @@ -72,7 +66,7 @@ height: 100%; padding-right: prop(--dims --pad-x); padding-left: prop(--dims --pad-x); - transition: border-color .2s; + transition: border-left-color .2s; font-size: 1 / 16 * 14em; line-height: prop(--dims --outer, $global: true); white-space: nowrap; diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index 500849e..a81b105 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss @@ -12,6 +12,8 @@ display: flex; flex-direction: row; align-items: center; + margin-top: auto; + margin-bottom: auto; @include element('banner') { width: 70%; diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index e8b1617..80b8ca9 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss @@ -15,6 +15,13 @@ @include layout(namespace()) { position: relative; + @include modifier('flex') { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + } + @include modifier('fullscreen') { box-sizing: border-box; min-height: 100vh; @@ -26,26 +33,17 @@ background-color: prop(--colors --body-bg); } - @include modifier('no-head') { + @include modifier('no-header') { padding-top: prop(--dims --outer, $global: true); } - @include element('head') { + @include element('header') { display: flex; flex-direction: row; - justify-self: flex-start; + align-items: center; + height: prop(--dims --outer, $global: true); font-size: 1 / 16 * 15em; - &::after { - content: ''; - width: 100%; - height: 100%; - margin-top: -1px; - margin-right: prop(--container --dims --pad-x, $global: true); - margin-left: prop(--container --dims --pad-x, $global: true); - border-top: 1px solid prop(--colors --border); - } - @include modifier('sticky') { position: sticky; z-index: 9000; @@ -53,5 +51,24 @@ left: 0; } } + + /*@include element('footer') { + position: absolute; + z-index: 10000; + right: 0; + bottom: 0; + height: prop(--dims --outer, $global: true); + font-size: 1 / 16 * 15em; + }*/ + + @include element('header-separator') { + flex: 1 1 auto; + width: 100%; + height: 100%; + margin-top: -1px; + margin-right: prop(--container --dims --pad-x, $global: true); + margin-left: prop(--container --dims --pad-x, $global: true); + border-top: 1px solid prop(--colors --border); + } } } diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 1b9b293..f841fff 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html @@ -1,4 +1,4 @@ -
+

$title$

diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 00d25af..1f1a092 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html @@ -1,57 +1,59 @@ -
-
-
-

- - I'm a red fox in disguise. - -

-

- Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. -

-
-
+
+
+
+
+

+ + I'm a red fox in disguise. + +

+

+ Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. +

+
+
-
-
-
- $for(profiles)$ - $if(it.featured)$ - $if(it.url)$ - - $else$ -
- $endif$ - $if(it.icon)$ - - - +
+
+
+ $for(profiles)$ + $if(it.featured)$ + $if(it.url)$ + + $else$ +
$endif$ -
- $it.platform$ - $it.username$ -
+ $if(it.icon)$ + + + + $endif$ +
+ $it.platform$ + $it.username$ +
+ $if(it.url)$ + + + + $endif$ $if(it.url)$ - - - + + $else$ +
$endif$ - $if(it.url)$ - - $else$ -
$endif$ - $endif$ - $endfor$ -
+ $endfor$ +
$body$ -
-
+
+
+
-
+
@@ -62,6 +64,8 @@ $body$ $pages.by_id.projects.title$ + +
diff --git a/templates/layouts/list.html b/templates/layouts/list.html index 8794c07..f269d10 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html @@ -1,4 +1,4 @@ -
+

$title$

diff --git a/templates/layouts/page.html b/templates/layouts/page.html index e5781a8..70f645b 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html @@ -1,4 +1,4 @@ -
+
$if(show_date)$
-- cgit v1.2.3-54-g00ecf