From 528c1dacea31f0e2cc79c65917df16e6e20d5f06 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 11 Nov 2021 12:06:25 +0100
Subject: Fix page design, improved header design
---
assets/css/_vars.scss | 2 --
assets/css/components/_footer.scss | 1 -
assets/css/components/_header.scss | 47 +++++++++++++++++++++++++-------------
assets/css/scopes/_body.scss | 12 ++++++++++
4 files changed, 43 insertions(+), 19 deletions(-)
(limited to 'assets')
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ebbefad..848a764 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -36,7 +36,6 @@ $content--width: 46rem;
@include store((
--dims: (
- --outer: 4rem,
--indent: 2rem,
--obj-shadow: 0 .4em 2.8em,
@@ -171,7 +170,6 @@ $content--width: 46rem;
@include store((
--dims: (
- --outer: 3.5rem,
--indent: 1.5rem,
),
), 'sm');
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 6371411..f4e6040 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,7 +9,6 @@
@include component(namespace()) {
position: relative;
- min-height: prop(--dims --outer, $global: true);
margin-top: auto;
overflow: hidden;
background-color: prop(--colors --bg);
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 81e4d4f..e88d167 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,9 +1,12 @@
@include namespace('header') {
@include store((
--colors: (
- --fg: prop(--colors --fg-hi, $global: true),
+ --bg: prop(--colors --bg-lo, $global: true),
+ --fg: prop(--colors --fg-lo, $global: true),
+ --border: prop(--colors --bg, $global: true),
--hover: (
- --fg: prop(--colors --fg-lo, $global: true),
+ --bg: prop(--colors --fg-lo, $global: true),
+ --fg: prop(--colors --bg-hi, $global: true),
),
--active: (
--fg: prop(--colors --fg-lo, $global: true),
@@ -11,32 +14,44 @@
),
--dims: (
--height: 4rem,
- --pad-x: .6rem,
+ --icon: 1.5rem,
+ --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))),
)
));
+ @include store((
+ --colors: (
+ --bg: prop(--colors --bg-hi, $global: true),
+ )
+ ), 'light');
+
@include component(namespace()) {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- height: prop(--dims --height);
+ display: flex;
+ height: prop(--dims --height);
@include element('item') {
- padding: 0 prop(--dims --pad-x);
- line-height: prop(--dims --height);
- color: prop(--colors --fg);
- text-decoration: none;
+ padding: 0 prop(--dims --pad-x);
+ line-height: prop(--dims --height);
+ color: prop(--colors --fg);
+ background-color: prop(--colors --bg);
+ text-decoration: none;
+ transition: background-color .2s, color .2s;
&:hover {
- color: prop(--colors --hover --fg);
+ color: prop(--colors --hover --fg);
+ background-color: prop(--colors --hover --bg);
+ }
+
+ @include next-twin-element {
+ //padding-left: calc(0.5 * #{prop(--dims --pad-x)});
+ //margin-left: calc(-0.5 * #{prop(--dims --pad-x)});
+ border-left: 1px solid prop(--colors --border);
}
@include modifier('icon') {
display: flex;
align-items: center;
justify-content: center;
- padding: 0;
- width: prop(--dims --height);
}
@include modifier('active') {
@@ -46,8 +61,8 @@
}
@include element('icon') {
- width: 1.5em;
- height: 1.5em;
+ width: prop(--dims --icon);
+ height: prop(--dims --icon);
}
}
}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index c11c11f..f1fd0aa 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,6 +1,7 @@
@include namespace('body') {
@include store((
--colors: (
+ --bg: transparent,
--meta: (
--fg: prop(--colors --fg-hi, $global: true),
--bg: prop(--colors --bg-lo, $global: true),
@@ -12,6 +13,7 @@
--obj-border: prop(--colors --obj, $global: true),
),
--dims: (
+ --space-top: 4rem,
--meta: (
--pad-x: .6em,
--pad-y: .2em
@@ -21,6 +23,7 @@
@include store((
--colors: (
+ --bg: prop(--colors --bg-hi, $global: true),
--meta: (
--bg: prop(--colors --bg, $global: true),
),
@@ -31,7 +34,16 @@
)
), 'light');
+ @include store((
+ --dims: (
+ --space-top: 3rem,
+ )
+ ), 'sm');
+
@include scope(namespace()) {
+ margin-top: prop(--dims --space-top);
+ background-color: prop(--colors --bg);
+
@include element('meta') {
display: inline-block;
padding: prop(--dims --meta --pad-y) prop(--dims --meta --pad-x);
--
cgit v1.2.3-70-g09d2