Improved Socials page!

static/pronouns/index.html

@@ -28,25 +28,24 @@
             <p class="chip silly">Fine if used Silly/Jokingly</p>
             <p class="chip fine">Neutral</p>
             <p class="chip hate">Hate</p>
-            <hr>
         </div>
         <div class="col-sm-6">
             <h2>Names</h2>
             <p class="chip love">Violet, Vivi, Vi, V</p>
             <p class="chip like">Purple</p>
             <p class="chip silly">Purple guy</p>
-            <hr>
         </div>
 
         <div class="col-sm-6">
+            
             <h2>Pronouns</h2>
             <p class="chip love">They/Them</p>
             <p class="chip fine">She/Her, etc...</p>
             <p class="chip hate">He/Him</p>
-            <hr>
         </div>
 
         <div class="col-sm-6">
+            <hr>
             <h2>Honorifics</h2>
             <p class="chip like">Mrs/Ms, Miss, Ma'am</p>
             <p class="chip silly">Sir, Mr</p>
@@ -54,6 +53,7 @@
         </div>
 
         <div class="col-sm-6">
+            <hr>
             <h2>Other words</h2>
             <p class="chip love">Any silly Enby/Slime/Moth related terms</p>
             <p class="chip like">Dude, Partner, Bro</p>

static/socials/index.html

@@ -5,8 +5,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <link rel="stylesheet" href="/style.css">
 
+
     <title>Socials - Violet's Purgatory</title>
 </head>
 
@@ -16,22 +19,38 @@
     <h1>Socials
         <hr>
     </h1>
-    <div class="fadediv">
+    <div class="fadediv row container-fluid">
+
+        <div class="col-sm-6">
             <h2>Chat Applications:</h2>
             <p class="chip"><span style="color: limegreen">Matrix</span>: @bingus_violet:catgirl.cloud</p>
             <p class="chip"><span style="color: red;">Revolt</span>: BingusViolet#5573</p>
             <p class="chip"><span style="color: rgb(125, 150, 225)">Discord</span>: bingus_violet</p>
+            
+        </div>
+
+        <div class="col-sm-6">
             <h2>Social media:</h2>
             <p class="chip" style="color: rgb(200, 175, 255);">Fedi: <a
                     href="https://tech.lgbt/@Bingus_Violet">@Bingus_Violet@tech.lgbt</a></p>
             <p class="chip" style="color: rgb(255, 80, 80)">Youtube: <a
                     href="https://www.youtube.com/channel/UChcrBJNJLZucy3TPyGyAY2g">Violet's Fiasco</a></p>
+        </div>
+
+        <div class="col-sm-6">
+            <hr>
             <h2>Git sites:</h2>
             <p class="chip">Github: <a href="https://github.com/Violets-puragtory">Violets-puragtory</a></p>
-        <p class="chip" style="color: aqua">Codeberg: <a href="https://codeberg.org/Bingus_Violet">Bingus_Violet</a></p>
+            <p class="chip" style="color: aqua">Codeberg: <a href="https://codeberg.org/Bingus_Violet">Bingus_Violet</a>
+            </p>
+        </div>
+
+        <div class="col-sm-6">
+            <hr>
             <h2>Game sites:</h2>
             <p class="chip" style="color: darkgrey">Steam: <a
                     href="https://steamcommunity.com/id/Violet-The-Thigh-high-obtainer/">Violet</a></p>
+        </div>
 
     </div>
 </body>