update

assets/scss/home.scss

@@ -21,6 +21,9 @@
     height: 100vh;
     color: var(--vriish-gradient-text);
     mask: var(--vriish-waves);
+    @media (max-width: 1040px) {
+        height: 90vh;
+    }
     h1 {
         letter-spacing: 0.5rem;
         font-size: 7rem;

assets/scss/partials/sidebar.scss

@@ -6,6 +6,7 @@
 	background: var(--sidebar-background);
 	display: flex;
 	flex-direction: column;
+	justify-content: space-between;
 	gap: 1em;
 	height: calc(100vh - 1rem);
 	padding: 0.25rem;
@@ -23,11 +24,13 @@
 		bottom: 0;
 		border-radius: 2rem 2rem 0 0;
 		flex-direction: row;
-		width: calc(100vw - 1rem);
+		width: 100vw;
 		height: 5rem;
-		margin: 0 0.5rem;
+		margin: 0;
 		overflow-y: hidden;
 		overflow-x: scroll;
+		border: 1px solid var(--sidebar-border);
+		border-bottom: 0;
 	}
 	header {
 		text-align: center;
@@ -56,10 +59,10 @@
 			}
 		}
 		li {
-			border-radius: 0.5em;
+			border-radius: 0.5rem;
 			margin: 0.5em 0;
 			position: relative;
-			letter-spacing: .025em;
+			letter-spacing: .025rem;
 			overflow: hidden;
 			aspect-ratio: 1 / 1;
 			display: flex;
@@ -71,8 +74,7 @@
 			}
 			a {
 				display: block;
-				padding: .25em .5em;
+				padding: 0.25em 0.5em;
-				line-height: 4rem;
 			}
 			&::after {
 				background-color: var(--sidebar-accent-1);
@@ -86,7 +88,11 @@
 				z-index: -1;
 				opacity: 1;
 				opacity: 0.5;
-				transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear;
+				transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear, top 0.5s ease-out;
+				@media (max-width: 1040px) {
+					left: 0;
+					top: 100%;
+				}
 			}
 			&.active {
 				background-color: var(--sidebar-accent-1);
@@ -101,6 +107,9 @@
 				&::after {
 					left: 0;
 					opacity: 1;
+					@media (max-width: 1040px) {
+						top: 0;
+					}
 				}
 			}
 			&:active {
@@ -113,9 +122,17 @@
 			text-decoration: none;
 		}
 	}
+	aside {
+		@media (max-width: 1040px) {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+		}
 		#social-links {
 			text-align: center;
-		margin-top: auto;
+			align-items: center;
+			display: flex;
+			justify-content: center;
 			ul {
 				list-style: none;
 				margin: 0;
@@ -123,7 +140,7 @@
 			}
 			.icon {
 				height: 2em;
-			transition: color 0.2s linear;
+				transition: color 0.2s ease-in-out;
 				&.mastodon-icon {
 					color: hsl(239.6, 100%, 69.4%);
 					&:hover {
@@ -132,63 +149,23 @@
 				}
 			}
 		}
-	#localization {
+		#languages {
-		bottom: 0.5em;
 			text-align: center;
-		@media (max-width: 920px) {
+			transition: background-color 0.2s ease-in-out;
-			position: initial;
+			border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
-		}
-		#language-select {
-			position: relative;
-			pointer-events: none;
 			&:hover {
-				#languages {
+				background-color: var(--sidebar-accent-1);
-					bottom: 2em;
-					opacity: 100%;
-					pointer-events: all;
-					* {
-						pointer-events: all;
 			}
+			&:active {
+				background-color: var(--sidebar-accent-2);
 			}
-			}
+			#language {
-			#language-icon {
-				text-decoration: none;
-				padding: 1em;
-				margin: -1em;
-				pointer-events: all;
-			}
-			#languages {
-				background-color: var(--background);
-				border-radius: .5em;
-				margin: 0;
-				padding: 0;
-				user-select: none;
-				position: absolute;
-				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;
-					}
+				text-decoration: none;
-				}
+				width: 100%;
+				height: 100%;
+				padding: 0.5rem 1rem;
+				pointer-events: all;
 			}
 		}
 	}

config/_default/languages.yaml

@@ -1,6 +1,10 @@
 de:
     languageName: Deutsch
+    params:
+        languageFlag: 🇩🇪
     weight: 1
 en:
     languageName: English
+    params:
+        languageFlag: 🇬🇧
     weight: 2

layouts/partials/sidebar.html

@@ -19,32 +19,28 @@
             {{- end }}
         </ul>
     </section>
+    <aside>
         <section id="social-links">
             <ul>
                 <li><a rel="me" href="https://social.anoxinon.de/@vri">{{ partial "helpers/icons" "mastodon" }}</a></li>
             </ul>
         </section>
-    <section id="localization">
+        <section id="languages">
         {{- 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 }}
+                        {{ if ne $pageLanguage .Lang }}
-                            <li class="active"><a href="{{ $translation.Permalink }}">{{ .LanguageName }}</a></li>
+                            <a id="language" href="{{ $translation.Permalink }}">{{ .Params.languageFlag }}</a>
-                        {{ else }}
-                            <li><a href="{{ $translation.Permalink }}">{{ .LanguageName }}</a></li>
                         {{ end }}
                     {{ end }}
                 {{ end }}
             {{ end }}
-            </ul>
-        </div>
         {{- end }}
         </section>
+    </aside>
 </nav>