From 63b384b0ed018925043619de2aab69e470f1bf19 Mon Sep 17 00:00:00 2001
From: vanten-s <vanten-s@vanten-s.com>
Date: Tue, 5 Sep 2023 12:05:09 +0200
Subject: [PATCH] Changed the website

---
 src/assets/main.css | 104 +++++++++++++++++++++++++++++++++++++-------
 src/index.html      |  47 +++++++++++++++++---
 2 files changed, 130 insertions(+), 21 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 7778768..5145431 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,28 +1,102 @@
 :root {
-    --bg-color: #1e1e2e;
-    --text-color: #cdd6f4;
-    --link-color: #94e2d5;
+    --base: #1e1e2e;
+    --mantle: #181825;
+    --text: #cdd6f4;
+    --link: #94e2d5;
+    --surface: #313244;
+    --pink: #f5c2e7;
 }
 
 body {
     font-family: Hack, monospace;
-    background-color: var(--bg-color);
-    color: var(--text-color);
+    background-color: var(--mantle);
+    color: var(--text);
     padding: 5em;
     margin: 0;
 }
 
-a {
-    color: var(--link-color);
-    text-decoration: underline var(--bg-color) auto;
-    transition: all .5s;
-}
-
-a:hover {
-    text-decoration: underline var(--link-color) auto;
-}
-
 img {
     padding: 1em;
 }
 
+.navbar {
+    /* Positioning */
+    top: 0;
+    margin-top: 0;
+    right: 0;
+    position: fixed;
+
+    /* Size */
+    height: 100vh;
+    width: 5em;
+    padding: 0;
+
+    /* Markers */
+    list-style-type: none;
+
+    background-color: var(--surface);
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+}
+
+.navbar > li {
+    width: 4em;
+    height: 4em;
+    margin: 1em;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--mantle);
+    text-align: center;
+
+    border-radius: 100%;
+    outline: var(--pink) 0.2rem solid;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navbar > li:hover {
+    border-radius: 30%;
+    background-color: var(--link);
+    outline: var(--pink) 0 solid;
+}
+
+.navbar > li:hover > a {
+    color: var(--base);
+}
+
+.navbar > li > a > i {
+    font-size: 2.5em;
+}
+
+.navbar > li > a > .popup {
+    position: absolute;
+    right: 6em;
+    scale: 0;
+    background-color: var(--base);
+    color: var(--link);
+    padding: .5em;
+    white-space: nowrap;
+    font-weight: bold;
+    border-radius: 0.75rem;
+    outline: var(--pink) 0.2rem solid;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navbar > li:hover > a > .popup {
+    scale: 100%;
+}
+
+a {
+    color: var(--link);
+    text-decoration: underline var(--mantle) auto;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+a:hover {
+    text-decoration: underline var(--link) auto;
+}
diff --git a/src/index.html b/src/index.html
index fa470ce..2f45d39 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,9 @@
     <meta charset="utf-8"/>
     <title>Homepage</title>
     <link rel="stylesheet" href="assets/main.css">
+    <link rel="stylesheet" href="assets/fontAwesome/css/fontawesome.css">
+    <link rel="stylesheet" href="assets/fontAwesome/css/brands.css">
+    <link rel="stylesheet" href="assets/fontAwesome/css/solid.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
     <link rel="icon" href="/assets/favicon.png">
 </head>
@@ -11,12 +14,44 @@
     <h1>Vanten</h1>
     <p>Software dev, OSS enthusiast, server admin and 13 year old</p>
     <p>Maybe script kiddie idk</p>
-    <h3>Contact</h1>
-    <ul>
-        <li><a href="mailto:vanten-s@vanten-s.com"               >Mail</a>    </li>
-        <li><a rel="me" href="https://kolektiva.social/@vanten_s">Mastodon</a></li>
-        <li><a href="key.asc"                                    >PGP key</a> </li>
-        <li><a href="https://matrix.to/#/@vanten-s:matrix.org"   >Matrix</a>  </li>
+    
+    <ul class="navbar">
+    <li>
+        <a href="mailto:vanten-s@vanten-s.com">
+            <span class="popup">Mail</span>
+            <i class="fa-solid fa-envelope fa"></i>
+        </a>
+    </li>
+    <li>
+        <a rel="me" href="https://kolektiva.social/@vanten_s">
+            <span class="popup">Mastodon</span>
+            <i class="fa-brands fa-mastodon fa"></i>
+        </a>
+    </li>
+    <li>
+        <a href="key.asc">
+            <span class="popup">GPG Key</span>
+            <i class="fa-solid fa-key"></i>
+        </a>
+    </li>
+    <li>
+        <a href="https://matrix.to/#/@vanten-s:matrix.org">
+            <span class="popup">Matrix</span>
+            <i class="fa-solid fa-comment"></i>
+        </a>
+    </li>
+    <li>
+        <a href="https://forgejo.vanten-s.com/vanten-s">
+            <span class="popup">Forgejo</span>
+            <i class="fa-brands fa-git-alt"></i>
+        </a>
+    </li>
+    <li>
+        <a href="rss.xml">
+            <span class="popup">RSS Feed</span>
+            <i class="fa-solid fa-rss"></i>
+        </a>
+    </li>
     </ul>
     
     <h3>Weird computer thingys that I know</h3>