diff options
author | Volpeon <git@volpeon.ink> | 2022-06-11 09:44:04 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-06-11 09:44:04 +0200 |
commit | 575278aba99139635adc3b1f9385befe57102541 (patch) | |
tree | d98a160167610717da37f6340b3884ba4224fe5d /assets/css/scopes/_headlines.scss | |
parent | Update (diff) | |
download | volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.gz volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.bz2 volpeon.ink-575278aba99139635adc3b1f9385befe57102541.zip |
Re-implemented design via iro-design
Diffstat (limited to 'assets/css/scopes/_headlines.scss')
-rw-r--r-- | assets/css/scopes/_headlines.scss | 104 |
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 | } | ||