From 055093d463a1d58bd412df1bfe189e27909f8adc Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 15 May 2021 18:11:24 +0200 Subject: Added light theme --- .stylelintrc.json | 2 +- assets/css/_vars.scss | 141 +++++++++++++++++++++---------- assets/css/components/_card.scss | 7 ++ assets/css/components/_header.scss | 1 + assets/css/components/_outer-button.scss | 6 ++ assets/css/components/_project.scss | 18 ++-- assets/css/layouts/_section.scss | 3 - assets/css/scopes/_body.scss | 36 ++++++-- assets/css/style.scss | 4 + templates/layouts/ascii_fox.html | 6 +- 10 files changed, 158 insertions(+), 66 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index f15e9b6..82a61ce 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -5,7 +5,7 @@ "number-leading-zero": "never", "max-nesting-depth": 4, "selector-class-pattern": [ - "^[closu](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", + "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", { "resolveNestedSelectors": true } ], "declaration-colon-space-after": null, diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index ab3d9e5..388db0e 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -24,56 +24,109 @@ $font-size: 16px; $line-height: 1.7; $content--width: 42rem; -$gray0: hsl(220, 7%, 7%); -$gray1: hsl(220, 7%, 11%); -$gray2: hsl(220, 7%, 18%); -$gray3: hsl(220, 7%, 23%); -$gray4: hsl(220, 7%, 38%); -$gray5: hsl(220, 7%, 60%); -$gray6: hsl(220, 7%, 76%); -$gray7: hsl(220, 7%, 100%); +@include iro-execute { + $gray0: hsl(220, 7%, 7%); + $gray1: hsl(220, 7%, 11%); + $gray2: hsl(220, 7%, 18%); + $gray3: hsl(220, 7%, 23%); + $gray4: hsl(220, 7%, 38%); + $gray5: hsl(220, 7%, 60%); + $gray6: hsl(220, 7%, 76%); + $gray7: hsl(220, 7%, 100%); -@include store(( - --dims: ( - --outer: 4rem, - --indent: 2rem, - ), - --colors: ( - --bg-hi: $gray0, // Darker background - --bg: $gray1, // Background - --bg-lo: $gray2, // Lighter background - - --obj-hi: $gray3, - --obj: $gray4, - - --fg-hi: $gray5, // Faint text - --fg: $gray6, // Text - --fg-lo: $gray7, // Strong text - - --accent: ( - --h: 354, - --s: 84%, - --l: 55%, - --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), + @include store(( + --dims: ( + --outer: 4rem, + --indent: 2rem, + + --obj-shadow: 0 .4em 3.5em, ), + --colors: ( + --bg-hi: $gray0, // Darker background + --bg: $gray1, // Background + --bg-lo: $gray2, // Lighter background + + --obj-hi: $gray3, + --obj: $gray4, + + --fg-hi: $gray5, // Faint text + --fg: $gray6, // Text + --fg-lo: $gray7, // Strong text - --focus-ring: var(--colors--fg-lo), + --obj-shadow: transparent, - --select: ( - --bg: rgba($gray7, .996), - --img-bg: rgba($gray7, .5), - --fg: $gray0, - ), + --accent: ( + --h: 354, + --s: 84%, + --l: 55%, + --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), + ), + + --focus-ring: var(--colors--fg-lo), - --link: ( - --idle: var(--colors--fg-lo), - --colored: ( - --idle: hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), // - --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // - ) + --select: ( + --bg: rgba($gray7, .996), + --img-bg: rgba($gray7, .5), + --fg: var(--colors--bg-hi), + ), + + --link: ( + --idle: var(--colors--fg-lo), + --colored: ( + --idle: hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), // + --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // + ) + ), + ) + )); +} + +@include iro-execute { + $gray0: hsl(220, 7%, 100%); + $gray1: hsl(220, 7%, 97%); + $gray2: hsl(220, 7%, 88%); + $gray3: hsl(220, 7%, 83%); + $gray4: hsl(220, 7%, 68%); + $gray5: hsl(220, 7%, 40%); + $gray6: hsl(220, 7%, 16%); + $gray7: hsl(220, 7%, 0%); + + @include store(( + --colors: ( + --bg-hi: $gray0, // Darker background + --bg: $gray1, // Background + --bg-lo: $gray2, // Lighter background + + --obj-hi: $gray3, + --obj: $gray4, + + --fg-hi: $gray5, // Faint text + --fg: $gray6, // Text + --fg-lo: $gray7, // Strong text + + --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)), + ), + + --select: ( + --bg: rgba($gray7, .996), + --img-bg: rgba($gray7, .5), + ), + + --link: ( + --colored: ( + --idle: hsl(210, 80%, 45%), //hsl(var(--colors--accent--h), 100%, 66%), // + --visited: hsl(270, 40%, 45%), //hsl(var(--colors--accent--h), 50%, 66%), // + ) + ), ), - ) -)); + ), 'light'); +} @each $breakpoint in map-keys($breakpoints) { @include media('<=#{$breakpoint}') { diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index fd897a7..eeaa7c1 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -15,6 +15,12 @@ ) )); + @include store(( + --colors: ( + --bg: prop(--colors --bg-hi, $global: true), + ) + ), 'light'); + @include component(namespace()) { display: flex; position: relative; @@ -22,6 +28,7 @@ transform: translateY(0); transition: transform .2s, background-color .2s, color .2s; background-color: prop(--colors --bg); + box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); color: prop(--colors --fg); line-height: 1.4; diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index 61f6f4a..e74780b 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss @@ -18,5 +18,6 @@ left: 0; flex-direction: row; justify-content: flex-start; + box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); } } diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index 2b7775e..f3d3276 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -18,6 +18,12 @@ ) )); + @include store(( + --colors: ( + --border: rgba(#fff, .1), + ) + ), 'light'); + @include component(namespace()) { display: flex; height: prop(--dims --outer, $global: true); diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss index 76cc68b..5248e32 100644 --- a/assets/css/components/_project.scss +++ b/assets/css/components/_project.scss @@ -6,8 +6,9 @@ )); @include component(namespace()) { - position: relative; - overflow: hidden; + position: relative; + overflow: hidden; + box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); &::before { content: ''; @@ -56,13 +57,12 @@ } @include element('card') { - position: absolute; - z-index: 20; - right: 1em; - bottom: 1em; - min-width: 15em; - max-width: calc(100% - 2em); - box-shadow: 0 .8em 2.5em rgba(#000, .25); + position: absolute; + z-index: 20; + right: 1em; + bottom: 1em; + min-width: 15em; + max-width: calc(100% - 2em); } } } diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 9dbe2be..36c84a7 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss @@ -2,9 +2,6 @@ @include store(( --colors: ( --border: prop(--colors --obj-hi, $global: true), - ), - --dims: ( - --banner-blur: .5rem, ) )); diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index b44e083..a27b30f 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -1,17 +1,29 @@ @include namespace('body') { @include store(( --colors: ( - --meta: ( - --fg: prop(--colors --fg-hi, $global: true), - ) + --meta: prop(--colors --fg-hi, $global: true), + --code: ( + --fg: hsl(prop(--colors --accent --h, $global: true), 90%, 64%), + --bg: prop(--colors --bg-hi, $global: true), + ), + --obj-border: prop(--colors --obj, $global: true), ) )); + @include store(( + --colors: ( + --code: ( + --fg: hsl(prop(--colors --accent --h, $global: true), 74%, 52%), + ), + --obj-border: prop(--colors --obj-hi, $global: true), + ) + ), 'light'); + @include scope(namespace()) { font-size: 1 / 16 * 19em; @include element('meta') { - color: prop(--colors --meta --fg); + color: prop(--colors --meta); font-size: 1 / 16 * 15rem; + h1 { @@ -23,11 +35,23 @@ max-width: 100%; } + code { + padding: .2em .4em; + background-color: prop(--colors --code --bg); + color: prop(--colors --code --fg); + } + blockquote, pre { - margin: ($line-height * 1rem) 0 0; + margin: ($line-height * 1rem) 0 0 1px; padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px); - border-left: 3px solid prop(--colors --obj, $global: true); + border-left: 3px solid prop(--colors --obj-border); + } + + pre code { + padding: 0; + background-color: transparent; + color: currentColor; } @include media('<=sm') { diff --git a/assets/css/style.scss b/assets/css/style.scss index 30878fe..5ba15b8 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -40,3 +40,7 @@ } } } + +.t-light { + @include assign('light'); +} diff --git a/templates/layouts/ascii_fox.html b/templates/layouts/ascii_fox.html index ce8597e..9ae3b29 100644 --- a/templates/layouts/ascii_fox.html +++ b/templates/layouts/ascii_fox.html @@ -7,6 +7,6 @@ ' ' |__ ,( |' |_ ' ' ' //\_ ' | ' . | ' ' | ' ' ' | )~._ _( . ) .| ) ' ____,...,______..,_~`` -`.., ' | ' | . ( ' ' | ' ' |, __´ ) ( | | | ` _,~´"' , . ,~--´ ' _| | . |~~.__ ´ ' '__,. | ' ' - ' | | _.~( _ | ' ~( ,-" _.-|~/ |..,____,) ,/,,"' '_( | ' |) ) . ' ( )~-_ | ' ' - ' | (_ ) ´- | ( ' \__,~"´ /:) / |:\ \ ,~( ) . | | ) `, ' _/- .. , _) | ' -´ . ( ` ( . : / : . : (:/\_-, \:.\_-, . \ .\ . : \ . ) . ' ,( . : / . ` + ' | | ..( _ | ' ~( ,-" _.-|~/ |..,____,) ,/,,"' '_( | ' |) ) . ' ( )~-_ | ' ' + ' | )- ´- | ( ' \__,~"´ /:) / |:\ \ ,~( ) . | | ) `, ' _/- .. , _) | ' +´ . ( ` : ´. : / : . : (:/\_-, \:.\_-, . \ .\ . : \ . ) . ' ,( . : / . ` -- cgit v1.2.3-70-g09d2