improve sidebar

assets/scss/partials/sidebar.scss

@@ -4,56 +4,31 @@
 
 #sidebar {
 	background: var(--sidebar-background);
-	border-top: 2px solid var(--vriish-rose);
 	display: flex;
 	flex-direction: column;
 	gap: 1em;
-	grid-area: sidebar;
+	height: calc(100vh - 2rem);
-	margin-top: -2px;
+	padding: 0.5em;
-	max-height: 100vh;
+	position: fixed;
-	padding: 1em;
-	position: sticky;
 	top: 0;
-	z-index: 1;
+	z-index: 2;
+	margin: 1rem;
+	border-radius: 2rem;
 	header {
 		text-align: center;
 		user-select: none;
 		#avatar {
 			border-radius: 500% 300% / 300% 500%;
-			width: calc(100% - 2em);
+			max-width: 64px;
-			max-width: 200px;
 			transition: .4s border-radius ease-in-out;
 			&:hover {
 				border-radius: 300% 500% / 500% 300%;
 			}
 		}
-		#name {
-			margin: 0;
-			font-weight: bold;
-			font-size: 1.8em;
-		}
-		#information {
-			margin: 0;
-			font-size: .8em;
-			#social-links {
-				list-style: none;
-				margin: 0;
-				padding: 0;
-				.icon {
-					height: 2em;
-					transition: color 0.2s linear;
-					&.mastodon-icon {
-						color: hsl(239.6, 100%, 69.4%);
-						&:hover {
-							color: hsl(251.5, 58.9%, 51.4%);
-						}
-					}
-				}
-			}
-		}
 	}
 	#sidebar-menu {
 		user-select: none;
+		text-align: center;
 		ul {
 			list-style: none;
 			padding: 0;
@@ -97,11 +72,28 @@
 			text-decoration: none;
 		}
 	}
-	aside {
+	#social-links {
-		bottom: 1em;
+		text-align: center;
-		position: absolute;
+		margin-top: auto;
-		left: 1em;
+		ul {
-		right: 1em;
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+		.icon {
+			height: 2em;
+			transition: color 0.2s linear;
+			&.mastodon-icon {
+				color: hsl(239.6, 100%, 69.4%);
+				&:hover {
+					color: hsl(251.5, 58.9%, 51.4%);
+				}
+			}
+		}
+	}
+	#localization {
+		bottom: 0.5em;
+		text-align: center;
 		@media (max-width: 920px) {
 			position: initial;
 		}

assets/scss/variables.scss

@@ -6,7 +6,7 @@
 	--text-2: hsl(210, 21%, 80%);
 	--text-secondary: hsl(210, 21%, 40%);
 	
-	--sidebar-background: hsl(210, 21%, 10%);
+	--sidebar-background: hsla(210, 21%, 10%, 20%);
 
 	--vriish-rose: hsl(0, 100%, 75%);
 	--orange: hsl(25, 100%, 75%);

config/_default/config.yaml

@@ -7,7 +7,7 @@ defaultContentLanguageInSubdir: true
 
 params:
     avatar: "2021_vrifox-avatar.png"
-    displayName: "Vri 🌈"
+    displayName: "Vri"
     username: "@vrifox"
     staticSiteGenerator: "Hugo"
     staticSiteGeneratorLink: "https://gohugo.io/"

layouts/partials/sidebar.html

@@ -7,25 +7,24 @@
             {{ $avatar := $avatar.Resize "200x webp" }}
             <img id="avatar" alt="{{ $.Site.Params.displayName }}" src="{{ $avatar.RelPermalink }}" />
         {{ end }}
-        <p id="name">{{ .Site.Params.displayName }}</p>
-        <div id="information">
-            <ul id="social-links">
-                <li><a rel="me" href="https://social.anoxinon.de/@vri">{{ partial "helpers/icons" "mastodon" }}</a></li>
-            </ul>
-        </div>
     </header>
     <section id="sidebar-menu">
         <ul>
-        {{- range .Site.Menus.main }}
+            {{- range .Site.Menus.main }}
-        {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
+            {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
             <li class="active"><a href="{{ .URL }}">{{ i18n .Identifier | default .Name }}</a></li>
-        {{ else }}
+            {{ else }}
             <li><a href="{{ .URL }}">{{ i18n .Identifier | default .Name }}</a></li>
-        {{ end }}
+            {{ end }}
-        {{- end }}
+            {{- 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">
     {{- if .Site.IsMultiLingual }}
         {{ $siteLanguages := .Site.Languages }}
         {{ $pageLanguage := .Page.Lang }}
@@ -47,4 +46,5 @@
             </ul>
         </div>
     {{- end }}
+    </section>
 </nav>