summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/_basics.scss17
-rw-r--r--assets/css/_vars.scss40
-rw-r--r--assets/css/components/_card.scss3
-rw-r--r--assets/css/components/_footer.scss2
-rw-r--r--assets/css/components/_project.scss9
-rw-r--r--assets/css/scopes/_body.scss2
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
10html, 15html,
11pre, 16pre,
12code { 17code {
@@ -71,13 +76,13 @@ ol {
71 76
72li { 77li {
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
172hr { 177hr {
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
179blockquote, 184blockquote,
180pre { 185pre {
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