diff --git a/assets/css/style.css b/assets/css/style.css index b18172e..81eea88 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -25,9 +25,9 @@ body { color: white; font-family: "system-ui", sans-serif; overflow-x: hidden; + padding-right: 140px; } -/* === NAVBAR ON THE RIGHT === */ .navbar { width: 140px; background: rgba(60, 26, 77, 0.55); @@ -47,6 +47,7 @@ body { z-index: 20; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.4); } + .navbar ul { list-style: none; margin: 0; @@ -81,13 +82,8 @@ body { transition: background-color 0.2s ease; } -.navbar a::before { - top: 0; -} - -.navbar a::after { - bottom: 0; -} +.navbar a::before { top: 0; } +.navbar a::after { bottom: 0; } .navbar a:hover { background-color: #5e2b7a; @@ -133,13 +129,8 @@ body { margin-top: 4px; } -.tor-label { - color: #6e2b9e; -} - -.ygg-label { - color: #92ffb3; -} +.tor-label { color: #6e2b9e; } +.ygg-label { color: #92ffb3; } .footer { position: relative; @@ -153,37 +144,14 @@ body { z-index: 10; } -/* === LINKS === */ -a { - text-decoration: none; - color: #447fc6; -} +a { text-decoration: none; color: #447fc6; } -::-moz-selection { - color: #000000; - background: #a57ae9; -} +::-moz-selection { color: #000000; background: #a57ae9; } +::selection { color: #000000; background: #a57ae9; } +a::-moz-selection { color: #000; background: #447fc6; } +a::selection { color: #000; background: #447fc6; } +a:not(:has(img)):hover { text-decoration: underline; } -::selection { - color: #000000; - background: #a57ae9; -} - -a::-moz-selection { - color: #000; - background: #447fc6; -} - -a::selection { - color: #000; - background: #447fc6; -} - -a:not(:has(img)):hover { - text-decoration: underline; -} - -/* === MAIN CONTENT === */ .content { display: flex; align-items: center; @@ -195,6 +163,7 @@ a:not(:has(img)):hover { position: relative; box-sizing: border-box; flex-wrap: wrap; + max-width: calc(100% - 140px); } .left { @@ -218,6 +187,7 @@ a:not(:has(img)):hover { justify-content: center; text-align: left; z-index: 10; + max-width: 800px; } .middle h1 { @@ -245,13 +215,10 @@ a:not(:has(img)):hover { width: 88px; height: 31px; border: none; - image-rendering: -webkit-optimize-contrast; - image-rendering: -moz-crisp-edges; - image-rendering: -o-pixelated; image-rendering: pixelated; } -/* === BACKGROUND CANVAS === */ +/* Background */ #night { position: fixed; top: 0; @@ -281,13 +248,13 @@ a:not(:has(img)):hover { filter: blur(1px); } -/* === PROJECT PAGE === */ +/* Project Page */ .project-page { display: flex; flex-direction: column; align-items: center; text-align: center; - max-width: 800px; + max-width: calc(100% - 140px); margin: 0 auto; padding: 5rem 2rem 8rem; } @@ -297,8 +264,6 @@ a:not(:has(img)):hover { .project-page h3 { font-family: "Clockopia", sans-serif; color: #fff5a8; - margin-top: auto; - margin-bottom: auto; } .project-page a { @@ -316,18 +281,42 @@ a:not(:has(img)):hover { max-width: 600px; } - .project-page p { max-width: 700px; line-height: 1.5; margin-bottom: auto; } +/*Shit to make it not terrible for mobile users.*/ +@media (max-width: 1200px) { + .content { + flex-direction: column; + text-align: center; + padding: 3rem 2rem; + max-width: 100%; + } -/* === RESPONSIVE FIXES === */ + .left, .middle { + flex: unset; + width: 100%; + } + + .uzi { + width: 60%; + max-width: 600px; + margin-bottom: 2rem; + } + + .middle { + text-align: center; + align-items: center; + } +} + +/* Full mobile mode */ @media (max-width: 900px) { body { - flex-direction: column; + padding-right: 0; } .navbar { @@ -337,6 +326,8 @@ a:not(:has(img)):hover { flex-direction: row; justify-content: center; padding: 0.5rem 0; + border-left: none; + border-right: none; } .navbar ul { @@ -344,15 +335,18 @@ a:not(:has(img)):hover { gap: 1rem; } - .content { + .content, + .project-page { + max-width: 100%; flex-direction: column; - padding: 2rem; + padding: 2rem 1.5rem; text-align: center; } .middle { text-align: center; align-items: center; + max-width: 100%; } .uzi { @@ -363,28 +357,18 @@ a:not(:has(img)):hover { .footer { padding-bottom: 2rem; } - - .navbar-top-icons { - margin-bottom: 0.5rem; - } - .navbar-top-icons img { - width: 22px; - height: 22px; - } - .navbar-top-icons { - gap: 10px; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; + gap: 10px; } .icon-item img { - width: 24px; - height: 24px; + width: 24px; + height: 24px; } .icon-label { - font-size: 0.7rem; + font-size: 0.7rem; } - }