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>