summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_vars.scss4
-rw-r--r--assets/css/scopes/_body.scss40
2 files changed, 30 insertions, 14 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2ab5efd..1123862 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -13,8 +13,8 @@ $unit-intervals: (
13); 13);
14 14
15$responsive-mod-scale: ( 15$responsive-mod-scale: (
16 xs: (.5rem, 1.4), 16 xs: (.8rem, 1.4),
17 md: (.5rem, 1.6) 17 md: (.8rem, 1.6)
18); 18);
19 19
20$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; 20$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index f725b0a..0a22828 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,11 +1,11 @@
1@include namespace('body') { 1@include namespace('body') {
2 @include scope(namespace()) { 2 @include store((
3 > :first-child { 3 --colors: (
4 //margin-top: 0; 4 --emph-fg: prop(--colors --accent --color, $global: true),
5 } 5 --emph-bg: prop(--colors --bg-hi, $global: true)
6 } 6 )
7} 7 ));
8@include namespace('body') { 8
9 @include scope(namespace()) { 9 @include scope(namespace()) {
10 font-size: 1 / 16 * 18em; 10 font-size: 1 / 16 * 18em;
11 11
@@ -31,29 +31,45 @@
31 } 31 }
32 32
33 h1 { 33 h1 {
34 @include iro-responsive-modular-scale(font-size, 4, $responsive-mod-scale); 34 @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
35 } 35 }
36 36
37 h2 { 37 h2 {
38 @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale); 38 @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
39 } 39 }
40 40
41 h3 { 41 h3 {
42 @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale); 42 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
43 43
44 letter-spacing: .1em; 44 letter-spacing: .05em;
45 text-transform: uppercase; 45 text-transform: uppercase;
46 } 46 }
47 47
48 h4, 48 h4,
49 h5, 49 h5,
50 h6 { 50 h6 {
51 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); 51 @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
52 52
53 letter-spacing: .1em; 53 letter-spacing: .1em;
54 text-transform: uppercase; 54 text-transform: uppercase;
55 } 55 }
56 56
57 h5,
58 h6 {
59 color: currentColor;
60 font-weight: 400;
61 }
62
63 @include element('title-inner') {
64 background-image: linear-gradient(
65 to top,
66 transparent .15em,
67 #{prop(--colors --emph-bg)} .15em,
68 #{prop(--colors --emph-bg)} .6em,
69 transparent .6em
70 );
71 }
72
57 img { 73 img {
58 max-width: 100%; 74 max-width: 100%;
59 } 75 }