From 7531a7125c72227198f7605c6c129d15cd926857 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 23 Mar 2021 18:14:39 +0100
Subject: WIP: Redesign

---
 assets/css/components/_card.scss            | 59 +++++++++++++++++++++++++++++
 assets/css/components/_section-heading.scss | 28 ++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 assets/css/components/_card.scss
 create mode 100644 assets/css/components/_section-heading.scss

(limited to 'assets/css/components')

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
new file mode 100644
index 0000000..4b3a094
--- /dev/null
+++ b/assets/css/components/_card.scss
@@ -0,0 +1,59 @@
+@include namespace('card') {
+    @include store((
+        --dims: (
+            --pad-x: 1.3em,
+            --pad-y: 1em
+        ),
+        --colors: (
+            --bg: prop(--colors --bg-lo, $global: true),
+            --flip: (
+                --bg: prop(--colors --bg-lo, $global: true),
+            )
+        )
+    ));
+
+    @include component(namespace()) {
+        display:          block;
+        position:         relative;
+        background-color: prop(--colors --bg);
+        line-height:      1.4;
+
+        &:hover {
+            @include element('content') {
+                @include modifier('flip') {
+                    visibility: visible;
+                    transition:
+                        visibility 0s,
+                        opacity    .2s;
+                    opacity:    1;
+                }
+            }
+        }
+
+        @include element('content') {
+            display:        flex;
+            box-sizing:     border-box;
+            flex-direction: row;
+            align-items:    center;
+            padding:        prop(--dims --pad-y) prop(--dims --pad-x);
+
+            @include modifier('flip') {
+                visibility:       hidden;
+                position:         absolute;
+                top:              0;
+                left:             0;
+                width:            100%;
+                height:           100%;
+                transition:
+                    visibility 0s linear .2s,
+                    opacity    .2s;
+                opacity:          0;
+                background-color: prop(--colors --flip --bg);
+            }
+        }
+
+        @include element('icon') {
+            margin-left: auto;
+        }
+    }
+}
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
new file mode 100644
index 0000000..db75159
--- /dev/null
+++ b/assets/css/components/_section-heading.scss
@@ -0,0 +1,28 @@
+@include namespace('section-heading') {
+    @include store((
+        --dims: (
+            --pad-y: $line-height * 2rem
+        ),
+        --colors: (
+            --line: prop(--colors --accent --color, $global: true),
+        )
+    ));
+
+    @include component(namespace()) {
+        margin:         0 0 prop(--dims --pad-y);
+        font-size:      .8em;
+        font-weight:    400;
+        letter-spacing: .2em;
+        text-transform: uppercase;
+
+        &::before {
+            content:          '';
+            display:          inline-block;
+            width:            3em;
+            height:           1px;
+            margin-right:     1.3em;
+            background-color: prop(--colors --line);
+            vertical-align:   middle;
+        }
+    }
+}
-- 
cgit v1.2.3-70-g09d2