summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_vars.scss11
-rw-r--r--assets/css/components/_card.scss1
-rw-r--r--assets/css/components/_header.scss1
-rw-r--r--assets/css/components/_hnav.scss22
-rw-r--r--assets/css/layouts/_card-list.scss5
-rw-r--r--assets/css/style.scss1
6 files changed, 25 insertions, 16 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2c0e9b5..ad9e16f 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -36,8 +36,7 @@ $content--width: 44rem;
36 36
37 @include store(( 37 @include store((
38 --dims: ( 38 --dims: (
39 --indent: 2rem, 39 --indent: 2rem,
40 --obj-shadow: 0 .4em 2.8em,
41 ), 40 ),
42 --colors: ( 41 --colors: (
43 --bg-hi: $gray0, // Darker background 42 --bg-hi: $gray0, // Darker background
@@ -51,8 +50,6 @@ $content--width: 44rem;
51 --fg: $gray6, // Text 50 --fg: $gray6, // Text
52 --fg-lo: $gray7, // Strong text 51 --fg-lo: $gray7, // Strong text
53 52
54 --obj-shadow: transparent,
55
56 --accent: ( 53 --accent: (
57 --h: 354, 54 --h: 354,
58 --s: 84%, 55 --s: 84%,
@@ -107,7 +104,7 @@ $content--width: 44rem;
107 104
108@include iro-execute { 105@include iro-execute {
109 $gray0: hsl(220, 5%, 100%); 106 $gray0: hsl(220, 5%, 100%);
110 $gray1: hsl(220, 5%, 96%); 107 $gray1: hsl(220, 5%, 95%);
111 $gray2: hsl(220, 5%, 88%); 108 $gray2: hsl(220, 5%, 88%);
112 $gray3: hsl(220, 5%, 83%); 109 $gray3: hsl(220, 5%, 83%);
113 $gray4: hsl(220, 5%, 68%); 110 $gray4: hsl(220, 5%, 68%);
@@ -128,8 +125,6 @@ $content--width: 44rem;
128 --fg: $gray6, // Text 125 --fg: $gray6, // Text
129 --fg-lo: $gray7, // Strong text 126 --fg-lo: $gray7, // Strong text
130 127
131 --obj-shadow: rgba(#000, .05),
132
133 --accent: ( 128 --accent: (
134 --h: 354, 129 --h: 354,
135 --s: 74%, 130 --s: 74%,
@@ -182,8 +177,6 @@ $content--width: 44rem;
182 --fg-hi: $black, // Faint text 177 --fg-hi: $black, // Faint text
183 --fg: $black, // Text 178 --fg: $black, // Text
184 --fg-lo: $black, // Strong text 179 --fg-lo: $black, // Strong text
185
186 --obj-shadow: transparent,
187 ), 180 ),
188 ), 'print'); 181 ), 'print');
189} 182}
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 2e32a48..20614e7 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -35,7 +35,6 @@
35 transform: translateY(0); 35 transform: translateY(0);
36 transition: transform .2s, background-color .2s, color .2s, border-color .2s; 36 transition: transform .2s, background-color .2s, color .2s, border-color .2s;
37 background-color: prop(--colors --bg); 37 background-color: prop(--colors --bg);
38 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
39 color: prop(--colors --fg); 38 color: prop(--colors --fg);
40 line-height: 1.4; 39 line-height: 1.4;
41 40
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index a190eee..ca85438 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -37,7 +37,6 @@
37 height: prop(--dims --height); 37 height: prop(--dims --height);
38 padding: prop(--dims --gap); 38 padding: prop(--dims --gap);
39 gap: prop(--dims --gap); 39 gap: prop(--dims --gap);
40 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
41 40
42 @include element('item') { 41 @include element('item') {
43 padding: 0 prop(--dims --pad-x); 42 padding: 0 prop(--dims --pad-x);
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
new file mode 100644
index 0000000..220afde
--- /dev/null
+++ b/assets/css/components/_hnav.scss
@@ -0,0 +1,22 @@
1@include namespace('hnav') {
2 @include store((
3 --colors: (
4 --border: prop(--colors --obj-hi, $global: true)
5 ),
6 --dims: (
7 --gap: 2em,
8 --pad-y: .5em
9 )
10 ));
11
12 @include component(namespace()) {
13 display: flex;
14 gap: prop(--dims --gap);
15 align-items: baseline;
16 margin-top: $line-height * 2rem;
17 padding: prop(--dims --pad-y) 0 0;
18 border-width: 1px 0 0;
19 border-style: solid;
20 border-color: prop(--colors --border);
21 }
22}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index bda0f4d..a53b771 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -14,7 +14,6 @@
14 flex-direction: column; 14 flex-direction: column;
15 gap: 2px; 15 gap: 2px;
16 margin-top: $line-height * .625rem; 16 margin-top: $line-height * .625rem;
17 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
18 17
19 @include modifier('grid', 'gallery') { 18 @include modifier('grid', 'gallery') {
20 display: grid; 19 display: grid;
@@ -34,9 +33,5 @@
34 filter: none; 33 filter: none;
35 } 34 }
36 } 35 }
37
38 @include element('card') {
39 box-shadow: none;
40 }
41 } 36 }
42} 37}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 535bc72..0b8f75c 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -19,6 +19,7 @@
19@import 'components/card'; 19@import 'components/card';
20@import 'components/note'; 20@import 'components/note';
21@import 'components/lightbox'; 21@import 'components/lightbox';
22@import 'components/hnav';
22 23
23@import 'layouts/card-list'; 24@import 'layouts/card-list';
24 25