diff options
Diffstat (limited to 'assets/css/components/_hero.scss')
-rw-r--r-- | assets/css/components/_hero.scss | 53 |
1 files changed, 0 insertions, 53 deletions
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss deleted file mode 100644 index 3d8890e..0000000 --- a/assets/css/components/_hero.scss +++ /dev/null | |||
@@ -1,53 +0,0 @@ | |||
1 | @include namespace('hero') { | ||
2 | @include store(( | ||
3 | --colors: ( | ||
4 | --emph-fg: prop(--colors --accent, $global: true), | ||
5 | --back-fg: prop(--colors --bg-hi, $global: true) | ||
6 | ) | ||
7 | )); | ||
8 | |||
9 | @include component(namespace()) { | ||
10 | display: flex; | ||
11 | position: relative; | ||
12 | align-items: center; | ||
13 | justify-content: center; | ||
14 | text-align: center; | ||
15 | |||
16 | @include element('title') { | ||
17 | margin-top: 0; | ||
18 | font-family: $font-fam--large; | ||
19 | text-transform: none; | ||
20 | |||
21 | @include modifier('front') { | ||
22 | max-width: 7em; | ||
23 | font-size: 2.5rem; | ||
24 | font-weight: 200; | ||
25 | } | ||
26 | |||
27 | @include modifier('back') { | ||
28 | position: absolute; | ||
29 | z-index: -10; | ||
30 | transform: translateY(-.08em); | ||
31 | color: prop(--colors --back-fg); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | @include element('emph') { | ||
36 | color: prop(--colors --emph-fg); | ||
37 | font-weight: 500; | ||
38 | } | ||
39 | |||
40 | @include iro-responsive-env(('xs', 'sm', 'md')) { | ||
41 | @include element('title') { | ||
42 | @include modifier('front') { | ||
43 | padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; | ||
44 | font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem)); | ||
45 | } | ||
46 | |||
47 | @include modifier('back') { | ||
48 | font-size: iro-responsive-set((12rem, 14rem, 16rem)); | ||
49 | } | ||
50 | } | ||
51 | } | ||
52 | } | ||
53 | } | ||