Better pronouns page! and new CSS!!!

static/index.html

@@ -11,6 +11,8 @@
 
     <title>Violet's Purgatory</title>
 
+    <!-- <link rel="icon" type="image/x-icon" href="https://api.lanyard.rest/534132311781015564.png"> -->
+
     <meta content="Violet's Purgatory" property="og:title" />
     <meta content="Welcome to Violet's Purgatory! I'm Violet, a 14yo web and game developer. On my site i'm hosting various services, so please check out the site for more info!!! \u200B Pronouns: They/Them " property="og:description" />
     <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
@@ -37,9 +39,9 @@
                 <p class="chip"><a href="/socials">Socials</a></p>
                 <p class="chip"><a href="/pronouns">Pronouns</a></p>
                 <br>
-                <p class="chip d-md-inline-block d-none">Fediverse: <a rel="me" href="https://tech.lgbt/@Bingus_Violet" >@Bingus_Violet@tech.lgbt</a></p>
+                <p class="d-md-inline-block d-none">Fediverse: <a rel="me" href="https://tech.lgbt/@Bingus_Violet" >@Bingus_Violet@tech.lgbt</a></p>
-                <p class="chip d-md-inline-block d-none" style="border-color: red;">Ko-Fi: <a href="https://ko-fi.com/bingus_violet"
+                <p class="d-md-inline-block d-none" style="border-color: red;">Ko-Fi: <a href="https://ko-fi.com/bingus_violet"
-                        style="color: rgb(255, 100, 100)">bingus_violet</a> - Please donate!</p>
+                        style="color: rgb(255, 0, 0)">bingus_violet</a> - Please donate!</p>
                 <p class="d-sm-block d-none">If you have any problems with the site, put up an issue on <a
                         href="https://codeberg.org/Bingus_Violet/Violets-Purgatory">codeberg!</a></p>
             </div>

static/pronouns/index.html

@@ -5,6 +5,9 @@
     <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">
+
     <title>Pronouns - Violet's Purgatory</title>
 
     <link rel="stylesheet" href="/style.css">
@@ -17,41 +20,45 @@
 
     <br>
     <p class="chip"><a href="/">Home</a></p>
-        <h1>Preferences</h1>
+    <h1>Pronouns</h1>
-        <div class="fadediv">
+    <div class="fadediv row container-fluid">
+        <div class="col-sm-12">
             <p class="chip love">Love</p>
             <p class="chip like">Like</p>
             <p class="chip silly">Fine if used Silly/Jokingly</p>
             <p class="chip fine">Neutral</p>
             <p class="chip hate">Hate</p>
             <hr>
-
+        </div>
-        <h1>Names</h1>
+        <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>
 
-        <h1>Pronouns</h1>
+        <div class="col-sm-6">
+            <h2>Pronouns</h2>
             <p class="chip love">They/Them</p>
-        <p class="chip like">She/Her</p>
+            <p class="chip fine">She/Her, etc...</p>
-        <p class="chip fine">Other</p>
             <p class="chip hate">He/Him</p>
             <hr>
+        </div>
 
-        <h1>Words</h1>
+        <div class="col-sm-6">
             <h2>Honorifics</h2>
             <p class="chip like">Mrs/Ms, Miss, Ma'am</p>
             <p class="chip silly">Sir, Mr</p>
             <p class="chip fine">Mx</p>
+        </div>
 
+        <div class="col-sm-6">
             <h2>Other words</h2>
             <p class="chip love">Any silly Enby/Slime/Moth related terms</p>
             <p class="chip like">Dude, Partner, Bro</p>
             <p class="chip silly">Guy, Pardner</p>
-
+        </div>
-        <hr>
-        <h2>This page will be updated over time!</h2>
 
     </div>
 </body>

static/style.css

@@ -20,7 +20,7 @@ h2 {
 body, html {
     overflow-x: hidden;
     margin: auto;
-    background-color: rgb(30, 5, 60);
+    background-color: rgb(20, 5, 60);
     width: 100vw;
     height: 100vh;
     margin: 0;
@@ -34,7 +34,7 @@ body, html {
 }
 
 a {
-    color: rgb(230, 175, 255);
+    color: rgb(175, 225, 255);
     text-decoration: none;
     display: inline-block;
     transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -43,7 +43,7 @@ a {
 .chip {
     font-size: 1.3rem;
     border: 2px gray solid;
-    border-radius: 8px;
+    /* border-radius: 4px; */
     background-color: black;
     padding: 8px;
     margin: 3px;
@@ -94,8 +94,7 @@ hr {
 }
 
 #card {
-    background-image: linear-gradient(-45deg, rgb(75, 25, 125), rgb(100, 30, 100));
+    background-color: rgb(75, 25, 100);
-    background-color: rgb(50, 25, 100);
     padding: 15px;
     border: 2px white solid;
     margin: auto;