summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-05-11 20:43:53 +0200
committerVolpeon <git@volpeon.ink>2021-05-11 20:43:53 +0200
commit6c20e2fd01856072cae3df727a4ef88314bffe28 (patch)
treecff2fed5663cea6d3697ab12078db3be43ebb822 /assets/css
parentMinor improvements in metadata processing script (diff)
downloadvolpeon.ink-6c20e2fd01856072cae3df727a4ef88314bffe28.tar.gz
volpeon.ink-6c20e2fd01856072cae3df727a4ef88314bffe28.tar.bz2
volpeon.ink-6c20e2fd01856072cae3df727a4ef88314bffe28.zip
Simplified metadata processing, improved design
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_vars.scss10
-rw-r--r--assets/css/components/_outer-button.scss2
-rw-r--r--assets/css/components/_post-list.scss56
-rw-r--r--assets/css/scopes/_colored-links.scss4
-rw-r--r--assets/css/scopes/_headlines.scss3
-rw-r--r--assets/css/style.scss1
6 files changed, 68 insertions, 8 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 0df3a61..78a451b 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -26,7 +26,7 @@ $content--width: 42rem;
26 26
27$gray0: hsl(220, 7%, 7%); 27$gray0: hsl(220, 7%, 7%);
28$gray1: hsl(220, 7%, 11%); 28$gray1: hsl(220, 7%, 11%);
29$gray2: hsl(220, 7%, 18%); 29$gray2: hsl(220, 7%, 17%);
30$gray3: hsl(220, 7%, 23%); 30$gray3: hsl(220, 7%, 23%);
31$gray4: hsl(220, 7%, 38%); 31$gray4: hsl(220, 7%, 38%);
32$gray5: hsl(220, 7%, 60%); 32$gray5: hsl(220, 7%, 60%);
@@ -57,7 +57,7 @@ $gray7: hsl(220, 7%, 100%);
57 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), 57 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
58 ), 58 ),
59 59
60 --focus-ring: var(--colors--accent--color), 60 --focus-ring: var(--colors--fg-lo),
61 61
62 --select: ( 62 --select: (
63 --bg: rgba($gray7, .996), 63 --bg: rgba($gray7, .996),
@@ -67,7 +67,11 @@ $gray7: hsl(220, 7%, 100%);
67 67
68 --link: ( 68 --link: (
69 --idle: var(--colors--fg-lo), 69 --idle: var(--colors--fg-lo),
70 ) 70 --colored: (
71 --idle: hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
72 --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
73 )
74 ),
71 ) 75 )
72)); 76));
73 77
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index e54c83d..21f78f4 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -26,7 +26,7 @@
26 color: prop(--colors --fg); 26 color: prop(--colors --fg);
27 font-size: 1rem; 27 font-size: 1rem;
28 font-weight: 700; 28 font-weight: 700;
29 letter-spacing: 1px; 29 letter-spacing: .5px;
30 text-decoration: none; 30 text-decoration: none;
31 text-transform: uppercase; 31 text-transform: uppercase;
32 32
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
new file mode 100644
index 0000000..7787efd
--- /dev/null
+++ b/assets/css/components/_post-list.scss
@@ -0,0 +1,56 @@
1@include namespace('post-list') {
2 @include store((
3 --colors: (
4 --cat: (
5 --fg: prop(--colors --fg-lo, $global: true),
6 ),
7 --post: (
8 --bg: prop(--colors --bg-lo, $global: true),
9 --border: prop(--colors --obj-hi, $global: true),
10 ),
11 --meta: (
12 --fg: prop(--colors --fg-hi, $global: true),
13 )
14 ),
15 --dims: (
16 --pad-x: 1em,
17 --pad-y: .6em,
18 )
19 ));
20
21 @include component(namespace()) {
22 @include element('category-header') {
23 color: prop(--colors --cat --fg);
24 font-size: 1 / 16 * 14em;
25 letter-spacing: 1px;
26 text-transform: uppercase;
27
28 @include next-element('post') {
29 margin-top: $line-height * .5rem;
30 }
31 }
32
33 @include element('post') {
34 display: flex;
35 align-items: baseline;
36 padding: prop(--dims --pad-y) prop(--dims --pad-x);
37 background-color: prop(--colors --post --bg);
38
39 @include next-twin-element {
40 border-top: 1px solid prop(--colors --post --border);
41 }
42 }
43
44 @include element('post-title') {
45 margin-right: 1em;
46 font-size: 1 / 16 * 17em;
47 }
48
49 @include element('post-date') {
50 flex: 0 0 auto;
51 margin-left: auto;
52 color: prop(--colors --meta --fg);
53 font-size: 1 / 16 * 14em;
54 }
55 }
56}
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
index 25ed289..9be0f93 100644
--- a/assets/css/scopes/_colored-links.scss
+++ b/assets/css/scopes/_colored-links.scss
@@ -2,8 +2,8 @@
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --link: ( 4 --link: (
5 --idle: hsl(210, 90%, 72%), // hsl(354, 100%, 66%), 5 --idle: prop(--colors --link --colored --idle, $global: true),
6 --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%), 6 --visited: prop(--colors --link --colored --visited, $global: true),
7 ) 7 )
8 ) 8 )
9 )); 9 ));
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
index 8b75708..367e093 100644
--- a/assets/css/scopes/_headlines.scss
+++ b/assets/css/scopes/_headlines.scss
@@ -38,7 +38,6 @@
38 h3 { 38 h3 {
39 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); 39 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
40 40
41 letter-spacing: .05em;
42 text-transform: uppercase; 41 text-transform: uppercase;
43 } 42 }
44 43
@@ -47,7 +46,7 @@
47 h6 { 46 h6 {
48 @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale); 47 @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
49 48
50 letter-spacing: .1em; 49 letter-spacing: .5px;
51 text-transform: uppercase; 50 text-transform: uppercase;
52 } 51 }
53 52
diff --git a/assets/css/style.scss b/assets/css/style.scss
index e4a36b0..30878fe 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -23,6 +23,7 @@
23@import 'components/footer'; 23@import 'components/footer';
24@import 'components/card'; 24@import 'components/card';
25@import 'components/project'; 25@import 'components/project';
26@import 'components/post-list';
26 27
27@import 'scopes/colored-links'; 28@import 'scopes/colored-links';
28@import 'scopes/headlines'; 29@import 'scopes/headlines';