assets/footer.scss

@@ -1,4 +1,5 @@
 footer {
+	background-color: var(--border);
 	color: var(--text-secondary);
 	grid-area: footer;
 	a { color: var(--text-secondary); }

assets/home.scss

@@ -12,29 +12,24 @@
     }
 }
 
-#latest-posts {
+section {
-    display: flex;
+    position: relative;
-    flex-direction: row;
+    h2 {
-    gap: 1em;
+        .more{
-    hyphens: auto;
+            font-size: .75em;
-    overflow-x: scroll;
+            font-weight: normal;
-    .post-group {
+            hyphens: none;
-        background: var(--vriish-gradient);
+            &::after {
-        border-radius: .5em;
+                content: "\27F6";
-        display: flex;
+                margin-left: .25em;
-        flex-direction: column;
+                transition: margin .5s;
-        text-shadow: var(--vriish-gradient-shadow);
+            }
-        min-width: 15em;
+            &:hover::after {
-        width: 33.333%;
+                margin-left: .5em !important;
-        .title {
+            }
-            flex: auto;
-            margin: 1em;
         }
-        aside {
+        &:hover .more::after {
-            margin: 1em;
+            margin-left: .35em;
         }
     }
-    a {
-        text-decoration: none;
-    }
 }

assets/shortcodes/_index.scss

@@ -0,0 +1 @@
+@import "verticalposts";

assets/shortcodes/_verticalposts.scss

@@ -0,0 +1,31 @@
+.verticalposts {
+    hyphens: auto;
+    margin-top: 4em;
+    .verticalposts-wrapper {
+        border-radius: .5em;
+        display: flex;
+        flex-direction: row;
+        gap: 1em;
+        overflow-x: scroll;
+        scroll-snap-type: x proximity;
+        .post-group {
+            background: var(--vriish-gradient);
+            border-radius: .5em;
+            display: flex;
+            flex-direction: column;
+            scroll-snap-align: start;
+            min-width: 15em;
+            width: 33.333%;
+            .title {
+                flex: auto;
+                margin: 1em;
+            }
+            aside {
+                margin: 1em;
+            }
+        }
+    }
+    a {
+        text-decoration: none;
+    }
+}

assets/sidebar.scss

@@ -8,15 +8,24 @@
 	display: flex;
 	flex-direction: column;
 	grid-area: sidebar;
-	height: 100vh;
 	margin-top: -2px;
-	max-width: 300px;
 	position: sticky;
 	top: 0;
 	z-index: 1;
+	gap: 1em;
+	padding: 1em;
+	@media (min-width: 921px) {
+		bottom: 0;
+		height: 100%;
+	}
 	header {
 		text-align: center;
-		padding: 2em 1em;
+		user-select: none;
+		#avatar {
+			border-radius: 100%;
+			width: calc(100% - 2em);
+			max-width: 200px;
+		}
 		#name {
 			margin: 0;
 			font-weight: bold;
@@ -28,7 +37,7 @@
 		}
 	}
 	#sidebar-menu {
-		padding: 2em 1em;
+		user-select: none;
 		ul {
 			list-style: none;
 			padding: 0;
@@ -36,13 +45,12 @@
 		}
 		li {
 			border-radius: .5em;
-			margin: .25em 0;
+			margin: .5em 0;
-			padding: .25em .5em;
 			position: relative;
 			letter-spacing: .025em;
 			a {
-				text-shadow: 0 0 0 transparent;
+				display: block;
-				transition: text-shadow .5s;
+				padding: .25em .5em;
 			}
 			::after {
 				background: var(--vriish-gradient);
@@ -51,24 +59,21 @@
 				content: "";
 				left: 0;
 				position: absolute;
-				right: 0;
+				right: 100%;
 				top: 0;
-				transition: opacity .5s;
+				transition: opacity .5s, width .5s;
 				opacity: 0;
+				width: 0;
 				z-index: -1;
 			}
 			&.active {
 				background: var(--vriish-gradient);
-				a {
-					text-shadow: var(--vriish-gradient-shadow);
-				}
 			}
 			&:hover {
-				a {
-					text-shadow: var(--vriish-gradient-shadow);
-				}
 				::after {
 					opacity: 1;
+					right: 0;
+					width: 100%;
 				}
 			}
 		}
@@ -76,4 +81,76 @@
 			text-decoration: none;
 		}
 	}
+	aside {
+		bottom: 1em;
+		position: absolute;
+		left: 1em;
+		right: 1em;
+		@media (max-width: 920px) {
+			position: initial;
+		}
+		#language-select {
+			position: relative;
+			pointer-events: none;
+			&:hover {
+				#languages {
+					//display: block;
+					bottom: 2em;
+					opacity: 100%;
+					pointer-events: all;
+					* {
+						pointer-events: all;
+					}
+				}
+			}
+			#language-icon {
+				text-decoration: none;
+				padding-top: 1em;
+				pointer-events: all;
+				&::after {
+					content: attr(data-page-lang);
+					position: absolute;
+					left: -4px;
+					font-size: 0.6em;
+					line-height: 1.5em;
+					bottom: 0;
+					text-transform: uppercase;
+				}
+			}
+			#languages {
+				background-color: var(--background);
+				border-radius: .5em;
+				margin: 0;
+				padding: 0;
+				user-select: none;
+				position: absolute;
+				//display: none;
+				bottom: 1em;
+				opacity: 0%;
+				transition: bottom .5s, opacity .5s;
+				li {
+					list-style: none;
+					overflow: hidden;
+					padding: .25em .5em;
+					position: relative;
+					transition: background .5s;
+					border-radius: .5em;
+					margin: .2em;
+					&:not(:last-of-type) {
+						margin-bottom: .5em;
+					}
+					&.active {
+						background: var(--vriish-gradient);
+					}
+					&:hover {
+						background: var(--vriish-gradient);
+					}
+					a {
+						text-decoration: none;
+						display: block;
+					}
+				}
+			}
+		}
+	}
 }

assets/style.scss

@@ -1,5 +1,6 @@
 // general
 @import "variables";
+@import "shortcodes";
 
 // site parts
 @import "sidebar";
@@ -34,13 +35,18 @@ html {
 			"header header"
 			"sidebar content"
 			"sidebar footer";
+		grid-template-columns: 250px 1fr;
 		line-height: 1.7;
 		margin: 0;
+		min-height: 100vh;
 		@media (max-width: 920px) {
+			font-size: 1em;
 			grid-template-areas: 
+				"header"
 				"content"
 				"sidebar"
 				"footer";
+			grid-template-columns: 1fr;
 		}
 		h1, h2, h3, h4, h5, h6 {
 			line-height: 1em;
@@ -134,27 +140,9 @@ main {
 	span { font-size: .8em; }
 }
 
-#intro-heading {
-	background-image: linear-gradient(180deg, var(--vriish-rose) 0%, var(--vriish-rose) 50%, var(--gold) 95%, var(--vriish-rose) 100%);
-	background-clip: text;
-	-webkit-background-clip: text;
-	color: transparent;
-	display: inline-block;
-	margin: 0.55em 0;
-}
-
-span[title="Freude"], span[title="happiness"] {
-	font-size: 1em;
-}
-
 p.date-published {
 	margin-bottom: -1.5em;
 	font-size: smaller;
 	font-style: italic;
 }
 
-@media (max-width: 576px) {
-	main {
-		margin: 0 auto;
-	}
-}

assets/variables.scss

@@ -24,8 +24,8 @@
 		--background: hsl(0, 100%, 97.5%);
 		--border: hsl(0, 100%, 90%);
 
-		--text: rgb(50, 40, 30);
+		--text: hsl(0, 100%, 5%);
-		--text-2: rgb(90, 80, 70);
+		--text-2: hsl(0, 100%, 10%);
 
 		--sidebar-background: hsl(0, 100%, 95%);
 	}

config/_default/config.yaml

@@ -1,7 +1,14 @@
 baseURL: "https://vrifox.cc/"
 title: "Vris Cute Corner"
+
 enableRobotsTXT: true
 defaultContentLanguage: de
+defaultContentLanguageInSubdir: true
+
+params:
+    displayName: "Vri 🌈"
+    username: "@vrifox"
+
 markup:
     highlight:
         anchorLineNos: false

config/_default/menu.yaml

@@ -7,10 +7,10 @@ main:
 #    name: "Kenntnisse"
 #    pageref: "/kenntnisse/"
 #    weight: 2
-  - identifier: "projects"
+#  - identifier: "projects"
-    name: "Projekte"
+#    name: "Projekte"
-    pageref: "/portfolio/"
+#    pageref: "/portfolio/"
-    weight: 3
+#    weight: 3
   - identifier: "blog"
     name: "Blog"
     pageref: "/blog/"
@@ -19,3 +19,8 @@ main:
 #    name: "Empfehlungen"
 #    pageref: "/blogroll/"
 #    weight: 5
+footer:
+  - identifier: "sourcecode"
+    name: "Quellcode"
+    url: "https://code.cozy.town/vri/website"
+    weight: 1

content/_index.de.md

@@ -1,4 +1,8 @@
 ---
 title: "Hola 🖖"
 ---
-Deutsch
+Ich erstelle gerne Grafiken und Websites.
+
+Ich betreibe und pflege Dienste auf [Cozy Town](https://cozy.town).
+
+{{< verticalposts header="latest-posts-heading" >}}

content/_index.en.md

@@ -1,4 +1,8 @@
 ---
-title: "Holahe 🖖"
+title: "Hola 🖖"
 ---
-English
+I like to create Graphics and Websites.
+
+I host and maintain services at [Cozy Town](https://cozy.town).
+
+{{< verticalposts header="latest-posts-heading" >}}

i18n/de.yaml

@@ -0,0 +1,20 @@
+# Menus
+home:
+    other: Start
+projects:
+    other: Projekte
+blog:
+    other: Blog
+
+# Shortcodes
+verticalposts-more:
+    other: mehr
+
+# Content
+introduction-heading:
+    other: Hola 🖖
+introduction-sub:
+    other: Ich bin Vri 🙂
+
+latest-posts-heading:
+    other: Aus meinem Blog

i18n/en.yaml

@@ -1,6 +1,20 @@
+# Menus
 home:
     other: Home
 projects:
     other: Projects
 blog:
     other: Blog
+
+# Shortcodes
+verticalposts-more:
+    other: more
+
+# Content
+introduction-heading:
+    other: Hola 🖖
+introduction-sub:
+    other: I am Vri 🙂
+
+latest-posts-heading:
+    other: From my Blog

layouts/_default/baseof.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="{{ .Page.Lang }}">
   <head>
     <title>{{ with .Title }} {{ . }} – {{ end }}{{ .Site.Title }}</title>
     {{- $style := resources.Get "/style.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
@@ -8,9 +8,9 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </head>
-  <body>
+  <body id="{{ .Page.Title }}">
     {{- block "header" . }}{{ end }}
-    {{ partial "nav.html" . }}
+    {{ partial "sidebar.html" . }}
     {{- block "main" . }}{{ end }}
     {{ partial "footer.html" . }}
   </body>

layouts/_default/single.html

@@ -1,7 +1,7 @@
 {{- define "main" }}
     <main>
       {{- if eq .Params.type "post" }}
-      <p class="date-published" title="{{ .Date.Format "2. January 2006, 15:04 MST" }}">{{ .Date.Day }}. {{ if eq .Params.lang "de"}} {{ index $.Site.Data.monate (printf "%d" .Date.Month) }} {{ else }} {{ .Date.Month }} {{ end }} {{ .Date.Year }}</p>
+      <p class="date-published" title="{{ .Date | time.Format "2. January 2006, 15:04 MST" }}">{{ .Date | time.Format "2. January 2006" }}</p>
       {{- end }}
       <h1 class="title">{{ .Title }}</h1>
       {{ .Content -}}

layouts/index.html

@@ -1,56 +1,12 @@
 {{- define "header" }}
 <header id="introduction" class="global-header">
-    <h1>Hola 🖖</h1>
+    <h1>{{ i18n "introduction-heading" }}</h1>
-    <p>Ich bin Vri 🙂</p>
+    <p>{{ i18n "introduction-sub" }}</p>
 </header>
 {{ end }}
 
 {{- define "main" }}
     <main>
-        <h2>Aus meinem Blog</h2>
+        {{ .Content }}
-        <section id="latest-posts">
-        {{ range first 3 (where .Site.RegularPages "Section" "blog") }}
-            <a href="{{ .Permalink }}" class="post-group">
-                <p class="title">{{ .Title }}</p>
-                <aside class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
-                    <span class="date">{{ .Date.Format "2. January 2006" }}</span>
-                    <span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
-                </aside>
-            </a>
-        {{ end }}
-        </section>
-        <section id="interests">
-            <h2>Interessen</h1>
-            <div>Programmieren</div>
-            <div>Gestalten</div>
-            <div>Übersetzen</div>
-        </section>
-        <section id="languages">
-            <div></div>
-        </section>
-        <section id="skills">
-            <h2>Kenntnisse</h1>
-            <div>HTML & CSS <span>seit 2009</span></div>
-            <div>SCSS <span>seit 2013</span></div>
-            <div>Javascript <span>seit 2022</span></div>
-            <div>Rust <span>seit 2021</span></div>
-            <div>Python <span>seit 2021</span></div>
-            <div>Bash <span>seit 2015</span></div>
-            <div>Affinity Designer <span>2015–2020</span></div>
-            <div>Inkscape <span>seit 2020</span></div>
-            <div>Boxy SVG <span>seit 2022</span></div>
-        </section>
-        <section id="skills">
-            <h2>Kenntnisse</h1>
-            <div>HTML & CSS <span>seit 2009</span></div>
-            <div>SCSS <span>seit 2013</span></div>
-            <div>Javascript <span>seit 2022</span></div>
-            <div>Rust <span>seit 2021</span></div>
-            <div>Python <span>seit 2021</span></div>
-            <div>Bash <span>seit 2015</span></div>
-            <div>Affinity Designer <span>2015–2020</span></div>
-            <div>Inkscape <span>seit 2020</span></div>
-            <div>Boxy SVG <span>seit 2022</span></div>
-        </section>
     </main>
 {{- end }}

layouts/partials/footer.html

@@ -1,6 +1,6 @@
 
      <footer>
-      <p title="Revision vom {{ now.Format "2. January 2006, um 15:04 Uhr MST" }}">R {{ now.Format "2006-01-02" }}</p>
+      <p title="Build vom {{ .Date | time.Format "2. January 2006, um 15:04 Uhr MST" }}">Version: {{ .Date | time.Format "02.01.2006" }}</p>
       {{- range .Site.Menus.footer }}
       <a href="{{ .URL }}">{{ .Name }}</a>
       {{- end }}

layouts/partials/nav.html

@@ -1,28 +0,0 @@
-{{ $currentPage := . }}
-
-<nav id="sidebar">
-    <header>
-        <p id="name">Vri 🌈</p>
-        <p id="information">
-            <span>@vrifox</span>
-        </p>
-    </header>
-    <section id="sidebar-menu">
-        <ul>
-        {{- range .Site.Menus.main }}
-        {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
-                <li class="active"><a href="{{ .URL }}">{{ .Name }}</a></li>
-        {{ else }}
-                <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-        {{ end }}
-        {{- end }}
-        </ul>
-    </section>
-    {{- if .Site.IsMultiLingual }}
-    <aside>
-    {{- range .Site.Languages }}
-        <a href="{{/* where .Page.TranslationKey .Lang */}}{{/* .Permalink */}}Test{{/* end */}}">{{ .LanguageName }}</a>
-    {{- end }}
-    </aside>
-    {{- end }}
-</nav>

layouts/partials/sidebar.html

@@ -0,0 +1,44 @@
+{{ $currentPage := . }}
+
+<nav id="sidebar">
+    <header>
+        <img id="avatar" src="/2021_vrifox-avatar.png">
+        <p id="name">{{ .Site.Params.displayName }}</p>
+        <p id="information">
+            <span>{{ .Site.Params.username }}</span>
+        </p>
+    </header>
+    <section id="sidebar-menu">
+        <ul>
+        {{- range .Site.Menus.main }}
+        {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
+            <li class="active"><a href="{{ .URL }}">{{ .Name }}</a></li>
+        {{ else }}
+            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+        {{ end }}
+        {{- end }}
+        </ul>
+    </section>
+    <aside>
+    {{- if .Site.IsMultiLingual }}
+        {{ $siteLanguages := .Site.Languages }}
+        {{ $pageLanguage := .Page.Lang }}
+        <div id="language-select">
+            <span id="language-icon" href="#" data-page-lang="{{ .Page.Lang }}">🌐</span>
+            <ul id="languages">
+            {{ range .Page.AllTranslations }}
+                {{ $translation := . }}
+                {{ range $siteLanguages }}
+                    {{ if eq $translation.Lang .Lang }}
+                        {{ if eq $pageLanguage .Lang }}
+                            <li class="active"><a href="{{ $translation.Permalink }}">{{ .LanguageName }}</a></li>
+                        {{ else }}
+                            <li><a href="{{ $translation.Permalink }}">{{ .LanguageName }}</a></li>
+                        {{ end }}
+                    {{ end }}
+                {{ end }}
+            {{ end }}
+            </ul>
+        </div>
+    {{- end }}
+</nav>

layouts/shortcodes/verticalposts.html

@@ -0,0 +1,14 @@
+<section class="verticalposts">
+    {{ with .Get "header" }}<h2>{{ i18n . }} <a href="blog/"class="more">{{ i18n "verticalposts-more" }}</a></h2>{{ end }}
+    <div class="verticalposts-wrapper">
+{{ range first 3 (where .Site.RegularPages "Section" "blog") }}
+        <a href="{{ .Permalink }}" class="post-group">
+            <p class="title">{{ .Title }}</p>
+            <aside class="meta" title="{{ .Date | time.Format "2 Jan 2006, 15:04 MST" }}">
+                <span class="date">{{ .Date | time.Format "2. January 2006" }}</span>
+                <span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
+            </aside>
+        </a>
+{{ end }}
+    </div>
+</section>