summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-05-15 20:28:42 +0200
committerVolpeon <git@volpeon.ink>2021-05-15 20:28:42 +0200
commitec81f70b5983054b0e0fa46a75c639c665b1550b (patch)
tree9e4986ac78f26afab24cb3f4b2067b2b1c846664
parentAdded light theme (diff)
downloadvolpeon.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.scss10
-rw-r--r--assets/css/layouts/_card-grid.scss5
-rw-r--r--assets/css/style.scss5
-rw-r--r--templates/base.html8
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>