From 573f02df52379ca3863eb2ac466a4becaadbc29c Mon Sep 17 00:00:00 2001
From: bingus_violet <violet@violets-purgatory.dev>
Date: Sat, 30 Mar 2024 01:42:20 -0500
Subject: [PATCH] Make card image with text better

---
 static/asahi/index.html | 13 +++++++++----
 static/index.html       | 16 +++++++++++-----
 static/root.css         |  5 +++++
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/static/asahi/index.html b/static/asahi/index.html
index 94fa36c..80031f3 100644
--- a/static/asahi/index.html
+++ b/static/asahi/index.html
@@ -30,10 +30,15 @@
         <div id="card">
             <h2>Asahi</h2>
             <div style="display: flex; justify-content: center; align-items: center;">
-                <img src="/imgs/asahiPFP.png" class="pfp">
-                <div>
-                    <p>They/Them</p>
-                    <p>Marcy & Violet &lt;3 </p>
+                <div style="width: 50%;">
+                    <img src="/imgs/asahiPFP.png" class="pfp">
+                </div>
+                <div style="width: 50%;">
+                    <div style="display: inline-block; float: left;">
+                        <p>They/Them</p>
+                        <p>Marcy & Violet &lt;3</p>
+                    </div>
+                    <!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
                 </div>
             </div>
             <hr>
diff --git a/static/index.html b/static/index.html
index 6bbf570..0889385 100644
--- a/static/index.html
+++ b/static/index.html
@@ -27,11 +27,17 @@
         <div id="card">
             <h2>{Violet}</h2>
             <div style="display: flex; justify-content: center; align-items: center;">
-                <img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
-                <div>
-                    <p>They/Them</p>
-                    <p>Developer</p>
-                    <p>{DISCORD_STATUS}</p>
+                <div style="width: 50%;">
+                    <img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
+                </div>
+                <div style="width: 50%;">
+                    <div style="display: inline-block; float: left;">
+                        <p>They/Them</p>
+                        <p>Developer</p>
+                        <p>Dating Asahi &lt;3</p>
+                        <p>{DISCORD_STATUS}</p>
+                    </div>
+                    <!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
                 </div>
             </div>
             <hr>
diff --git a/static/root.css b/static/root.css
index 492cf3d..be036ec 100644
--- a/static/root.css
+++ b/static/root.css
@@ -40,12 +40,17 @@
 .pfp {
     border-radius: 15px;
     border: darkgray 4px solid;
+    float: right;
     width: 60%;
     aspect-ratio: 1/1;
     transform: scale(0.9);
     border-radius: 50%;
 }
 
+.CLAlign {
+    display: inline-block;
+}
+
 .activity {
     border-width: 3px;
     border-radius: 10px;