content/about.md

@@ -4,9 +4,7 @@ title = "About"
 notoc = true
 +++
 
-<img src="profile-picture.jpg" alt="Profile Picture" class="profile-picture">
+This is my personal website mainly used for technical articles about problems and projects I am working on.
-
-This is my personal website mainly used for technical articles about problems and projects I&nbsp;am working on.
 
 It is generated to static HTML via [Zola](https://www.getzola.org/).
 

sass/style.scss

@@ -188,6 +188,7 @@ main {
 	}
 
 	input.search {
+		display: none; // Hide for non-js browsers
 		box-sizing: border-box;
 		width: 100%;
 		border: 1px solid #ccc;
@@ -210,12 +211,6 @@ a {
 	&:hover { text-decoration: underline }
 }
 
-.profile-picture {
-  float: right;
-  width: 15rem;
-  margin-left: 3em;
-}
-
 @media screen and (max-width: 50rem) {
 
 	.grid { grid-template-columns: auto }
@@ -235,11 +230,6 @@ a {
 		}
 		span.title { display: none }
 	}
-
-  .profile-picture {
-    width: 10rem;
-    margin-left: 1em;
-  }
 }
 
 @media (prefers-color-scheme: dark) {

static/js/search.js

@@ -1,23 +1,15 @@
-function filter_title(query, articles)
+function filter_title(str)
 {
-	const search = query.trim().toLowerCase();
+	if (str.length == 0) {
-
+		articles.forEach(article => article.style.display = "block");
-	if (search.length === 0) {
+	} else {
-		articles.forEach(article => article.style.display = 'block');
+		articles.forEach(article => article.style.display = article.dataset.title.indexOf(str.toLowerCase()) === -1 ? "none" : "block");
-		return;
 	}
-	articles.forEach(article => {
-		const title = article.dataset.title || '';
-		article.style.display = title.includes(search) ? 'block' : 'none';
-	});
 }
 
-window.addEventListener('DOMContentLoaded', () => {
+const search = document.querySelector("input[type='search']");
-	document.querySelector('.search-wrapper').innerHTML =
+const form = document.querySelector("form");
-		'<input class="search" type="search" placeholder="Search">';
+let articles = Array.from(document.querySelectorAll("article"));
 
-	const search = document.querySelector("input[type='search']");
+search.addEventListener("input", () => filter_title(search.value));
-	const articles = Array.from(document.querySelectorAll('article'));
+window.addEventListener("load", () => search.style.display = "inline-block");
-
-	search.addEventListener('input', () => filter_title(search.value, articles));
-});

templates/posts.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 	<h1>{{ section.title }}</h1>
-	<div class="search-wrapper"></div>
+	<input class="search" type="search" placeholder="Search">
 	{{ macros::list_posts() }}
 {% endblock content %}