diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 3680536..d67d35d 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -19,18 +19,6 @@ main { scroll-behavior: smooth; } -/* Mobile Base Styles */ -@media (max-width: 768px) { - html, body { - font-size: 18px; - } - - main { - margin: 10px; - margin-top: 70px; - } -} - a { color: var(--blue-clr) } @@ -50,43 +38,12 @@ footer > div > p { margin: 10px 25px 10px 25px; } -@media (max-width: 768px) { - footer > div { - flex-direction: column; - align-items: center; - gap: 10px; - } - - footer > div > p { - margin: 10px; - text-align: center; - } -} - .flag { height: 16px; vertical-align: middle; } /* ===== Container Layouts ===== */ - -header { - background-color: var(--background-clr); - padding: 10px 0; - z-index: 100; -} - -@media (max-width: 768px) { - header { - position: fixed; - top: 0; - left: 0; - right: 0; - width: 100%; - padding: 5px 0; - } -} - .vert_container { display: flex; } @@ -120,17 +77,6 @@ header { align-items: center; } -@media (max-width: 768px) { - .scroll_container { - scroll-snap-type: none; - } - - .scroll_section { - min-height: auto; - scroll-snap-align: none; - } -} - .scroll_section > h1 { color: var(--white-clr); font-size: 48px; @@ -170,47 +116,10 @@ header { color: var(--green-clr); } -/* Mobile Navigation */ @media (max-width: 1100px) { .nav_option p { display: none; } - - .nav_option { - font-size: 28px; - padding: 8px; - margin: 8px; - } - - .icon.small { - height: 36px; - } - - .icon.medium { - height: 60px; - } -} - -@media (max-width: 768px) { - .nav_option { - font-size: 24px; - padding: 6px; - margin: 6px; - } - - .icon.small { - height: 30px; - } - - .icon.medium { - height: 50px; - } - - .vert_container.centered { - flex-wrap: wrap; - justify-content: center; - gap: 10px; - } } /* ===== Layout ===== */ @@ -250,63 +159,6 @@ header { font-size: 26px; width: 400px; } - - .icon.large.toggle { - height: 200px; - } -} - -@media (max-width: 992px) { - .title { - font-size: 80px; - } - - .tagline { - font-size: 22px; - width: 350px; - } - - .text-section { - margin-left: 30px; - } - - .section-title { - flex-direction: column; - align-items: center; - gap: 20px; - } -} - -@media (max-width: 768px) { - .title { - font-size: 50px; - } - - .tagline { - font-size: 18px; - width: 100%; - flex-direction: column; - } - - .tagline .normal-text { - margin-left: 0; - } - - .icon.large.toggle { - height: 120px; - } - - .image.large { - width: 60%; - } - - .image.small { - width: 40%; - } - - .panel { - width: 100%; - } } .tagline { @@ -341,17 +193,6 @@ header { color: var(--green-clr) } -@media (max-width: 768px) { - .content-box { - margin: 30px 10px 15px; - padding: 15px; - } - - .content-box .intro-text { - font-size: 20px; - } -} - .project-thumb { width: 150px; height: 150px; @@ -488,43 +329,6 @@ header { margin: 20px auto; } -@media (max-width: 768px) { - .about-me-projects-grid { - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 15px; - } - - .project-card-new { - max-width: 100%; - min-width: 250px; - } - - .project-card-image-container { - height: 150px; - } - - .project-card-new.expanded .project-card-image-container { - height: 120px; - } - - .project-card-title { - font-size: 16px; - } - - .project-card-short-desc { - padding: 8px 15px 15px; - font-size: 14px; - } - - .project-card-content { - max-height: 300px; - } - - .project-card-content p { - font-size: 16px; - } -} - /* ===== Apps Section - Full Width Dashboard Carousel ===== */ .apps-container { @@ -544,139 +348,6 @@ header { box-sizing: border-box; } -@media (max-width: 1024px) { - .apps-container { - padding: 15px; - gap: 20px; - } - - .carousel-container-full { - padding: 30px 40px; - } - - .carousel-track-full { - gap: 15px; - } - - .service-icon-large { - width: 70px; - height: 70px; - font-size: 28px; - } - - .carousel-item-full[data-selected="true"] .service-icon-large { - width: 110px; - height: 110px; - font-size: 42px; - } - - .carousel-item-full:nth-child(1):not([data-selected="true"]) .service-icon-large, - .carousel-item-full:nth-child(5):not([data-selected="true"]) .service-icon-large { - width: 50px; - height: 50px; - font-size: 20px; - } - - .carousel-item-full:nth-child(2):not([data-selected="true"]):not(:nth-child(4)) .service-icon-large, - .carousel-item-full:nth-child(4):not([data-selected="true"]):not(:nth-child(2)) .service-icon-large { - width: 60px; - height: 60px; - font-size: 24px; - } - - .service-label-large { - font-size: 18px; - } - - .carousel-item-full[data-selected="true"] .service-label-large { - font-size: 22px; - } - - .service-screenshot-full { - height: 300px; - } - - .service-title { - font-size: 32px; - } - - .service-description-full { - font-size: 20px; - } - - .go-to-app-button { - font-size: 22px; - padding: 14px 30px; - } -} - -@media (max-width: 768px) { - .carousel-container-full { - padding: 20px 30px; - } - - .carousel-track-full { - gap: 10px; - } - - .service-icon-large { - width: 60px; - height: 60px; - font-size: 24px; - } - - .carousel-item-full[data-selected="true"] .service-icon-large { - width: 90px; - height: 90px; - font-size: 36px; - } - - .carousel-item-full:nth-child(1):not([data-selected="true"]) .service-icon-large, - .carousel-item-full:nth-child(5):not([data-selected="true"]) .service-icon-large { - width: 45px; - height: 45px; - font-size: 18px; - } - - .carousel-item-full:nth-child(2):not([data-selected="true"]):not(:nth-child(4)) .service-icon-large, - .carousel-item-full:nth-child(4):not([data-selected="true"]):not(:nth-child(2)) .service-icon-large { - width: 55px; - height: 55px; - font-size: 22px; - } - - .service-screenshot-full { - height: 250px; - } - - .service-title { - font-size: 26px; - } - - .service-description-full { - font-size: 18px; - } - - .go-to-app-button { - font-size: 20px; - padding: 12px 25px; - } - - .carousel-nav-full { - width: 40px; - height: 40px; - font-size: 36px; - } - - .carousel-nav-full.prev { - left: 10px; - } - - .carousel-nav-full.next { - right: 10px; - } -} - .carousel-track-full { display: flex; justify-content: center; @@ -900,57 +571,6 @@ header { width: 100%; } -@media (max-width: 1024px) { - .games-grid { - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 25px; - } -} - -@media (max-width: 768px) { - .games-container { - padding: 10px; - } - - .games-grid { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; - } - - .game-card { - border-radius: 15px; - } - - .game-card-image { - height: 150px; - } - - .game-card.expanded .game-card-image { - height: 180px; - } - - .game-card-content { - padding: 15px; - } - - .game-card-title { - font-size: 20px; - } - - .game-card-description { - font-size: 16px; - } - - .game-card-full-description { - font-size: 16px; - } - - .play-button { - font-size: 20px; - padding: 12px 25px; - } -} - .game-card { background-color: var(--dark-teal, #2c5f5f); border-radius: var(--card-border-radius, 25px);