WIP: Redesign

8 files changed, 124 insertions, 19 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index eee48f4..64b11cf 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -76,6 +76,11 @@ strong {
     font-weight: bold;
 }
 
+small {
+    color:     prop(--colors --fg-hi);
+    font-size: 1 / 16 * 14em;
+}
+
 ul,
 ol {
     margin:     ($line-height * 1em) 0 0;
@@ -175,27 +180,12 @@ h1 {
 }
 
 p {
-    margin:  ($line-height * 1em) 0 0;
-    hyphens: auto;
+    margin: ($line-height * 1em) 0 0;
 }
 
 :link,
 :visited {
-    position: relative;
-    z-index:  1;
-    margin:   0 -.3em;
-    padding:  .2em .3em;
-    color:    var(--link--idle--fg);
-
-    &:hover {
-        background-color: var(--link--hover--bg);
-        color:            var(--link--hover--fg);
-        text-decoration:  none;
-    }
-
-    strong {
-        color: currentColor;
-    }
+    color: var(--link--idle--fg);
 }
 
 hr {
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index bca50d8..3eff6fc 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -19,3 +19,7 @@
 @include utility('mt0') {
     margin-top: 0;
 }
+
+@include utility('db') {
+    display: block;
+}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 0c6102d..1ef0c8a 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -2,7 +2,7 @@ $breakpoints: (
     xs: 320px,
     sm: 600px,
     md: 900px,
-    lg: 1400px,
+    lg: 1500px,
 );
 
 $unit-intervals: (
@@ -22,7 +22,7 @@ $subcontent--indent: 2em;
 
 $gray0: hsl(220, 0%, 6%);
 $gray1: hsl(220, 0%, 9%);
-$gray2: hsl(220, 0%, 16%);
+$gray2: hsl(220, 0%, 15%);
 $gray3: hsl(220, 0%, 29%);
 $gray4: hsl(220, 0%, 54%);
 $gray5: hsl(220, 0%, 73%);
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;
+        }
+    }
+}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
new file mode 100644
index 0000000..7998952
--- /dev/null
+++ b/assets/css/layouts/_card-grid.scss
@@ -0,0 +1,7 @@
+@include namespace('card-grid') {
+    @include layout(namespace()) {
+        display:               grid;
+        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+        gap:                   .7rem;
+    }
+}
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
new file mode 100644
index 0000000..cb966c8
--- /dev/null
+++ b/assets/css/objects/_icon.scss
@@ -0,0 +1,12 @@
+@include namespace('icon') {
+    @include object(namespace()) {
+        display:         block;
+        width:           16px;
+        height:          16px;
+        stroke-width:    1.5px;
+        stroke-linecap:  round;
+        stroke:          currentColor;
+        stroke-linejoin: round;
+        fill:            none;
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index f4c6db7..90cbe5d 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -8,12 +8,17 @@
 @import 'functions';
 @import 'basics';
 
+@import 'objects/icon';
+
 @import 'components/nav';
 @import 'components/landing-banner';
+@import 'components/section-heading';
 @import 'components/footer';
+@import 'components/card';
 
 @import 'layouts/landing';
 @import 'layouts/container';
+@import 'layouts/card-grid';
 
 @import 'scopes/body';