YEET

aboutContact.html

@@ -20,9 +20,9 @@
 
     <div class="navbar">
         <a class="homeButton" href="/"><img src="/img/logos/toolkitNoLogoTrans.png" alt="Return Home">&nbsp;Dabbler's Toolkit</a>
-        <a href="noteTaking.html">Note-Taking</a>
-        <a href="timeManagement.html">Time-Management</a>
-        <a href="readLater.html">Read-it-Later</a> 
+        <a href="/category/noteTaking.html">Note-Taking</a>
+        <a href="/category/timeManagement.html">Time-Management</a>
+        <a href="/category/readLater.html">Read-it-Later</a> 
     </div>
 
 

category/noteTaking.html

@@ -39,7 +39,7 @@
 
 <br><br><br>
 
-<footer class="credits shadow">©️ 2023 | Licensed Under GPL-3.0 | <a href="aboutContact.html">About / Contact Us</a> </footer>
+<footer class="credits shadow">©️ 2023 | Licensed Under GPL-3.0 | <a href="/aboutContact.html">About / Contact Us</a> </footer>
 
 
 

category/noteTaking/evernote.html

@@ -19,9 +19,9 @@
 
     <div class="navbar">
         <a class="homeButton" href="/"><img src="/img/logos/toolkitNoLogoTrans.png" alt="Return Home">&nbsp;Dabbler's Toolkit</a>
-        <a class="active" href="noteTaking.html">Note-Taking</a>
-        <a href="timeManagement.html">Time-Management</a>
-        <a href="readLater.html">Read-it-Later</a> 
+        <a class="active" href="/category/noteTaking.html">Note-Taking</a>
+        <a href="/category/timeManagement.html">Time-Management</a>
+        <a href="/category/readLater.html">Read-it-Later</a> 
     </div>
 
 

category/readLater.html

@@ -40,7 +40,7 @@
 
     <br>
 
-    <footer class="credits shadow">©️ 2023 | Licensed Under GPL-3.0 | <a href="aboutContact.html">About / Contact Us</a> </footer>
+    <footer class="credits shadow">©️ 2023 | Licensed Under GPL-3.0 | <a href="/aboutContact.html">About / Contact Us</a> </footer>
 
 
 </body>

category/timeManagement.html

@@ -39,7 +39,7 @@
 
     <br>
 
-    <footer class="credits shadow">©️ 2023 | Licensed Under GPL-3.0 | <a href="aboutContact.html">About / Contact Us</a> </footer>
+    <footer class="credits shadow">©️ 2023 | Licensed Under GPL-3.0 | <a href="/aboutContact.html">About / Contact Us</a> </footer>
 
 
 

index.html

@@ -24,18 +24,29 @@ <h1>Dabbler's Toolkit</h1>
     <p class="subtitle">Privacy-centric guides on Productivity apps. Find apps that protect you and your data from surveillance.</p>
 
     <h3>Popular Categories</h3>
-
-    <a href="./category/noteTaking.html">Note Taking</a>
-    <a href="./category/timeManagement.html">Time Management</a>
-    <a href="./category/readLater.html">Read-it-later</a>
-
+</div>
+
+<div class="hpCategories">
+    <a class="homepageButton" href="./category/noteTaking.html">
+        <img class="buttonFlexColumn" src="/img/noteTaking/notetaking.svg" alt="">
+        <p>Note Taking</p>
+    </a>
+    <a class="homepageButton" href="./category/timeManagement.html">
+        <img src="/img/timeManagement/timeManagement.svg" alt="">
+        <p>Time Management</p>
+    </a>
+    <a class="homepageButton" href="./category/readLater.html">
+        <img src="img/readLater/bookmark.svg" alt="">
+        <p>Read-it-later</p>
+    </a>
+</div>
 
     <a href=""></a>
 
     <br>
 
     <footer class="credits shadow">©️ 2023 | Licensed Under GPL-3.0 | <a href="aboutContact.html">About / Contact Us</a> </footer>
 
-</div>    
+
 </body>
 </html>

style.css

@@ -58,11 +58,53 @@ body {
 /* || Homepage */
 
 .homepage img {
-    width: 20rem;
+    width: 50%;
     max-width: 100%;
     height: auto;
 }
 
+.center {
+    width: 50%;
+    margin: auto;
+}
+
+.hpCategories {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 50%;
+    margin: auto;
+}
+
+.homepageButton {
+    width: 10rem;
+    height: 10rem;
+    background-color: #111;;
+    padding: 1.25em;
+    margin: 1em;
+    text-align: center;
+    text-decoration: none;
+    border-radius: .5rem;
+    font-family: inter, sans-serif;
+    font-weight: 200;
+}
+
+.homepageButton p {
+    padding: 1rem;
+}
+
+.homepageButton img {
+    display: block;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    width: 50%;
+    filter: invert(70%);
+}
+
+
+
 
 /* || Header, Footer, and Main Nagivation */
 
@@ -103,9 +145,6 @@ body {
     flex-direction: row;
 }
 
-.navbar a.about {
-    float: right;
-}
 
 @media screen and (max-width: 700px) {
     .navbar a {