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

Many changes to the website

Browse Source 
Overhauled the mobile page menu to actually be intuitive
Fixed the video download menu (dark theme and a typo)
Head tags are now consistent between pages
Added alt texts to all images, and proper HTML formatting
A few wording changes here and there
A new link to Colormatic Git
This commit is contained in:
Zakarya
2025-01-14 13:40:43 -08:00
parent 8279c42497
commit affe6bc585
13 changed files with 183 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
about/index.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
@ -10,11 +10,9 @@
<script>
$(document).ready(function(){
$("#navbar").load("/component/navbar.html")
})
$(document).ready(function(){
$("#footer").load("/component/footer.html")
})
$("#navbar").load("/component/navbar.html");
$("#footer").load("/component/footer.html");
});
</script>
</head>
<body>
@ -27,7 +25,7 @@ $(document).ready(function(){
<div class="hero panel">
<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>
<p class="justify">Colormatic Studios is a creative studio dedicated to giving life to these maximum effort projects.</p>
</div>
</main>

24
component/navbar.html
View File

@ -1,19 +1,29 @@
<nav>
<script>
var menu = document.getElementById("menu");
function toggle_nav_menu() {
menu.classList.toggle("responsive-hidden")
var pages = document.getElementById("pages");
function toggle_modal_menu() {
pages.classList.toggle("hidden");
}
</script>
<a href="/" class="title nav-left">Colormatic</a>
<img src="/img/colormatic_logo.svg" class="nav-center">
<img src="/img/colormatic_logo.svg" role="img" alt="Colormatic Logo" class="nav-center colormatic-logo" />
<div class="nav-right inline">
<ul id="menu" class="responsive-hidden">
<ul class="responsive-hidden">
<li><a href="/zakarya">Zakarya</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>
<a href="https://git.colormatic.org" class="git-icon" target="_blank" rel="noopener noreferrer"><img src="/img/git-icon.svg" role="img" alt="Colormatic Git" /></a> <!-- Official git logo: https://git-scm.com/downloads/logos -->
<a onclick="toggle_modal_menu();" class="responsive menu-button"><img src="/img/menu.svg" role="img" alt="Menu" /></a> <!-- Bootstrap list icon: https://icons.getbootstrap.com/icons/list -->
</div>
</nav>
<span onclick="toggle_modal_menu();" id="pages" class="modalbg hidden">
<div>
<button class="close"><img src="/img/close.svg" role="img" alt="Close"></button> <!-- Bootstrap x icon: https://icons.getbootstrap.com/icons/x -->
<ul>
<li><a href="/zakarya">Zakarya</a></li>
<li><a href="/studios">Colormatic Studios</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>
</span>

4
css/colormaticstudios.css
View File

@ -27,7 +27,7 @@ div.project-grid-container {
justify-content: center;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
div.project-grid-container {
width: 90%;
}
@ -74,7 +74,7 @@ div.project-grid-container div.project-grid-box img {
border-radius: 8px;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
div.project-grid-container div.project-grid-box {
min-width: 90%;
max-width: 90%;

135
css/style.css
View File

@ -53,11 +53,6 @@ nav .nav-right {
grid-column: 3;
}
nav img {
width: 40px;
height: auto;
}
nav ul {
list-style-type: none;
margin: 0;
@ -70,19 +65,10 @@ nav a {
padding: 8px;
color: var(--text-color);
text-decoration: none;
}
@media screen and (max-width: 800px) {
nav {
padding: 6px 0;
}
nav ul {
flex-direction: column;
}
nav li {
text-align: center;
padding: 4px;
}
display: flex;
cursor: pointer;
align-items: center;
}
nav a.title {
@ -90,31 +76,128 @@ nav a.title {
font-weight: bold;
}
nav button.responsive-button {
span.modalbg.hidden {
display: none;
}
border: none;
span.modalbg {
position: fixed;
z-index: 1;
padding: 0;
margin: auto;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}
span.modalbg div {
width: 60%;
margin: 100px auto;
padding: 16px;
color: var(--text-color);
border-radius: 8px;
box-shadow: 1px 1px 8px #00000033;
background-color: #ffffffbb;
backdrop-filter: blur(5px);
animation-name: modal-animate;
animation-duration: 0.4s
}
@keyframes modal-animate {
from {
transform: translate(0px, -300px);
opacity:0
}
to {
transform: translate(0px, 0px);
opacity: 1;
}
}
span.modalbg div button.close {
float: right;
width: min-content;
background: none;
border: none;
outline: none;
cursor: pointer;
}
span.modalbg div button.close img {
width: auto;
height: 25px;
}
span.modalbg div ul {
list-style-type: none;
margin: 0;
padding: 0;
}
span.modalbg div ul li {
margin: 12px;
}
span.modalbg div ul li a {
color: var(--text-color);
padding: 8px;
text-decoration: none;
font-size: 120%;
}
nav img.colormatic-logo {
width: auto;
height: 40px;
}
nav .menu-button img {
width: 40px;
height: auto;
}
nav .git-icon img {
width: auto;
height: 1.5em;
}
@media (prefers-color-scheme: dark) {
nav button.responsive-button img {
nav a img,
span.modalbg div button.close img {
filter: invert(1);
}
span.modalbg div {
background-color: #000000bb;
}
}
nav div.inline {
display: flex;
}
@media screen and (max-width: 800px) {
nav button.responsive-button {
display: block;
nav a.responsive {
display: none;
}
@media screen and (max-width: 900px) {
nav {
padding: 6px 0;
}
nav .git-icon img {
width: auto;
height: 35px;
}
nav a.responsive {
display: flex;
}
nav ul.responsive-hidden {
display: none;
}
nav a.responsive {
display: initial;
}
}
div.panel {
@ -139,7 +222,7 @@ main div.hero {
text-align: center;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
main div.hero {
width: 80%;
}
@ -175,7 +258,7 @@ main img.banner {
box-shadow: 1px 1px 8px #00000033;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
main img.banner {
width: 95%;
border-radius: 12px;
@ -194,7 +277,7 @@ ul.linktree {
width: 30%;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
ul.linktree {
width: 60%;
}

3
img/close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

4
img/download.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 422 B

1
img/git-icon.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92"><script xmlns=""/><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#100f0d;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

3
img/menu.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

12
index.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
@ -10,11 +10,9 @@
<script>
$(document).ready(function(){
$("#navbar").load("/component/navbar.html")
})
$(document).ready(function(){
$("#footer").load("/component/footer.html")
})
$("#navbar").load("/component/navbar.html");
$("#footer").load("/component/footer.html");
});
</script>
</head>
<body>

18
studios/index.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
@ -11,11 +11,9 @@
<script>
$(document).ready(function(){
$("#navbar").load("/component/navbar.html")
})
$(document).ready(function(){
$("#footer").load("/component/footer.html")
})
$("#navbar").load("/component/navbar.html");
$("#footer").load("/component/footer.html");
});
</script>
</head>
<body>
@ -30,21 +28,21 @@ $(document).ready(function(){
<div class="project-grid-box panel">
<h1><a href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person" target="_blank" rel="noopener noreferrer">Quality First Person Controller</a></h1>
<div class="project-grid-box-contents">
<img src="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person/raw/branch/main/icon.svg">
<img src="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person/raw/branch/main/icon.svg" />
<p>An actually good first person controller for the Godot Engine.</p>
</div>
</div>
<div class="project-grid-box panel">
<h1>A Silly Game</h1>
<div class="project-grid-box-contents">
<img src="/studios/img/hatcat.webp">
<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 panel">
<h1>ColorQuest</h1>
<div class="project-grid-box-contents">
<img src="/studios/img/colorquest.png" class="pixelart">
<img src="/studios/img/colorquest.png" class="pixelart" />
<p>A simple MMORPG in your browser.</p>
</div>
</div>

10
video/css/style.css
View File

@ -86,7 +86,7 @@ div.video.container div.download-dropdown div.dropdown-content ul li a {
color: var(--text-color);
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
div.video.container {
display: block;
}
@ -100,4 +100,10 @@ div.video.container div.download-dropdown div.dropdown-content ul li a {
margin-right: auto;
margin-top: 12px;
}
}
}
@media (prefers-color-scheme: dark) {
div.video.container div.download-dropdown div.dropdown-content {
background-color: #444444;
}
}

20
video/index.html
View File

@ -2,20 +2,18 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="/img/colormatic_logo.svg">
<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="/video/css/style.css">
<script src="/js/jquery.js"></script>
<link rel="icon" type="image/svg" href="/img/colormatic_logo.svg">
<title>Video Player</title>
<script>
$(document).ready(function(){
$("#navbar").load("/component/navbar.html")
})
$(document).ready(function(){
$("#footer").load("/component/footer.html")
})
$("#navbar").load("/component/navbar.html");
$("#footer").load("/component/footer.html");
});
</script>
</head>
<body>
@ -32,10 +30,10 @@ $(document).ready(function(){
</div>
<div class="dropdown-container">
<div class="download-dropdown">
<img src="https://icons.getbootstrap.com/assets/icons/download.svg" alt="Download">
<img src="/img/download.svg" role="img" alt="Download" /> <!-- Bootstrap download icon: https://icons.getbootstrap.com/icons/download -->
<div class="dropdown-content">
<ul>
<li><a id="videodownload">Downolad Video</a></li>
<li><a id="videodownload">Download Video</a></li>
<li><a id="sourcedownload">Download Source</a></li>
</ul>
</div>
@ -48,4 +46,4 @@ $(document).ready(function(){
<script src="/video/js/main.js"></script>
</body>
</html>
</html>

18
zakarya/index.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
@ -10,11 +10,9 @@
<script>
$(document).ready(function(){
$("#navbar").load("/component/navbar.html")
})
$(document).ready(function(){
$("#footer").load("/component/footer.html")
})
$("#navbar").load("/component/navbar.html");
$("#footer").load("/component/footer.html");
});
</script>
</head>
<body>
@ -24,7 +22,7 @@ $(document).ready(function(){
<header class="container" id="navbar"></header>
<main>
<img class="banner" src="/img/zakarya-banner.png">
<img class="banner" src="/img/zakarya-banner.png" role="img" alt="Banner Image" />
<div class="hero panel">
<h1>Links:</h1>
@ -41,11 +39,11 @@ $(document).ready(function(){
<h1>Featured Videos:</h1>
<ul class="videolist">
<li><a href="/video?c=zakarya&v=the-way-forward">
<img src="https://files.colormatic.org/zakarya/videos/thumbnail/wayforward.png">
<img src="https://files.colormatic.org/zakarya/videos/thumbnail/wayforward.png" alt="Video Thumbnail" />
<span class="title">The Way Forward</span>
</a></li>
<li><a href="/video?c=zakarya&v=hello-world">
<img src="https://files.colormatic.org/zakarya/videos/thumbnail/helloworld.png">
<img src="https://files.colormatic.org/zakarya/videos/thumbnail/helloworld.png" alt="Video Thumbnail" />
<span class="title">Hello World</span>
</a></li>
</ul>