From b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 22 Mar 2021 20:52:20 +0100
Subject: WIP: Redesign

---
 assets/css/components/_landing-banner.scss | 40 ++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 assets/css/components/_landing-banner.scss

(limited to 'assets/css/components/_landing-banner.scss')

diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
new file mode 100644
index 0000000..ee5deab
--- /dev/null
+++ b/assets/css/components/_landing-banner.scss
@@ -0,0 +1,40 @@
+@include namespace('landing-banner') {
+    @include store((
+        --colors: (
+            --emph-fg: prop(--colors --accent --color, $global: true),
+            --emph-bg: prop(--colors --bg-hi, $global: true)
+        )
+    ));
+
+    @include component(namespace()) {
+        @include element('title') {
+            max-width:      7em;
+            margin-top:     0;
+            transform:      translateX(-.04em);
+            font-family:    $font-fam--large;
+            font-weight:    350;
+            text-transform: none;
+        }
+
+        @include element('title-inner') {
+            background-image: linear-gradient(
+                to top,
+                transparent .15em,
+                #{prop(--colors --emph-bg)} .15em,
+                #{prop(--colors --emph-bg)} .6em,
+                transparent .6em
+            );
+        }
+
+        @include element('emph') {
+            color:       prop(--colors --emph-fg);
+            font-weight: 550;
+        }
+
+        @include iro-responsive-env(('md', 'lg')) {
+            @include element('title') {
+                font-size: iro-responsive-set((2.6rem, 3rem));
+            }
+        }
+    }
+}
-- 
cgit v1.2.3-54-g00ecf