From 4bda16a35cd69851fb86de2ae5f3f84b10010d95 Mon Sep 17 00:00:00 2001
From: Zakarya <zakarya@colormatic.org>
Date: Tue, 26 Nov 2024 20:10:55 -0800
Subject: [PATCH] Fill in project details and add mobile support to Colormatic
 Studios page

---
 css/colormaticstudios.css | 35 +++++++++++++++++++++++++++++++----
 css/style.css             | 10 +++++++++-
 index.html                |  2 +-
 studios/index.html        | 38 ++++++++++++--------------------------
 4 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/css/colormaticstudios.css b/css/colormaticstudios.css
index 8777dfd..f684455 100644
--- a/css/colormaticstudios.css
+++ b/css/colormaticstudios.css
@@ -11,8 +11,10 @@ div.heading {
 div.heading h1 {
   color: white;
   background-color: #00000088;
-  padding: 28px 42px;
+  padding: 28px 38px;
   border-radius: 16px;
+  font-size: 180%;
+  box-shadow: 1px 1px 8px #00000033;
   backdrop-filter: blur(5px);
 }
 
@@ -29,6 +31,14 @@ div.project-grid-container {
   div.project-grid-container {
     width: 90%;
   }
+
+  div.heading {
+    height: 200px;
+  }
+
+  div.heading h1 {
+    font-size: 100%;
+  }
 }
 
 div.project-grid-container div.project-grid-box {
@@ -44,13 +54,30 @@ flex: 1;
   max-width: 50%;
 }
 
+div.project-grid-container div.project-grid-box h1 a {
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+div.project-grid-container div.project-grid-box div.project-grid-box-contents { /* Yes, this absurdly long element selector is a joke */
+  display: flex;
+  justify-content: center;
+}
+
+div.project-grid-container div.project-grid-box img {
+  max-width: 150px;
+  max-height: 100px;
+  margin: 12px;
+  border-radius: 8px;
+}
+
 @media screen and (max-width: 800px) {
   div.project-grid-container div.project-grid-box {
     min-width: 90%;
     max-width: 90%;
   }
-}
 
-div.project-grid-container div.project-grid-box div.project-grid-box-contents {
-  display: flex;
+  div.project-grid-container div.project-grid-box img {
+    max-width: 100px;
+  }
 }
diff --git a/css/style.css b/css/style.css
index 23232b3..48946ac 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,6 +4,7 @@
 
 body {
   font-family: "Noto Sans", sans-serif;
+  margin: 0;
 }
 
 nav {
@@ -13,7 +14,8 @@ nav {
   padding: 12px;
   border-bottom: solid 1px #00000033;
 
-  width: 100%;
+  margin: 0 auto;
+  width: 95%;
   box-sizing: border-box;
   overflow-wrap: anywhere;
 }
@@ -202,9 +204,15 @@ div.double-linktree ul.linktree {
 
 div.footer {
   border-top: solid 1px #00000033;
+  width: 95%;
+  margin: 0 auto;
 }
 
 div.footer p {
   color: var(--text-color);
   text-align: center;
 }
+
+img.pixelart {
+  image-rendering: pixelated;
+}
diff --git a/index.html b/index.html
index 476de81..6612f31 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@ $(document).ready(function(){
     <main>
       <div class="heading">Featured Colormatic Studios Projects:</div>
       <div class="hero">
-        <h1><a href="https://github.com/ColormaticStudios/quality-godot-first-person-2" target="_blank" rel="noopener noreferrer">Godot Quality First Person Controller</a></h1>
+        <h1><a href="https://github.com/ColormaticStudios/quality-godot-first-person-2" target="_blank" rel="noopener noreferrer">Quality First Person Controller</a></h1>
         <p>An actually good first person controller for the Godot Engine.</p>
       </div>
       <div class="hero">
diff --git a/studios/index.html b/studios/index.html
index 5165057..f64341f 100644
--- a/studios/index.html
+++ b/studios/index.html
@@ -25,39 +25,25 @@ $(document).ready(function(){
       <div class="heading"><h1>Colormatic Studios</h1></div>
 
       <div class="project-grid-container">
+        <div class="project-grid-box">
+          <h1><a href="https://github.com/ColormaticStudios/quality-godot-first-person-2" target="_blank" rel="noopener noreferrer">Quality First Person Controller</a></h1>
+          <div class="project-grid-box-contents">
+            <img src="https://raw.githubusercontent.com/ColormaticStudios/quality-godot-first-person-2/refs/heads/main/icon.svg">
+            <p>An actually good first person controller for the Godot Engine.</p>
+          </div>
+        </div>
         <div class="project-grid-box">
           <h1>A Silly Game</h1>
           <div class="project-grid-box-contents">
-            <div style="width:100px;height:100px;background-color:green;margin:12px">This is an example image</div>
+            <img src="/studios/img/hatcat.webp">
             <p>This is a silly little game project to get us started.</p>
           </div>
         </div>
         <div class="project-grid-box">
-          <h1>A project that we are working on</h1>
+          <h1>ColorQuest</h1>
           <div class="project-grid-box-contents">
-            <div style="width:100px;height:100px;background-color:green;margin:12px">This is an example image</div>
-            <p>This is a description of the project that we are working on</p>
-          </div>
-        </div>
-        <div class="project-grid-box">
-          <h1>A project that we are working on</h1>
-          <div class="project-grid-box-contents">
-            <div style="width:100px;height:100px;background-color:green;margin:12px">This is an example image</div>
-            <p>This is a description of the project that we are working on</p>
-          </div>
-        </div>
-        <div class="project-grid-box">
-          <h1>A project that we are working on</h1>
-          <div class="project-grid-box-contents">
-            <div style="width:100px;height:100px;background-color:green;margin:12px">This is an example image</div>
-            <p>This is a description of the project that we are working on</p>
-          </div>
-        </div>
-        <div class="project-grid-box">
-          <h1>A project that we are working on</h1>
-          <div class="project-grid-box-contents">
-            <div style="width:100px;height:100px;background-color:green;margin:12px">This is an example image</div>
-            <p>This is a description of the project that we are working on</p>
+            <img src="/studios/img/colorquest.png" class="pixelart">
+            <p>A simple MMORPG in your browser.</p>
           </div>
         </div>
       </div>
@@ -79,7 +65,7 @@ $(document).ready(function(){
       </div>
     </main>
 
-    <div style="margin-top: 10%;"></div><!-- Separator -->
+    <div style="margin-top: 5%;"></div><!-- Separator -->
     <footer id="footer"></footer>
   </body>
 </html>