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

Add Colormatic Studios page (Work in progress)

Browse Source
This commit is contained in:
Zakarya
2024-11-24 13:28:06 -08:00
parent f96378c859
commit 1a9a12fb0c
7 changed files with 151 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
about/index.html
View File

@ -18,13 +18,14 @@ $(document).ready(function(){
</script>
</head>
<body>
<header class="container" id="navbar"></header>
<header id="navbar"></header>
<div style="margin-top: 10%;"></div><!-- Separator -->
<main class="container">
<div style="margin-top: 10%;"></div><!-- Separator -->
<main>
<div class="hero">
<h1>Colormatic: A non-profit project for creation.</h1>
<p class="justify">Colormatic is a non-profit project for creating a curated collection of sub-projects that match a high-quality, high attention to detail standard.</p>
<p class="justify">Colormatic Studios is a creative studio dedicated to giving life to maximum effort projects.</p>
</div>
</main>
@ -32,3 +33,4 @@ $(document).ready(function(){
<footer id="footer"></footer>
</body>
</html>

4
component/navbar.html
View File

@ -10,9 +10,11 @@ function toggle_nav_menu() {
<div class="nav-right inline">
<ul id="menu" class="responsive-hidden">
<li><a href="/zakarya">Zakarya</a></li>
<li><a href="https://github.com/ColormaticStudios" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<!--<li><a href="https://github.com/ColormaticStudios" target="_blank" rel="noopener noreferrer">GitHub</a></li>-->
<li><a href="/studios">Colormatic Studios</a></li>
<li><a href="/about">About</a></li>
</ul>
<button onclick="toggle_nav_menu();" class="responsive-button"><img src="https://icons.getbootstrap.com/assets/icons/list.svg"></button>
</div>
</nav>

38
css/colormaticstudios.css Normal file
View File

@ -0,0 +1,38 @@
div.project-grid-container {
display: flex;
width: 80%;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
justify-content: center;
}
@media screen and (max-width: 800px) {
div.project-grid-container {
width: 90%;
}
}
div.project-grid-container div.project-grid-box {
flex: 1;
color: #383c3f;
margin: 16px;
border: solid 1px #00000033;
border-radius: 8px;
box-shadow: 1px 1px 8px #00000033;
padding: 16px;
text-align: center;
min-width: 40%;
max-width: 50%;
}
@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;
}

33
css/style.css
View File

@ -1,12 +1,14 @@
:root {
--text-color: #383c3f;
}
body {
font-family: sans-serif;
font-family: "Noto Sans", sans-serif;
}
nav {
display: grid;
grid-template-columns: 1fr min-content 1fr;
/*flex-direction: row;
justify-content: space-between;*/
align-items: center;
padding: 12px;
border-bottom: solid 1px #00000033;
@ -17,19 +19,16 @@ nav {
}
nav .nav-left {
/*justify-content: flex-start;*/
justify-self: left;
grid-column: 1;
}
nav .nav-center {
/*justify-content: center;*/
justify-self: center;
grid-column: 2;
}
nav .nav-right {
/*justify-content: flex-end;*/
justify-self: right;
grid-column: 3;
}
@ -49,11 +48,11 @@ nav ul {
nav a {
padding: 8px;
color: #383c3f;
color: var(--text-color);
text-decoration: none;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 800px) {
nav {
padding: 6px 0;
}
@ -83,7 +82,7 @@ nav div.inline {
display: flex;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 800px) {
nav button.responsive-button {
display: block;
}
@ -93,13 +92,13 @@ nav div.inline {
}
main div.heading {
color: #383c3f;
color: var(--text-color);
font-size: 200%;
text-align: center;
}
main div.hero {
color: #383c3f;
color: var(--text-color);
width: 60%;
margin: 16px auto 16px auto;
border: solid 1px #00000033;
@ -109,14 +108,14 @@ main div.hero {
text-align: center;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 800px) {
main div.hero {
width: 80%;
}
}
main div.hero h1 a {
color: #383c3f;
color: var(--text-color);
text-decoration: none;
}
@ -142,7 +141,7 @@ main img.banner {
box-shadow: 1px 1px 8px #00000033;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 800px) {
main img.banner {
width: 95%;
border-radius: 12px;
@ -161,7 +160,7 @@ ul.linktree {
width: 30%;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 800px) {
ul.linktree {
width: 60%;
}
@ -189,7 +188,7 @@ ul.linktree li a { /* Pill button shape */
ul.linktree li a:hover {
cursor: pointer;
background-color: #383c3f
background-color: var(--text-color);
}
div.footer {
@ -197,6 +196,6 @@ div.footer {
}
div.footer p {
color: #383c3f;
color: var(--text-color);
text-align: center;
}

3
index.html
View File

@ -19,9 +19,9 @@ $(document).ready(function(){
</head>
<body>
<header id="navbar"></header>
<div style="margin-top: 10%;"></div><!-- Separator -->
<main>
<div style="margin-top: 10%;"></div><!-- Separator -->
<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>
@ -39,3 +39,4 @@ $(document).ready(function(){
<footer id="footer"></footer>
</body>
</html>

84
studios/index.html Normal file
View File

@ -0,0 +1,84 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js/jquery.js"></script>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/colormaticstudios.css">
<link rel="icon" type="image/svg" href="/img/colormatic_logo.svg">
<title>Colormatic Studios</title>
<script>
$(document).ready(function(){
$("#navbar").load("/component/navbar.html")
})
$(document).ready(function(){
$("#footer").load("/component/footer.html")
})
</script>
</head>
<body>
<header id="navbar"></header>
<div style="margin-top: 10%;"></div><!-- Separator -->
<main>
<div class="heading">Colormatic Studios</div>
<div style="margin-top: 5%;"></div><!-- Separator -->
<div class="hero">
<h1>Links:</h1>
<ul class="linktree">
<li><a href="https://mastodon.social/@colormaticstudios" target="_blank" rel="noopener noreferrer">Mastodon</a></li>
<li><a href="https://www.instagram.com/colormaticstudios/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
<li><a href="https://www.youtube.com/@colormaticstudios" target="_blank" rel="noopener noreferrer">Youtube</a></li>
<li><a href="https://github.com/ColormaticStudios" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="https://bsky.app/profile/colormaticstudios.bsky.social" target="_blank" rel="noopener noreferrer">Bluesky</a></li>
<li><a href="https://x.com/ColormaticStudy" target="_blank" rel="noopener noreferrer">X/Twitter</a></li>
</ul>
</div>
<div class="project-grid-container">
<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>
</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>
</main>
<div style="margin-top: 10%;"></div><!-- Separator -->
<footer id="footer"></footer>
</body>
</html>

7
zakarya/index.html
View File

@ -26,12 +26,11 @@ $(document).ready(function(){
<div class="hero">
<h1>Links:</h1>
<ul class="linktree">
<li><a href="https://mstdn.party/@zakarya" target="_blank" rel="noopener noreferrer">Mastodon</a></li>
<li><a href="https://ko-fi.com/zakarya" target="_blank" rel="noopener noreferrer">Ko-fi</a></li>
<li><a href="https://www.youtube.com/@czakarya" target="_blank" rel="noopener noreferrer">Youtube</a></li>
<li><a href="https://mstdn.party/@zakarya" target="_blank" rel="noopener noreferrer">Mastodon</a></li>
<li><a href="https://ko-fi.com/zakarya" target="_blank" rel="noopener noreferrer">Ko-fi</a></li>
<li><a href="https://www.youtube.com/@czakarya" target="_blank" rel="noopener noreferrer">Youtube</a></li>
<li><a href="https://github.com/CZakarya" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>
</ul>
</div>
</main>