ColormaticStudios/colormaticwebsite
Archived
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fill in project details and add mobile support to Colormatic Studios page

Browse Source
This commit is contained in:
Zakarya
2024-11-26 20:10:55 -08:00
parent db4cd72cd4
commit 4bda16a35c
4 changed files with 53 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/colormaticstudios.css
View File

@ -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;
}
}

10
css/style.css
View File

@ -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;
}

2
index.html
View File

@ -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">

38
studios/index.html
View File

@ -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>