From 349cbedd7f2132151ed6a170cc53453b0fba363a Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 16 May 2021 14:45:16 +0200 Subject: Design --- assets/css/_basics.scss | 4 ++-- assets/css/_vars.scss | 35 ++++++++++++------------------ assets/css/components/_landing-banner.scss | 12 +++++----- assets/css/layouts/_section.scss | 13 ++++++++++- assets/css/scopes/_body.scss | 8 ++++--- assets/css/scopes/_headlines.scss | 23 +++++++++++++++++++- templates/layouts/page.html | 4 ++-- 7 files changed, 64 insertions(+), 35 deletions(-) diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 3093949..741061f 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -45,7 +45,7 @@ code { } code { - color: var(--code--fg); + color: prop(--colors --code --fg); font-size: 1 / 16 * 15em; } @@ -147,7 +147,7 @@ h4, h5, h6 { margin: ($line-height * 2rem) 0 0; - color: var(--heading--fg); + color: prop(--colors --fg-lo); font-size: 1 / 16 * 14em; font-weight: 700; letter-spacing: 1px; diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 814a68d..96c1c75 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -56,10 +56,12 @@ $content--width: 42rem; --obj-shadow: transparent, --accent: ( - --h: 354, - --s: 84%, - --l: 55%, - --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), + --h: 354, + --s: 84%, + --l: 55%, + --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), + --strong: hsl(var(--colors--accent--h), calc(var(--colors--accent--s) * 1.1), calc(var(--colors--accent--l) * 1.1)), + --faint: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .1), ), --focus-ring: var(--colors--fg-lo), @@ -77,6 +79,10 @@ $content--width: 42rem; --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // ) ), + + --code: ( + --fg: var(--colors--fg-hi), + ), ) )); } @@ -107,10 +113,10 @@ $content--width: 42rem; --obj-shadow: rgba(#000, .05), --accent: ( - --h: 354, - --s: 74%, - --l: 48%, - --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), + --h: 354, + --s: 74%, + --l: 48%, + --strong: hsl(var(--colors--accent--h), var(--colors--accent--s), calc(var(--colors--accent--l) * .9)), ), --select: ( @@ -142,16 +148,3 @@ $content--width: 42rem; --indent: 1.5rem, ), ), 'sm'); - -:root { - --heading--fg: var(--colors--fg-lo); - - --code--fg: var(--colors--fg-hi); - - --code-block--fg: var(--colors--fg-hi); - - --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; - --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; - --page--link--hover--bg: var(--page--link--idle--fg); - --page--link--hover--fg: #000; -} diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index 0e44e35..f1b8595 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss @@ -1,8 +1,10 @@ @include namespace('landing-banner') { @include store(( --colors: ( - --emph-fg: prop(--colors --accent --color, $global: true), - --emph-bg: prop(--colors --bg-hi, $global: true) + --emph: ( + --fg: prop(--colors --accent --color, $global: true), + --bg: prop(--colors --bg-hi, $global: true) + ) ) )); @@ -21,14 +23,14 @@ background-image: linear-gradient( to top, transparent .15em, - #{prop(--colors --emph-bg)} .15em, - #{prop(--colors --emph-bg)} .6em, + #{prop(--colors --emph --bg)} .15em, + #{prop(--colors --emph --bg)} .6em, transparent .6em ); } @include element('emph') { - color: prop(--colors --emph-fg); + color: prop(--colors --emph --fg); font-weight: 550; } diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 36c84a7..7c1cc9b 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss @@ -1,10 +1,17 @@ @include namespace('section') { @include store(( --colors: ( - --border: prop(--colors --obj-hi, $global: true), + --border: prop(--colors --obj-hi, $global: true), + --body-bg: transparent, ) )); + @include store(( + --colors: ( + --body-bg: prop(--colors --bg-hi, $global: true), + ) + ), 'light'); + @include layout(namespace()) { position: relative; @@ -15,6 +22,10 @@ padding-bottom: prop(--dims --outer, $global: true); } + @include modifier('body') { + background-color: prop(--colors --body-bg); + } + @include modifier('no-head') { padding-top: prop(--dims --outer, $global: true); } diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index a27b30f..ededaad 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -3,7 +3,7 @@ --colors: ( --meta: prop(--colors --fg-hi, $global: true), --code: ( - --fg: hsl(prop(--colors --accent --h, $global: true), 90%, 64%), + --fg: prop(--colors --accent --strong, $global: true), --bg: prop(--colors --bg-hi, $global: true), ), --obj-border: prop(--colors --obj, $global: true), @@ -13,7 +13,7 @@ @include store(( --colors: ( --code: ( - --fg: hsl(prop(--colors --accent --h, $global: true), 74%, 52%), + --bg: prop(--colors --accent --faint, $global: true), ), --obj-border: prop(--colors --obj-hi, $global: true), ) @@ -36,7 +36,8 @@ } code { - padding: .2em .4em; + padding: .1em .3em; + border-radius: 3px; background-color: prop(--colors --code --bg); color: prop(--colors --code --fg); } @@ -50,6 +51,7 @@ pre code { padding: 0; + border-radius: 0; background-color: transparent; color: currentColor; } diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss index dcd8024..03d6be1 100644 --- a/assets/css/scopes/_headlines.scss +++ b/assets/css/scopes/_headlines.scss @@ -2,11 +2,20 @@ @include store(( --colors: ( --emph: ( - --bg: prop(--colors --bg-hi, $global: true), + --bg: prop(--colors --bg-hi, $global: true), + --body-bg: prop(--colors --bg-hi, $global: true), ) ) )); + @include store(( + --colors: ( + --emph: ( + --body-bg: prop(--colors --bg, $global: true), + ) + ) + ), 'light'); + @include scope(namespace()) { h1, h2, @@ -70,5 +79,17 @@ transparent .6em ); } + + @include modifier('body') { + @include element('title-inner') { + background-image: linear-gradient( + to top, + transparent .15em, + #{prop(--colors --emph --body-bg)} .15em, + #{prop(--colors --emph --body-bg)} .6em, + transparent .6em + ); + } + } } } diff --git a/templates/layouts/page.html b/templates/layouts/page.html index f89a692..3763c62 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html @@ -1,5 +1,5 @@ -
-
+
+
$if(category.show_date)$
$date.long$ -- cgit v1.2.3-70-g09d2