From 06d90d844fe14acdb36b8e13a209574c5a0c3a9f Mon Sep 17 00:00:00 2001
From: ami_sc <hi@mail.ami.sc>
Date: Sat, 3 Aug 2024 19:21:11 -0400
Subject: [PATCH] Final fix before refactor

---
 styles.css => assets/css/styles.css           | 107 +++++++++---
 .../fonts/FiraCode-Bold.ttf                   | Bin
 firacode.ttf => assets/fonts/FiraCode.ttf     | Bin
 favicon.png => assets/img/favicon.png         | Bin
 index.html                                    | 156 ++++++++++++------
 5 files changed, 190 insertions(+), 73 deletions(-)
 rename styles.css => assets/css/styles.css (56%)
 rename firacode_bold.ttf => assets/fonts/FiraCode-Bold.ttf (100%)
 rename firacode.ttf => assets/fonts/FiraCode.ttf (100%)
 rename favicon.png => assets/img/favicon.png (100%)

diff --git a/styles.css b/assets/css/styles.css
similarity index 56%
rename from styles.css
rename to assets/css/styles.css
index 164731d..dfa3931 100644
--- a/styles.css
+++ b/assets/css/styles.css
@@ -1,25 +1,99 @@
+/*** Fonts ***/
+
 @font-face {
-    font-family: firacode;
-    src: url(firacode.ttf);
+    font-family: "Fira Code Regular";
+    src: url(../fonts/FiraCode.ttf);
 }
 
 @font-face {
-    font-family: firacode_bold;
-    src: url(firacode_bold.ttf);
+    font-family: "Fira Code Bold";
+    src: url(../fonts/FiraCode-Bold.ttf);
 }
 
+/*** Page Contents ***/
+
+/* Background Container */
 html {
+    display: flex;
+    height: 100%;
     align-items: center;
-    /*background: linear-gradient(315deg,#021B79,#0575E6);*/
+    justify-content: center;
+
+    background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #FF0000 100%), linear-gradient(360deg, #0029FF 0%, #8FFF00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100FF 0%, #00FF57 100%), radial-gradient(100% 148.07% at 0% 0%, #FFF500 0%, #51D500 100%);
+    background-blend-mode: screen, color-dodge, overlay, difference, normal;
+}
+
+/* Main Container */
+body {
+    background-color: #1B1B1B;
+    border-radius: 10px;
+    box-shadow: 10px 10px;
+    padding: 2rem;
+}
+
+/* Link Grid */
+nav {
+    display: grid;
+
+    /* We want a 4x2 grid. */
+    grid-template-columns: repeat(4, [col-start] 1fr);
+    grid-template-rows: repeat(2, [row-start] 1fr);
+
+    gap: 2rem;
+}
+
+/* Main Heading */
+h1 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    color: #FFFFFF;
+    font-family: "Fira Code Regular";
+}
+
+/* Link Box */
+.link_box > h2 {
+    font-family: "Fira Code Bold";
+    font-size: 1rem;
+    color: #FFFFFF;
+    margin: 0 0 0.5rem 0;
+}
+
+.link_box a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    font-family: "Fira Code Regular";
+    color: #FFFFFF;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    text-decoration: none;
+}
+
+/* Link (Hover) */
+.link_box a:hover {
+    font-family: "Fira Code Bold";
+}
+
+/* Link Icon */
+.link_box a > img {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+/* html {
+    align-items: center;
+    background: linear-gradient(315deg,#021B79,#0575E6);
     background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #FF0000 100%), linear-gradient(360deg, #0029FF 0%, #8FFF00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100FF 0%, #00FF57 100%), radial-gradient(100% 148.07% at 0% 0%, #FFF500 0%, #51D500 100%);
     background-blend-mode: screen, color-dodge, overlay, difference, normal;
     display: flex;
     font: 22px/1 "firacode";
     height: 100%;
     justify-content: center;
-}
+} */
 
-body {
+/* body {
     background-color: rgb(29, 31, 33, 1.0);
     border-radius: 4px;
     box-shadow: 10px 10px;
@@ -29,18 +103,9 @@ body {
     min-height: 20ch;
     min-width: 50vw;
     padding: 2em;
-}
+} */
 
-main_title {
-    margin: 0;
-    color: #ffffff;
-}
-
-main_title span {
-    color: #0fb1f1;
-}
-
-a {
+/* a {
     color: inherit;
     text-decoration: none;
     color: #ffffff;
@@ -98,11 +163,11 @@ ul:nth-child(5n + 6) li:first-child {
     background: -webkit-linear-gradient(right, #dce35b, #45b649);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-}
+} */
 
-nav {
+/* nav {
     column-gap: 2em;
     display: grid;
     grid-template-columns: auto auto auto auto;
     padding: 1em 0;
-}
+} */
diff --git a/firacode_bold.ttf b/assets/fonts/FiraCode-Bold.ttf
similarity index 100%
rename from firacode_bold.ttf
rename to assets/fonts/FiraCode-Bold.ttf
diff --git a/firacode.ttf b/assets/fonts/FiraCode.ttf
similarity index 100%
rename from firacode.ttf
rename to assets/fonts/FiraCode.ttf
diff --git a/favicon.png b/assets/img/favicon.png
similarity index 100%
rename from favicon.png
rename to assets/img/favicon.png
diff --git a/index.html b/index.html
index 95dd8a4..b77af12 100644
--- a/index.html
+++ b/index.html
@@ -1,65 +1,117 @@
 <!DOCTYPE html>
 
-<html>
+<html lang="eng-US">
 
-<head>
-    <title>Ami :: Startpage</title>
-    <link rel="icon" type="image/svg+xml" href="favicon.png"/>
-    <link rel="stylesheet" type="text/css" href="styles.css">
-</head>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Ami :: Startpage</title>
+        <link rel="icon" type="image/svg+xml" href="assets/img/favicon.png"/>
+        <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
+    </head>
 
-<body>
-  <main_title><span>[ami@Internet] &gt; </span>Home</main_title>
+    <body>
+        <header>
+            <h1>[ami@Internet] Home</h1>
+        </header>
 
-  <nav>
-    <ul>
-      <li>Personal</li>
-      <li><a href="https://proton.me/"><img src="personal_icons/proton.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Proton</a></li>
-      <li><a href="https://simplelogin.io/"><img src="personal_icons/simplelogin.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> SimpleLogin</a></li>
-      <li><a href="https://bankofamerica.com/"><img src="personal_icons/bankofamerica.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> BofA</a></li>
-      <li><a href="https://americanexpress.com/"><img src="personal_icons/americanexpress.jpg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> AMEX</a></li>
-      <li><a href="https://discover.com/"><img src="personal_icons/discover.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Discover</a></li>
-    </ul>
+        <nav>
+            <div class="link_box">
+                <h2>Personal</h2>
 
-    <ul>
-      <li>University</li>
-      <li><a href="https://my.astate.edu/"><img src="university_icons/myastate.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> MyAstate</a></li>
-      <li><a href="https://arkansasstateuniversity.instructure.com"><img src="university_icons/canvas.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Canvas</a></li>
-      <li><a href="https://ssb.astate.edu/"><img src="university_icons/banner.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Banner</a></li>
-    </ul>
+                <a href="https://proton.me/">
+                    <img src="personal_icons/proton.svg"/>
+                    Proton
+                </a>
 
-    <ul>
-      <li>Self-Hosted</li>
-      <li><a href="https://cloud.ami.sc/"><img src="self_hosted_icons/polyhedra.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Polyhedra</a></li>
-      <li><a href="https://git.ami.sc/"><img src="self_hosted_icons/arsenic.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Arsenic</a></li>
-      <li><a href="https://wiki.ami.sc/"><img src="self_hosted_icons/serapeum.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Serapeum</a></li>
-      <li><a href="https://media.ami.sc/"><img src="self_hosted_icons/andromalius.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Pegasus</a></li>
-    </ul>
+                <a href="https://simplelogin.io/">
+                    <img src="personal_icons/simplelogin.svg"/>
+                    SimpleLogin
+                </a>
 
-    <ul>
-      <li>Management</li>
-      <li><a href="https://accounts.hetzner.com/login/"><img src="management_icons/hetzner.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Hetzner</a></li>
-      <li><a href="https://dash.cloudflare.com/login/"><img src="management_icons/cloudflare.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Cloudflare</a></li>
-      <li><a href="https://dynadot.com/"><img src="management_icons/dynadot.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> DynaDot</a></li>
-    </ul>
+                <a href="https://bankofamerica.com/">
+                    <img src="personal_icons/bankofamerica.png"/>
+                    BofA
+                </a>
 
-    <ul>
-      <li>Entertainment</li>
-      <li><a href="https://netflix.com/login/"><img src="entertainment_icons/netflix.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Netflix</a></li>
-      <li><a href="https://disneyplus.com/login/"><img src="entertainment_icons/disney.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Disney+</a></li>
-      <li><a href="https://youtube.com/"><img src="entertainment_icons/youtube.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> YouTube</a></li>
-      <li><a href="https://lichess.org/"><img src="entertainment_icons/lichess.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> lichess</a></li>
-    </ul>
+                <a href="https://americanexpress.com/">
+                    <img src="personal_icons/americanexpress.jpg"/>
+                    AMEX
+                </a>
 
-    <ul>
-      <li>Shopping</li>
-      <li><a href="https://amazon.com/"><img src="shopping_icons/amazon.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Amazon</a></li>
-      <li><a href="https://adagio.com/"><img src="shopping_icons/adagio.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Adagio Teas</a></li>
-      <li><a href="https://baileyhats.com/"><img src="shopping_icons/baileyhats.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Bailey Hats</a></li>
-    </ul>
-  </nav>
+                <a href="https://discover.com/"><img src="personal_icons/discover.png"/>
+                    Discover
+                </a>
+            </div>
 
-  <main_title><span>[ami@Internet] &gt; </span>[...]</main_title>
+            <div class="link_box">
+                <h2>School</h2>
 
-</body>
+                <a href="https://my.astate.edu/">
+                    <img src="university_icons/myastate.png"/>
+                    MyAstate
+                </a>
+
+                <a href="https://arkansasstateuniversity.instructure.com">
+                    <img src="university_icons/canvas.png"/>
+                    Canvas
+                </a>
+
+                <a href="https://ssb.astate.edu/">
+                    <img src="university_icons/banner.png"/>
+                    Banner
+                </a>
+            </div>
+
+            <!-- <ul>
+                <li>Personal</li>
+                <li><a href="https://proton.me/"><img src="personal_icons/proton.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Proton</a></li>
+                <li><a href="https://simplelogin.io/"><img src="personal_icons/simplelogin.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> SimpleLogin</a></li>
+                <li><a href="https://bankofamerica.com/"><img src="personal_icons/bankofamerica.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> BofA</a></li>
+                <li><a href="https://americanexpress.com/"><img src="personal_icons/americanexpress.jpg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> AMEX</a></li>
+                <li><a href="https://discover.com/"><img src="personal_icons/discover.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Discover</a></li>
+            </ul>
+
+            <ul>
+            <li>University</li>
+            <li><a href="https://my.astate.edu/"><img src="university_icons/myastate.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> MyAstate</a></li>
+            <li><a href="https://arkansasstateuniversity.instructure.com"><img src="university_icons/canvas.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Canvas</a></li>
+            <li><a href="https://ssb.astate.edu/"><img src="university_icons/banner.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Banner</a></li>
+            </ul>
+
+            <ul>
+            <li>Self-Hosted</li>
+            <li><a href="https://cloud.ami.sc/"><img src="self_hosted_icons/polyhedra.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Polyhedra</a></li>
+            <li><a href="https://git.ami.sc/"><img src="self_hosted_icons/arsenic.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Arsenic</a></li>
+            <li><a href="https://wiki.ami.sc/"><img src="self_hosted_icons/serapeum.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Serapeum</a></li>
+            <li><a href="https://media.ami.sc/"><img src="self_hosted_icons/andromalius.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Pegasus</a></li>
+            </ul>
+
+            <ul>
+            <li>Management</li>
+            <li><a href="https://accounts.hetzner.com/login/"><img src="management_icons/hetzner.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Hetzner</a></li>
+            <li><a href="https://dash.cloudflare.com/login/"><img src="management_icons/cloudflare.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Cloudflare</a></li>
+            <li><a href="https://dynadot.com/"><img src="management_icons/dynadot.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> DynaDot</a></li>
+            </ul>
+
+            <ul>
+            <li>Entertainment</li>
+            <li><a href="https://netflix.com/login/"><img src="entertainment_icons/netflix.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Netflix</a></li>
+            <li><a href="https://disneyplus.com/login/"><img src="entertainment_icons/disney.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Disney+</a></li>
+            <li><a href="https://youtube.com/"><img src="entertainment_icons/youtube.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> YouTube</a></li>
+            <li><a href="https://lichess.org/"><img src="entertainment_icons/lichess.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> lichess</a></li>
+            </ul>
+
+            <ul>
+            <li>Shopping</li>
+            <li><a href="https://amazon.com/"><img src="shopping_icons/amazon.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Amazon</a></li>
+            <li><a href="https://adagio.com/"><img src="shopping_icons/adagio.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Adagio Teas</a></li>
+            <li><a href="https://baileyhats.com/"><img src="shopping_icons/baileyhats.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Bailey Hats</a></li>
+            </ul> -->
+        </nav>
+
+        <footer>
+            <h1>[ami@Internet]</h1>
+        </footer>
+
+    </body>
 </html>