From 2741a01ba1bf85ddcabd658c092ee0681d8b1142 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Jun 2021 12:12:02 +0200 Subject: More distinctive appearance for unread posts --- assets/css/_vars.scss | 52 +++++++++++++++++++++++++++++++---- assets/css/components/_card.scss | 30 ++++++++++++++++++++ assets/css/components/_post-list.scss | 9 ------ assets/css/scopes/_body.scss | 3 +- 4 files changed, 78 insertions(+), 16 deletions(-) (limited to 'assets') diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 7a5ed5c..ba2d1fa 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -60,8 +60,35 @@ $content--width: 42rem; --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.2), calc(var(--colors--accent--l) * 1.2)), - --faint: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .1), + --strong: hsl( + var(--colors--accent--h), + calc(var(--colors--accent--s) * 1.2), + calc(var(--colors--accent--l) * 1.2) + ), + --faint: hsla( + var(--colors--accent--h), + var(--colors--accent--s), + var(--colors--accent--l), + .1 + ), + ), + + --secondary-accent: ( + --h: 220, + --s: 100%, + --l: 80%, + --color: hsl(var(--colors--secondary-accent--h), var(--colors--secondary-accent--s), var(--colors--secondary-accent--l)), + --strong: hsl( + var(--colors--secondary-accent--h), + calc(var(--colors--secondary-accent--s) * 1.2), + calc(var(--colors--secondary-accent--l) * 1.2) + ), + --faint: hsla( + var(--colors--secondary-accent--h), + var(--colors--secondary-accent--s), + var(--colors--secondary-accent--l), + .1 + ), ), --focus-ring: var(--colors--fg-lo), @@ -75,7 +102,7 @@ $content--width: 42rem; --link: ( --idle: var(--colors--fg-lo), --colored: ( - --idle: hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), // + --idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), // --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), // ) ), @@ -116,7 +143,22 @@ $content--width: 42rem; --h: 354, --s: 74%, --l: 48%, - --strong: hsl(var(--colors--accent--h), var(--colors--accent--s), calc(var(--colors--accent--l) * .8)), + --strong: hsl( + var(--colors--accent--h), + var(--colors--accent--s), + calc(var(--colors--accent--l) * .8) + ), + ), + + --secondary-accent: ( + --h: 220, + --s: 60%, + --l: 40%, + --strong: hsl( + var(--colors--secondary-accent--h), + var(--colors--secondary-accent--s), + calc(var(--colors--secondary-accent--l) * .8) + ), ), --select: ( @@ -126,7 +168,7 @@ $content--width: 42rem; --link: ( --colored: ( - --idle: hsl(220, 60%, 40%), //hsl(var(--colors--accent--h), 100%, 66%), // + --idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), // --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // ) ), diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index eeaa7c1..1a7d1bd 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -11,6 +11,11 @@ --hover: ( --bg: prop(--colors --fg-lo, $global: true), --fg: prop(--colors --bg-hi, $global: true), + ), + --link: ( + --bg: prop(--colors --obj-hi, $global: true), + --fg: prop(--colors --fg-lo, $global: true), + --fg-faint: prop(--colors --fg, $global: true), ) ) )); @@ -18,6 +23,20 @@ @include store(( --colors: ( --bg: prop(--colors --bg-hi, $global: true), + --link: ( + --bg: hsl( + prop(--colors --secondary-accent --h, $global: true), + prop(--colors --secondary-accent --s, $global: true), + 98.8%, + ), + --fg: prop(--colors --secondary-accent --color, $global: true), + --fg-faint: hsla( + prop(--colors --secondary-accent --h, $global: true), + prop(--colors --secondary-accent --s, $global: true), + prop(--colors --secondary-accent --l, $global: true), + .75 + ), + ) ) ), 'light'); @@ -67,6 +86,17 @@ } } + @include modifier('mark-visited') { + &:link { + background-color: prop(--colors --link --bg); + color: prop(--colors --link --fg); + + small { + color: prop(--colors --link --fg-faint); + } + } + } + @include element('content') { box-sizing: border-box; width: 100%; diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss index 9220d1c..922cbd9 100644 --- a/assets/css/components/_post-list.scss +++ b/assets/css/components/_post-list.scss @@ -4,10 +4,6 @@ --cat: ( --fg: prop(--colors --fg-lo, $global: true), ), - --post: ( - --idle-fg: prop(--colors --fg-lo, $global: true), - --visited-fg: prop(--colors --fg, $global: true), - ), --meta: ( --fg: prop(--colors --fg-hi, $global: true), ) @@ -38,11 +34,6 @@ @include element('post') { box-shadow: none; - color: prop(--colors --post --idle-fg); - - &:visited { - color: prop(--colors --post --visited-fg); - } @include next-twin-element { margin-top: 4px; diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index 3a552f9..46b829b 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -2,7 +2,7 @@ @include store(( --colors: ( --meta: ( - --fg: prop(--colors --fg, $global: true), + --fg: prop(--colors --fg-hi, $global: true), --bg: prop(--colors --bg-lo, $global: true), ), --code: ( @@ -22,7 +22,6 @@ @include store(( --colors: ( --meta: ( - --fg: prop(--colors --fg-hi, $global: true), --bg: prop(--colors --bg, $global: true), ), --code: ( -- cgit v1.2.3-54-g00ecf