[wip] website redesign

assets/footer.scss

@@ -0,0 +1,9 @@
+footer {
+	color: var(--text-secondary);
+	grid-area: footer;
+	a { color: var(--text-secondary); }
+	span {
+		padding: 17.6px 30px;
+		margin-right: auto;
+	}
+}

assets/home.scss

@@ -0,0 +1,40 @@
+#introduction {
+    align-items: center;
+    background: var(--vriish-gradient);
+    display: flex;
+    flex-direction: column;
+    padding: 3em 0;
+    gap: .5em;
+    justify-content: center;
+    z-index: 2;
+    h1, p {
+        margin: 0;
+    }
+}
+
+#latest-posts {
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    hyphens: auto;
+    overflow-x: scroll;
+    .post-group {
+        background: var(--vriish-gradient);
+        border-radius: .5em;
+        display: flex;
+        flex-direction: column;
+        text-shadow: var(--vriish-gradient-shadow);
+        min-width: 15em;
+        width: 33.333%;
+        .title {
+            flex: auto;
+            margin: 1em;
+        }
+        aside {
+            margin: 1em;
+        }
+    }
+    a {
+        text-decoration: none;
+    }
+}

assets/sidebar.scss

@@ -0,0 +1,79 @@
+// -----------
+// - sidebar -
+// -----------
+
+#sidebar {
+	background: var(--sidebar-background);
+	border-top: 2px solid var(--vriish-rose);
+	display: flex;
+	flex-direction: column;
+	grid-area: sidebar;
+	height: 100vh;
+	margin-top: -2px;
+	max-width: 300px;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	header {
+		text-align: center;
+		padding: 2em 1em;
+		#name {
+			margin: 0;
+			font-weight: bold;
+			font-size: 1.8em;
+		}
+		#information {
+			margin: 0;
+			font-size: .8em;
+		}
+	}
+	#sidebar-menu {
+		padding: 2em 1em;
+		ul {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+		}
+		li {
+			border-radius: .5em;
+			margin: .25em 0;
+			padding: .25em .5em;
+			position: relative;
+			letter-spacing: .025em;
+			a {
+				text-shadow: 0 0 0 transparent;
+				transition: text-shadow .5s;
+			}
+			::after {
+				background: var(--vriish-gradient);
+				border-radius: .5em;
+				bottom: 0;
+				content: "";
+				left: 0;
+				position: absolute;
+				right: 0;
+				top: 0;
+				transition: opacity .5s;
+				opacity: 0;
+				z-index: -1;
+			}
+			&.active {
+				background: var(--vriish-gradient);
+				a {
+					text-shadow: var(--vriish-gradient-shadow);
+				}
+			}
+			&:hover {
+				a {
+					text-shadow: var(--vriish-gradient-shadow);
+				}
+				::after {
+					opacity: 1;
+				}
+			}
+		}
+		a {
+			text-decoration: none;
+		}
+	}
+}

assets/variables.scss

@@ -0,0 +1,32 @@
+:root {
+	--background: hsl(210, 21%, 15%);
+	--border: hsl(210, 21%, 20%);
+	
+	--text: hsl(210, 21%, 95%);
+	--text-2: hsl(210, 21%, 80%);
+	--text-secondary: hsl(210, 21%, 40%);
+	
+	--sidebar-background: hsl(210, 21%, 10%);
+
+	--vriish-rose: hsl(0, 100%, 75%);
+	--orange: hsl(25, 100%, 75%);
+	--gold: hsl(50, 100%, 75%);
+	--emerald: hsl(130, 100%, 75%);
+	--sky: hsl(215, 100%, 75%);
+	--purpur: hsl(275, 100%, 75%);
+	--white: hsl(360, 100%, 100%);
+
+	--vriish-gradient: linear-gradient(30deg, var(--orange) -100%, var(--vriish-rose) 100%);
+	--vriish-gradient-shadow: 2px 2px 10px var(--background);
+}
+@media (prefers-color-scheme: light) {
+	:root {
+		--background: hsl(0, 100%, 97.5%);
+		--border: hsl(0, 100%, 90%);
+
+		--text: rgb(50, 40, 30);
+		--text-2: rgb(90, 80, 70);
+
+		--sidebar-background: hsl(0, 100%, 95%);
+	}
+}