✨ Switch from Plausible to GoatCounter

Not  because it  is  "old".  But because,  sadly,  there  are so  many
cruelties going  on at  the moment  that it no  longer feels  right to
highlight just one. And making every page  of this site a long list of
current disasters is also not a good way forward.

Let's all hope for a brighter tomorrow!

CHANGELOG.md

@@ -0,0 +1,37 @@
+# nextDESIGN v9
+
+## Version 9.4.2 (2021-08-20)
+
+- Slight improvements to reply button
+- Decrease content width a bit
+
+## Version 9.4.1 (2021-08-19)
+
+- Use variable for mail address in comments
+- Only align paragraphs justified, not other elements e.g. headlines
+
+## Version 9.4 (2021-08-18)
+
+- Adjusted font sizes
+- Justified text alignment
+- Make "read more posts" link on main page a button
+- Get about text through variable
+- Rework "commenting" system
+
+## Version 9.3 (2021-05-04)
+
+- Added Plausible analytics script
+- Switched monospace font from Hermit to JetBrains Mono
+
+## Version 9.2 (2020-09-23)
+
+- Provide dark color scheme
+
+## Version 9.1.1 (2020-08-29)
+
+- Add link to Gitea
+- Reorder "other places" section
+
+## Version 9.1 (2020-05-15)
+
+- Initial release

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 Marcel Kapfer
+Copyright (c) 2020-2021 Marcel Kapfer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -0,0 +1,4 @@
+# nextDESIGN
+
+Since around 2013 (with a break from early 2016 und mid 2020 when I was using Wordpress) the web designs/themes used for my personal side are call "nextDESIGN".
+The current iteration is version 9 and is build as a theme for the [Hugo static site generator](https://gohugo.io/).

assets/css/main.scss

@@ -3,7 +3,7 @@
  * nextDESIGN is a personal web design for mmk2410.org.
  * The current version (v9) is focused in simplicity and minimalism.
  *
- * 2020 © Marcel Kapfer <opensource@mmk2410.org>
+ * 2020-2022 © Marcel Kapfer <opensource@mmk2410.org>
  * Licensed under the MIT License
  */
 
@@ -12,44 +12,65 @@
  ***************/
 
 $c-bg: #fafafa;
+$c-bg-inv: #333;
 $c-bg-main: #fff;
+$c-bg-main-inv: #222;
 $c-primary: #4d3c9b;
 $c-bg-category: #4d3c9b;
+$c-primary-inv: #ad9bff;
+$c-bg-category-inv: #755bf0;
 $c-bg-tag: #8171c8;
+$c-bg-tag-inv: #a49ccc;
 $c-font: #333;
-$c-nav-font: #f4f4f4;
-$c-btn-font: $c-nav-font;
+$c-font-inv: #fafafa;
+$c-btn-font: $c-font;
 $c-btn-bg: $c-bg-category;
+$c-btn-shadow: #aaa;
+$c-btn-shadow-inv: #000;
 
-$s-content: 1000px;
-$s-nav-title: 24px;
+$s-content: 800px;
+$s-nav-title: 36px;
 $s-border: 2px;
 $s-border-radius: 2px;
+$s-comment-margin-top: 60px;
+$s-font-size: 18px;
 
 $p-box-shadow: 1px 1px 5px #888;
 
+html {
+    font-size: $s-font-size;
+}
+
 body {
     background-color: $c-bg;
     color: $c-font;
     font-family: "Raleway", sans-serif;
     line-height: 1.5;
+
+    @media (prefers-color-scheme: dark) {
+	background-color: $c-bg-inv;
+	color: $c-font-inv;
+    }
 }
 
 body > header {
     align-items: center;
-    color: $c-nav-font;
+    color: $c-font;
     display: flex;
-    background-color: $c-primary;
     justify-content: space-between;
     padding: 20px 40px;
 
     #title {
+        color: $c-font;
 	font-size: $s-nav-title;
 	font-weight: 700;
+        text-decoration: underline;
+        text-decoration-color: $c-primary;
+        text-decoration-thickness: 5px;
     }
 
     a {
-	color: $c-nav-font;
+	color: $c-primary;
 	text-decoration: none;
 
 	&:hover {
@@ -60,6 +81,31 @@ body > header {
     nav {
 	display: inline;
 
+        a {
+            text-transform: capitalize;
+            padding: 5px 6px;
+            display: inline-block;
+
+            &:hover {
+                text-decoration: none;
+
+                &:after {
+                    width: 100%;
+                    background: $c-primary;
+                }
+            }
+
+            &:after {
+                content: "";
+                display: block;
+                margin: auto;
+                height: 2px;
+                width: 0;
+                background: 0 0;
+                transition: width .25s ease, background-color .25s ease;
+            }
+        }
+
 	ul {
 	    margin: 0;
 	    padding: 0;
@@ -67,7 +113,6 @@ body > header {
 
 	    li {
 		display: inline;
-		padding-right: 10px;
 
 		&:last-child {
 		    padding-right: 0;
@@ -82,15 +127,24 @@ body > header {
 	padding: 10px;
 	text-align: center;
 	width: 100%;
+        color: $c-primary;
+        font-weight: bold;
+        text-transform: uppercase;
+
+        @media (prefers-color-scheme: dark) {
+            color: $c-primary-inv;
+        }
     }
 
     input[type=checkbox] {
 	display: none
     }
 
-    @media screen and (max-width: 1000px) {
+    @media screen and (max-width: 1100px) {
 	border-radius: initial;
 	flex-direction: column;
+        background: $c-bg-main;
+        padding-bottom: 0;
 
 	nav {
 	    display: none;
@@ -120,31 +174,64 @@ body > header {
 	    display: block;
 	}
     }
+
+    @media (prefers-color-scheme: dark) {
+        background: $c-bg-inv;
+
+        a {
+	    color: $c-primary-inv;
+        }
+
+        #title {
+            color: $c-font-inv;
+            text-decoration-color: $c-primary-inv;
+        }
+
+        nav {
+            a {
+                &:hover {
+                    &:after {
+                        background: $c-primary-inv;
+                    }
+                }
+            }
+        }
+    }
 }
 
 main {
     background-color: $c-bg-main;
     border: solid $s-border $c-primary;
+    border-radius: 25px;
     box-shadow: $p-box-shadow;
-    margin: 100px auto;
-    max-width: 1000px;
-    padding: 40px;
+    margin: 50px auto 100px;
+    max-width: $s-content;
+    padding: 20px 60px 80px;
+
+    @media (prefers-color-scheme: dark) {
+	background-color: $c-bg-main-inv;
+	box-shadow: none;
+    }
 
     article {
 	margin: 40px 0;
     }
 
     h1, h2 {
-	font-size: 3em;
+	font-size: 3rem;
 	margin: 20px 0 0;
 	padding: 0;
 	text-decoration: underline;
 	text-decoration-color: $c-primary;
 	text-decoration-thickness: 4px;
+
+	@media (prefers-color-scheme: dark) {
+	    text-decoration-color: $c-primary-inv;
+	}
     }
 
     h2 {
-	font-size: 2em;
+	font-size: 2rem;
 	margin: 40px 0 0;
 	text-decoration-thickness: 3px;
 
@@ -152,23 +239,44 @@ main {
 	    color: $c-font;
 	    text-decoration-color: $c-primary;
 
+	    @media (prefers-color-scheme: dark) {
+		color: $c-font-inv;
+		text-decoration-color: $c-primary-inv;
+	    }
+
 	    &:hover {
 		text-decoration: none;
 	    }
 	}
     }
 
+    h3 {
+        font-size: 1.3rem;
+    }
+
+    h4 {
+        font-size: 1.1rem;
+    }
+
     figure {
 	margin: 0;
 
 	img {
-	    width: 100%
+	    width: 100%;
+            border-radius: 20px;
 	}
     }
 
+    p {
+        text-align: justify;
+    }
+
     a {
 	color: $c-primary;
-	text-decoration: none;
+
+	@media (prefers-color-scheme: dark) {
+	    color: $c-primary-inv;
+	}
 
 	&:hover {
 	    text-decoration: underline;
@@ -176,20 +284,35 @@ main {
     }
 
     code {
-	font-family: "Hermit", monospace;
+	font-family: "JetBrains Mono", monospace;
     }
 
     .btn {
-	color: $c-btn-font;
-	background: $c-btn-bg;
-	padding: 8px 16px;
+	border: 1px solid $c-primary;
+	padding: 8px 12px;
 	border-radius: 20px;
 	line-height: 3;
 	white-space: nowrap;
+        transition: all 0.15s;
+        margin-right: 5px;
+        text-decoration: none;
+
+        &:hover {
+            box-shadow: $c-btn-shadow 1px 2px 6px;
+            text-decoration: none;
+
+	    @media (prefers-color-scheme: dark) {
+	        box-shadow: $c-btn-shadow-inv 1px 2px 6px;
+	    }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            border-color: $c-primary-inv;
+        }
     }
 
     .highlight > pre {
-	border-radius: 2px;
+	border-radius: 20px;
 	overflow-y: auto;
 	padding: 20px;
     }
@@ -207,46 +330,88 @@ main {
 	}
     }
 
-    .comment-notice {
-	margin-top: 50px;
-	font-size: 14px;
+    .comment {
+        margin-top: $s-comment-margin-top;
+        text-align: center;
+
+        a {
+            font-size: 1.1rem;
+        }
+
+        p {
+            font-size: 0.95rem;
+            text-align: center;
+        }
     }
 
     #tags > a, #categories > a {
-	font-size: 14px;
+	font-size: 0.9rem;
 	color: #fff;
 	padding: 4px 8px;
 	border-radius: 20px;
 	white-space: nowrap;
+        transition: all 0.15s;
+        text-decoration: none;
+
+        &:hover {
+            box-shadow: $c-btn-shadow 1px 1px 4px;
+            text-decoration: none;
+
+	    @media (prefers-color-scheme: dark) {
+	        box-shadow: $c-btn-shadow-inv 1px 1px 4px;
+	    }
+        }
     }
 
     #tags > a {
-	background: $c-bg-tag;
+        color: $c-bg-tag;
+        border: 1px solid $c-bg-tag;
+
+        @media (prefers-color-scheme: dark) {
+            color: $c-bg-tag-inv;
+            border-color: $c-bg-tag-inv;
+        }
     }
 
     #categories > a {
-	background: $c-bg-category;
+        color: $c-primary;
+        border: 1px solid $c-primary;
+        margin-right: 3px;
+
+	@media (prefers-color-scheme: dark) {
+	    color: $c-primary-inv;
+            border: 1px solid $c-primary-inv;
+	}
     }
 
-    @media screen and (max-width: 1000px) {
+    @media screen and (max-width: 1100px) {
 	border: none;
 	box-shadow: none;
 	margin: 0 auto;
+        padding: 0 20px 80px;
+
+        .tagories {
+            text-align: left;
+        }
+
+        #tags a, #categories a {
+            line-height: 35px;
+        }
     }
 }
 
 footer {
-    background-color: $c-primary;
-    color: $c-nav-font;
+    background-color: $c-font;
+    color: $c-font-inv;
     padding: 40px;
     text-align: center;
 
     a {
-	color: $c-nav-font;
+	color: $c-font-inv;
 	text-decoration: none;
 
 	&:hover {
 	    text-decoration: underline;
 	}
     }
-}
+ }

layouts/_default/single.html

@@ -1,29 +1,32 @@
 {{ define "main" }}
-    <h1>{{ .Title }}</h1>
-    <p id="date">{{.Date.Format "2006-01-02"}}</p>
-    <p>{{ .WordCount }} words, ~ {{ .ReadingTime }} min reading time</p>
+<h1>{{ .Title }}</h1>
+<p id="date">{{.Date.Format "2006-01-02"}}</p>
+<p>{{ .WordCount }} words, ~ {{ .ReadingTime }} min reading time</p>
 
-    <p>
-	{{ with .Params.categories }}
-	    <span id="categories">
-		{{ range . }}
-		    <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
-		{{ end }}
-	    </span>
-	{{ end }}
-	{{ with .Params.tags }}
-	    <span id="tags">
-		{{ range . }}
-		    <a href="{{ "tags" | absURL}}/{{ . | urlize }}">{{ . }}</a>
-		{{ end }}
-	    </span>
-	{{ end }}
-    </p>
-    {{ .Content }}
-
-    {{ with .Site.Params.comment.commentmail }}
-	<p class="comment-notice">
-	    If you would like to comment on this post, feel free to write me a mail at {{ . }}!
-	</p>
+<p>
+  <div class="tagories">
+    {{ with .Params.categories }}
+    <span id="categories">
+      {{ range . }}
+      <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
+      {{ end }}
+    </span>
     {{ end }}
+    {{ with .Params.tags }}
+    <span id="tags">
+      {{ range . }}
+      <a href="{{ "tags" | absURL}}/{{ . | urlize }}">{{ . }}</a>
+      {{ end }}
+    </span>
+    {{ end }}
+  </div>
+</p>
+{{ .Content }}
+
+{{ if isset .Site.Params.comment "mail" }}
+<div class="comment">
+  <p>I would like to hear what you think about this post. Feel free to write me a mail!</p>
+  <a class="btn" href="mailto:{{ .Site.Params.comment.mail }}?subject=Reply to: &quot;{{ .Page.Title }}&quot;">Reply by mail</a>
+</div>
+{{ end }}
 {{ end }}

layouts/index.html

@@ -1,12 +1,12 @@
 {{ define "main" }}
     <header>
 	<h1>{{ .Site.Title }}</h1>
-	<h3>I compose music and write stuff</h3>
+	<h3>{{ .Site.Params.about }}</h3>
     </header>
 
     {{ .Content }}
 
-    <h3>Read more from me</h3>
+    <h4>Read more from me</h3>
 
     {{ with .Site.GetPage "/about" }}
 	<a class="btn" href="{{ .Permalink }}">More about me</a>
@@ -20,7 +20,7 @@
 	<a class="btn" href="{{ .Permalink }}">My projects</a>
     {{ end }}
 
-    <h3>Find me on other places</h3>
+    <h4>Find me on other places</h3>
 
     {{ with .OutputFormats.Get "rss" }}
 	<a class="btn" href="{{ .Permalink }}">RSS Feed</a>
@@ -30,15 +30,15 @@
 	<a class="btn" href="{{ . }}">Mastodon</a>
     {{- end -}}
 
-    {{ with .Site.Params.social.gitea }}
-	<a class="btn" href="{{ . }}">Repos on Gitea</a>
+    {{ with .Site.Params.social.forgejo }}
+	<a class="btn" href="{{ . }}">Repos on Forgejo</a>
     {{- end -}}
 
     {{ with .Site.Params.social.gitlab }}
 	<a class="btn" href="{{ . }}">Repos on GitLab</a>
     {{- end -}}
 
-    <h2>Latest Post</h2>
+    <h2>Latest Posts</h2>
 
     {{ range first 3 .Site.RegularPages }}
 	<article>
@@ -48,6 +48,6 @@
     {{ end }}
 
     {{ with .Site.GetPage "/blog" }}
-	<a href="{{ .Permalink }}">Read more posts</a>
+	<a class="btn" href="{{ .Permalink }}">Read more posts</a>
     {{ end }}
 {{ end }}

layouts/partials/head.html

@@ -1,3 +1,4 @@
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width">
 
 {{ if .IsHome -}}
@@ -29,3 +30,5 @@
 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ .Site.BaseURL }}/favicon/favicon-72.png">
 <link rel="apple-touch-icon-precomposed" href="{{ .Site.BaseURL }}/favicon/favicon.png">
 <link rel="shortcut icon" href="{{ .Site.BaseURL }}/favicon/favicon.png">
+
+<script data-goatcounter="https://stats.mmk2410.org/count" async src="https://stats.mmk2410.org/count.js"></script>

layouts/partials/list-post.html

@@ -1,21 +1,27 @@
 <p id="date">{{.Date.Format "2006-01-02"}}</p>
 <p>
+  <div class="tagories">
     {{ with .Params.categories }}
-	<span id="categories">
-	    {{ range . }}
-		<a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
-	    {{ end }}
-	</span>
+    <span id="categories">
+      {{ range . }}
+      <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
+      {{ end }}
+    </span>
     {{ end }}
     {{ with .Params.tags }}
-	<span id="tags">
-	    {{ range . }}
-		<a href="{{ "tags" | absURL}}/{{ . | urlize }}">{{ . }}</a>
-	    {{ end }}
-	</span>
+    <span id="tags">
+      {{ range . }}
+      <a href="{{ "tags" | absURL}}/{{ . | urlize }}">{{ . }}</a>
+      {{ end }}
+    </span>
     {{ end }}
+  </div>
 </p>
-{{ .Summary }}
+
+<p>
+  {{ .Summary }}
+</p>
+
 {{- if .Truncated -}}
-    <p><a href="{{.Permalink}}">Read more</a></p>
+  <p><a href="{{.Permalink}}">Read more</a></p>
 {{- end -}}

static/css/fonts.css

@@ -40,45 +40,41 @@
 }
 
 /**************
- * Hermit
+ * JetBrains Mono
  **************/
 
-/* hermit */
+/* JetBrains Mono Regular */
 @font-face {
-  font-family: 'Hermit';
+  font-family: 'JetBrains Mono';
   font-style: normal;
   font-weight: 400;
-  src: local('Hermit'),
-       url('/fonts/Hermit-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/fonts/Hermit-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: local('JetBrains Mono'),
+       url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
 }
 
-/* hermit italic */
+/* JetBrains Mono Regular Italic */
 @font-face {
-  font-family: 'Hermit';
+  font-family: 'JetBrains Mono';
   font-style: italic;
   font-weight: 400;
-  src: local('Hermit'),
-       url('/fonts/Hermit-RegularItalic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/fonts/Hermit-RegularItalic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: local('JetBrains Mono Italic'),
+       url('/fonts/JetBrainsMono-RegularItalic.woff2') format('woff2');
 }
 
-/* hermit bold */
+/* JetBrains Mono Bold */
 @font-face {
-  font-family: 'Hermit';
+  font-family: 'JetBrains Mono';
   font-style: normal;
   font-weight: 700;
-  src: local('Hermit'),
-       url('/fonts/Hermit-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/fonts/Hermit-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: local('JetBrains Mono Bold'),
+       url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
 }
 
-/* hermit bold italic */
+/* JetBrains Mono Bold Italic italic */
 @font-face {
-  font-family: 'Hermit';
+  font-family: 'JetBrains Mono';
   font-style: italic;
   font-weight: 700;
-  src: local('Hermit'),
-       url('/fonts/Hermit-BoldItalic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/fonts/Hermit-BoldItalic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: local('JetBrains Mono Bold Italic'),
+       url('/fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
 }

theme.toml

@@ -1,14 +1,11 @@
-# theme.toml template for a Hugo theme
-# See https://github.com/gohugoio/hugoThemes#themetoml for an example
-
 name = "nextDESIGN"
 license = "MIT"
-licenselink = "https://gitlab.com/mmk2410/nextDESIGN/blob/master/LICENSE"
+licenselink = "https://gitlab.com/mmk2410/nextDESIGN/blob/main/LICENSE"
 description = "Simple design created for mmk2410.org"
 homepage = "https://mmk2410.org/"
 tags = []
 features = []
-min_version = "0.41.0"
+min_version = "0.87.0"
 
 [author]
   name = "Marcel Kapfer"