summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/_vars.scss32
-rw-r--r--assets/css/components/_card.scss63
-rw-r--r--assets/css/components/_post-list.scss2
3 files changed, 51 insertions, 46 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2377b43..e47ab8e 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -25,14 +25,14 @@ $line-height: 1.7;
25$content--width: 42rem; 25$content--width: 42rem;
26 26
27@include iro-execute { 27@include iro-execute {
28 $gray0: hsl(220, 7%, 7%); 28 $gray0: hsl(220, 5%, 7%);
29 $gray1: hsl(220, 7%, 11%); 29 $gray1: hsl(220, 5%, 11%);
30 $gray2: hsl(220, 7%, 18%); 30 $gray2: hsl(220, 5%, 17%);
31 $gray3: hsl(220, 7%, 23%); 31 $gray3: hsl(220, 5%, 23%);
32 $gray4: hsl(220, 7%, 38%); 32 $gray4: hsl(220, 5%, 38%);
33 $gray5: hsl(220, 7%, 60%); 33 $gray5: hsl(220, 5%, 60%);
34 $gray6: hsl(220, 7%, 76%); 34 $gray6: hsl(220, 5%, 76%);
35 $gray7: hsl(220, 7%, 100%); 35 $gray7: hsl(220, 5%, 100%);
36 36
37 @include store(( 37 @include store((
38 --dims: ( 38 --dims: (
@@ -104,14 +104,14 @@ $content--width: 42rem;
104} 104}
105 105
106@include iro-execute { 106@include iro-execute {
107 $gray0: hsl(220, 7%, 100%); 107 $gray0: hsl(220, 5%, 100%);
108 $gray1: hsl(220, 7%, 96%); 108 $gray1: hsl(220, 5%, 95%);
109 $gray2: hsl(220, 7%, 88%); 109 $gray2: hsl(220, 5%, 88%);
110 $gray3: hsl(220, 7%, 83%); 110 $gray3: hsl(220, 5%, 83%);
111 $gray4: hsl(220, 7%, 68%); 111 $gray4: hsl(220, 5%, 68%);
112 $gray5: hsl(220, 7%, 47%); 112 $gray5: hsl(220, 5%, 47%);
113 $gray6: hsl(220, 7%, 16%); 113 $gray6: hsl(220, 5%, 16%);
114 $gray7: hsl(220, 7%, 0%); 114 $gray7: hsl(220, 5%, 0%);
115 115
116 @include store(( 116 @include store((
117 --colors: ( 117 --colors: (
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 9a49cfd..c153406 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -3,39 +3,27 @@
3 --dims: ( 3 --dims: (
4 --pad-x: 1.1em, 4 --pad-x: 1.1em,
5 --pad-y: .8em, 5 --pad-y: .8em,
6 --hover-offset: -.5rem, 6 --hover-offset: -.3rem,
7 --indicator: (
8 --width: 4px,
9 --height: 1em,
10 ),
7 ), 11 ),
8 --colors: ( 12 --colors: (
9 --bg: prop(--colors --bg-lo, $global: true), 13 --bg: prop(--colors --bg-lo, $global: true),
10 --fg: prop(--colors --fg, $global: true), 14 --fg: prop(--colors --fg, $global: true),
15 --unread: prop(--colors --bg, $global: true),
11 --hover: ( 16 --hover: (
12 --bg: prop(--colors --fg-lo, $global: true), 17 --bg: prop(--colors --fg-lo, $global: true),
13 --fg: prop(--colors --bg-hi, $global: true), 18 --fg: prop(--colors --bg-hi, $global: true),
14 ), 19 ),
15 --link: (
16 --bg: prop(--colors --obj-hi, $global: true),
17 --fg: prop(--colors --fg-lo, $global: true),
18 --fg-hi: prop(--colors --fg, $global: true),
19 ),
20 ) 20 )
21 )); 21 ));
22 22
23 @include store(( 23 @include store((
24 --colors: ( 24 --colors: (
25 --bg: prop(--colors --bg-hi, $global: true), 25 --bg: prop(--colors --bg-hi, $global: true),
26 --link: ( 26 --unread: prop(--colors --bg-lo, $global: true),
27 --bg: hsl(
28 #{prop(--colors --link --colored --idle-h, $global: true)},
29 #{prop(--colors --link --colored --idle-s, $global: true)},
30 98.8%
31 ),
32 --fg: prop(--colors --link --colored --idle, $global: true),
33 --fg-hi: hsl(
34 #{prop(--colors --link --colored --idle-h, $global: true)},
35 calc(#{prop(--colors --link --colored --idle-s, $global: true)} * .7),
36 calc(#{prop(--colors --link --colored --idle-l, $global: true)} * 1.3)
37 ),
38 ),
39 ) 27 )
40 ), 'light'); 28 ), 'light');
41 29
@@ -84,16 +72,19 @@
84 * { 72 * {
85 color: currentColor; 73 color: currentColor;
86 } 74 }
75
76 @include element('block') {
77 @include modifier('indicator') {
78 color: prop(--colors --hover --bg);
79 }
80 }
87 } 81 }
88 } 82 }
89 83
90 @include modifier('mark-visited') { 84 &:visited {
91 &:link { 85 @include element('block') {
92 background-color: prop(--colors --link --bg); 86 @include modifier('indicator') {
93 color: prop(--colors --link --fg); 87 color: prop(--colors --unread);
94
95 small {
96 color: prop(--colors --link --fg-hi);
97 } 88 }
98 } 89 }
99 } 90 }
@@ -106,6 +97,20 @@
106 flex-shrink: 1; 97 flex-shrink: 1;
107 width: 100%; 98 width: 100%;
108 } 99 }
100
101 @include modifier('indicator') {
102 transition: color .2s;
103 color: prop(--colors --bg);
104
105 &::before {
106 content: '';
107 display: block;
108 width: prop(--dims --indicator --width);
109 height: prop(--dims --indicator --height);
110 border-radius: prop(--dims --indicator --height);
111 background-color: currentColor;
112 }
113 }
109 } 114 }
110 } 115 }
111} 116}
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 922cbd9..7a3b8a0 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -36,7 +36,7 @@
36 box-shadow: none; 36 box-shadow: none;
37 37
38 @include next-twin-element { 38 @include next-twin-element {
39 margin-top: 4px; 39 margin-top: 1px;
40 } 40 }
41 } 41 }
42 } 42 }