summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css489
1 files changed, 0 insertions, 489 deletions
diff --git a/style.css b/style.css
deleted file mode 100644
index 520ecfa..0000000
--- a/style.css
+++ /dev/null
@@ -1,489 +0,0 @@
-@keyframes fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-@keyframes moveInLeft {
- 0% {
- opacity: 0;
- transform: translateX(-10rem);
- }
- 100% {
- opacity: 1;
- transform: translate(0);
- }
-}
-@keyframes moveInRight {
- 0% {
- opacity: 0;
- transform: translateX(10rem) skewX(-12deg);
- }
- 100% {
- opacity: 1;
- transform: translate(0) skewX(-12deg);
- }
-}
-@keyframes moveInRightMobile {
- 0% {
- opacity: 0;
- transform: translateX(10rem);
- }
- 100% {
- opacity: 1;
- transform: translate(0);
- }
-}
-
-*,
-*::after,
-*::before {
- box-sizing: inherit;
- margin: 0;
- padding: 0;
-}
-
-html,
-body {
- min-height: 100vh;
- width: 100vw;
-}
-
-body {
- 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;
- color: #ececec;
- display: grid;
- grid-template-rows: auto 1fr auto;
- font-family: "Inter", sans-serif;
- font-size: 1.1rem;
- line-height: 1.5;
-}
-
-main {
- height: 100%;
- margin: 3rem 4rem 2rem 4rem;
-}
-main * {
- animation: fade-in 2s ease-out;
-}
-@media screen and (max-width: 600px) {
- main {
- margin: 2rem 0.5rem;
- }
-}
-
-::selection {
- background-color: #ececec;
- color: #252424;
-}
-
-.text-link {
- color: #e79759;
-}
-.text-link:hover {
- background-color: #e79759;
- border-radius: 2px;
- color: #252424;
- text-decoration: none;
-}
-
-.text-emphasis {
- color: #ecbf4b;
- font-weight: bold;
-}
-
-.title {
- font-family: "Archivo Black", sans-serif;
- color: #ecbf4b;
- font-size: 2rem;
- width: fit-content;
-}
-
-.subtitle {
- font-family: "Archivo Black", sans-serif;
- color: #e79759;
- font-size: 1.5rem;
-}
-
-.name {
- font-size: 4rem;
-}
-
-.note-auriga {
- color: #e79759;
- font-style: italic;
-}
-
-nav {
- background-color: #173d5a;
- font-family: "Archivo Black", sans-serif;
- height: 10vh;
- width: 100vw;
-}
-@media screen and (max-width: 980px) {
- nav {
- height: fit-content;
- }
-}
-nav ul {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- height: 100%;
- list-style-type: none;
- 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: 1.5rem 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;
- font-size: 1.5rem;
- padding: 0 1.5rem;
- text-align: center;
- transition: transform 0.3s;
- text-decoration: none;
- white-space: nowrap;
-}
-nav li a:hover {
- color: #ecbf4b;
- transform: translateY(-0.3rem);
-}
-@media screen and (max-width: 980px) {
- nav li a {
- font-size: 2rem;
- }
-}
-
-.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%;
- }
-}
-@media screen and (max-width: 600px) {
- .about-section {
- margin: 3rem auto;
- }
-}
-
-.welcome-section {
- display: grid;
- grid-template-columns: 1fr 1fr;
- align-items: center;
- justify-content: center;
- gap: 8rem;
- 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%;
- }
-}
-@media screen and (max-width: 600px) {
- .welcome-section {
- margin: 3rem auto;
- }
-}
-.welcome-section .welcome-intro {
- border-radius: 10px;
- outline: 3px solid #e79759;
- outline-offset: 1rem;
-}
-
-.projects-section {
- margin: 10rem auto;
- width: 80%;
-}
-.projects-section h2 {
- margin-bottom: 5rem;
-}
-.projects-section > div:not(:nth-child(2)) {
- margin-top: 10rem;
-}
-@media screen and (max-width: 1400px) {
- .projects-section {
- margin: 8rem auto;
- width: 80%;
- }
-}
-@media screen and (max-width: 600px) {
- .projects-section {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin: 8rem 0;
- width: 100%;
- }
-}
-
-.contact-section {
- margin: 10rem auto;
- width: 80%;
-}
-.contact-section h2 {
- margin-bottom: 5rem;
-}
-@media screen and (max-width: 1400px) {
- .contact-section {
- margin: 8rem auto;
- width: 80%;
- }
-}
-@media screen and (max-width: 600px) {
- .contact-section {
- margin: 3rem auto;
- }
-}
-
-footer {
- background-color: #173d5a;
- width: 100vw;
-}
-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);
-}
-footer p {
- text-align: center;
-}
-footer .big-icon {
- font-size: 2rem;
-}
-
-.text-container {
- background-color: #173d5a;
- border-radius: 10px;
- box-shadow: 0 2rem 3.5rem rgba(0, 0, 0, 0.6);
- padding: 3.5rem;
- transform: skewX(-12deg);
- width: 50%;
-}
-@media screen and (max-width: 1400px) {
- .text-container {
- transform: skewX(0);
- width: auto;
- }
-}
-@media screen and (max-width: 600px) {
- .text-container {
- padding: 1rem;
- }
-}
-.text-container p:not(:last-child) {
- margin-bottom: 1.5rem;
-}
-
-.text-about {
- animation: moveInRight 2s ease-out;
- backface-visibility: hidden;
-}
-@media screen and (max-width: 1400px) {
- .text-about {
- animation: moveInRightMobile 2s ease-out;
- margin-top: 5rem;
- }
-}
-
-.portrait-container {
- height: 50vh;
- width: fit-content;
- animation: moveInLeft 2s ease-out;
- backface-visibility: hidden;
-}
-.portrait-container img {
- border-radius: 25px;
- height: 100%;
- width: 100%;
- object-fit: scale-down;
-}
-
-.project-container {
- display: flex;
- align-items: center;
- justify-content: space-around;
- gap: 2rem;
-}
-@media screen and (max-width: 1400px) {
- .project-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 5rem;
- /*
- important for second project, otherwise screenshot below text-container;
- could be done with separate class for 2nd project and flex-dir: col-reverse for media query too
- */
- }
- .project-container > img {
- order: -1;
- }
-}
-
-.project-screenshot {
- border-radius: 10px;
- outline: 5px solid #e79759;
- outline-offset: 1.5rem;
- object-fit: scale-down;
- 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;
-}
-
-.messenger-form {
- display: grid;
- grid-template-columns: 1fr 1fr;
- align-items: center;
- justify-content: center;
- gap: 2rem;
- width: 50%;
-}
-@media screen and (max-width: 1400px) {
- .messenger-form {
- width: 100%;
- }
-}
-.messenger-form div {
- display: flex;
- align-items: flex-start;
- justify-content: center;
- flex-direction: column;
- gap: 1rem;
-}
-.messenger-form div.text-area {
- grid-column: 1/3;
-}
-.messenger-form label {
- font-weight: bold;
-}
-.messenger-form input,
-.messenger-form textarea {
- background-color: #ececec;
- border: none;
- border-radius: 10px;
- padding: 0.5rem;
- width: 100%;
-}
-.messenger-form input:focus,
-.messenger-form textarea:focus {
- color: #ececec;
- background-color: #173d5a;
- outline: 3px solid #e79759;
-}
-
-@media screen and (max-width: 820px) {
- .messenger-form {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 100%;
- }
- .messenger-form div {
- width: 100%;
- }
-}
-button {
- color: #252424;
- background-color: #ecbf4b;
- border: none;
- border-radius: 10px;
- font-style: inherit;
- font-weight: bold;
- padding: 0.7rem;
- text-transform: uppercase;
- width: 8rem;
-}
-button:hover {
- background-color: #e79759;
-}
-button:active {
- outline: 3px solid #252424;
-}
generated by cgit v1.2.3 (git 2.39.1) at 2026-08-24 21:22:24 +0000