diff options
author | Volpeon <git@volpeon.ink> | 2021-05-16 08:48:48 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-05-16 08:48:48 +0200 |
commit | 670cfcf0bbb5c1651e14a69a6500fd41e9e9efd8 (patch) | |
tree | e9de5261aac6998227503f8d5b14c91e0e6ec37b /assets/css | |
parent | Use prefers-color-scheme media query (diff) | |
download | volpeon.ink-670cfcf0bbb5c1651e14a69a6500fd41e9e9efd8.tar.gz volpeon.ink-670cfcf0bbb5c1651e14a69a6500fd41e9e9efd8.tar.bz2 volpeon.ink-670cfcf0bbb5c1651e14a69a6500fd41e9e9efd8.zip |
Design adjustments
Diffstat (limited to 'assets/css')
-rw-r--r-- | assets/css/_vars.scss | 6 | ||||
-rw-r--r-- | assets/css/components/_footer.scss | 1 | ||||
-rw-r--r-- | assets/css/components/_post-list.scss | 10 | ||||
-rw-r--r-- | assets/css/layouts/_card-grid.scss | 2 | ||||
-rw-r--r-- | assets/css/layouts/_project-grid.scss | 5 |
5 files changed, 15 insertions, 9 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index bbe02e5..63936ab 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -53,8 +53,7 @@ $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, | ||
58 | 57 | ||
59 | --accent: ( | 58 | --accent: ( |
60 | --h: 354, | 59 | --h: 354, |
@@ -105,8 +104,7 @@ $content--width: 42rem; | |||
105 | --fg: $gray6, // Text | 104 | --fg: $gray6, // Text |
106 | --fg-lo: $gray7, // Strong text | 105 | --fg-lo: $gray7, // Strong text |
107 | 106 | ||
108 | --obj-shadow: rgba(#000, .05), | 107 | --obj-shadow: rgba(#000, .05), |
109 | --obj-shadow-filter: rgba(#000, .04), | ||
110 | 108 | ||
111 | --accent: ( | 109 | --accent: ( |
112 | --h: 354, | 110 | --h: 354, |
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index 2bd1fb1..da471e7 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss | |||
@@ -10,6 +10,7 @@ | |||
10 | position: relative; | 10 | position: relative; |
11 | min-height: prop(--dims --outer, $global: true); | 11 | min-height: prop(--dims --outer, $global: true); |
12 | margin-top: calc(2 * #{prop(--container --dims --pad-y, $global: true)}); | 12 | margin-top: calc(2 * #{prop(--container --dims --pad-y, $global: true)}); |
13 | overflow: hidden; | ||
13 | color: prop(--colors --fg); | 14 | color: prop(--colors --fg); |
14 | font-family: $font-fam--mono; | 15 | font-family: $font-fam--mono; |
15 | line-height: 1.4; | 16 | line-height: 1.4; |
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss index 6ddc9b7..dc3eda6 100644 --- a/assets/css/components/_post-list.scss +++ b/assets/css/components/_post-list.scss | |||
@@ -17,14 +17,16 @@ | |||
17 | @include component(namespace()) { | 17 | @include component(namespace()) { |
18 | @include element('category-header') { | 18 | @include element('category-header') { |
19 | color: prop(--colors --cat --fg); | 19 | color: prop(--colors --cat --fg); |
20 | } | ||
20 | 21 | ||
21 | @include next-element('post') { | 22 | @include element('category-content') { |
22 | margin-top: $line-height * .5rem; | 23 | margin-top: $line-height * .5rem; |
23 | } | 24 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); |
24 | } | 25 | } |
25 | 26 | ||
26 | @include element('post') { | 27 | @include element('post') { |
27 | color: prop(--colors --post --idle-fg); | 28 | box-shadow: none; |
29 | color: prop(--colors --post --idle-fg); | ||
28 | 30 | ||
29 | &:visited { | 31 | &:visited { |
30 | color: prop(--colors --post --visited-fg); | 32 | color: prop(--colors --post --visited-fg); |
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss index 235ef0b..c9d927a 100644 --- a/assets/css/layouts/_card-grid.scss +++ b/assets/css/layouts/_card-grid.scss | |||
@@ -9,7 +9,7 @@ | |||
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)}); | 12 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); |
13 | 13 | ||
14 | @include element('card') { | 14 | @include element('card') { |
15 | box-shadow: none; | 15 | box-shadow: none; |
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss index 7c67663..5ed983c 100644 --- a/assets/css/layouts/_project-grid.scss +++ b/assets/css/layouts/_project-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: 2rem; | 11 | gap: 2rem; |
12 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); | ||
13 | |||
14 | @include element('project') { | ||
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; |