diff --git a/about/index.html b/about/index.html index 616a2b2..d0e6b8e 100644 --- a/about/index.html +++ b/about/index.html @@ -1,7 +1,7 @@ - + - + @@ -10,11 +10,9 @@ @@ -27,7 +25,7 @@ $(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.

+

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

diff --git a/component/navbar.html b/component/navbar.html index 61397d9..50250e9 100644 --- a/component/navbar.html +++ b/component/navbar.html @@ -1,19 +1,29 @@ - + diff --git a/css/colormaticstudios.css b/css/colormaticstudios.css index eae327f..09a5d6f 100644 --- a/css/colormaticstudios.css +++ b/css/colormaticstudios.css @@ -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%; diff --git a/css/style.css b/css/style.css index 5f40f7f..331b809 100644 --- a/css/style.css +++ b/css/style.css @@ -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%; } diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000..fdcc4e8 --- /dev/null +++ b/img/close.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/img/download.svg b/img/download.svg new file mode 100644 index 0000000..90a34a3 --- /dev/null +++ b/img/download.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/img/git-icon.svg b/img/git-icon.svg new file mode 100644 index 0000000..0478d34 --- /dev/null +++ b/img/git-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/menu.svg b/img/menu.svg new file mode 100644 index 0000000..de58858 --- /dev/null +++ b/img/menu.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/index.html b/index.html index 5ff512c..39dad42 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + - + @@ -10,11 +10,9 @@ diff --git a/studios/index.html b/studios/index.html index 4ee88e7..e78f488 100644 --- a/studios/index.html +++ b/studios/index.html @@ -1,7 +1,7 @@ - + - + @@ -11,11 +11,9 @@ @@ -30,21 +28,21 @@ $(document).ready(function(){

Quality First Person Controller

- +

An actually good first person controller for the Godot Engine.

A Silly Game

- +

This is a silly little game project to get us started.

ColorQuest

- +

A simple MMORPG in your browser.

diff --git a/video/css/style.css b/video/css/style.css index f7329aa..40e09ae 100644 --- a/video/css/style.css +++ b/video/css/style.css @@ -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; } -} \ No newline at end of file +} + +@media (prefers-color-scheme: dark) { + div.video.container div.download-dropdown div.dropdown-content { + background-color: #444444; + } +} diff --git a/video/index.html b/video/index.html index 56b1bc5..dddc41c 100644 --- a/video/index.html +++ b/video/index.html @@ -2,20 +2,18 @@ - - + + - + Video Player @@ -32,10 +30,10 @@ $(document).ready(function(){
- Download + Download
@@ -48,4 +46,4 @@ $(document).ready(function(){ - \ No newline at end of file + diff --git a/zakarya/index.html b/zakarya/index.html index 68f7978..095a050 100644 --- a/zakarya/index.html +++ b/zakarya/index.html @@ -1,7 +1,7 @@ - + - + @@ -10,11 +10,9 @@ @@ -24,7 +22,7 @@ $(document).ready(function(){
- +

Links:

@@ -41,11 +39,11 @@ $(document).ready(function(){

Featured Videos: