diff options
author | Volpeon <git@volpeon.ink> | 2021-04-26 09:43:34 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-26 09:43:34 +0200 |
commit | 40001c6b491eed2a91cd5662fbf0271db4a2e42a (patch) | |
tree | 07d132c95b2e9a0dc061bd7a664bd094e7869c1f /assets | |
parent | Update (diff) | |
download | volpeon.ink-40001c6b491eed2a91cd5662fbf0271db4a2e42a.tar.gz volpeon.ink-40001c6b491eed2a91cd5662fbf0271db4a2e42a.tar.bz2 volpeon.ink-40001c6b491eed2a91cd5662fbf0271db4a2e42a.zip |
Update
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/_basics.scss | 17 | ||||
-rw-r--r-- | assets/css/_vars.scss | 40 | ||||
-rw-r--r-- | assets/css/components/_card.scss | 3 | ||||
-rw-r--r-- | assets/css/components/_footer.scss | 2 | ||||
-rw-r--r-- | assets/css/components/_project.scss | 9 | ||||
-rw-r--r-- | assets/css/scopes/_body.scss | 2 |
6 files changed, 37 insertions, 36 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index becf68a..648a4fc 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -7,6 +7,11 @@ img::selection { | |||
7 | background-color: prop(--colors --select --img-bg); | 7 | background-color: prop(--colors --select --img-bg); |
8 | } | 8 | } |
9 | 9 | ||
10 | :focus { | ||
11 | outline: 2px solid prop(--colors --fg-lo); | ||
12 | outline-offset: 3px; | ||
13 | } | ||
14 | |||
10 | html, | 15 | html, |
11 | pre, | 16 | pre, |
12 | code { | 17 | code { |
@@ -71,13 +76,13 @@ ol { | |||
71 | 76 | ||
72 | li { | 77 | li { |
73 | position: relative; | 78 | position: relative; |
74 | padding-left: $subcontent--indent; | 79 | padding-left: prop(--dims --indent); |
75 | 80 | ||
76 | &::before { | 81 | &::before { |
77 | display: inline-block; | 82 | display: inline-block; |
78 | position: absolute; | 83 | position: absolute; |
79 | width: $subcontent--indent; | 84 | width: prop(--dims --indent); |
80 | margin-left: -1 * $subcontent--indent; | 85 | margin-left: calc(-1 * #{prop(--dims --indent)}); |
81 | color: prop(--colors --fg-hi); | 86 | color: prop(--colors --fg-hi); |
82 | font-family: $font-fam--mono; | 87 | font-family: $font-fam--mono; |
83 | } | 88 | } |
@@ -166,19 +171,19 @@ p { | |||
166 | 171 | ||
167 | :link, | 172 | :link, |
168 | :visited { | 173 | :visited { |
169 | color: var(--link--idle--fg); | 174 | color: prop(--colors --link --idle); |
170 | } | 175 | } |
171 | 176 | ||
172 | hr { | 177 | hr { |
173 | height: 1px; | 178 | height: 1px; |
174 | margin: ($line-height * 1em) 0; | 179 | margin: ($line-height * 1em) 0; |
175 | border: 0; | 180 | border: 0; |
176 | background-color: prop(--colors --obj); | 181 | background-color: prop(--colors --obj-hi); |
177 | } | 182 | } |
178 | 183 | ||
179 | blockquote, | 184 | blockquote, |
180 | pre { | 185 | pre { |
181 | margin: ($line-height * 1em) 0 0 1px; | 186 | margin: ($line-height * 1em) 0 0 1px; |
182 | padding-left: calc(#{$subcontent--indent} - 3px); | 187 | padding-left: calc(#{prop(--dims --indent)} - 3px); |
183 | border-left: 2px solid prop(--colors --obj); | 188 | border-left: 2px solid prop(--colors --obj); |
184 | } | 189 | } |
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 52723a3..2fd7b53 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -12,26 +12,26 @@ $unit-intervals: ( | |||
12 | '': 0 | 12 | '': 0 |
13 | ); | 13 | ); |
14 | 14 | ||
15 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; | 15 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; |
16 | $font-fam--large: 'Garet', $font-fam--text; | 16 | $font-fam--large: 'Garet', $font-fam--text; |
17 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | 17 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; |
18 | $font-size: 16px; | 18 | $font-size: 16px; |
19 | $line-height: 1.7; | 19 | $line-height: 1.7; |
20 | $content--width: 42rem; | 20 | $content--width: 42rem; |
21 | $subcontent--indent: 2em; | ||
22 | 21 | ||
23 | $gray0: hsl(220, 0%, 6%); | 22 | $gray0: hsl(220, 7%, 6%); |
24 | $gray1: hsl(220, 0%, 9%); | 23 | $gray1: hsl(220, 7%, 9%); |
25 | $gray2: hsl(220, 0%, 15%); | 24 | $gray2: hsl(220, 7%, 15%); |
26 | $gray3: hsl(220, 0%, 20%); | 25 | $gray3: hsl(220, 7%, 20%); |
27 | $gray4: hsl(220, 0%, 33%); | 26 | $gray4: hsl(220, 7%, 33%); |
28 | $gray5: hsl(220, 0%, 54%); | 27 | $gray5: hsl(220, 7%, 54%); |
29 | $gray6: hsl(220, 0%, 73%); | 28 | $gray6: hsl(220, 7%, 73%); |
30 | $gray7: hsl(220, 0%, 100%); | 29 | $gray7: hsl(220, 7%, 100%); |
31 | 30 | ||
32 | @include store(( | 31 | @include store(( |
33 | --dims: ( | 32 | --dims: ( |
34 | --outer: 4rem, | 33 | --outer: 4rem, |
34 | --indent: 2rem, | ||
35 | ), | 35 | ), |
36 | --colors: ( | 36 | --colors: ( |
37 | --bg-hi: $gray0, // Darker background | 37 | --bg-hi: $gray0, // Darker background |
@@ -57,6 +57,10 @@ $gray7: hsl(220, 0%, 100%); | |||
57 | --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5), | 57 | --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5), |
58 | --fg: var(--colors--bg-hi), | 58 | --fg: var(--colors--bg-hi), |
59 | ), | 59 | ), |
60 | |||
61 | --link: ( | ||
62 | --idle: var(--colors--fg-lo) | ||
63 | ) | ||
60 | ) | 64 | ) |
61 | )); | 65 | )); |
62 | 66 | ||
@@ -81,10 +85,6 @@ $gray7: hsl(220, 0%, 100%); | |||
81 | 85 | ||
82 | --code-block--fg: var(--colors--fg-hi); | 86 | --code-block--fg: var(--colors--fg-hi); |
83 | 87 | ||
84 | --link--idle--fg: var(--colors--fg-lo); | ||
85 | --link--hover--bg: var(--link--idle--fg); | ||
86 | --link--hover--fg: #000; | ||
87 | |||
88 | --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; | 88 | --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; |
89 | --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; | 89 | --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; |
90 | --page--link--hover--bg: var(--page--link--idle--fg); | 90 | --page--link--hover--bg: var(--page--link--idle--fg); |
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 37d4b0e..f444daf 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
@@ -50,7 +50,8 @@ | |||
50 | color: currentColor; | 50 | color: currentColor; |
51 | text-decoration: none; | 51 | text-decoration: none; |
52 | 52 | ||
53 | &:hover { | 53 | &:hover, |
54 | &:focus { | ||
54 | transform: translateY(#{prop(--dims --hover-offset)}); | 55 | transform: translateY(#{prop(--dims --hover-offset)}); |
55 | background-color: prop(--colors --hover --bg); | 56 | background-color: prop(--colors --hover --bg); |
56 | color: prop(--colors --hover --fg); | 57 | color: prop(--colors --hover --fg); |
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index cf02d04..4e809a4 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss | |||
@@ -8,10 +8,10 @@ | |||
8 | 8 | ||
9 | @include component(namespace()) { | 9 | @include component(namespace()) { |
10 | display: flex; | 10 | display: flex; |
11 | position: relative; | ||
11 | align-items: center; | 12 | align-items: center; |
12 | justify-content: space-between; | 13 | justify-content: space-between; |
13 | height: prop(--dims --outer, $global: true); | 14 | height: prop(--dims --outer, $global: true); |
14 | font-size: 1 / 16 * 15em; | ||
15 | 15 | ||
16 | @include element('content') { | 16 | @include element('content') { |
17 | width: 100%; | 17 | width: 100%; |
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss index 580e70b..3df48d2 100644 --- a/assets/css/components/_project.scss +++ b/assets/css/components/_project.scss | |||
@@ -22,7 +22,8 @@ | |||
22 | color: currentColor; | 22 | color: currentColor; |
23 | text-decoration: none; | 23 | text-decoration: none; |
24 | 24 | ||
25 | &:hover { | 25 | &:hover, |
26 | &:focus { | ||
26 | @include element('picture') { | 27 | @include element('picture') { |
27 | opacity: .75; | 28 | opacity: .75; |
28 | filter: blur(0); | 29 | filter: blur(0); |
@@ -64,11 +65,5 @@ | |||
64 | max-width: calc(100% - 2em); | 65 | max-width: calc(100% - 2em); |
65 | box-shadow: 0 .8em 2.5em rgba(#000, .25); | 66 | box-shadow: 0 .8em 2.5em rgba(#000, .25); |
66 | } | 67 | } |
67 | |||
68 | @include media('<=sm') { | ||
69 | @include element('picture') { | ||
70 | mask-image: iro-easing-gradient(linear, to top, rgba(#000, .75) 2em, ease, #000 17em); | ||
71 | } | ||
72 | } | ||
73 | } | 68 | } |
74 | } | 69 | } |
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index 9b3a862..5f41f29 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss | |||
@@ -16,7 +16,7 @@ | |||
16 | h1 { | 16 | h1 { |
17 | transform: translateX(-.06em); | 17 | transform: translateX(-.06em); |
18 | font-family: $font-fam--large; | 18 | font-family: $font-fam--large; |
19 | font-weight: 550; | 19 | font-weight: 600; |
20 | text-transform: none; | 20 | text-transform: none; |
21 | } | 21 | } |
22 | 22 | ||