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/_basics.scss | 24 ++++--------
assets/css/_utils.scss | 4 ++
assets/css/_vars.scss | 4 +-
assets/css/components/_card.scss | 59 +++++++++++++++++++++++++++++
assets/css/components/_section-heading.scss | 28 ++++++++++++++
assets/css/layouts/_card-grid.scss | 7 ++++
assets/css/objects/_icon.scss | 12 ++++++
assets/css/style.scss | 5 +++
8 files changed, 124 insertions(+), 19 deletions(-)
create mode 100644 assets/css/components/_card.scss
create mode 100644 assets/css/components/_section-heading.scss
create mode 100644 assets/css/layouts/_card-grid.scss
create mode 100644 assets/css/objects/_icon.scss
(limited to 'assets')
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';
--
cgit v1.2.3-70-g09d2