summaryrefslogtreecommitdiffstats
path: root/assets/css/scopes/_headlines.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/scopes/_headlines.scss')
-rw-r--r--assets/css/scopes/_headlines.scss104
1 files changed, 0 insertions, 104 deletions
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
deleted file mode 100644
index bfd5caa..0000000
--- a/assets/css/scopes/_headlines.scss
+++ /dev/null
@@ -1,104 +0,0 @@
1@include namespace('headlines') {
2 @include store((
3 --colors: (
4 --link: (
5 --idle-fg: prop(--colors --obj, $global: true),
6 --hover-fg: prop(--colors --fg-lo, $global: true),
7 ),
8 --emph: (
9 --bg: prop(--colors --bg-hi, $global: true),
10 --body-bg: prop(--colors --bg-hi, $global: true),
11 )
12 )
13 ));
14
15 @include store((
16 --colors: (
17 --emph: (
18 --body-bg: prop(--colors --bg, $global: true),
19 )
20 )
21 ), 'light');
22
23 @include scope(namespace()) {
24 h1,
25 h2,
26 h3 {
27 font-family: $font-fam--large;
28 font-weight: 600;
29 letter-spacing: normal;
30 line-height: 1.4;
31 text-transform: none;
32 font-feature-settings: 'ss02' 1;
33 }
34
35 h1,
36 h2,
37 h3,
38 h4 {
39 transform: translateX(-.06em);
40 }
41
42 h1 {
43 @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
44 }
45
46 h2 {
47 @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
48 }
49
50 h3 {
51 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
52 }
53
54 h5,
55 h6 {
56 color: currentColor;
57 font-weight: 400;
58 }
59
60 @include element('title-inner') {
61 background-image: linear-gradient(
62 to top,
63 transparent .15em,
64 #{prop(--colors --emph --bg)} .15em,
65 #{prop(--colors --emph --bg)} .6em,
66 transparent .6em
67 );
68 }
69
70 @include element('link') {
71 display: none;
72 margin: -.5rem 0;
73 padding: .5rem;
74 vertical-align: -.02em;
75
76 svg {
77 width: px-to-em(12px);
78 height: px-to-em(12px);
79 }
80
81 &:link,
82 &:visited {
83 color: prop(--colors --link --idle-fg);
84
85 &:hover {
86 color: prop(--colors --link --hover-fg);
87 }
88 }
89 }
90
91 h1,
92 h2,
93 h3,
94 h4,
95 h5,
96 h6 {
97 &:hover {
98 @include element('link') {
99 display: inline-block;
100 }
101 }
102 }
103 }
104}