From 6662a2dfb60cd24a60225c40a91f3ba9019b718d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 20 Jun 2021 17:30:37 +0200
Subject: CSS/Markup improvements

---
 templates/layouts/categorized_list.html |  2 +-
 templates/layouts/index.html            | 92 +++++++++++++++++----------------
 templates/layouts/list.html             |  2 +-
 templates/layouts/page.html             |  2 +-
 4 files changed, 51 insertions(+), 47 deletions(-)

(limited to 'templates')

diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 1b9b293..f841fff 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,4 +1,4 @@
-<section class="l-section l-section--no-head">
+<section class="l-section l-section--no-header">
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
         <div class="s-headlines s-colored-links">
             <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 00d25af..1f1a092 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,57 +1,59 @@
-<section class="l-section l-section--fullscreen 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 s-body">
-                Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
-            </p>
-        </div>
-    </header>
+<section class="l-section l-section--fullscreen l-section--no-header l-section--flex">
+    <div class="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 s-body">
+                    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 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__block o-icon">
-                                    <use href="/symbols.svg#icon-$it.icon$"></use>
-                                </svg>
+        <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$
-                            <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.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)$
-                                <svg class="c-card__block o-icon">
-                                    <use href="/symbols.svg#icon-arrow-up-right"></use>
-                                </svg>
+                                </a>
+                            $else$
+                                </div>
                             $endif$
-                        $if(it.url)$
-                            </a>
-                        $else$
-                            </div>
                         $endif$
-                    $endif$
-                $endfor$
-            </div>
+                    $endfor$
+                </div>
 
 $body$
-        </div>
-    </section>
+            </div>
+        </section>
+    </div>
 </section>
 
 <section class="l-section" id="projects">
-    <header class="l-section__head l-section__head--sticky">
+    <header class="l-section__header l-section__header--sticky">
         <a class="c-outer-button" href="#projects">
             <span class="c-outer-button__icon">
                 <svg class="c-outer-button__icon-symbol o-icon">
@@ -62,6 +64,8 @@ $body$
                 $pages.by_id.projects.title$
             </span>
         </a>
+
+        <div class="l-section__header-separator"></div>
     </header>
 
     <div class="l-container l-container--pad-x l-container--pad-y l-project-grid">
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 8794c07..f269d10 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,4 +1,4 @@
-<section class="l-section l-section--no-head">
+<section class="l-section l-section--no-header">
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
         <div class="s-headlines s-colored-links">
             <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index e5781a8..70f645b 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,4 +1,4 @@
-<section class="l-section l-section--no-head l-section--body">
+<section class="l-section l-section--no-header l-section--body">
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body">
         $if(show_date)$
             <div class="s-body__meta">
-- 
cgit v1.2.3-70-g09d2