diff options
| author | Volpeon <git@volpeon.ink> | 2021-05-15 20:28:42 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2021-05-15 20:28:42 +0200 |
| commit | ec81f70b5983054b0e0fa46a75c639c665b1550b (patch) | |
| tree | 9e4986ac78f26afab24cb3f4b2067b2b1c846664 | |
| parent | Added light theme (diff) | |
| download | volpeon.ink-ec81f70b5983054b0e0fa46a75c639c665b1550b.tar.gz volpeon.ink-ec81f70b5983054b0e0fa46a75c639c665b1550b.tar.bz2 volpeon.ink-ec81f70b5983054b0e0fa46a75c639c665b1550b.zip | |
Fix overlapping box-shadows in card grid, load theme from localStorage
| -rw-r--r-- | assets/css/_vars.scss | 10 | ||||
| -rw-r--r-- | assets/css/layouts/_card-grid.scss | 5 | ||||
| -rw-r--r-- | assets/css/style.scss | 5 | ||||
| -rw-r--r-- | 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; | |||
| 53 | --fg: $gray6, // Text | 53 | --fg: $gray6, // Text |
| 54 | --fg-lo: $gray7, // Strong text | 54 | --fg-lo: $gray7, // Strong text |
| 55 | 55 | ||
| 56 | --obj-shadow: transparent, | 56 | --obj-shadow: transparent, |
| 57 | --obj-shadow-filter: transparent, | ||
| 57 | 58 | ||
| 58 | --accent: ( | 59 | --accent: ( |
| 59 | --h: 354, | 60 | --h: 354, |
| @@ -83,7 +84,7 @@ $content--width: 42rem; | |||
| 83 | 84 | ||
| 84 | @include iro-execute { | 85 | @include iro-execute { |
| 85 | $gray0: hsl(220, 7%, 100%); | 86 | $gray0: hsl(220, 7%, 100%); |
| 86 | $gray1: hsl(220, 7%, 97%); | 87 | $gray1: hsl(220, 7%, 96%); |
| 87 | $gray2: hsl(220, 7%, 88%); | 88 | $gray2: hsl(220, 7%, 88%); |
| 88 | $gray3: hsl(220, 7%, 83%); | 89 | $gray3: hsl(220, 7%, 83%); |
| 89 | $gray4: hsl(220, 7%, 68%); | 90 | $gray4: hsl(220, 7%, 68%); |
| @@ -104,7 +105,8 @@ $content--width: 42rem; | |||
| 104 | --fg: $gray6, // Text | 105 | --fg: $gray6, // Text |
| 105 | --fg-lo: $gray7, // Strong text | 106 | --fg-lo: $gray7, // Strong text |
| 106 | 107 | ||
| 107 | --obj-shadow: rgba(#000, .05), | 108 | --obj-shadow: rgba(#000, .05), |
| 109 | --obj-shadow-filter: rgba(#000, .04), | ||
| 108 | 110 | ||
| 109 | --accent: ( | 111 | --accent: ( |
| 110 | --h: 354, | 112 | --h: 354, |
| @@ -120,7 +122,7 @@ $content--width: 42rem; | |||
| 120 | 122 | ||
| 121 | --link: ( | 123 | --link: ( |
| 122 | --colored: ( | 124 | --colored: ( |
| 123 | --idle: hsl(210, 80%, 45%), //hsl(var(--colors--accent--h), 100%, 66%), // | 125 | --idle: hsl(210, 80%, 43%), //hsl(var(--colors--accent--h), 100%, 66%), // |
| 124 | --visited: hsl(270, 40%, 45%), //hsl(var(--colors--accent--h), 50%, 66%), // | 126 | --visited: hsl(270, 40%, 45%), //hsl(var(--colors--accent--h), 50%, 66%), // |
| 125 | ) | 127 | ) |
| 126 | ), | 128 | ), |
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 @@ | |||
| 9 | display: grid; | 9 | display: grid; |
| 10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | 10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); |
| 11 | gap: .6rem; | 11 | gap: .6rem; |
| 12 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow-filter, $global: true)}); | ||
| 13 | |||
| 14 | @include element('card') { | ||
| 15 | box-shadow: none; | ||
| 16 | } | ||
| 12 | 17 | ||
| 13 | @include media('<=sm') { | 18 | @include media('<=sm') { |
| 14 | grid-template-columns: 1fr; | 19 | 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 @@ | |||
| 12 | @import 'layouts/container'; | 12 | @import 'layouts/container'; |
| 13 | @import 'layouts/section'; | 13 | @import 'layouts/section'; |
| 14 | @import 'layouts/landing'; | 14 | @import 'layouts/landing'; |
| 15 | @import 'layouts/card-grid'; | ||
| 16 | @import 'layouts/project-grid'; | ||
| 17 | 15 | ||
| 18 | @import 'objects/icon'; | 16 | @import 'objects/icon'; |
| 19 | 17 | ||
| @@ -25,6 +23,9 @@ | |||
| 25 | @import 'components/project'; | 23 | @import 'components/project'; |
| 26 | @import 'components/post-list'; | 24 | @import 'components/post-list'; |
| 27 | 25 | ||
| 26 | @import 'layouts/card-grid'; | ||
| 27 | @import 'layouts/project-grid'; | ||
| 28 | |||
| 28 | @import 'scopes/colored-links'; | 29 | @import 'scopes/colored-links'; |
| 29 | @import 'scopes/headlines'; | 30 | @import 'scopes/headlines'; |
| 30 | @import 'scopes/body'; | 31 | @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 @@ | |||
| 30 | <link rel="preload" href="/iosevka-term-ss09-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> | 30 | <link rel="preload" href="/iosevka-term-ss09-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> |
| 31 | 31 | ||
| 32 | <link rel="stylesheet" href="/style.css" /> | 32 | <link rel="stylesheet" href="/style.css" /> |
| 33 | |||
| 34 | <script> | ||
| 35 | const lightTheme = localStorage.getItem("light"); | ||
| 36 | |||
| 37 | if (lightTheme === "true") { | ||
| 38 | document.documentElement.classList.add("t-light"); | ||
| 39 | } | ||
| 40 | </script> | ||
| 33 | </head> | 41 | </head> |
| 34 | 42 | ||
| 35 | <body> | 43 | <body> |