From 8177471f70a517e78b4470cd01c375ed30121102 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 10 Nov 2021 21:20:58 +0100 Subject: Simplified home page --- assets/css/_basics.scss | 11 ++-- assets/css/_vars.scss | 2 +- assets/css/components/_header.scss | 48 +++++++++++++--- assets/css/components/_landing-banner.scss | 49 ---------------- assets/css/components/_outer-button.scss | 89 ------------------------------ assets/css/components/_post-list.scss | 17 ++++++ assets/css/components/_project.scss | 68 ----------------------- assets/css/layouts/_card-grid.scss | 22 -------- assets/css/layouts/_landing.scss | 54 ------------------ assets/css/layouts/_project-grid.scss | 22 -------- assets/css/layouts/_section.scss | 74 ------------------------- assets/css/style.scss | 8 --- content/index.md | 5 ++ content/symbols.svg | 51 ----------------- templates/base.html | 24 ++------ templates/layouts/categorized_list.html | 84 ++++++++++++++-------------- templates/layouts/index.html | 88 ++++------------------------- templates/layouts/list.html | 68 +++++++++++------------ templates/layouts/page.html | 16 +++--- 19 files changed, 164 insertions(+), 636 deletions(-) delete mode 100644 assets/css/components/_landing-banner.scss delete mode 100644 assets/css/components/_outer-button.scss delete mode 100644 assets/css/components/_project.scss delete mode 100644 assets/css/layouts/_card-grid.scss delete mode 100644 assets/css/layouts/_landing.scss delete mode 100644 assets/css/layouts/_project-grid.scss delete mode 100644 assets/css/layouts/_section.scss diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 4fe73a2..71beceb 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -32,12 +32,6 @@ body { padding: 0; } -main { - display: flex; - flex-direction: column; - min-height: 100vh; -} - pre, code { font-family: $font-fam--mono; @@ -156,6 +150,11 @@ h6 { & + & { margin-top: $line-height * 1rem; } + + strong { + color: prop(--colors --accent --color, $global: true); + font-weight: 550; + } } p { diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 4b60518..ebbefad 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -22,7 +22,7 @@ $font-fam--large: 'Garet', $font-fam--text; $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; $font-size: 16px; $line-height: 1.7; -$content--width: 42rem; +$content--width: 46rem; @include iro-execute { $gray0: hsl(220, 5%, 7%); diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index e74780b..81e4d4f 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss @@ -1,23 +1,53 @@ @include namespace('header') { @include store(( --colors: ( - --fg: prop(--colors --fg-lo, $global: true), - --bg: prop(--colors --bg-hi, $global: true), + --fg: prop(--colors --fg-hi, $global: true), --hover: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --accent --color, $global: true), + --fg: prop(--colors --fg-lo, $global: true), + ), + --active: ( + --fg: prop(--colors --fg-lo, $global: true), ) + ), + --dims: ( + --height: 4rem, + --pad-x: .6rem, ) )); @include component(namespace()) { display: flex; - position: fixed; - z-index: 10000; - top: 0; - left: 0; flex-direction: row; justify-content: flex-start; - box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); + height: prop(--dims --height); + + @include element('item') { + padding: 0 prop(--dims --pad-x); + line-height: prop(--dims --height); + color: prop(--colors --fg); + text-decoration: none; + + &:hover { + color: prop(--colors --hover --fg); + } + + @include modifier('icon') { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + width: prop(--dims --height); + } + + @include modifier('active') { + font-weight: bold; + color: prop(--colors --active --fg); + } + } + + @include element('icon') { + width: 1.5em; + height: 1.5em; + } } } diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss deleted file mode 100644 index f1b8595..0000000 --- a/assets/css/components/_landing-banner.scss +++ /dev/null @@ -1,49 +0,0 @@ -@include namespace('landing-banner') { - @include store(( - --colors: ( - --emph: ( - --fg: prop(--colors --accent --color, $global: true), - --bg: prop(--colors --bg-hi, $global: true) - ) - ) - )); - - @include component(namespace()) { - @include element('title') { - max-width: 7em; - margin-top: 0; - transform: translateX(-.06em); - font-family: $font-fam--large; - font-weight: 350; - line-height: 1.2; - 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 media('<=md') { - @include element('title') { - max-width: none; - } - } - - @include iro-responsive-env(('md', 'lg')) { - @include element('title') { - font-size: iro-responsive-set((2.6rem, 3.4rem)); - } - } - } -} diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss deleted file mode 100644 index fb3a51e..0000000 --- a/assets/css/components/_outer-button.scss +++ /dev/null @@ -1,89 +0,0 @@ -@include namespace('outer-button') { - @include store(( - --colors: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --fg-lo, $global: true), - --border: prop(--colors --fg, $global: true), - --hover: ( - --bg: prop(--colors --accent --color, $global: true), - --fg: prop(--colors --bg-hi, $global: true), - ), - --inverted: ( - --fg: prop(--colors --fg-lo, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - ) - ), - --dims: ( - --pad-x: 1.7rem, - ) - )); - - @include component(namespace()) { - display: flex; - height: prop(--dims --outer, $global: true); - transition: background-color .2s, color .2s; - background-color: prop(--colors --bg); - color: prop(--colors --fg); - font-size: 1rem; - font-weight: 700; - letter-spacing: .5px; - text-decoration: none; - text-transform: uppercase; - - @include modifier('inverted') { - background-color: prop(--colors --inverted --bg); - color: prop(--colors --inverted --fg); - } - - @include modifier('scroll-top') { - position: absolute; - right: 0; - bottom: 0; - } - - @include element('icon') { - display: flex; - position: relative; - flex: 0 0 auto; - align-items: center; - justify-content: center; - width: prop(--dims --outer, $global: true); - height: 100%; - - @include next-element('content') { - margin-left: -1px; - border-left: 1px solid prop(--colors --border); - } - } - - @include element('icon-symbol') { - display: block; - width: 1.5em; - height: 1.5em; - } - - @include element('content') { - height: 100%; - padding-right: prop(--dims --pad-x); - padding-left: prop(--dims --pad-x); - transition: border-left-color .2s; - font-size: 1 / 16 * 14em; - line-height: prop(--dims --outer, $global: true); - white-space: nowrap; - } - - &:link, - &:visited { - &:hover { - background-color: prop(--colors --hover --bg); - color: prop(--colors --hover --fg); - - @include element('icon') { - @include next-element('content') { - border-left-color: transparent; - } - } - } - } - } -} diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss index 7a3b8a0..5126589 100644 --- a/assets/css/components/_post-list.scss +++ b/assets/css/components/_post-list.scss @@ -7,6 +7,9 @@ --meta: ( --fg: prop(--colors --fg-hi, $global: true), ) + ), + --dims: ( + --col-width: 17em ) )); @@ -39,5 +42,19 @@ margin-top: 1px; } } + + @include modifier('grid') { + @include element('category-content') { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); + gap: $line-height * .5rem; + } + + @include element('post') { + @include next-twin-element { + margin-top: 0; + } + } + } } } diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss deleted file mode 100644 index 5248e32..0000000 --- a/assets/css/components/_project.scss +++ /dev/null @@ -1,68 +0,0 @@ -@include namespace('project') { - @include store(( - --colors: ( - --bg: prop(--colors --bg-hi, $global: true), - ) - )); - - @include component(namespace()) { - position: relative; - overflow: hidden; - box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); - - &::before { - content: ''; - display: block; - padding-top: 12em; - padding-bottom: 5vw; - background-color: prop(--colors --bg); - } - - &:link, - &:visited { - color: currentColor; - text-decoration: none; - - &:hover, - &:focus { - @include element('picture') { - opacity: .75; - filter: blur(0); - } - - @include element('card') { - transform: translateY(#{prop(--card --dims --hover-offset, $global: true)}); - background-color: prop(--card --colors --hover --bg, $global: true); - color: prop(--card --colors --hover --fg, $global: true); - - * { - color: currentColor; - } - } - } - } - - @include element('picture') { - display: block; - position: absolute; - z-index: 10; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center center; - transition: opacity .2s; - mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em); - } - - @include element('card') { - position: absolute; - z-index: 20; - right: 1em; - bottom: 1em; - min-width: 15em; - max-width: calc(100% - 2em); - } - } -} diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss deleted file mode 100644 index c9d927a..0000000 --- a/assets/css/layouts/_card-grid.scss +++ /dev/null @@ -1,22 +0,0 @@ -@include namespace('card-grid') { - @include store(( - --dims: ( - --col-width: 17em - ) - )); - - @include layout(namespace()) { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); - gap: .6rem; - filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); - - @include element('card') { - box-shadow: none; - } - - @include media('<=sm') { - grid-template-columns: 1fr; - } - } -} diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss deleted file mode 100644 index a81b105..0000000 --- a/assets/css/layouts/_landing.scss +++ /dev/null @@ -1,54 +0,0 @@ -@include namespace('landing') { - @include store(( - --dims: ( - --banner-width: 30rem, - ), - --colors: ( - --banner-bg: prop(--colors --bg, $global: true) - ) - )); - - @include layout(namespace()) { - display: flex; - flex-direction: row; - align-items: center; - margin-top: auto; - margin-bottom: auto; - - @include element('banner') { - width: 70%; - max-width: prop(--dims --banner-width); - background-color: prop(--colors --banner-bg); - } - - @include element('content') { - width: 100%; - } - - @include iro-responsive-env(('md', 'lg')) { - padding-right: iro-responsive-set((0, 3rem)); - padding-left: iro-responsive-set((0, 6rem)); - } - - @include media('<=md') { - display: block; - - @include element('side') { - display: none; - - @include sibling-element('side') { - display: block; - } - } - - @include element('banner', 'content') { - width: auto; - padding: 0; - } - - @include element('banner') { - max-width: none; - } - } - } -} diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss deleted file mode 100644 index 5ed983c..0000000 --- a/assets/css/layouts/_project-grid.scss +++ /dev/null @@ -1,22 +0,0 @@ -@include namespace('project-grid') { - @include store(( - --dims: ( - --col-width: 20em - ) - )); - - @include layout(namespace()) { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); - gap: 2rem; - filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); - - @include element('project') { - box-shadow: none; - } - - @include media('<=sm') { - grid-template-columns: 1fr; - } - } -} diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss deleted file mode 100644 index 80b8ca9..0000000 --- a/assets/css/layouts/_section.scss +++ /dev/null @@ -1,74 +0,0 @@ -@include namespace('section') { - @include store(( - --colors: ( - --border: prop(--colors --obj-hi, $global: true), - --body-bg: transparent, - ) - )); - - @include store(( - --colors: ( - --body-bg: prop(--colors --bg-hi, $global: true), - ) - ), 'light'); - - @include layout(namespace()) { - position: relative; - - @include modifier('flex') { - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: flex-start; - } - - @include modifier('fullscreen') { - box-sizing: border-box; - min-height: 100vh; - margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); - padding-bottom: prop(--dims --outer, $global: true); - } - - @include modifier('body') { - background-color: prop(--colors --body-bg); - } - - @include modifier('no-header') { - padding-top: prop(--dims --outer, $global: true); - } - - @include element('header') { - display: flex; - flex-direction: row; - align-items: center; - height: prop(--dims --outer, $global: true); - font-size: 1 / 16 * 15em; - - @include modifier('sticky') { - position: sticky; - z-index: 9000; - top: 0; - left: 0; - } - } - - /*@include element('footer') { - position: absolute; - z-index: 10000; - right: 0; - bottom: 0; - height: prop(--dims --outer, $global: true); - font-size: 1 / 16 * 15em; - }*/ - - @include element('header-separator') { - flex: 1 1 auto; - width: 100%; - height: 100%; - margin-top: -1px; - margin-right: prop(--container --dims --pad-x, $global: true); - margin-left: prop(--container --dims --pad-x, $global: true); - border-top: 1px solid prop(--colors --border); - } - } -} diff --git a/assets/css/style.scss b/assets/css/style.scss index cd27f35..99d52c1 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -10,22 +10,14 @@ @import 'basics'; @import 'layouts/container'; -@import 'layouts/section'; -@import 'layouts/landing'; @import 'objects/icon'; -@import 'components/outer-button'; @import 'components/header'; -@import 'components/landing-banner'; @import 'components/footer'; @import 'components/card'; -@import 'components/project'; @import 'components/post-list'; -@import 'layouts/card-grid'; -@import 'layouts/project-grid'; - @import 'scopes/colored-links'; @import 'scopes/headlines'; @import 'scopes/body'; diff --git a/content/index.md b/content/index.md index e144d39..c9ce120 100644 --- a/content/index.md +++ b/content/index.md @@ -1,3 +1,8 @@ --- title: Home --- + +# I'm a **red fox** in disguise. {.u-mt0} + +Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. +You can find me on the [Fediverse](https://mk.vulpes.one/@volpeon). diff --git a/content/symbols.svg b/content/symbols.svg index 6964327..f633664 100644 --- a/content/symbols.svg +++ b/content/symbols.svg @@ -6,61 +6,10 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/templates/base.html b/templates/base.html index 5542401..554651d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -45,21 +45,17 @@