From 8c83a2ef92be845c5ffecb1434028d0c68915936 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 18 Apr 2021 15:44:32 +0200
Subject: Update
---
assets/css/_utils.scss | 2 +-
assets/css/_vars.scss | 28 ++---
assets/css/components/_card.scss | 2 +-
assets/css/components/_footer.scss | 4 +-
assets/css/components/_header.scss | 22 ++++
assets/css/components/_landing-banner.scss | 2 +-
assets/css/components/_logo.scss | 19 ----
assets/css/components/_outer-button.scss | 31 +++---
assets/css/components/_section-heading.scss | 29 -----
assets/css/layouts/_landing.scss | 4 +
assets/css/layouts/_section.scss | 28 ++++-
assets/css/scopes/_body.scss | 26 +++++
assets/css/style.scss | 3 +-
content/index.js | 2 +-
content/notebook/index.md | 5 -
content/projects/blobfox-emojis/index.md | 2 +-
content/projects/bunhd-emojis/index.md | 2 +-
metadata/metadata.yaml | 10 +-
scripts/build_content.sh | 8 +-
templates/base.html | 61 ++++++----
templates/layouts/categorized_list.html | 37 +++----
templates/layouts/index.html | 165 +++++++++++++---------------
templates/layouts/page.html | 18 +--
templates/symbols.svg | 6 +
24 files changed, 266 insertions(+), 250 deletions(-)
create mode 100644 assets/css/components/_header.scss
delete mode 100644 assets/css/components/_logo.scss
delete mode 100644 assets/css/components/_section-heading.scss
delete mode 100644 content/notebook/index.md
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 8f8170c..e8e98d2 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,4 +1,4 @@
-@include utility('hidden') {
+@include utility('dn') {
display: none;
@each $breakpoint in map-keys($breakpoints) {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 9b5fe86..71dc5d2 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -23,27 +23,29 @@ $subcontent--indent: 2em;
$gray0: hsl(220, 0%, 6%);
$gray1: hsl(220, 0%, 9%);
$gray2: hsl(220, 0%, 15%);
-$gray3: hsl(220, 0%, 29%);
-$gray4: hsl(220, 0%, 54%);
-$gray5: hsl(220, 0%, 73%);
-$gray6: hsl(220, 0%, 100%);
+$gray3: hsl(220, 0%, 20%);
+$gray4: hsl(220, 0%, 33%);
+$gray5: hsl(220, 0%, 54%);
+$gray6: hsl(220, 0%, 73%);
+$gray7: hsl(220, 0%, 100%);
@include store((
--dims: (
--outer: 4rem,
- --outer-spacing: 2rem,
- --spacing-y: 3rem,
+ --outer-spacing: 1.7rem,
+ --spacing-y: 4rem,
),
--colors: (
--bg-hi: $gray0, // Darker background
--bg: $gray1, // Background
--bg-lo: $gray2, // Lighter background
- --obj: $gray3,
+ --obj-hi: $gray3,
+ --obj: $gray4,
- --fg-hi: $gray4, // Faint text
- --fg: $gray5, // Text
- --fg-lo: $gray6, // Strong text
+ --fg-hi: $gray5, // Faint text
+ --fg: $gray6, // Text
+ --fg-lo: $gray7, // Strong text
--accent: (
--h: 354,
@@ -68,11 +70,11 @@ $gray6: hsl(220, 0%, 100%);
}
}
-@include store((
+/* @include store((
--dims: (
- --outer: 4rem,
+ --outer: 3.5rem,
),
-), 'sm');
+), 'sm'); */
:root {
--heading--fg: var(--colors--fg-lo);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 09b03b0..cb18810 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -15,7 +15,7 @@
@include store((
--dims: (
--pad-x: 1em,
- --pad-y: .6em
+ --pad-y: .7em
)
), 'md');
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index c20bc22..c127d02 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -2,7 +2,7 @@
@include store((
--colors: (
--fg: prop(--colors --obj, $global: true),
- --border: prop(--colors --bg-lo, $global: true),
+ --border: prop(--colors --obj-hi, $global: true),
)
));
@@ -11,6 +11,8 @@
align-items: center;
justify-content: space-between;
height: prop(--dims --outer, $global: true);
+ padding-right: prop(--dims --outer, $global: true);
+ font-size: 1 / 16 * 15em;
@include element('content') {
width: 100%;
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
new file mode 100644
index 0000000..61f6f4a
--- /dev/null
+++ b/assets/css/components/_header.scss
@@ -0,0 +1,22 @@
+@include namespace('header') {
+ @include store((
+ --colors: (
+ --fg: prop(--colors --fg-lo, $global: true),
+ --bg: prop(--colors --bg-hi, $global: true),
+ --hover: (
+ --fg: prop(--colors --bg-hi, $global: true),
+ --bg: prop(--colors --accent --color, $global: true),
+ )
+ )
+ ));
+
+ @include component(namespace()) {
+ display: flex;
+ position: fixed;
+ z-index: 10000;
+ top: 0;
+ left: 0;
+ flex-direction: row;
+ justify-content: flex-start;
+ }
+}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index f6016c4..58d64d7 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -10,7 +10,7 @@
@include element('title') {
max-width: 7em;
margin-top: 0;
- transform: translateX(-.05em);
+ transform: translateX(-.06em);
font-family: $font-fam--large;
font-weight: 350;
text-transform: none;
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss
deleted file mode 100644
index 13587c8..0000000
--- a/assets/css/components/_logo.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@include namespace('logo') {
- @include store((
- --colors: (
- --fg: prop(--colors --fg-lo, $global: true),
- --bg: prop(--colors --bg-hi, $global: true),
- --hover: (
- --fg: prop(--colors --bg-hi, $global: true),
- --bg: prop(--colors --accent --color, $global: true),
- )
- )
- ));
-
- @include component(namespace()) {
- position: fixed;
- z-index: 10000;
- top: 0;
- left: 0;
- }
-}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index b92dd9e..774281d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,13 +7,9 @@
--bg: prop(--colors --accent --color, $global: true),
--fg: prop(--colors --bg-hi, $global: true),
),
- --icon: (
+ --inverted: (
--fg: prop(--colors --fg-lo, $global: true),
--bg: prop(--colors --bg-hi, $global: true),
- --hover: (
- --fg: prop(--colors --bg-hi, $global: true),
- --bg: prop(--colors --accent --color, $global: true),
- )
)
)
));
@@ -24,9 +20,17 @@
transition: background-color .2s, color .2s;
background-color: prop(--colors --bg);
color: prop(--colors --fg);
+ font-size: 1rem;
font-weight: 450;
text-decoration: none;
+ @include modifier('scroll-top') {
+ position: fixed;
+ z-index: 9000;
+ right: 0;
+ bottom: 0;
+ }
+
@include element('icon') {
display: flex;
position: relative;
@@ -36,19 +40,16 @@
width: prop(--dims --outer, $global: true);
height: 100%;
transition: background-color .2s, color .2s;
- background-color: prop(--colors --icon --bg);
- color: prop(--colors --icon --fg);
}
- @include modifier('icon-only') {
- @include element('icon') {
- background-color: prop(--colors --bg);
- color: prop(--colors --fg);
- }
+ @include modifier('inverted') {
+ background-color: prop(--colors --inverted --bg);
+ color: prop(--colors --inverted --fg);
}
-
- &:hover {
- @include multi('&', 'element' 'icon') {
+
+ &:link,
+ &:visited {
+ &:hover {
background-color: prop(--colors --hover --bg);
color: prop(--colors --hover --fg);
}
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
deleted file mode 100644
index 717442b..0000000
--- a/assets/css/components/_section-heading.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@include namespace('section-heading') {
- @include store((
- --dims: (
- --pad-y: $line-height * 1rem
- ),
- --colors: (
- --line: prop(--colors --accent --color, $global: true),
- )
- ));
-
- @include component(namespace()) {
- margin: 0 0 prop(--dims --pad-y);
- font-family: $font-fam--text;
- font-size: 1 / 16 * 13em;
- font-weight: bold;
- letter-spacing: .2em;
- text-transform: uppercase;
-
- &::before {
- content: '';
- display: inline-block;
- width: 3em;
- height: 2px;
- margin-right: 1.3em;
- background-color: prop(--colors --line);
- vertical-align: middle;
- }
- }
-}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 500849e..d1169dd 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -10,8 +10,12 @@
@include layout(namespace()) {
display: flex;
+ box-sizing: border-box;
flex-direction: row;
align-items: center;
+ min-height: 100%;
+ margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
+ padding-bottom: prop(--dims --outer, $global: true);
@include element('banner') {
width: 70%;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index a005ece..0ad9a61 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,10 +1,11 @@
@include namespace('section') {
- @include layout(namespace()) {
- box-sizing: border-box;
- min-height: 100%;
- margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
- padding-bottom: prop(--dims --outer, $global: true);
+ @include store((
+ --colors: (
+ --border: prop(--colors --obj-hi, $global: true),
+ )
+ ));
+ @include layout(namespace()) {
@include modifier('no-head') {
padding-top: prop(--dims --outer, $global: true);
}
@@ -17,6 +18,23 @@
left: 0;
flex-direction: row;
justify-self: flex-start;
+ padding-right: prop(--dims --outer, $global: true);
+ font-size: 1 / 16 * 15em;
+
+ &::after {
+ content: '';
+ width: 100%;
+ height: 100%;
+ margin-right: prop(--dims --outer-spacing, $global: true);
+ margin-left: prop(--dims --outer-spacing, $global: true);
+ border-top: 1px solid prop(--colors --border);
+ }
+ }
+
+ @include media('<=sm') {
+ @include element('head') {
+ padding-right: 0;
+ }
}
}
}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 6fbacff..9b3a862 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -5,3 +5,29 @@
}
}
}
+@include namespace('body') {
+ @include scope(namespace()) {
+ font-size: 1 / 16 * 18em;
+
+ > :first-child {
+ margin-top: 0;
+ }
+
+ h1 {
+ transform: translateX(-.06em);
+ font-family: $font-fam--large;
+ font-weight: 550;
+ text-transform: none;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ @include iro-responsive-env(('xs', 'md')) {
+ h1 {
+ font-size: iro-responsive-set((1.8rem, 3rem));
+ }
+ }
+ }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index d095dec..1d19aae 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -18,9 +18,8 @@
@import 'objects/button';
@import 'components/outer-button';
-@import 'components/logo';
+@import 'components/header';
@import 'components/landing-banner';
-@import 'components/section-heading';
@import 'components/footer';
@import 'components/card';
diff --git a/content/index.js b/content/index.js
index 8a24e3a..e03dec1 100644
--- a/content/index.js
+++ b/content/index.js
@@ -2,5 +2,5 @@ var headerEl = document.querySelector(".c-hero");
var headerTemplateEl = document.getElementById("header-sm");
var headerSmEl = headerTemplateEl.content.cloneNode("true");
-headerEl.classList.remove("u-hidden@sm-down");
+headerEl.classList.remove("u-dn@sm-down");
headerEl.appendChild(headerSmEl);
diff --git a/content/notebook/index.md b/content/notebook/index.md
deleted file mode 100644
index 1175625..0000000
--- a/content/notebook/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Notebook
-layout: categorized_list
-create_feed: true
----
diff --git a/content/projects/blobfox-emojis/index.md b/content/projects/blobfox-emojis/index.md
index 97a186e..92c26d4 100644
--- a/content/projects/blobfox-emojis/index.md
+++ b/content/projects/blobfox-emojis/index.md
@@ -1,5 +1,5 @@
---
-title: Blobfox Emojis
+title: Blobfox
category: emj
---
diff --git a/content/projects/bunhd-emojis/index.md b/content/projects/bunhd-emojis/index.md
index bd89b1d..361b15d 100644
--- a/content/projects/bunhd-emojis/index.md
+++ b/content/projects/bunhd-emojis/index.md
@@ -1,5 +1,5 @@
---
-title: BunHD Emojis
+title: BunHD
category: emj
---
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index 6980efb..8716b43 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -7,16 +7,9 @@ author:
menus:
main:
- - id: index
- label: Home
- url: /
- id: projects
label: Projects
- url: /projects/
- - id: notebook
- label: Notebook
- url: /notebook/
- hidden: true
+ url: /#projects
- id: personal
label: Personal
label_long: Personal Notebook
@@ -49,6 +42,7 @@ profiles:
icon: envelope
username: me@volpeon.ink
featured: true
+ url: "mailto:me@volpeon.ink"
- platform: Fediverse
icon: graph
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index c20eca8..83b6908 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -69,10 +69,10 @@ get_subpages_metadata() {
fi
local pages="[]"
- local sections="{}"
+ local subsections="{}"
for file_in in "${child_pages[@]}"; do
- local section=$(basename "${file_in%/index.md}")
+ local subsection=$(basename "${file_in%/index.md}")
local content=$(get_content "$file_in" | sed -z 's/\\/\\\\/g;s/\n/\\n/g;s/"/\\"/g')
local metadata=$(get_metadata "$file_in" | jq "{ \
file_out: .file_out, \
@@ -92,10 +92,10 @@ get_subpages_metadata() {
fi
pages=$(echo "$pages" | jq ". += [ $metadata ]")
- sections=$(echo "$sections" | jq ". += { \"$section\": { title: $title, pages: $subpages } }")
+ subsections=$(echo "$subsections" | jq ". += { \"$subsection\": { title: $title, pages: $subpages } }")
done
- echo "{ \"pages\": $pages, \"sections\": $sections }"
+ echo "{ \"pages\": $pages, \"subsections\": $subsections }"
}
handle () {
diff --git a/templates/base.html b/templates/base.html
index c7f641c..625b025 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,32 +32,51 @@
</head>
<body>
- <!--<nav class="c-nav">
- <a class="c-nav__logo" href="/" title="$site.title$">
- <svg class="c-nav__logo-symbol">
- <use href="#logo"></use>
- </svg>
+ <nav class="c-header">
+ <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$">
+ <span class="c-outer-button__icon">
+ <svg class="c-outer-button__icon-symbol">
+ <use href="#logo"></use>
+ </svg>
+ </span>
</a>
- $for(menus.main.items)$
- <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a>
- $endfor$
- </nav>-->
-
- <a class="c-outer-button c-outer-button--logo c-logo" href="/" title="$site.title$">
- <span class="c-outer-button__icon">
- <svg class="c-outer-button__icon-symbol">
- <use href="#logo"></use>
- </svg>
- </span>
- </a>
+ $if(section.is_index)$
+ $else$
+ $for(menus.main.items)$
+ $if(it.active)$
+ <a class="c-outer-button" href="$it.url$">
+ <span class="c-outer-button__content">
+ $it.label$
+ </span>
+ </a>
+ $endif$
+ $endfor$
+ $endif$
+ </nav>
- $if(section.is_index)$
+ <main>
+ $if(section.is_index)$
${layouts/index()}
- $elseif(layout.is_categorized_list)$
+ $elseif(layout.is_categorized_list)$
${layouts/categorized_list()}
- $else$
+ $else$
${layouts/page()}
- $endif$
+ $endif$
+
+ <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
+ <span class="c-outer-button__icon">
+ <svg class="c-outer-button__icon-symbol o-icon">
+ <use href="#icon-arrow-up"></use>
+ </svg>
+ </span>
+ </a>
+
+ <footer class="c-footer">
+ <div class="c-footer__content">
+ 9thPK7O3xn
+ </div>
+ </footer>
+ </main>
${symbols.svg()}
</body>
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 8c25ec0..0e9142f 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,23 +1,22 @@
-<main>
- <div class="c-page s-page l-container l-container--content l-container--pad-x l-container--pad-y">
- <div class="c-page__content s-page-content">
+<section class="l-section l-section--no-head">
+ <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
$body$
- $for(pages.by_category)$
- <h2 class="c-page__prefixed c-page__prefixed--h2">
- $for(it.value/first)$
- $it.category.name$
- $endfor$
- </h2>
- <ul>
- $for(it.value)$
- <li class="c-page__prefixed c-page__prefixed--ref">
- <a href="$it.url.rel$">$it.title$</a>
- </li>
- $endfor$
- </ul>
- $endfor$
- </div>
+ $for(pages.by_category)$
+ <h2>
+ $for(it.value/first)$
+ $it.category.name$
+ $endfor$
+ </h2>
+ <ul>
+ $for(it.value)$
+ <li>
+ <a href="$it.url.rel$">$it.title$</a>
+ </li>
+ $endfor$
+ </ul>
+ $endfor$
</div>
-</main>
+</section>
+
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 4163093..327f9f5 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,95 +1,80 @@
-<main>
- <section class="l-section l-section--no-head l-landing">
- <header class="l-landing__banner">
- <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
- <h1 class="c-landing-banner__title">
- <span class="c-landing-banner__title-inner">
- I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
- </span>
- </h1>
- <p class="c-landing-banner__text">
- Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
- </p>
- </div>
- </header>
+<section class="l-section l-section--no-head l-landing">
+ <header class="l-landing__banner">
+ <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
+ <h1 class="c-landing-banner__title">
+ <span class="c-landing-banner__title-inner">
+ I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
+ </span>
+ </h1>
+ <p class="c-landing-banner__text">
+ Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
+ </p>
+ </div>
+ </header>
- <section class="l-landing__content">
- <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo">
- <div class="l-card-grid">
- $for(profiles)$
- $if(it.featured)$
- $if(it.url)$
- <a class="l-card-grid__card c-card" href="$it.url$">
- $else$
- <div class="l-card-grid__card c-card">
- $endif$
- $if(it.icon)$
- <svg class="c-card__icon o-icon">
- <use href="#icon-$it.icon$"></use>
- </svg>
- $endif$
- <div class="c-card__content">
- <strong class="u-db">$it.platform$</strong>
- <small class="u-db">$it.username$</small>
- </div>
- $if(it.url)$
- <svg class="c-card__icon o-icon">
- <use href="#icon-arrow-up-right"></use>
- </svg>
- $endif$
- $if(it.url)$
- </a>
- $else$
- </div>
- $endif$
- $endif$
- $endfor$
- </div>
+ <section class="l-landing__content">
+ <div class="l-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo">
+ <div class="l-card-grid">
+ $for(profiles)$
+ $if(it.featured)$
+ $if(it.url)$
+ <a class="l-card-grid__card c-card" href="$it.url$">
+ $else$
+ <div class="l-card-grid__card c-card">
+ $endif$
+ $if(it.icon)$
+ <svg class="c-card__icon o-icon">
+ <use href="#icon-$it.icon$"></use>
+ </svg>
+ $endif$
+ <div class="c-card__content">
+ <strong class="u-db">$it.platform$</strong>
+ <small class="u-db">$it.username$</small>
+ </div>
+ $if(it.url)$
+ <svg class="c-card__icon o-icon">
+ <use href="#icon-arrow-up-right"></use>
+ </svg>
+ $endif$
+ $if(it.url)$
+ </a>
+ $else$
+ </div>
+ $endif$
+ $endif$
+ $endfor$
+ </div>
$body$
- </div>
- </section>
- </section>
+ </div>
+ </section>
+</section>
- <section class="l-section">
- <header class="l-section__head">
- <a class="c-outer-button" href="#projects" id="projects">
- <span class="c-outer-button__icon">
- <svg class="c-outer-button__icon-symbol o-icon">
- <use href="#icon-arrow-down-right"></use>
- </svg>
- </span>
- <span class="c-outer-button__content">
- $sections.projects.title$
- </span>
- </a>
- </header>
+<section class="l-section">
+ <header class="l-section__head">
+ <a class="c-outer-button" href="#projects" id="projects">
+ <span class="c-outer-button__icon">
+ <svg class="c-outer-button__icon-symbol o-icon">
+ <use href="#icon-arrow-down-right"></use>
+ </svg>
+ </span>
+ <span class="c-outer-button__content">
+ $subsections.projects.title$
+ </span>
+ </a>
+ </header>
- <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid">
- $for(sections.projects.pages)$
- <a class="l-card-grid__card c-card" href="$it.url.rel$">
- <div class="c-card__content">
- <small class="u-db">$it.category.name$</small>
- <strong class="u-db">$it.title$</strong>
- </div>
- <svg class="c-card__icon o-icon">
- <use href="#icon-arrow-right"></use>
- </svg>
- </a>
- $endfor$
- </div>
- </section>
-
- <footer class="c-footer">
- <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top">
- <span class="c-outer-button__icon">
- <svg class="c-outer-button__icon-symbol o-icon">
- <use href="#icon-arrow-up"></use>
- </svg>
- </span>
- </a>
- <div class="c-footer__content u-ar">
- 9thPK7O3xn
- </div>
- </footer>
-</main>
+ <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid">
+ $for(subsections.projects.pages)$
+ <a class="l-card-grid__card c-card" href="$it.url.rel$">
+ <div class="c-card__content">
+ <small class="u-db">$it.category.name$</small>
+ <strong class="u-db">$it.title$</strong>
+ </div>
+ <svg class="c-card__icon o-icon">
+ <use href="#icon-arrow-right"></use>
+ </svg>
+ </a>
+ $endfor$
+ </div>
+</section>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 9e7d85a..e006ddc 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,15 +1,7 @@
-<main>
- <div class="c-page l-container l-container--content l-container--pad-x l-container--pad-y">
- <div class="c-page__content s-page-content">
- <header class="c-page__header">
- <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1>
- $if(category)$
- <h2 class="c-page__header__meta">in $category.name$</h2>
- $endif$
- </header>
+<section class="l-section l-section--no-head">
+ <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
+ <h1>$title$</h1>
-$body$
- </div>
+ $body$
</div>
-</main>
-
+</section>
diff --git a/templates/symbols.svg b/templates/symbols.svg
index d884bc0..958e271 100644
--- a/templates/symbols.svg
+++ b/templates/symbols.svg
@@ -55,5 +55,11 @@
d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015"
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>
</defs>
</svg>
--
cgit v1.2.3-70-g09d2