update

assets/scss/home.scss

@@ -21,12 +21,17 @@
     height: 100vh;
     color: var(--vriish-gradient-text);
     mask: var(--vriish-waves);
-    @media (max-width: 1040px) {
+    padding: 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;

assets/scss/main.scss

@@ -17,15 +17,10 @@ html {
 	body {
 		background: var(--background);
 		color: var(--text);
-		display: grid;
+		display: flex;
 		font-family: system-ui, sans-serif;
 		font-size: 1.2em;
-		grid-template-areas:
+		flex-direction: column;
-			"header header"
-			"sidebar content"
-			"footer footer";
-		grid-template-columns: 250px 1fr;
-		grid-template-rows: min-content;
 		line-height: 1.7;
 		margin: 0;
 		min-height: 100vh;
@@ -34,7 +29,6 @@ html {
 			grid-template-areas: 
 				"header"
 				"content"
-				"sidebar"
 				"footer";
 			grid-template-columns: 1fr;
 		}

assets/scss/partials/footer.scss

@@ -1,5 +1,5 @@
 footer {
-	color: var(--text-secondary);
+	color: var(--text-accent-150);
 	grid-area: footer;
 	margin: 1em auto;
 	text-align: center;

assets/scss/partials/sidebar.scss

@@ -19,12 +19,12 @@
 	border: 1px solid var(--sidebar-border);
 	border-left: 0;
 	overflow: hidden;
-	@media (max-width: 1040px) {
+	@media (max-width: 1140px) {
 		top: auto;
 		bottom: 0;
 		border-radius: 2rem 2rem 0 0;
 		flex-direction: row;
-		width: 100vw;
+		min-width: 100vw;
 		height: 5rem;
 		margin: 0;
 		overflow-y: hidden;
@@ -52,7 +52,7 @@
 			list-style: none;
 			padding: 0;
 			margin: 0;
-			@media (max-width: 1040px) {
+			@media (max-width: 1140px) {
 				display: flex;
 				flex-direction: row;
 				height: 100%;
@@ -69,7 +69,7 @@
 			align-items: center;
 			justify-content: center;
 			transition: background-color 0.2s linear;
-			@media (max-width: 1040px) {
+			@media (max-width: 1140px) {
 				margin: 0 0.5rem;
 			}
 			a {
@@ -89,7 +89,7 @@
 				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;
-				@media (max-width: 1040px) {
+				@media (max-width: 1140px) {
 					left: 0;
 					top: 100%;
 				}
@@ -107,7 +107,7 @@
 				&::after {
 					left: 0;
 					opacity: 1;
-					@media (max-width: 1040px) {
+					@media (max-width: 1140px) {
 						top: 0;
 					}
 				}
@@ -123,24 +123,31 @@
 		}
 	}
 	aside {
-		@media (max-width: 1040px) {
+		@media (max-width: 1140px) {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 		}
 		#social-links {
 			text-align: center;
-			align-items: center;
-			display: flex;
-			justify-content: center;
 			ul {
 				list-style: none;
 				margin: 0;
-				padding: 0;
+				padding: 1rem;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				gap: 1rem;
+				@media (max-width: 1140px) {
+					flex-direction: row;
+				}
 			}
 			.icon {
-				height: 2em;
+				height: 1.25rem;
+				width: 1.25rem;
 				transition: color 0.2s ease-in-out;
+				display: block;
 				&.mastodon-icon {
 					color: hsl(239.6, 100%, 69.4%);
 					&:hover {
@@ -153,6 +160,9 @@
 			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: 0.5rem;
+			}
 			&:hover {
 				background-color: var(--sidebar-accent-1);
 			}
@@ -164,7 +174,7 @@
 				text-decoration: none;
 				width: 100%;
 				height: 100%;
-				padding: 0.5rem 1rem;
+				padding: 1rem 1rem;
 				pointer-events: all;
 			}
 		}

assets/scss/variables.scss

@@ -13,13 +13,17 @@
 		--primary-light-#{$counter}: hsl(25, #{$saturation}, #{$lightness});
 	}
 
+	@for $i from 1 to 20 {
+		$counter: $i * 50;
+		$saturation: 10% + $i * 2.5%;
+		$lightness: $i * 4%;
+		--text-accent-#{$counter}: hsl(320, #{$saturation}, #{$lightness});
+	}
+
 	--background: var(--primary-dark-150);
 	--border: var(--primary-dark-200);
 	
 	--text: var(--primary-light-950);
-	--text-accent-1: var(--primary-light-900);
-	--text-accent-2: var(--primary-light-850);
-	--text-accent-3: var(--primary-light-800);
 
 	--sidebar-background: var(--primary-dark-100);
 	--sidebar-border: var(--primary-dark-150);
@@ -45,13 +49,17 @@
 }
 @media (prefers-color-scheme: light) {
 	:root {
+		@for $i from 1 to 20 {
+			$counter: $i * 50;
+			$saturation: 20% + $i * 2.5%;
+			$lightness: $i * 5%;
+			--text-accent-#{$counter}: hsl(25, #{$saturation}, #{$lightness});
+		}
+
 		--background: var(--primary-light-850);
 		--border: var(--primary-dark-800);
 
 		--text: var(--primary-dark-50);
-		--text-accent-1: var(--primary-dark-100);
-		--text-accent-2: var(--primary-dark-150);
-		--text-accent-3: var(--primary-dark-200);
 
 		--sidebar-background: var(--primary-light-900);
 		--sidebar-border: var(--primary-light-850);