.gitignore

@@ -2,7 +2,6 @@
 /public/*
 /resources/_gen/*
 .vscode/
-.unlighthouse/
 
 # ignored files
 .directory

assets/scss/home.scss

@@ -21,37 +21,29 @@
     mask: var(--vriish-waves);
     -webkit-mask: var(--vriish-waves);
     padding: 5rem 1rem 8rem 1rem;
-
     @media (max-width: 1140px) {
         height: 90vh;
         font-size: 1.5rem;
     }
-
     h1 {
         letter-spacing: 0.5rem;
         font-size: 7rem;
-
         @media (max-width: 1140px) {
             font-size: 4rem;
         }
     }
-
     p {
         letter-spacing: 0.15rem;
     }
-
     #scroll-down {
-        bottom: 2rem;
-        color: var(--vriish-gradient-text);
-        font-family: FreeSerif, serif;
         font-size: 4.8rem;
         position: absolute;
+        bottom: 2rem;
+        animation: 1s ease-in infinite alternate scrollDown;
+        font-family: FreeSerif, serif;
         text-decoration: none;
-
+        color: var(--vriish-gradient-text);
-        @media (prefers-reduced-motion: no-preference) {
+        transition: color 0.2s ease-in-out;
-            animation: 1s ease-in infinite alternate scrollDown;
-            transition: color 0.2s ease-in-out;
-        }
 
         &:hover {
             color: var(--vriish-gradient-text-hover);

assets/scss/main.scss

@@ -2,9 +2,15 @@
 	box-sizing: border-box;
 	scrollbar-color: var(--vriish-rose) var(--background);
 	scrollbar-width: thin;
-
+	scroll-behavior: smooth;
-	@media (prefers-reduced-motion: no-preference) {
+	&::-webkit-scrollbar {
-		scroll-behavior: smooth;
+		background: var(--background);
+		width: 6px;
+	}
+	&::-webkit-scrollbar-thumb { background: var(--vriish-rose); }
+	&::selection {
+		color: var(--text);
+		background-color: var(--link-underline);
 	}
 }
 
@@ -13,7 +19,6 @@ html {
 	overflow-x: hidden;
 	overflow-y: scroll;
 	padding: 0;
-
 	body {
 		background: var(--background);
 		color: var(--text);
@@ -24,7 +29,6 @@ html {
 		line-height: 1.5;
 		margin: 0;
 		min-height: 100vh;
-
 		@media (max-width: 920px) {
 			font-size: 1em;
 			grid-template-areas: 
@@ -33,45 +37,33 @@ html {
 				"footer";
 			grid-template-columns: 1fr;
 		}
-
 		h1, h2, h3, h4, h5, h6 {
 			line-height: 1em;
 			margin: .8em 0;
 		}
-
 		a {
 			color: var(--text);
 			text-decoration: underline;
 			text-decoration-color: var(--link-underline);
 			text-decoration-thickness: 3px;
 			text-underline-offset: 2px;
-			
+			transition: text-decoration-color .2s;
-			@media (prefers-reduced-motion: no-preference) {
+			&:hover { text-decoration-color: var(--link-underline-hover); }
-				transition: text-decoration-color .2s;
-			}
-
-			&:hover {
-				text-decoration-color: var(--link-underline-hover);
-			}
 		}
-
 		pre {
 			border: 1px solid var(--vriish-rose);
 			border-radius: 4px;
 			overflow: auto;
 			padding: 10px 15px;
 		}
-
 		p {
 			hyphens: auto;
-
 			img {
 				border-radius: 1rem;
 				display: block;
 				margin: 0 auto;
 			}
 		}
-
 		hr {
 			border: 1px solid var(--border);
 			color: var(--border);
@@ -90,8 +82,7 @@ html {
     justify-content: center;
     padding: 3em 0;
     z-index: 2;
-
+    h1, p {
-	h1, p {
         margin: 0;
     }
 }
@@ -104,10 +95,7 @@ main {
 	padding: 30px;
 	width: 100%;
 	min-height: 85.6vh;
-
+	span { font-size: .8em; }
-	span {
-		font-size: .8em;
-	}
 }
 
 p.date-published {

assets/scss/markup/render-image.scss

@@ -2,16 +2,13 @@
     display: flex;
     flex-direction: column;
     margin: 3rem auto;
-
     img {
         border-radius: 0.5rem;
         margin: 0 auto;
         box-shadow: rgba(0, 0, 0, .25) 0 0 .5rem;
         max-width: 100%;
     }
-
     &.with-text img { margin-bottom: .75rem; }
-
     &-text {
         font-size: .8em;
         font-weight: 300;

assets/scss/partials/footer.scss

@@ -4,24 +4,18 @@ footer {
 	margin: 1em auto;
 	text-align: center;
 	font-size: 1rem;
-
 	p {
 		margin: .25em;
-
 		span {
-
 			&:not(:last-child) {
-
 				&::after {
 					content: '·';
 					padding: .25em;
 				}
 			}
-
 			a {
 				color: var(--text-secondary);
 				text-decoration-color: transparent;
-
 				&:hover {
 					text-decoration: underline;
 					text-decoration-color: var(--text-secondary);

assets/scss/partials/moreposts.scss

@@ -1,27 +1,22 @@
 .moreposts {
     hyphens: auto;
     margin-top: 4em;
-
     .more{
         font-size: .75em;
         font-weight: normal;
         hyphens: none;
-
         &::after {
             content: "\27F6";
             margin-left: .25em;
             transition: margin .5s;
         }
-
         &:hover::after {
             margin-left: .5em !important;
         }
     }
-
     &:hover .more::after {
         margin-left: .35em;
     }
-
     .moreposts-wrapper {
         border-radius: .5em;
         display: flex;
@@ -29,7 +24,6 @@
         gap: 1em;
         overflow-x: scroll;
         scroll-snap-type: x proximity;
-
         .post-group {
             color: var(--vriish-gradient-text);
             background: var(--vriish-gradient);
@@ -39,18 +33,15 @@
             scroll-snap-align: start;
             min-width: 15em;
             width: 33.333%;
-
             .title {
                 flex: auto;
                 margin: 1em;
             }
-
             aside {
                 margin: 1em;
             }
         }
     }
-
     a {
         text-decoration: none;
     }

assets/scss/partials/sidebar.scss

@@ -18,7 +18,6 @@
 	border-radius: 0 2rem 2rem 0;
 	border: 1px solid var(--sidebar-border);
 	border-left: 0;
-
 	@media (max-width: 1140px) {
 		overflow: unset;
 		border: 0;
@@ -34,7 +33,7 @@
 			position: relative;
 
 			&::before {
-				content: attr(aria-label);
+				content: attr(data-title);
 				left: calc(100% + 0.5rem);
 				position: absolute;
 				top: 50%;
@@ -45,13 +44,9 @@
 				border-radius: 0.5rem;
 				pointer-events: none;
 				opacity: 0%;
+				transition: opacity 0.3s ease-in-out;
 				z-index: 201;
-				
-				@media (prefers-reduced-motion: no-preference) {
-					transition: opacity 0.3s ease-in-out;
-				}
 			}
-
 			&::after {
 				content: "";
 				transform: translate(-50%, -50%) rotate(45deg);
@@ -66,14 +61,9 @@
 				left: calc(100% + 0.5rem);
 				pointer-events: none;
 				opacity: 0%;
-				
+				transition: opacity 0.3s ease-in-out;
-				@media (prefers-reduced-motion: no-preference) {
-					transition: opacity 0.3s ease-in-out;
-				}
 			}
-
 			&:hover {
-
 				&::before, &::after {
 					opacity: 100%;
 				}
@@ -85,21 +75,15 @@
 		text-align: center;
 		user-select: none;
 		padding: inherit;
-
 		#avatar {
 			border-radius: 300% 500% / 500% 300%;
 			max-width: 64px;
-
+			transition: 0.4s border-radius ease-in-out;
 			@media (max-width: 1140px) {
 				position: absolute;
 				top: 1rem;
 				left: 1rem;
 			}
-
-			@media (prefers-reduced-motion: no-preference) {
-				transition: 0.4s border-radius ease-in-out;
-			}
-
 			&:hover {
 				border-radius: 500% 300% / 300% 500%;
 			}
@@ -108,7 +92,6 @@
 	#sidebar-menu {
 		user-select: none;
 		text-align: center;
-
 		@media (max-width: 1140px) {
 			position: fixed;
 			width: 100vw;
@@ -120,12 +103,10 @@
 			border: 1px solid var(--sidebar-border);
 			border-bottom: 0;
 		}
-
 		ul {
 			list-style: none;
 			padding: 0;
 			margin: 0;
-
 			@media (max-width: 1140px) {
 				display: flex;
 				flex-direction: row;
@@ -133,7 +114,6 @@
 				height: 100%;
 			}
 		}
-
 		li {
 			border-radius: 0.5rem;
 			margin: 0.5em 0;
@@ -143,15 +123,10 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			
+			transition: background-color 0.2s linear;
 			@media (max-width: 1140px) {
 				margin: 0 0.5rem;
 			}
-
-			@media (prefers-reduced-motion: no-preference) {
-				transition: background-color 0.2s linear;
-			}
-
 			a {
 				overflow: visible;
 				display: flex;
@@ -159,7 +134,6 @@
 				width: 100%;
 				height: 100%;
 			}
-
 			&::after {
 				background-color: var(--sidebar-accent-1);
 				bottom: 0;
@@ -172,50 +146,37 @@
 				z-index: -1;
 				opacity: 1;
 				opacity: 0.5;
+				transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear, top 0.5s ease-out;
 				border-radius: 0.5rem;
-				
 				@media (max-width: 1140px) {
 					left: 0;
 					top: 100%;
 				}
-				
-				@media (prefers-reduced-motion: no-preference) {
-					transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear, top 0.5s ease-out;
-				}
 			}
-
 			&.active {
 				background-color: var(--sidebar-accent-1);
-
 				&:hover {
 					background-color: var(--sidebar-accent-2);
 				}
-
 				&:active {
 					background-color: var(--sidebar-accent-3);
 				}
 			}
-
 			&:hover {
-
 				&::after {
 					left: 0;
 					opacity: 1;
-
 					@media (max-width: 1140px) {
 						top: 0;
 					}
 				}
 			}
-
 			&:active {
-
 				&::after {
 					background-color: var(--sidebar-accent-2);
 				}
 			}
 		}
-
 		a {
 			text-decoration: none;
 			display: flex;
@@ -233,11 +194,9 @@
 	aside {
 		#social-links {
 			text-align: center;
-
 			@media (max-width: 1140px) {
 				display: none;
 			}
-
 			a {
 				display: flex;
 				padding: 1rem;
@@ -248,7 +207,6 @@
 						color: hsl(251.5, 58.9%, 51.4%);
 					}
 				}
-
 				.mastodon-icon {
 					color: hsl(239.6, 100%, 69.4%);
 				}
@@ -256,18 +214,15 @@
 				.icon {
 					height: 1.25rem;
 					width: 1.25rem;
+					transition: color 0.2s ease-in-out;
 					display: block;
-					
-					@media (prefers-reduced-motion: no-preference) {
-						transition: color 0.2s ease-in-out;
-					}
 				}
 			}
 		}
 		#languages {
 			text-align: center;
+			transition: background-color 0.2s ease-in-out;
 			border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
-			
 			@media (max-width: 1140px) {
 				border-radius: 4rem;
 				position: absolute;
@@ -283,25 +238,18 @@
 				justify-content: center;
 				overflow: hidden;
 			}
-			@media (prefers-reduced-motion: no-preference) {
-				transition: background-color 0.2s ease-in-out;
-			}
-
 			&:hover {
 				background-color: var(--sidebar-accent-1);
-
 				@media (max-width: 1140px) {
 					background-color: var(--sidebar-accent-2);
 				}
 			}
 			&:active {
 				background-color: var(--sidebar-accent-2);
-
 				@media (max-width: 1140px) {
 					background-color: var(--sidebar-accent-3);
 				}
 			}
-
 			#language {
 				display: block;
 				text-decoration: none;

layouts/partials/sidebar.html

@@ -21,7 +21,7 @@
     </section>
     <aside>
         <section id="social-links">
-            <a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" aria-label="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
+            <a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" data-title="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
         </section>
         <section id="languages">
         {{- if .Site.IsMultiLingual }}
@@ -33,7 +33,7 @@
                 {{ range $siteLanguages }}
                     {{ if eq $translation.Lang .Lang }}
                         {{ if ne $pageLanguage .Lang }}
-                            <a class="hint-text" id="language" href="{{ $translation.Permalink }}" aria-label="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
+                            <a class="hint-text" id="language" href="{{ $translation.Permalink }}" data-title="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
                         {{ end }}
                     {{ end }}
                 {{ end }}