From 1a9a12fb0c48204802a3f2b88d21e61d6d747ac3 Mon Sep 17 00:00:00 2001 From: Zakarya Date: Sun, 24 Nov 2024 13:28:06 -0800 Subject: [PATCH] Add Colormatic Studios page (Work in progress) --- about/index.html | 8 ++-- component/navbar.html | 4 +- css/colormaticstudios.css | 38 ++++++++++++++++++ css/style.css | 33 ++++++++------- index.html | 3 +- studios/index.html | 84 +++++++++++++++++++++++++++++++++++++++ zakarya/index.html | 7 ++-- 7 files changed, 151 insertions(+), 26 deletions(-) create mode 100644 css/colormaticstudios.css create mode 100644 studios/index.html diff --git a/about/index.html b/about/index.html index 5225c9c..ae993f0 100644 --- a/about/index.html +++ b/about/index.html @@ -18,13 +18,14 @@ $(document).ready(function(){ - + +
-
-
+

Colormatic: A non-profit project for creation.

Colormatic is a non-profit project for creating a curated collection of sub-projects that match a high-quality, high attention to detail standard.

+

Colormatic Studios is a creative studio dedicated to giving life to maximum effort projects.

@@ -32,3 +33,4 @@ $(document).ready(function(){
+ diff --git a/component/navbar.html b/component/navbar.html index 8a94551..a9192c9 100644 --- a/component/navbar.html +++ b/component/navbar.html @@ -10,9 +10,11 @@ function toggle_nav_menu() {
+ diff --git a/css/colormaticstudios.css b/css/colormaticstudios.css new file mode 100644 index 0000000..c44893a --- /dev/null +++ b/css/colormaticstudios.css @@ -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; +} diff --git a/css/style.css b/css/style.css index ac3550c..cc40769 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } diff --git a/index.html b/index.html index 0dbc874..476de81 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,9 @@ $(document).ready(function(){ +
-
Featured Colormatic Studios Projects:

Godot Quality First Person Controller

@@ -39,3 +39,4 @@ $(document).ready(function(){
+ diff --git a/studios/index.html b/studios/index.html new file mode 100644 index 0000000..578f723 --- /dev/null +++ b/studios/index.html @@ -0,0 +1,84 @@ + + + + + + + + + + Colormatic Studios + + + + + +
+ +
+
Colormatic Studios
+
+ +
+

Links:

+ +
+ +
+
+

A project that we are working on

+
+
This is an example image
+

This is a description of the project that we are working on

+
+
+
+

A project that we are working on

+
+
This is an example image
+

This is a description of the project that we are working on

+
+
+
+

A project that we are working on

+
+
This is an example image
+

This is a description of the project that we are working on

+
+
+
+

A project that we are working on

+
+
This is an example image
+

This is a description of the project that we are working on

+
+
+
+

A project that we are working on

+
+
This is an example image
+

This is a description of the project that we are working on

+
+
+
+
+ +
+
+ + + diff --git a/zakarya/index.html b/zakarya/index.html index fa4d684..368b189 100644 --- a/zakarya/index.html +++ b/zakarya/index.html @@ -26,12 +26,11 @@ $(document).ready(function(){

Links: