✨ Switch from Plausible to GoatCounter

🔥 Remove "Support Ukraine" banner
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!
2024-02-27 20:04:54 +01:00 · 2023-12-05 21:20:00 +01:00 · 2023-12-05 21:17:12 +01:00 · 2023-09-24 13:18:27 +02:00 · 2023-05-22 18:41:12 +02:00 · 2023-05-22 18:09:10 +02:00
6 changed files with 192 additions and 74 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,10 @@
 # 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
--- a/assets/css/main.scss
+++ b/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-2021 © Marcel Kapfer <opensource@mmk2410.org>
+ * 2020-2022 © Marcel Kapfer <opensource@mmk2410.org>
 * Licensed under the MIT License
 */

@ -16,19 +16,20 @@ $c-bg-inv: #333;
 $c-bg-main: #fff;
 $c-bg-main-inv: #222;
 $c-primary: #4d3c9b;
-$c-primary-inv: #755bf0;
 $c-bg-category: #4d3c9b;
+$c-primary-inv: #ad9bff;
 $c-bg-category-inv: #755bf0;
 $c-bg-tag: #8171c8;
-$c-bg-tag-inv: #4d3c9b;
+$c-bg-tag-inv: #a49ccc;
 $c-font: #333;
 $c-font-inv: #fafafa;
-$c-nav-font: #f4f4f4;
-$c-btn-font: $c-nav-font;
+$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;
@ -54,19 +55,22 @@ body {

 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 {
@ -77,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;
@ -84,7 +113,6 @@ body > header {

 	    li {
 		display: inline;
-		padding-right: 10px;

 		&:last-child {
 		    padding-right: 0;
@ -99,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;
@ -137,15 +174,39 @@ 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;
@ -201,7 +262,8 @@ main {
 	margin: 0;

 	img {
-	    width: 100%
+	    width: 100%;
+            border-radius: 20px;
 	}
    }

@ -211,7 +273,6 @@ main {

    a {
 	color: $c-primary;
-	text-decoration: none;

 	@media (prefers-color-scheme: dark) {
 	    color: $c-primary-inv;
@ -227,16 +288,31 @@ main {
    }

    .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;
    }
@ -255,13 +331,17 @@ main {
    }

    .comment {
-        font-size: 0.95rem;
        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 {
@ -270,43 +350,68 @@ main {
 	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) {
-	    background: $c-bg-tag-inv;
-	}
+        @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) {
-	    background: $c-bg-category-inv;
+	    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;
 	}
    }
-}
+ }
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,30 +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 }}
-
-    {{ 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>
+<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 }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -30,8 +30,8 @@
 	<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/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -31,4 +31,4 @@
 <link rel="apple-touch-icon-precomposed" href="{{ .Site.BaseURL }}/favicon/favicon.png">
 <link rel="shortcut icon" href="{{ .Site.BaseURL }}/favicon/favicon.png">

-<script async defer data-domain="mmk2410.org" src="https://stats.mmk2410.org/js/plausible.js"></script>
+<script data-goatcounter="https://stats.mmk2410.org/count" async src="https://stats.mmk2410.org/count.js"></script>
--- a/layouts/partials/list-post.html
+++ b/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 -}}
Author	SHA1	Message	Date
Marcel Kapfer	4751005c7e	✨ Switch from Plausible to GoatCounter	2024-02-27 20:04:54 +01:00
Marcel Kapfer	5833a8ede8	🔥 Remove "Support Ukraine" banner 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!	2023-12-05 21:20:00 +01:00
Marcel Kapfer	a27b27c3b9	🔥 (Home) Remove button for scribbles	2023-12-05 21:17:12 +01:00
Marcel Kapfer	3f863a8b8f	🎉 (Home) Add button for scribbles	2023-09-24 13:18:27 +02:00
Marcel Kapfer	22ae1ffe3d	💄 Underline body text links	2023-05-22 18:41:12 +02:00
Marcel Kapfer	1d76e91a93	💄 Move "Support Ukraine" box to bottom of page	2023-05-22 18:09:10 +02:00
Marcel Kapfer	78a150b86e	Add support for ukraine info on every page	2022-03-06 16:30:31 +01:00
Marcel Kapfer	6c9ebed829	Fixed display of post excerpts Missing p tag	2022-03-06 16:30:06 +01:00
Marcel Kapfer	6f5774a476	Adjust font color contrast in dark theme	2022-02-24 18:33:04 +01:00
Marcel Kapfer	36607ec9b0	Adjust font color contrast in dark theme	2022-02-24 18:25:07 +01:00
Marcel Kapfer	2f265b8443	Give code boxes and images a slight round border	2022-02-24 18:18:37 +01:00
Marcel Kapfer	28b523bb17	Adjust font color contrast in dark theme	2022-02-24 18:14:52 +01:00
Marcel Kapfer	e24338ae0e	Slight updated design	2022-02-22 17:34:43 +01:00
Marcel Kapfer	607aa88f00	Release preparations for 9.4.2	2021-08-20 21:37:58 +02:00
Marcel Kapfer	8cb84d4425	Decrease content width a little bit	2021-08-20 21:36:08 +02:00
Marcel Kapfer	eccc60812f	Center text of comment system	2021-08-20 11:11:34 +02:00