ColormaticStudios/colormaticwebsite
Archived
5
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
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;
}