ColormaticStudios/colormaticwebsite
Archived
5
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
Download Patch File Download Diff File Expand all files Collapse all files

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