diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 170 |
1 files changed, 93 insertions, 77 deletions
@@ -6,7 +6,6 @@ opacity: 1; } } - @keyframes moveInLeft { 0% { opacity: 0; @@ -17,7 +16,6 @@ transform: translate(0); } } - @keyframes moveInRight { 0% { opacity: 0; @@ -28,7 +26,6 @@ transform: translate(0) skewX(-12deg); } } - @keyframes moveInRightMobile { 0% { opacity: 0; @@ -55,11 +52,7 @@ body { } body { - background: linear-gradient( - 45deg, - rgba(2, 48, 89, 0.89) 0%, - rgba(9, 61, 94, 0.84) 100% - ); + background: linear-gradient(45deg, rgba(2, 48, 89, 0.89) 0%, rgba(9, 61, 94, 0.84) 100%); background-repeat: no-repeat; background-size: cover; box-sizing: border-box; @@ -79,6 +72,11 @@ main * { animation: fade-in 2s ease-out; } +::selection { + background-color: #ececec; + color: #252424; +} + .text-link { color: #e79759; } @@ -122,6 +120,11 @@ nav { height: 10vh; width: 100vw; } +@media screen and (max-width: 980px) { + nav { + height: fit-content; + } +} nav ul { display: flex; align-items: center; @@ -131,10 +134,26 @@ nav ul { padding: 0 3rem; width: 100%; } +@media screen and (max-width: 980px) { + nav ul { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 0; + } +} nav li:first-child { text-align: left; margin-right: auto; } +@media screen and (max-width: 980px) { + nav li:first-child { + text-align: center; + margin-right: 1.5rem; + } +} nav li a { display: block; color: inherit; @@ -149,33 +168,28 @@ nav li a:hover { color: #ecbf4b; transform: translateY(-0.3rem); } - @media screen and (max-width: 980px) { - nav { - height: fit-content; - } - nav ul { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 1rem; - padding: 0; - } nav li a { font-size: 2rem; } - nav li:first-child { - text-align: center; - margin-right: 1.5rem; - } } + .about-section { display: flex; align-items: center; justify-content: space-around; margin: 3rem auto; } +@media screen and (max-width: 1400px) { + .about-section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 8rem auto; + width: 80%; + } +} .welcome-section { display: grid; @@ -186,6 +200,17 @@ nav li a:hover { margin: 3rem auto; width: 60%; } +@media screen and (max-width: 1400px) { + .welcome-section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4rem; + margin: 8rem auto; + width: 80%; + } +} .welcome-section .welcome-intro { border-radius: 10px; outline: 3px solid #e79759; @@ -199,6 +224,12 @@ nav li a:hover { .projects-section h2 { margin-bottom: 5rem; } +@media screen and (max-width: 1400px) { + .projects-section { + margin: 8rem auto; + width: 80%; + } +} .projects-section > div:not(:nth-child(2)) { margin-top: 10rem; } @@ -210,34 +241,13 @@ nav li a:hover { .contact-section h2 { margin-bottom: 5rem; } - -@media screen and (max-width: 1380px) { - .about-section { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 8rem auto; - width: 80%; - } - .welcome-section { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 4rem; - margin: 8rem auto; - width: 80%; - } - .projects-section { - margin: 8rem auto; - width: 80%; - } +@media screen and (max-width: 1400px) { .contact-section { margin: 8rem auto; width: 80%; } } + footer { background-color: #173d5a; width: 100vw; @@ -245,18 +255,35 @@ footer { footer * { margin: 3rem 4rem 2rem 4rem; } +@media screen and (max-width: 600px) { + footer * { + margin: 2rem; + } +} footer dl { display: flex; justify-content: center; align-items: center; height: 2rem; } +@media screen and (max-width: 600px) { + footer dl { + flex-direction: column; + height: max-content; + } +} footer dl * { color: inherit; font-size: 1.5rem; margin: 0.5rem; transition: transform 0.3s; } +@media screen and (max-width: 600px) { + footer dl * { + font-size: 1.3rem; + margin: 0.3rem; + } +} footer dl dd i:hover { color: #ecbf4b; transform: translateY(-0.3rem); @@ -268,19 +295,6 @@ footer .big-icon { font-size: 2rem; } -@media screen and (max-width: 520px) { - footer * { - margin: 2rem; - } - footer dl { - flex-direction: column; - height: max-content; - } - footer dl * { - font-size: 1.3rem; - margin: 0.3rem; - } -} .text-container { background-color: #173d5a; border-radius: 10px; @@ -289,6 +303,12 @@ footer .big-icon { transform: skewX(-12deg); width: 50%; } +@media screen and (max-width: 1400px) { + .text-container { + transform: skewX(0); + width: auto; + } +} .text-container p:not(:last-child) { margin-bottom: 1.5rem; } @@ -297,17 +317,13 @@ footer .big-icon { animation: moveInRight 2s ease-out; backface-visibility: hidden; } - -@media screen and (max-width: 1380px) { - .text-container { - transform: skewX(0); - width: auto; - } +@media screen and (max-width: 1400px) { .text-about { animation: moveInRightMobile 2s ease-out; margin-top: 5rem; } } + .portrait-container { height: 50vh; width: fit-content; @@ -328,7 +344,7 @@ footer .big-icon { gap: 2rem; } -@media screen and (max-width: 1380px) { +@media screen and (max-width: 1400px) { .project-container { display: flex; flex-direction: column; @@ -348,16 +364,16 @@ footer .big-icon { width: 40%; transition: transform 0.6s ease; } +@media screen and (max-width: 1400px) { + .project-screenshot { + width: 80%; + } +} .project-screenshot:hover { transform: scale(1.2); z-index: 100; } -@media screen and (max-width: 1380px) { - .project-screenshot { - width: 80%; - } -} .messenger-form { display: grid; grid-template-columns: 1fr 1fr; @@ -366,6 +382,11 @@ footer .big-icon { gap: 2rem; width: 50%; } +@media screen and (max-width: 1400px) { + .messenger-form { + width: 100%; + } +} .messenger-form div { display: flex; align-items: flex-start; @@ -394,11 +415,6 @@ footer .big-icon { outline: 3px solid #e79759; } -@media screen and (max-width: 1380px) { - .messenger-form { - width: 100%; - } -} @media screen and (max-width: 820px) { .messenger-form { display: flex; |