summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-05-12 15:57:36 +0200
committerVolpeon <git@volpeon.ink>2021-05-12 15:57:36 +0200
commit4024b2653fab069567a8fb4a441781e0c13a8de7 (patch)
tree1b91c53f8d65f694b85a86845ea0668f761f57eb /assets/css
parentFix category name (diff)
downloadvolpeon.ink-4024b2653fab069567a8fb4a441781e0c13a8de7.tar.gz
volpeon.ink-4024b2653fab069567a8fb4a441781e0c13a8de7.tar.bz2
volpeon.ink-4024b2653fab069567a8fb4a441781e0c13a8de7.zip
Design
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss15
-rw-r--r--assets/css/_vars.scss4
-rw-r--r--assets/css/components/_post-list.scss6
-rw-r--r--assets/css/scopes/_headlines.scss11
4 files changed, 20 insertions, 16 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 573167c..c3c62db 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -8,7 +8,7 @@ img::selection {
8} 8}
9 9
10:focus { 10:focus {
11 outline: 3px solid prop(--colors --focus-ring); 11 outline: 2px solid prop(--colors --focus-ring);
12 outline-offset: 3px; 12 outline-offset: 3px;
13} 13}
14 14
@@ -45,7 +45,8 @@ code {
45} 45}
46 46
47code { 47code {
48 color: var(--code--fg); 48 color: var(--code--fg);
49 font-size: 1 / 16 * 15em;
49} 50}
50 51
51pre { 52pre {
@@ -138,10 +139,12 @@ h3,
138h4, 139h4,
139h5, 140h5,
140h6 { 141h6 {
141 margin: ($line-height * 2rem) 0 0; 142 margin: ($line-height * 2rem) 0 0;
142 color: var(--heading--fg); 143 color: var(--heading--fg);
143 font-size: 1em; 144 font-size: 1 / 16 * 14em;
144 font-weight: 700; 145 font-weight: 700;
146 letter-spacing: 1px;
147 text-transform: uppercase;
145 148
146 & + & { 149 & + & {
147 margin-top: $line-height * 1rem; 150 margin-top: $line-height * 1rem;
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ab3d9e5..38b4b24 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -68,8 +68,8 @@ $gray7: hsl(220, 7%, 100%);
68 --link: ( 68 --link: (
69 --idle: var(--colors--fg-lo), 69 --idle: var(--colors--fg-lo),
70 --colored: ( 70 --colored: (
71 --idle: hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), // 71 --idle: hsl(var(--colors--accent--h), 100%, 66%), //hsl(210, 90%, 72%), //
72 --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // 72 --visited: hsl(var(--colors--accent--h), 50%, 66%), //hsl(270, 60%, 75%), //
73 ) 73 )
74 ), 74 ),
75 ) 75 )
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 9d4c956..bc41849 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -16,10 +16,7 @@
16 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 font-size: 1 / 16 * 14em;
21 letter-spacing: 1px;
22 text-transform: uppercase;
23 20
24 @include next-element('post') { 21 @include next-element('post') {
25 margin-top: $line-height * .5rem; 22 margin-top: $line-height * .5rem;
@@ -47,7 +44,6 @@
47 44
48 @include element('post-title') { 45 @include element('post-title') {
49 color: prop(--colors --post --idle-fg); 46 color: prop(--colors --post --idle-fg);
50 font-size: 1 / 16 * 17em;
51 font-weight: normal; 47 font-weight: normal;
52 } 48 }
53 49
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
index 367e093..dcd8024 100644
--- a/assets/css/scopes/_headlines.scss
+++ b/assets/css/scopes/_headlines.scss
@@ -16,7 +16,9 @@
16 h6 { 16 h6 {
17 font-family: $font-fam--large; 17 font-family: $font-fam--large;
18 font-weight: 600; 18 font-weight: 600;
19 letter-spacing: normal;
19 line-height: 1.4; 20 line-height: 1.4;
21 text-transform: none;
20 font-feature-settings: 'ss02' 1; 22 font-feature-settings: 'ss02' 1;
21 } 23 }
22 24
@@ -37,16 +39,19 @@
37 39
38 h3 { 40 h3 {
39 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); 41 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
40
41 text-transform: uppercase;
42 } 42 }
43 43
44 h4, 44 h4,
45 h5, 45 h5,
46 h6 { 46 h6 {
47 @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale); 47 @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
48 }
48 49
49 letter-spacing: .5px; 50 h3,
51 h4,
52 h5,
53 h6 {
54 letter-spacing: 1px;
50 text-transform: uppercase; 55 text-transform: uppercase;
51 } 56 }
52 57