From dee0b16c1cdf18d205ffcb738eda0e9049396fd0 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sat, 13 Apr 2024 13:50:54 +0200
Subject: fix more stuff

---
 _config.yml                     |  4 ++--
 _includes/head.html             |  1 +
 _includes/icon/home-round.svg   |  1 +
 _includes/icon/search-round.svg |  1 +
 _includes/navbar.html           | 14 +++++++++++++
 _includes/tags.html             |  4 ++--
 _layouts/index.html             | 44 +++++++++++++++++++++++++++++++++++++++++
 _layouts/post.html              | 14 ++++++-------
 _posts/2021-08-17-homeauto.md   |  6 ++----
 css/card.css                    | 15 ++++----------
 css/globals.css                 |  5 +++++
 css/image.css                   | 18 +++++------------
 css/navbar.css                  |  8 ++++----
 css/separator.css               |  8 ++++++++
 index.md                        |  1 +
 15 files changed, 101 insertions(+), 43 deletions(-)
 create mode 100644 _includes/icon/home-round.svg
 create mode 100644 _includes/icon/search-round.svg
 create mode 100644 _includes/navbar.html
 create mode 100644 _layouts/index.html
 create mode 100644 css/separator.css

diff --git a/_config.yml b/_config.yml
index dc5d159..7fc5267 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,4 +1,4 @@
-title: "Loek's blog"
+title: "Loek's Blog"
 permalink: /post/:title
 exclude:
   - makefile
@@ -8,4 +8,4 @@ defaults:
       type: posts
     values:
       layout: post
-      lang: "en"
+      lang: en
diff --git a/_includes/head.html b/_includes/head.html
index 09ade8d..a3f2a9a 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -11,3 +11,4 @@
 <link rel="stylesheet" href="/css/search.css">
 <link rel="stylesheet" href="/css/tags.css">
 <link rel="stylesheet" href="/css/theme.css">
+<link rel="stylesheet" href="/css/separator.css">
diff --git a/_includes/icon/home-round.svg b/_includes/icon/home-round.svg
new file mode 100644
index 0000000..57039b4
--- /dev/null
+++ b/_includes/icon/home-round.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"></path></svg>
diff --git a/_includes/icon/search-round.svg b/_includes/icon/search-round.svg
new file mode 100644
index 0000000..e79a75c
--- /dev/null
+++ b/_includes/icon/search-round.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
diff --git a/_includes/navbar.html b/_includes/navbar.html
new file mode 100644
index 0000000..88092e7
--- /dev/null
+++ b/_includes/navbar.html
@@ -0,0 +1,14 @@
+<div class="globalLinks">
+  <a href="/" class="indentLevel0 link navbarItem {% if include.page == "index" %}active{% endif %}">
+		<div class="inner">
+			<div class="icon">{% include icon/home-round.svg %}</div>
+			<span class="title">Home</span>
+		</div>
+	</a>
+	<a href="/search" class="indentLevel0 link navbarItem {% if include.page == "search" %}active{% endif %}">
+		<div class="inner">
+			<div class="icon">{% include icon/search-round.svg %}</div>
+			<span class="title">Search for posts</span>
+		</div>
+	</a>
+</div>
diff --git a/_includes/tags.html b/_includes/tags.html
index c392d3a..8fc9383 100644
--- a/_includes/tags.html
+++ b/_includes/tags.html
@@ -1,6 +1,6 @@
 <div class="tags">
   <span>Tags:</span>
-  {% for tag in include.tags %}
+  {%- for tag in include.tags -%}
     <a class="tag" href="/search?q={{ tag }}" style="--tag-hue: {{ tag | to_tag_color }};">{{ tag }}</a>
-  {% endfor %}
+  {%- endfor -%}
 </div>
diff --git a/_layouts/index.html b/_layouts/index.html
new file mode 100644
index 0000000..2976df7
--- /dev/null
+++ b/_layouts/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang='{{ page.lang }}'>
+<head>
+	{% include head.html %}
+	<title>{{ site.title }}</title>
+	{% include opengraph.html %}
+</head>
+<body>
+	<div class='centeredPage'>
+		<div class='titleWrapper'>
+			<h1>{{ page.title }}</h1>
+			{% if page.subtitle %}<p class='subtile'>{{ page.subtitle }}</p>{% endif %}
+			{% if page.tags %}{% include tags.html tags=page.tags %}{% endif %}
+		</div>
+		<div class='navAreaWrapper'>
+			<div class='sticky'>
+				{% include navbar.html page="index" %}
+				<!-- <Chapters chapters={props.meta.chapters} /> -->
+			</div>
+		</div>
+		<!-- <MobileNavbar /> -->
+		<div class='contentWrapper'>
+			{{ content }}
+			<hr/>
+			<h2>Recent posts</h2>
+			<div class="recentPosts">
+				{% for post in site.posts limit:4 %}
+					<div class="postCard">
+						<a href="{{ post.url }}">
+							<img src="{{ post.cover }}" alt="post cover" class="cover">
+							<h2 class="title">{{ post.title }}</h2>
+							<strong class="subtitle">{{ post.subtitle }}</strong>
+						</a>
+						{% include tags.html tags=post.tags %}
+					</div>
+				{% endfor %}
+			</div>
+			<div>
+				<a href="/search" class="button">Go to all posts</a>
+			</div>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/_layouts/post.html b/_layouts/post.html
index 485f560..0b306b1 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -6,20 +6,20 @@
 	{% include opengraph.html %}
 </head>
 <body>
-	<div className='centeredPage'>
-		<div className='titleWrapper'>
+	<div class='centeredPage'>
+		<div class='titleWrapper'>
 			<h1>{{ page.title }}</h1>
-			{% if page.subtitle %}<p className='subtile'>{{ page.subtitle }}</p>{% endif %}
+			{% if page.subtitle %}<p class='subtile'>{{ page.subtitle }}</p>{% endif %}
 			{% if page.tags %}{% include tags.html tags=page.tags %}{% endif %}
 		</div>
-		<div className='navAreaWrapper'>
-			<div className='sticky'>
-				<!-- <Navbar /> -->
+		<div class='navAreaWrapper'>
+			<div class='sticky'>
+				{% include navbar.html page="post" %}
 				<!-- <Chapters chapters={props.meta.chapters} /> -->
 			</div>
 		</div>
 		<!-- <MobileNavbar /> -->
-		<div className='contentWrapper'>
+		<div class='contentWrapper'>
 			{{ content }}
 		</div>
 	</div>
diff --git a/_posts/2021-08-17-homeauto.md b/_posts/2021-08-17-homeauto.md
index 4836a34..cc8648e 100644
--- a/_posts/2021-08-17-homeauto.md
+++ b/_posts/2021-08-17-homeauto.md
@@ -2,10 +2,8 @@
 title: My home automation adventure
 subtitle: How to make your house a shitty utopia
 tags:
-    - home
-    - automation
-    - raspberry
-    - pi
+    - home automation
+    - raspberry pi
     - esp8266
     - cc2500
     - microcontrollers
diff --git a/css/card.css b/css/card.css
index f49b40e..58037b5 100644
--- a/css/card.css
+++ b/css/card.css
@@ -4,12 +4,10 @@
 	border-radius: 8px;
 
 	overflow-x: hidden;
-	color: var(--fg) !important;
 }
 
-.postCard::after {
-	display: none;
-}
+.postCard a { color: var(--fg) !important; }
+.postCard a::after { display: none; }
 
 .postCard .cover {
 	width: 100%;
@@ -19,11 +17,6 @@
 	margin-bottom: 6px;
 }
 
-.postCard .title {
-	font-size: 24px;
-}
-
-.postCard .subtitle {
-	font-weight: 500;
-}
+.postCard .title { font-size: 24px; }
+.postCard .subtitle { font-weight: 500; }
 
diff --git a/css/globals.css b/css/globals.css
index 5ccd71f..81c0b75 100644
--- a/css/globals.css
+++ b/css/globals.css
@@ -47,3 +47,8 @@ li {
 	margin-bottom: 6px;
 }
 
+.icon svg {
+	width: 24px;
+	height: 24px;
+	fill: currentColor;
+}
diff --git a/css/image.css b/css/image.css
index d354ab9..3e98ae4 100644
--- a/css/image.css
+++ b/css/image.css
@@ -1,16 +1,8 @@
-.image,
-.image img {
-	width: 100%;
-	max-width: 500px;
-}
-
-.image {
+img {
+	position: relative;
+	display: block;
 	margin: 0 auto var(--page-margins) auto;
+	max-width: 500px;
+	overflow: visible;
 }
 
-.image p {
-	text-align: left;
-	opacity: .8;
-	font-style: italic;
-	margin-top: 12px;
-}
diff --git a/css/navbar.css b/css/navbar.css
index 26d0b1d..0294a6a 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -9,6 +9,10 @@
 	transition-duration: .15s;
 
 	position: relative;
+
+	display: flex;
+	gap: 8px;
+	align-items: center;
 }
 
 .navbarItem {
@@ -58,14 +62,10 @@
 .navbarItem.pinned * { cursor: default !important; }
 
 .navbarItem .title {
-	vertical-align: top;
-	margin-left: 8px;
-	margin-top: 3px;
 	display: inline-block;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
-	width: calc(100% - 32px);
 }
 .navbarItem.chapter .title { margin-top: 1px; }
 
diff --git a/css/separator.css b/css/separator.css
new file mode 100644
index 0000000..24ee769
--- /dev/null
+++ b/css/separator.css
@@ -0,0 +1,8 @@
+hr {
+	display: block;
+	height: 12px;
+	margin-bottom: var(--page-margins);
+	background-color: var(--fire-opal);
+	border: none;
+	clip-path: path('M8.04282 8.19986C6.51226 9.73171 4.24587 12 0 12V6C1.68094 6 2.4102 5.34716 3.87868 3.87868C3.90463 3.85273 3.9308 3.82654 3.95718 3.80014C5.48774 2.26829 7.75413 0 12 0C16.2459 0 18.5123 2.26829 20.0428 3.80014C20.0692 3.82654 20.0954 3.85273 20.1213 3.87868C21.5898 5.34716 22.3191 6 24 6C25.6809 6 26.4102 5.34716 27.8787 3.87868C27.9046 3.85273 27.9308 3.82654 27.9572 3.80014C29.4877 2.26829 31.7541 0 36 0C40.2459 0 42.5123 2.26829 44.0428 3.80014C44.0692 3.82654 44.0954 3.85273 44.1213 3.87868C45.5898 5.34716 46.3191 6 48 6C49.6809 6 50.4102 5.34716 51.8787 3.87868C51.9046 3.85273 51.9308 3.82654 51.9572 3.80014C53.4877 2.26829 55.7541 0 60 0C64.2459 0 66.5123 2.26829 68.0428 3.80014C68.0692 3.82654 68.0954 3.85273 68.1213 3.87868C69.5898 5.34716 70.3191 6 72 6C73.6809 6 74.4102 5.34716 75.8787 3.87868L75.9572 3.80014C77.4877 2.26829 79.7541 0 84 0C88.2459 0 90.5123 2.26829 92.0428 3.80014L92.1213 3.87868C93.5898 5.34716 94.3191 6 96 6V12C91.7541 12 89.4877 9.73171 87.9572 8.19986L87.8787 8.12132C86.4102 6.65284 85.6809 6 84 6C82.3191 6 81.5898 6.65284 80.1213 8.12132L80.0428 8.19986C78.5123 9.73171 76.2459 12 72 12C67.7541 12 65.4877 9.73171 63.9572 8.19986C63.9308 8.17346 63.9046 8.14727 63.8787 8.12132C62.4102 6.65284 61.6809 6 60 6C58.3191 6 57.5898 6.65284 56.1213 8.12132C56.0954 8.14727 56.0692 8.17346 56.0428 8.19986C54.5123 9.73171 52.2459 12 48 12C43.7541 12 41.4877 9.73171 39.9572 8.19986C39.9308 8.17346 39.9046 8.14727 39.8787 8.12132C38.4102 6.65284 37.6809 6 36 6C34.3191 6 33.5898 6.65284 32.1213 8.12132C32.0954 8.14727 32.0692 8.17346 32.0428 8.19986C30.5123 9.73171 28.2459 12 24 12C19.7541 12 17.4877 9.73171 15.9572 8.19986C15.9308 8.17346 15.9046 8.14727 15.8787 8.12132C14.4102 6.65284 13.6809 6 12 6C10.3191 6 9.5898 6.65284 8.12132 8.12132C8.09537 8.14727 8.0692 8.17346 8.04282 8.19986Z');
+}
diff --git a/index.md b/index.md
index 89b4b12..f6a70e5 100644
--- a/index.md
+++ b/index.md
@@ -1,5 +1,6 @@
 ---
 title: Loek's excruciatingly interesting blog
+layout: index
 ---
 
 Welcome to my blog page! This is where I post updates on things that I do such
-- 
cgit v1.2.3