summaryrefslogtreecommitdiffstats
path: root/assets/css/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/scopes')
-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
3 files changed, 84 insertions, 68 deletions
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}