Merge branch 'improve-accessability'

Co-authored-by: vrifox <vrifox@vrifox.cc>
Reviewed-on: #13

.gitignore

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

assets/scss/home.scss

@@ -21,29 +21,37 @@
     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);
+
-        transition: color 0.2s ease-in-out;
+        @media (prefers-reduced-motion: no-preference) {
+            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,15 +2,9 @@
 	box-sizing: border-box;
 	scrollbar-color: var(--vriish-rose) var(--background);
 	scrollbar-width: thin;
-	scroll-behavior: smooth;
+
-	&::-webkit-scrollbar {
+	@media (prefers-reduced-motion: no-preference) {
-		background: var(--background);
+		scroll-behavior: smooth;
-		width: 6px;
-	}
-	&::-webkit-scrollbar-thumb { background: var(--vriish-rose); }
-	&::selection {
-		color: var(--text);
-		background-color: var(--link-underline);
 	}
 }
 
@@ -19,6 +13,7 @@ html {
 	overflow-x: hidden;
 	overflow-y: scroll;
 	padding: 0;
+
 	body {
 		background: var(--background);
 		color: var(--text);
@@ -29,6 +24,7 @@ html {
 		line-height: 1.5;
 		margin: 0;
 		min-height: 100vh;
+
 		@media (max-width: 920px) {
 			font-size: 1em;
 			grid-template-areas: 
@@ -37,33 +33,45 @@ 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;
+			
-			&:hover { text-decoration-color: var(--link-underline-hover); }
+			@media (prefers-reduced-motion: no-preference) {
+				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);
@@ -82,7 +90,8 @@ html {
     justify-content: center;
     padding: 3em 0;
     z-index: 2;
-    h1, p {
+
+	h1, p {
         margin: 0;
     }
 }
@@ -95,7 +104,10 @@ 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,13 +2,16 @@
     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,18 +4,24 @@ 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,22 +1,27 @@
 .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;
@@ -24,6 +29,7 @@
         gap: 1em;
         overflow-x: scroll;
         scroll-snap-type: x proximity;
+
         .post-group {
             color: var(--vriish-gradient-text);
             background: var(--vriish-gradient);
@@ -33,15 +39,18 @@
             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,6 +18,7 @@
 	border-radius: 0 2rem 2rem 0;
 	border: 1px solid var(--sidebar-border);
 	border-left: 0;
+
 	@media (max-width: 1140px) {
 		overflow: unset;
 		border: 0;
@@ -33,7 +34,7 @@
 			position: relative;
 
 			&::before {
-				content: attr(data-title);
+				content: attr(aria-label);
 				left: calc(100% + 0.5rem);
 				position: absolute;
 				top: 50%;
@@ -44,9 +45,13 @@
 				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);
@@ -61,9 +66,14 @@
 				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%;
 				}
@@ -75,15 +85,21 @@
 		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%;
 			}
@@ -92,6 +108,7 @@
 	#sidebar-menu {
 		user-select: none;
 		text-align: center;
+
 		@media (max-width: 1140px) {
 			position: fixed;
 			width: 100vw;
@@ -103,10 +120,12 @@
 			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;
@@ -114,6 +133,7 @@
 				height: 100%;
 			}
 		}
+
 		li {
 			border-radius: 0.5rem;
 			margin: 0.5em 0;
@@ -123,10 +143,15 @@
 			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;
@@ -134,6 +159,7 @@
 				width: 100%;
 				height: 100%;
 			}
+
 			&::after {
 				background-color: var(--sidebar-accent-1);
 				bottom: 0;
@@ -146,37 +172,50 @@
 				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;
@@ -194,9 +233,11 @@
 	aside {
 		#social-links {
 			text-align: center;
+
 			@media (max-width: 1140px) {
 				display: none;
 			}
+
 			a {
 				display: flex;
 				padding: 1rem;
@@ -207,6 +248,7 @@
 						color: hsl(251.5, 58.9%, 51.4%);
 					}
 				}
+
 				.mastodon-icon {
 					color: hsl(239.6, 100%, 69.4%);
 				}
@@ -214,15 +256,18 @@
 				.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;
@@ -238,18 +283,25 @@
 				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" data-title="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
+            <a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" aria-label="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 }}" data-title="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
+                            <a class="hint-text" id="language" href="{{ $translation.Permalink }}" aria-label="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
                         {{ end }}
                     {{ end }}
                 {{ end }}