summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss7
-rw-r--r--assets/css/_vars.scss4
-rw-r--r--assets/css/components/_landing-banner.scss5
-rw-r--r--assets/css/components/_outer-button.scss11
-rw-r--r--assets/css/scopes/_body.scss74
-rw-r--r--assets/css/scopes/_colored-links.scss20
-rw-r--r--assets/css/scopes/_headlines.scss58
-rw-r--r--assets/css/style.scss2
8 files changed, 96 insertions, 85 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 2a271ff..b2a437b 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -84,7 +84,6 @@ li {
84 width: prop(--dims --indent); 84 width: prop(--dims --indent);
85 margin-left: calc(-1 * #{prop(--dims --indent)}); 85 margin-left: calc(-1 * #{prop(--dims --indent)});
86 color: prop(--colors --fg-hi); 86 color: prop(--colors --fg-hi);
87 font-family: $font-fam--mono;
88 } 87 }
89} 88}
90 89
@@ -144,7 +143,7 @@ h6 {
144 font-family: $font-fam--large; 143 font-family: $font-fam--large;
145 font-size: 1em; 144 font-size: 1em;
146 font-weight: 600; 145 font-weight: 600;
147 line-height: 1.2; 146 line-height: 1.4;
148 font-feature-settings: 'ss02' 1; 147 font-feature-settings: 'ss02' 1;
149 148
150 & + & { 149 & + & {
@@ -163,7 +162,7 @@ p {
163 162
164hr { 163hr {
165 height: 1px; 164 height: 1px;
166 margin: ($line-height * 1rem) 0; 165 margin: ($line-height * 2rem) 0;
167 border: 0; 166 border: 0;
168 background-color: prop(--colors --obj-hi); 167 background-color: prop(--colors --obj-hi);
169} 168}
@@ -172,5 +171,5 @@ blockquote,
172pre { 171pre {
173 margin: ($line-height * 1rem) 0 0 1px; 172 margin: ($line-height * 1rem) 0 0 1px;
174 padding-left: calc(#{prop(--dims --indent)} - 3px); 173 padding-left: calc(#{prop(--dims --indent)} - 3px);
175 border-left: 2px solid prop(--colors --obj); 174 border-left: 3px solid prop(--colors --obj);
176} 175}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 263cb5d..3adce04 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -66,9 +66,7 @@ $gray7: hsl(220, 7%, 100%);
66 ), 66 ),
67 67
68 --link: ( 68 --link: (
69 --idle: var(--colors--fg-lo), 69 --idle: var(--colors--fg-lo),
70 --idle-body: hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
71 --visited-body: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
72 ) 70 )
73 ) 71 )
74)); 72));
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 58d64d7..0e44e35 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -13,13 +13,10 @@
13 transform: translateX(-.06em); 13 transform: translateX(-.06em);
14 font-family: $font-fam--large; 14 font-family: $font-fam--large;
15 font-weight: 350; 15 font-weight: 350;
16 line-height: 1.2;
16 text-transform: none; 17 text-transform: none;
17 } 18 }
18 19
19 @include element('text') {
20 font-size: 1 / 16 * 18em;
21 }
22
23 @include element('title-inner') { 20 @include element('title-inner') {
24 background-image: linear-gradient( 21 background-image: linear-gradient(
25 to top, 22 to top,
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index d1da93c..22fa251 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -24,10 +24,10 @@
24 transition: background-color .2s, color .2s; 24 transition: background-color .2s, color .2s;
25 background-color: prop(--colors --bg); 25 background-color: prop(--colors --bg);
26 color: prop(--colors --fg); 26 color: prop(--colors --fg);
27 font-family: $font-fam--large; 27 font-size: 1 / 16 * 15rem;
28 font-size: 1rem; 28 letter-spacing: 1px;
29 font-weight: 500;
30 text-decoration: none; 29 text-decoration: none;
30 text-transform: uppercase;
31 31
32 @include modifier('inverted') { 32 @include modifier('inverted') {
33 background-color: prop(--colors --inverted --bg); 33 background-color: prop(--colors --inverted --bg);
@@ -51,8 +51,8 @@
51 51
52 @include element('icon-symbol') { 52 @include element('icon-symbol') {
53 display: block; 53 display: block;
54 width: 1.35em; 54 width: 1.45em;
55 height: 1.35em; 55 height: 1.45em;
56 } 56 }
57 57
58 @include element('content') { 58 @include element('content') {
@@ -60,7 +60,6 @@
60 padding-right: prop(--dims --pad-x); 60 padding-right: prop(--dims --pad-x);
61 padding-left: prop(--dims --pad-x); 61 padding-left: prop(--dims --pad-x);
62 transition: border-color .2s; 62 transition: border-color .2s;
63 font-size: 1 / 16 * 15em;
64 line-height: prop(--dims --outer, $global: true); 63 line-height: prop(--dims --outer, $global: true);
65 white-space: nowrap; 64 white-space: nowrap;
66 } 65 }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index b4d0a3c..8e5f876 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,10 +1,6 @@
1@include namespace('body') { 1@include namespace('body') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --emph: (
5 --fg: prop(--colors --accent --color, $global: true),
6 --bg: prop(--colors --bg-hi, $global: true),
7 ),
8 --meta: ( 4 --meta: (
9 --fg: prop(--colors --fg-hi, $global: true), 5 --fg: prop(--colors --fg-hi, $global: true),
10 ) 6 )
@@ -12,73 +8,15 @@
12 )); 8 ));
13 9
14 @include scope(namespace()) { 10 @include scope(namespace()) {
15 font-size: 1 / 16 * 18em; 11 font-size: 1 / 16 * 19em;
16
17 > :first-child {
18 margin-top: 0;
19 }
20
21 :link {
22 color: prop(--colors --link --idle-body, $global: true);
23 }
24
25 :visited {
26 color: prop(--colors --link --visited-body, $global: true);
27 }
28
29 h1,
30 h2,
31 h3,
32 h4 {
33 transform: translateX(-.06em);
34 }
35
36 h1 {
37 @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
38 }
39
40 h2 {
41 @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
42 }
43
44 h3 {
45 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
46
47 letter-spacing: .05em;
48 text-transform: uppercase;
49 }
50
51 h4,
52 h5,
53 h6 {
54 @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
55
56 letter-spacing: .1em;
57 text-transform: uppercase;
58 }
59
60 h5,
61 h6 {
62 color: currentColor;
63 font-weight: 400;
64 }
65
66 @include element('title-inner') {
67 background-image: linear-gradient(
68 to top,
69 transparent .15em,
70 #{prop(--colors --emph --bg)} .15em,
71 #{prop(--colors --emph --bg)} .6em,
72 transparent .6em
73 );
74 }
75 12
76 @include element('meta') { 13 @include element('meta') {
77 color: prop(--colors --meta --fg); 14 margin-top: $line-height * 1rem;
78 font-size: 1 / 18 * 16em; 15 color: prop(--colors --meta --fg);
16 font-size: 1 / 16 * 15rem;
79 17
80 + h1 { 18 + * {
81 margin-top: $line-height * 1rem; 19 margin-top: $line-height * 1.5rem;
82 } 20 }
83 } 21 }
84 22
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
new file mode 100644
index 0000000..25ed289
--- /dev/null
+++ b/assets/css/scopes/_colored-links.scss
@@ -0,0 +1,20 @@
1@include namespace('colored-links') {
2 @include store((
3 --colors: (
4 --link: (
5 --idle: hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
6 --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
7 )
8 )
9 ));
10
11 @include scope(namespace()) {
12 :link {
13 color: prop(--colors --link --idle);
14 }
15
16 :visited {
17 color: prop(--colors --link --visited);
18 }
19 }
20}
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
new file mode 100644
index 0000000..6b28e9c
--- /dev/null
+++ b/assets/css/scopes/_headlines.scss
@@ -0,0 +1,58 @@
1@include namespace('headlines') {
2 @include store((
3 --colors: (
4 --emph: (
5 --bg: prop(--colors --bg-hi, $global: true),
6 )
7 )
8 ));
9
10 @include scope(namespace()) {
11 h1,
12 h2,
13 h3,
14 h4 {
15 transform: translateX(-.06em);
16 }
17
18 h1 {
19 @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
20 }
21
22 h2 {
23 @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
24 }
25
26 h3 {
27 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
28
29 letter-spacing: .05em;
30 text-transform: uppercase;
31 }
32
33 h4,
34 h5,
35 h6 {
36 @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
37
38 letter-spacing: .1em;
39 text-transform: uppercase;
40 }
41
42 h5,
43 h6 {
44 color: currentColor;
45 font-weight: 400;
46 }
47
48 @include element('title-inner') {
49 background-image: linear-gradient(
50 to top,
51 transparent .15em,
52 #{prop(--colors --emph --bg)} .15em,
53 #{prop(--colors --emph --bg)} .6em,
54 transparent .6em
55 );
56 }
57 }
58}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index aa83f85..e4a36b0 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -24,6 +24,8 @@
24@import 'components/card'; 24@import 'components/card';
25@import 'components/project'; 25@import 'components/project';
26 26
27@import 'scopes/colored-links';
28@import 'scopes/headlines';
27@import 'scopes/body'; 29@import 'scopes/body';
28 30
29@import 'utils'; 31@import 'utils';