aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2024-04-13 13:50:54 +0200
committerlonkaars <loek@pipeframe.xyz>2024-04-13 13:50:54 +0200
commitdee0b16c1cdf18d205ffcb738eda0e9049396fd0 (patch)
treeb905daa11c075ef6a112b4ac65aec759ea0566a3
parentce37824c5260dd370c61cf174ea80ca7deeb1058 (diff)
fix more stuff
Diffstat
-rw-r--r--_config.yml4
-rw-r--r--_includes/head.html1
-rw-r--r--_includes/icon/home-round.svg1
-rw-r--r--_includes/icon/search-round.svg1
-rw-r--r--_includes/navbar.html14
-rw-r--r--_includes/tags.html4
-rw-r--r--_layouts/index.html44
-rw-r--r--_layouts/post.html14
-rw-r--r--_posts/2021-08-17-homeauto.md6
-rw-r--r--css/card.css15
-rw-r--r--css/globals.css5
-rw-r--r--css/image.css18
-rw-r--r--css/navbar.css8
-rw-r--r--css/separator.css8
-rw-r--r--index.md1
15 files changed, 101 insertions, 43 deletions
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