src/assets/fontAwesome/css/solid.css

@@ -1,19 +0,0 @@
-/*!
- * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2023 Fonticons, Inc.
- */
-:root, :host {
-  --fa-style-family-classic: 'Font Awesome 6 Free';
-  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
-
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 900;
-  font-display: block;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
-
-.fas,
-.fa-solid {
-  font-weight: 900; }

src/assets/main.css

@@ -1,102 +1,28 @@
 :root {
-    --base: #1e1e2e;
+    --bg-color: #1e1e2e;
-    --mantle: #181825;
+    --text-color: #cdd6f4;
-    --text: #cdd6f4;
+    --link-color: #94e2d5;
-    --link: #94e2d5;
-    --surface: #313244;
-    --pink: #f5c2e7;
 }
 
 body {
     font-family: Hack, monospace;
-    background-color: var(--mantle);
+    background-color: var(--bg-color);
-    color: var(--text);
+    color: var(--text-color);
     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;
-}

src/index.html

@@ -4,9 +4,6 @@
     <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>
@@ -14,44 +11,12 @@
     <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 class="navbar">
+    <ul>
-    <li>
+        <li><a href="mailto:vanten-s@vanten-s.com"               >Mail</a>    </li>
-        <a href="mailto:vanten-s@vanten-s.com">
+        <li><a rel="me" href="https://kolektiva.social/@vanten_s">Mastodon</a></li>
-            <span class="popup">Mail</span>
+        <li><a href="key.asc"                                    >PGP key</a> </li>
-            <i class="fa-solid fa-envelope fa"></i>
+        <li><a href="https://matrix.to/#/@vanten-s:matrix.org"   >Matrix</a>  </li>
-        </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>