From ec81f70b5983054b0e0fa46a75c639c665b1550b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 15 May 2021 20:28:42 +0200 Subject: Fix overlapping box-shadows in card grid, load theme from localStorage --- assets/css/_vars.scss | 10 ++++++---- assets/css/layouts/_card-grid.scss | 5 +++++ assets/css/style.scss | 5 +++-- templates/base.html | 8 ++++++++ 4 files changed, 22 insertions(+), 6 deletions(-) diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 388db0e..bbe02e5 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -53,7 +53,8 @@ $content--width: 42rem; --fg: $gray6, // Text --fg-lo: $gray7, // Strong text - --obj-shadow: transparent, + --obj-shadow: transparent, + --obj-shadow-filter: transparent, --accent: ( --h: 354, @@ -83,7 +84,7 @@ $content--width: 42rem; @include iro-execute { $gray0: hsl(220, 7%, 100%); - $gray1: hsl(220, 7%, 97%); + $gray1: hsl(220, 7%, 96%); $gray2: hsl(220, 7%, 88%); $gray3: hsl(220, 7%, 83%); $gray4: hsl(220, 7%, 68%); @@ -104,7 +105,8 @@ $content--width: 42rem; --fg: $gray6, // Text --fg-lo: $gray7, // Strong text - --obj-shadow: rgba(#000, .05), + --obj-shadow: rgba(#000, .05), + --obj-shadow-filter: rgba(#000, .04), --accent: ( --h: 354, @@ -120,7 +122,7 @@ $content--width: 42rem; --link: ( --colored: ( - --idle: hsl(210, 80%, 45%), //hsl(var(--colors--accent--h), 100%, 66%), // + --idle: hsl(210, 80%, 43%), //hsl(var(--colors--accent--h), 100%, 66%), // --visited: hsl(270, 40%, 45%), //hsl(var(--colors--accent--h), 50%, 66%), // ) ), diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss index 7c8ad8c..235ef0b 100644 --- a/assets/css/layouts/_card-grid.scss +++ b/assets/css/layouts/_card-grid.scss @@ -9,6 +9,11 @@ display: grid; grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); gap: .6rem; + filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow-filter, $global: true)}); + + @include element('card') { + box-shadow: none; + } @include media('<=sm') { grid-template-columns: 1fr; diff --git a/assets/css/style.scss b/assets/css/style.scss index 5ba15b8..3d9dde1 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -12,8 +12,6 @@ @import 'layouts/container'; @import 'layouts/section'; @import 'layouts/landing'; -@import 'layouts/card-grid'; -@import 'layouts/project-grid'; @import 'objects/icon'; @@ -25,6 +23,9 @@ @import 'components/project'; @import 'components/post-list'; +@import 'layouts/card-grid'; +@import 'layouts/project-grid'; + @import 'scopes/colored-links'; @import 'scopes/headlines'; @import 'scopes/body'; diff --git a/templates/base.html b/templates/base.html index d9aaa8e..3a1502b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -30,6 +30,14 @@ + + -- cgit v1.2.3-70-g09d2