diff options
| author | Volpeon <git@volpeon.ink> | 2026-07-22 19:40:59 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2026-07-22 19:40:59 +0200 |
| commit | c1e28224aa2e1450031669d9a7e359b63e04687d (patch) | |
| tree | 68f3d8905c763a91f68001d868197effa92adafa /src/styles/components/_home-banner.scss | |
| download | corvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.tar.gz corvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.tar.bz2 corvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.zip | |
Init
Diffstat (limited to 'src/styles/components/_home-banner.scss')
| -rw-r--r-- | src/styles/components/_home-banner.scss | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/src/styles/components/_home-banner.scss b/src/styles/components/_home-banner.scss new file mode 100644 index 0000000..660cd9b --- /dev/null +++ b/src/styles/components/_home-banner.scss | |||
| @@ -0,0 +1,39 @@ | |||
| 1 | @use "sass:map"; | ||
| 2 | @use "sass:string"; | ||
| 3 | @use "sass:meta"; | ||
| 4 | |||
| 5 | @use "pkg:iro-sass/bem"; | ||
| 6 | @use "pkg:iro-sass/props"; | ||
| 7 | @use "pkg:iro-design" as iro; | ||
| 8 | |||
| 9 | @use "site-header.vars" as site-header; | ||
| 10 | |||
| 11 | @mixin styles { | ||
| 12 | @include bem.component("home-banner") { | ||
| 13 | @include bem.elem("intro") { | ||
| 14 | margin-block-start: 0; | ||
| 15 | font-size: clamp(props.get(iro.$core--font-size--500), 5.3vw, 5rem); | ||
| 16 | font-weight: 300; | ||
| 17 | color: props.get(iro.$core--theme, --text); | ||
| 18 | line-height: 1.2; | ||
| 19 | |||
| 20 | strong { | ||
| 21 | font-family: props.get(iro.$core--font--headline--family); | ||
| 22 | font-weight: 900; | ||
| 23 | text-transform: uppercase; | ||
| 24 | letter-spacing: 2px; | ||
| 25 | color: props.get(iro.$core--theme, --heading); | ||
| 26 | } | ||
| 27 | } | ||
| 28 | |||
| 29 | @include iro.media--media("<=md") { | ||
| 30 | @include bem.elem("intro") { | ||
| 31 | font-size: props.get(iro.$core--font-size--500); | ||
| 32 | } | ||
| 33 | |||
| 34 | @include bem.elem("buttons") { | ||
| 35 | justify-content: center; | ||
| 36 | } | ||
| 37 | } | ||
| 38 | } | ||
| 39 | } | ||
