characters/index.html

@@ -4,8 +4,7 @@
     <link rel="stylesheet" type="text/css" href="../styles/button_style.css"> <!-- Button styling -->
     <link rel="stylesheet" type="text/css" href="../styles/window_style.css"> <!-- Window Styling -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/favicon/favicon.png">
-    <title>system64.dev - characters</title>
+    <title>system64.dev - OCs</title>
     <!-- embed -->
     <meta content="system64.dev" property="og:title" />
     <meta content="The site of IDeletedSystem64 on the World Wide Web thingamajig" property="og:description" />
@@ -21,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" style="flex-direction: column; display:inline-flex">
-        <div class="window char-window">
+    <div class="container">
+        <div class="window">
             <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
             <img src="preview/ponytown_technocolor.png">
             <h1>Technocolor</h1>
@@ -34,32 +33,8 @@
            </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 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;">
+    <!-- trying something with putting this outside the flexbox.. --> 
+    <div class="window" style="width:45vh; float:right;">
         <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>

styles/main_style.css

@@ -55,6 +55,7 @@ body {
 
 .container {
     display: flex;
+    flex-direction: row;
 }
 
 div.main {

styles/window_style.css

@@ -23,29 +23,20 @@ div.window {
     border-width: 5px;
     border-color: #e9e9e9;
     
-    overflow-y: auto; /* I don't even know what this does, or why it's here... */
-
+    overflow-y: auto;
+    width: 40vw;
+    max-width: 80vw;
     padding-top: 4vh;
     padding-bottom: 1vh;
     padding-left: 1vh;
 
-   
+    max-height: 60vh;
     background-color: #e9e9e9;
-    margin-left: 25vh;
-    margin-top: 10vh;
+
+    margin: 10vh 1vh auto 25vh;
+
 }
 
-.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;
 }