From 19d3eb0bdfe505715d3b9f62a3cf8d340291a144 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 11 Nov 2021 09:14:38 +0100
Subject: Show profiles on home page again; general updates
---
assets/css/_basics.scss | 4 ++-
assets/css/components/_card-list.scss | 59 +++++++++++++++++++++++++++++++
assets/css/components/_post-list.scss | 61 ---------------------------------
assets/css/style.scss | 2 +-
content/9thPK7O3xn/dreams/index.md | 11 +++---
content/9thPK7O3xn/misc/index.md | 9 ++---
content/9thPK7O3xn/pages/index.md | 9 ++---
content/index.md | 1 -
content/projects/emojis/index.md | 6 ++--
content/projects/index.md | 5 +--
content/symbols.svg | 43 +++++++++++++++++++++++
metadata/metadata.yaml | 10 ++----
templates/layouts/categorized_list.html | 28 +++++++++++----
templates/layouts/index.html | 43 +++++++++++++++++++++--
templates/layouts/list.html | 26 ++++++++++----
15 files changed, 213 insertions(+), 104 deletions(-)
create mode 100644 assets/css/components/_card-list.scss
delete mode 100644 assets/css/components/_post-list.scss
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 6da5e88..09b9585 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -36,7 +36,9 @@ body {
}
main {
- font-size: 1 / 16 * 19em;
+ @include iro-responsive-env(('sm', 'md')) {
+ font-size: iro-responsive-set((1rem, 1 / 16 * 19rem));
+ }
}
pre,
diff --git a/assets/css/components/_card-list.scss b/assets/css/components/_card-list.scss
new file mode 100644
index 0000000..2a2ae69
--- /dev/null
+++ b/assets/css/components/_card-list.scss
@@ -0,0 +1,59 @@
+@include namespace('card-list') {
+ @include store((
+ --colors: (
+ --cat: (
+ --fg: prop(--colors --fg-lo, $global: true),
+ ),
+ --meta: (
+ --fg: prop(--colors --fg-hi, $global: true),
+ )
+ ),
+ --dims: (
+ --col-width: 17em
+ )
+ ));
+
+ @include component(namespace()) {
+ margin-top: $line-height * 2rem;
+ font-size: 1rem;
+
+ @include element('category-header') {
+ margin-top: $line-height * 2rem;
+ color: prop(--colors --cat --fg);
+
+ :link,
+ :visited {
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ @include element('category-content') {
+ margin-top: $line-height * .5rem;
+ filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
+
+ @include modifier('grid') {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+ gap: 6px;
+
+ @include element('card') {
+ @include next-twin-element {
+ margin-top: 0;
+ }
+ }
+ }
+ }
+
+ @include element('card') {
+ box-shadow: none;
+
+ @include next-twin-element {
+ margin-top: 2px;
+ }
+ }
+ }
+}
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
deleted file mode 100644
index 9b124a6..0000000
--- a/assets/css/components/_post-list.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@include namespace('post-list') {
- @include store((
- --colors: (
- --cat: (
- --fg: prop(--colors --fg-lo, $global: true),
- ),
- --meta: (
- --fg: prop(--colors --fg-hi, $global: true),
- )
- ),
- --dims: (
- --col-width: 17em
- )
- ));
-
- @include component(namespace()) {
- margin-top: $line-height * 2rem;
- font-size: 1rem;
-
- @include element('category-header') {
- margin-top: $line-height * 2rem;
- color: prop(--colors --cat --fg);
-
- :link,
- :visited {
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- @include element('category-content') {
- margin-top: $line-height * .5rem;
- filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
- }
-
- @include element('post') {
- box-shadow: none;
-
- @include next-twin-element {
- margin-top: 2px;
- }
- }
-
- @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/style.scss b/assets/css/style.scss
index 99d52c1..8068b87 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -16,7 +16,7 @@
@import 'components/header';
@import 'components/footer';
@import 'components/card';
-@import 'components/post-list';
+@import 'components/card-list';
@import 'scopes/colored-links';
@import 'scopes/headlines';
diff --git a/content/9thPK7O3xn/dreams/index.md b/content/9thPK7O3xn/dreams/index.md
index db7be1c..c230cef 100644
--- a/content/9thPK7O3xn/dreams/index.md
+++ b/content/9thPK7O3xn/dreams/index.md
@@ -1,7 +1,8 @@
---
-title: Dream Journal
-show_dates: true
-position: 9
-layout: list
-create_feed: true
+title: Dream Journal
+position: 9
+layout: list
+show_dates: true
+show_read_indicators: true
+create_feed: true
---
diff --git a/content/9thPK7O3xn/misc/index.md b/content/9thPK7O3xn/misc/index.md
index 0d79d44..840b8c9 100644
--- a/content/9thPK7O3xn/misc/index.md
+++ b/content/9thPK7O3xn/misc/index.md
@@ -1,6 +1,7 @@
---
-title: Other stuff
-position: 10
-layout: list
-create_feed: true
+title: Other stuff
+position: 10
+layout: list
+show_read_indicators: true
+create_feed: true
---
diff --git a/content/9thPK7O3xn/pages/index.md b/content/9thPK7O3xn/pages/index.md
index ca2e190..583b34b 100644
--- a/content/9thPK7O3xn/pages/index.md
+++ b/content/9thPK7O3xn/pages/index.md
@@ -1,6 +1,7 @@
---
-title: Pages
-position: 0
-layout: list
-create_feed: true
+title: Pages
+position: 0
+layout: list
+show_read_indicators: true
+create_feed: true
---
diff --git a/content/index.md b/content/index.md
index c9ce120..4ae64c2 100644
--- a/content/index.md
+++ b/content/index.md
@@ -5,4 +5,3 @@ 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/projects/emojis/index.md b/content/projects/emojis/index.md
index cbffe1b..f650b2e 100644
--- a/content/projects/emojis/index.md
+++ b/content/projects/emojis/index.md
@@ -1,4 +1,6 @@
---
-title: Emojis
-icon: smile
+title: Emojis
+icon: smile
+layout: list
+list_grid: true
---
diff --git a/content/projects/index.md b/content/projects/index.md
index 1a33149..8aa8f96 100644
--- a/content/projects/index.md
+++ b/content/projects/index.md
@@ -1,4 +1,5 @@
---
-title: Projects
-layout: categorized_list
+title: Projects
+layout: categorized_list
+list_grid: true
---
diff --git a/content/symbols.svg b/content/symbols.svg
index f633664..fecf78e 100644
--- a/content/symbols.svg
+++ b/content/symbols.svg
@@ -10,6 +10,49 @@
<path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" />
</symbol>
+ <symbol id="icon-arrow-up-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+ <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" />
+ </symbol>
+
+ <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+ <path
+ d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311"
+ fill="none" stroke="currentColor" />
+ </symbol>
+
+ <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+ <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" />
+ </symbol>
+
+ <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+ <path
+ d="m1.5 1.25h9c0.4155 0 0.75 0.3345 0.75 0.75v6.9999c0 0.4155-0.3345 0.75-0.75 0.75h-7.25l-2.5 2.5001v-10.25c0-0.4155 0.3345-0.75 0.75-0.75z"
+ fill="none" stroke="currentColor" />
+ <path d="m5.25 12.75h7.5l2.5 2.5001v-10.25c0-0.4155-0.3345-0.75-0.75-0.75h-0.25" fill="none"
+ stroke="currentColor" />
+ </symbol>
+
+ <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+ <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" />
+ </symbol>
+
+ <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+ <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" />
+ <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" />
+ </symbol>
+
+ <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+ <path
+ d="m7.25 12.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm8-3c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75c0-0.9665 0.7835-1.75 1.75-1.75s1.75 0.7835 1.75 1.75zm-6-6.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm2 12.25 1.6219-4.1121m-8.331-0.13789-3.7909-5.25m6.4058 6.1626 4.6868-1.8235m-3.163-5.7868 3.5859 3.9307m-5.0863-3.5029-1.3496 6.043"
+ fill="none" stroke="currentColor" />
+ </symbol>
+
+ <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+ <path
+ d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998"
+ fill="none" stroke="currentColor" />
+ </symbol>
+
<symbol id="icon-smile" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
<path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978"
fill="none" stroke="currentColor" />
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index 16388d2..c8f2d72 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -9,7 +9,7 @@ menus:
main:
- id: projects
label: Projects
- url: /#projects
+ url: /projects/
- id: 9thPK7O3xn
label: Personal
@@ -31,7 +31,8 @@ profiles:
- platform: Fediverse
icon: graph
- username: "@volpeon@fedi.vulpes.one"
+ username: "@volpeon@mk.vulpes.one"
+ url: "https://mk.vulpes.one/@volpeon"
featured: true
- platform: GitHub
@@ -43,11 +44,6 @@ profiles:
icon: hash
username: volpeon
- - platform: PeerTube
- icon: video
- username: "@volpeon@pt.vulpes.one"
- featured: true
-
- platform: Steam
username: volpeon
url: https://steamcommunity.com/id/volpeon/
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 8f8b1ae..fa0f000 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -5,17 +5,24 @@
$body$
</div>
- <div class="c-post-list">
+ <div class="c-card-list">
$for(pages.asc_title)$
$if(it.pages)$
- <h2 class="c-post-list__category-header">
+ <h2 class="c-card-list__category-header">
<a href="$it.url.rel$">$it.title$</a>
</h2>
- <div class="c-post-list__category-content">
+ <div class="c-card-list__category-content$if(pages.asc_title.list_grid)$ c-card-list__category-content--grid$endif$">
$if(pages.asc_title.show_dates)$
$for(it.pages.desc_date)$
- <a href="$it.url.rel$" class="c-post-list__post c-card">
- <div class="c-card__block c-card__block--indicator"></div>
+ <a href="$it.url.rel$" class="c-card-list__card c-card">
+ $if(pages.asc_title.show_read_indicators)$
+ <div class="c-card__block c-card__block--indicator"></div>
+ $endif$
+ $if(pages.asc_title.icon)$
+ <svg class="c-card__block o-icon">
+ <use href="/symbols.svg#icon-$pages.asc_title.icon$"></use>
+ </svg>
+ $endif$
<div class="c-card__block c-card__block--main">
$it.title$
</div>
@@ -31,8 +38,15 @@ $body$
$endfor$
$else$
$for(it.pages.asc_title)$
- <a href="$it.url.rel$" class="c-post-list__post c-card">
- <div class="c-card__block c-card__block--indicator"></div>
+ <a href="$it.url.rel$" class="c-card-list__card c-card">
+ $if(pages.asc_title.show_read_indicators)$
+ <div class="c-card__block c-card__block--indicator"></div>
+ $endif$
+ $if(pages.asc_title.icon)$
+ <svg class="c-card__block o-icon">
+ <use href="/symbols.svg#icon-$pages.asc_title.icon$"></use>
+ </svg>
+ $endif$
<div class="c-card__block c-card__block--main">
$it.title$
</div>
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index a7b68c3..838f570 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -3,11 +3,48 @@
$body$
</div>
- <div id="projects" class="c-post-list c-post-list--grid">
- <div class="c-post-list__category-content">
+ <div class="c-card-list">
+ <h2 class="c-card-list__category-header">
+ Profiles
+ </h2>
+ <div class="c-card-list__category-content c-card-list__category-content--grid">
+ $for(profiles)$
+ $if(it.featured)$
+ $if(it.url)$
+ <a class="c-card-list__card c-card" href="$it.url$">
+ $else$
+ <div class="c-card-list__card c-card">
+ $endif$
+ $if(it.icon)$
+ <svg class="c-card__block o-icon">
+ <use href="/symbols.svg#icon-$it.icon$"></use>
+ </svg>
+ $endif$
+ <div class="c-card__block c-card__block--main">
+ <strong class="u-db">$it.platform$</strong>
+ <small class="u-db">$it.username$</small>
+ </div>
+ $if(it.url)$
+ <svg class="c-card__block o-icon">
+ <use href="/symbols.svg#icon-arrow-up-right"></use>
+ </svg>
+ $endif$
+ $if(it.url)$
+ </a>
+ $else$
+ </div>
+ $endif$
+ $endif$
+ $endfor$
+ </div>
+
+ <h2 class="c-card-list__category-header">
+ <a href="$pages.by_id.projects.url.rel$">$pages.by_id.projects.title$</a>
+ </h2>
+ <div class="c-card-list__category-content c-card-list__category-content--grid">
$for(pages.by_id.projects.pages.all)$
$for(it.pages.all)$
- <a href="$it.url.rel$" class="c-post-list__post c-card">
+ <a href="$it.url.rel$" class="c-card-list__card c-card">
$if(pages.by_id.projects.pages.all.icon)$
<svg class="c-card__block o-icon">
<use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 4831228..c0045c0 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -5,12 +5,19 @@
$body$
</div>
- <div class="c-post-list">
- <div class="c-post-list__category-content">
+ <div class="c-card-list">
+ <div class="c-card-list__category-content$if(list_grid)$ c-card-list__category-content--grid$endif$">
$if(show_dates)$
$for(pages.desc_date)$
- <a href="$it.url.rel$" class="c-post-list__post c-card">
- <div class="c-card__block c-card__block--indicator"></div>
+ <a href="$it.url.rel$" class="c-card-list__card c-card">
+ $if(show_read_indicators)$
+ <div class="c-card__block c-card__block--indicator"></div>
+ $endif$
+ $if(icon)$
+ <svg class="c-card__block o-icon">
+ <use href="/symbols.svg#icon-$icon$"></use>
+ </svg>
+ $endif$
<div class="c-card__block c-card__block--main">
$it.title$
</div>
@@ -26,8 +33,15 @@ $body$
$endfor$
$else$
$for(pages.asc_title)$
- <a href="$it.url.rel$" class="c-post-list__post c-card">
- <div class="c-card__block c-card__block--indicator"></div>
+ <a href="$it.url.rel$" class="c-card-list__card c-card">
+ $if(show_read_indicators)$
+ <div class="c-card__block c-card__block--indicator"></div>
+ $endif$
+ $if(icon)$
+ <svg class="c-card__block o-icon">
+ <use href="/symbols.svg#icon-$icon$"></use>
+ </svg>
+ $endif$
<div class="c-card__block c-card__block--main">
$it.title$
</div>
--
cgit v1.2.3-70-g09d2