CSS/Markup improvements

author: Volpeon <git@volpeon.ink> 2021-06-20 17:30:37 +0200
committer: Volpeon <git@volpeon.ink> 2021-06-20 17:30:37 +0200
commit: 6662a2dfb60cd24a60225c40a91f3ba9019b718d (patch)
tree: dfb59112e22a6cf64d57d5bedc9323b7242c583d /templates/layouts
parent: Better card indicator (diff)
download: volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.tar.gz
volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.tar.bz2
volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.zip
4 files changed, 51 insertions, 47 deletions
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">
+<section class="l-section l-section--fullscreen l-section--no-header l-section--flex">
-    <header class="l-landing__banner">
+    <div class="l-landing">
-        <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
+        <header class="l-landing__banner">
-            <h1 class="c-landing-banner__title">
+            <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
-                <span class="c-landing-banner__title-inner">
+                <h1 class="c-landing-banner__title">
-                    I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
+                    <span class="c-landing-banner__title-inner">
-                </span>
+                        I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
-            </h1>
+                    </span>
-            <p class="c-landing-banner__text s-body">
+                </h1>
-                Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
+                <p class="c-landing-banner__text s-body">
-            </p>
+                    Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
-        </div>
+                </p>
-    </header>
+            </div>
+        </header>
-    <section class="l-landing__content">
+        <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-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo">
-            <div class="l-card-grid">
+                <div class="l-card-grid">
-                $for(profiles)$
+                    $for(profiles)$
-                    $if(it.featured)$
+                        $if(it.featured)$
-                        $if(it.url)$
+                            $if(it.url)$
-                            <a class="l-card-grid__card c-card" href="$it.url$">
+                                <a class="l-card-grid__card c-card" href="$it.url$">
-                        $else$
+                            $else$
-                            <div class="l-card-grid__card c-card">
+                                <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>
                            $endif$
-                            <div class="c-card__block c-card__block--main">
+                                $if(it.icon)$
-                                <strong class="u-db">$it.platform$</strong>
+                                    <svg class="c-card__block o-icon">
-                                <small class="u-db">$it.username$</small>
+                                        <use href="/symbols.svg#icon-$it.icon$"></use>
-                            </div>
+                                    </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">
+                                </a>
-                                    <use href="/symbols.svg#icon-arrow-up-right"></use>
+                            $else$
-                                </svg>
+                                </div>
                            $endif$
-                        $if(it.url)$
-                            </a>
-                        $else$
-                            </div>
                        $endif$
-                    $endif$
+                    $endfor$
-                $endfor$
+                </div>
-            </div>
 $body$
-        </div>
+            </div>
-    </section>
+        </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">
author	Volpeon <git@volpeon.ink>	2021-06-20 17:30:37 +0200
committer	Volpeon <git@volpeon.ink>	2021-06-20 17:30:37 +0200
commit	6662a2dfb60cd24a60225c40a91f3ba9019b718d (patch)
tree	dfb59112e22a6cf64d57d5bedc9323b7242c583d /templates/layouts
parent	Better card indicator (diff)
download	volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.tar.gz volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.tar.bz2 volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.zip

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 @@
1	<section class="l-section l-section--no-head">	1	<section class="l-section l-section--no-header">
2	<div class="l-container l-container--pad-x l-container--pad-y l-container--content">	2	<div class="l-container l-container--pad-x l-container--pad-y l-container--content">
3	<div class="s-headlines s-colored-links">	3	<div class="s-headlines s-colored-links">
4	<h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>	4	<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 @@
1	<section class="l-section l-section--fullscreen l-section--no-head l-landing">	1	<section class="l-section l-section--fullscreen l-section--no-header l-section--flex">
2	<header class="l-landing__banner">	2	<div class="l-landing">
3	<div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">	3	<header class="l-landing__banner">
4	<h1 class="c-landing-banner__title">	4	<div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
5	<span class="c-landing-banner__title-inner">	5	<h1 class="c-landing-banner__title">
6	I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.	6	<span class="c-landing-banner__title-inner">
7	</span>	7	I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
8	</h1>	8	</span>
9	<p class="c-landing-banner__text s-body">	9	</h1>
10	Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.	10	<p class="c-landing-banner__text s-body">
11	</p>	11	Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
12	</div>	12	</p>
13	</header>	13	</div>
		14	</header>
14		15
15	<section class="l-landing__content">	16	<section class="l-landing__content">
16	<div class="l-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo">	17	<div class="l-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo">
17	<div class="l-card-grid">	18	<div class="l-card-grid">
18	$for(profiles)$	19	$for(profiles)$
19	$if(it.featured)$	20	$if(it.featured)$
20	$if(it.url)$	21	$if(it.url)$
21	<a class="l-card-grid__card c-card" href="$it.url$">	22	<a class="l-card-grid__card c-card" href="$it.url$">
22	$else$	23	$else$
23	<div class="l-card-grid__card c-card">	24	<div class="l-card-grid__card c-card">
24	$endif$
25	$if(it.icon)$
26	<svg class="c-card__block o-icon">
27	<use href="/symbols.svg#icon-$it.icon$"></use>
28	</svg>
29	$endif$	25	$endif$
30	<div class="c-card__block c-card__block--main">	26	$if(it.icon)$
31	<strong class="u-db">$it.platform$</strong>	27	<svg class="c-card__block o-icon">
32	<small class="u-db">$it.username$</small>	28	<use href="/symbols.svg#icon-$it.icon$"></use>
33	</div>	29	</svg>
		30	$endif$
		31	<div class="c-card__block c-card__block--main">
		32	<strong class="u-db">$it.platform$</strong>
		33	<small class="u-db">$it.username$</small>
		34	</div>
		35	$if(it.url)$
		36	<svg class="c-card__block o-icon">
		37	<use href="/symbols.svg#icon-arrow-up-right"></use>
		38	</svg>
		39	$endif$
34	$if(it.url)$	40	$if(it.url)$
35	<svg class="c-card__block o-icon">	41	</a>
36	<use href="/symbols.svg#icon-arrow-up-right"></use>	42	$else$
37	</svg>	43	</div>
38	$endif$	44	$endif$
39	$if(it.url)$
40	</a>
41	$else$
42	</div>
43	$endif$	45	$endif$
44	$endif$	46	$endfor$
45	$endfor$	47	</div>
46	</div>
47		48
48	$body$	49	$body$
49	</div>	50	</div>
50	</section>	51	</section>
		52	</div>
51	</section>	53	</section>
52		54
53	<section class="l-section" id="projects">	55	<section class="l-section" id="projects">
54	<header class="l-section__head l-section__head--sticky">	56	<header class="l-section__header l-section__header--sticky">
55	<a class="c-outer-button" href="#projects">	57	<a class="c-outer-button" href="#projects">
56	<span class="c-outer-button__icon">	58	<span class="c-outer-button__icon">
57	<svg class="c-outer-button__icon-symbol o-icon">	59	<svg class="c-outer-button__icon-symbol o-icon">
@@ -62,6 +64,8 @@ $body$
62	$pages.by_id.projects.title$	64	$pages.by_id.projects.title$
63	</span>	65	</span>
64	</a>	66	</a>
		67
		68	<div class="l-section__header-separator"></div>
65	</header>	69	</header>
66		70
67	<div class="l-container l-container--pad-x l-container--pad-y l-project-grid">	71	<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 @@
1	<section class="l-section l-section--no-head">	1	<section class="l-section l-section--no-header">
2	<div class="l-container l-container--pad-x l-container--pad-y l-container--content">	2	<div class="l-container l-container--pad-x l-container--pad-y l-container--content">
3	<div class="s-headlines s-colored-links">	3	<div class="s-headlines s-colored-links">
4	<h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>	4	<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 @@
1	<section class="l-section l-section--no-head l-section--body">	1	<section class="l-section l-section--no-header l-section--body">
2	<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">	2	<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">
3	$if(show_date)$	3	$if(show_date)$
4	<div class="s-body__meta">	4	<div class="s-body__meta">