From f44d193dfb12ec2bfc99f33dcc75cda672f91e08 Mon Sep 17 00:00:00 2001
From: Violet <violet@violets-purgatory.dev>
Date: Tue, 16 Apr 2024 20:01:16 +0000
Subject: [PATCH] Links are in a grid layout

---
 static/index.html | 4 ++--
 static/root.css   | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/static/index.html b/static/index.html
index 4cb0cda..fd9be2d 100644
--- a/static/index.html
+++ b/static/index.html
@@ -45,14 +45,14 @@
             <hr>
            <div>
                 <p style="padding: 10px;">Hi! I'm Violet, a 15 year old web and game developer. I aspire to make server-sided dynamic websites, with no Javascript required! I'm currently making games in the Godot Engine, and my dynamic sites in NodeJS.</p>
+                <div class="linkContainer">
                     <a class="chip" href="./socials/">Socials</a>
                     <a class="chip" href="./faq">Nerd FAQ</a>
                     <a class="chip" href="./stats">Stats</a>
-                    <br>
                     <a class="chip" href="https://{BRANCH_SUB}violets-purgatory.dev">{BRANCH_NAME} site</a>
                     <a class="chip" href="https://blog.violets-purgatory.dev">Blog</a>
                     <a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a>
-                    
+                </div>
                     <br>
                     {CUSTOM_STATUS}
             </div>
diff --git a/static/root.css b/static/root.css
index be036ec..33b832c 100644
--- a/static/root.css
+++ b/static/root.css
@@ -24,6 +24,15 @@
     box-shadow: outset rgb(35, 20, 60) 0px 0px 20px;
 }
 
+@media screen and (min-width: 400px) {
+    .linkContainer {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        max-width: 500px;
+        margin: auto;
+    }
+}
+
 .animatedTitle {
     animation: mainText 2s cubic-bezier(0.075, 0.82, 0.165, 1);
     margin: auto;