From 10691a7bc3f4772681b6442dc072182deffc00c8 Mon Sep 17 00:00:00 2001
From: Sophie Axebane <ideleted@system64.dev>
Date: Wed, 6 Mar 2024 15:48:58 -0600
Subject: [PATCH] WIP: Final concept of the characters page

The final will likely use JS and JSON to dynamically add characters rather than being hard coded like they are in this example/concept
---
 characters/index.html   | 32 ++++++++++++++++++++++++++++----
 styles/main_style.css   |  1 -
 styles/window_style.css | 23 ++++++++++++++++-------
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/characters/index.html b/characters/index.html
index 35b41dd..de9f393 100644
--- a/characters/index.html
+++ b/characters/index.html
@@ -20,8 +20,8 @@
         <input class="taskbar" type="button" onclick="location.href='../characters/index.html';" value="Characters">
         <input class="taskbar" type="button" onclick="location.href='https://git.system64.dev'" value="Code (Gitea)">
     </div> 
-    <div class="container">
-        <div class="window">
+    <div class="container" style="flex-direction: column; display:inline-flex">
+        <div class="window char-window">
             <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
             <img src="preview/ponytown_technocolor.png">
             <h1>Technocolor</h1>
@@ -33,8 +33,32 @@
            </ul>
            <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
         </div>
-    <!-- trying something with putting this outside the flexbox.. --> 
-    <div class="window" style="width:45vh; float:right;">
+        <div class="window char-window">
+            <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
+            <img src="preview/ponytown_technocolor.png">
+            <h1>Technocolor 2</h1>
+            <p>no way, a second one!</p>
+           <ul>
+            <li>Trans (FtM)</li>
+            <li>Alicorn</li>
+            <li>Music pony</li>
+           </ul>
+           <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
+        </div>
+        <div class="window char-window">
+            <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
+            <img src="preview/ponytown_technocolor.png">
+            <h1>Technocolor 3</h1>
+            <p>what the fuck, three????</p>
+           <ul>
+            <li>Trans (FtM)</li>
+            <li>Alicorn</li>
+            <li>Music pony</li>
+           </ul>
+           <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
+        </div>
+    </div>
+    <div class="window" id="char-sidebar" style="width:45vh;">
         <div class="window_titlebar"><h3 class="window">Can I draw your characters?</h3></div>
         <h1>Absolutely!</h1>
         <p>Anyone can draw my characters, there's not much that makes me happier than seeing art of my characters. It doesn't even have to be the greatest!</p>
diff --git a/styles/main_style.css b/styles/main_style.css
index cdb0127..9e35587 100644
--- a/styles/main_style.css
+++ b/styles/main_style.css
@@ -55,7 +55,6 @@ body {
 
 .container {
     display: flex;
-    flex-direction: row;
 }
 
 div.main {
diff --git a/styles/window_style.css b/styles/window_style.css
index 43c1a3b..67c42bf 100644
--- a/styles/window_style.css
+++ b/styles/window_style.css
@@ -23,20 +23,29 @@ div.window {
     border-width: 5px;
     border-color: #e9e9e9;
     
-    overflow-y: auto;
-    width: 40vw;
-    max-width: 80vw;
+    overflow-y: auto; /* I don't even know what this does, or why it's here... */
+
     padding-top: 4vh;
     padding-bottom: 1vh;
     padding-left: 1vh;
 
-    max-height: 60vh;
+   
     background-color: #e9e9e9;
-
-    margin: 10vh 1vh auto 25vh;
-
+    margin-left: 25vh;
+    margin-top: 10vh;
 }
 
+.char-window {
+    width: 40vw;
+    max-width: 60vw;
+    max-height: 60vh;
+}
+/* I don't know what I'm doing :D */
+#char-sidebar {
+    float: right;
+    margin-right: 25vh;
+    margin-left: auto;
+}
 img {
     float: right;
 }