From c169972931deb74b40fc87a5cc045d9fccc5c62c Mon Sep 17 00:00:00 2001
From: Vri <vrifox@vrifox.cc>
Date: Mon, 28 Nov 2022 18:33:52 +0100
Subject: [PATCH] [wip] website redesign

---
 assets/footer.scss    |  9 +++++
 assets/home.scss      | 40 ++++++++++++++++++++++
 assets/sidebar.scss   | 79 +++++++++++++++++++++++++++++++++++++++++++
 assets/variables.scss | 32 ++++++++++++++++++
 config.yaml           | 38 +++++++++++++++++++++
 5 files changed, 198 insertions(+)
 create mode 100644 assets/footer.scss
 create mode 100644 assets/home.scss
 create mode 100644 assets/sidebar.scss
 create mode 100644 assets/variables.scss
 create mode 100644 config.yaml

diff --git a/assets/footer.scss b/assets/footer.scss
new file mode 100644
index 0000000..61cdd32
--- /dev/null
+++ b/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;
+	}
+}
\ No newline at end of file
diff --git a/assets/home.scss b/assets/home.scss
new file mode 100644
index 0000000..d9feeaf
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/assets/sidebar.scss b/assets/sidebar.scss
new file mode 100644
index 0000000..c9573fa
--- /dev/null
+++ b/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;
+		}
+	}
+}
\ No newline at end of file
diff --git a/assets/variables.scss b/assets/variables.scss
new file mode 100644
index 0000000..221e23d
--- /dev/null
+++ b/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%);
+	}
+}
\ No newline at end of file
diff --git a/config.yaml b/config.yaml
new file mode 100644
index 0000000..4340f10
--- /dev/null
+++ b/config.yaml
@@ -0,0 +1,38 @@
+baseURL: "https://vrifox.cc/"
+title: "Vris Cute Corner"
+enableRobotsTXT: true
+menu:
+    main:
+      - identifier: "home"
+        name: "Startseite"
+        pageref: "/"
+        weight: 1
+      - identifier: "skills"
+        name: "Kenntnisse"
+        pageref: "/kenntnisse/"
+        weight: 2
+      - identifier: "projects"
+        name: "Projekte"
+        pageref: "/portfolio/"
+        weight: 3
+      - identifier: "blog"
+        name: "Blog"
+        pageref: "/blog/"
+        weight: 4
+      #- identifier: "blogroll"
+      #  name: "Empfehlungen"
+      #  pageref: "/blogroll/"
+      #  weight: 5
+markup:
+    highlight:
+        anchorLineNos: false
+        lineNos: false
+        lineNumbersInTable: false
+        noClasses: false
+        style: "dracula"
+        tabWidth: 4
+    goldmark:
+        extensions:
+            linkify: false
+        renderer:
+            unsafe: true
\ No newline at end of file