diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index f551688..bc7c8a1 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -3970,7 +3970,7 @@ a:focus { .landing-page { width: 100vw; - height: 100vh; + min-height: 100vh; display: flex; justify-content: center; align-items: center; @@ -3980,7 +3980,8 @@ a:focus { background-repeat: no-repeat; background-attachment: fixed; position: relative; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; } .landing-page::before { @@ -3997,7 +3998,7 @@ a:focus { .landing-content { position: relative; z-index: 2; - max-width: 800px; + max-width: 1400px; padding: 2rem; text-align: center; color: white; @@ -4095,8 +4096,67 @@ a:focus { } @media (max-width: 768px) { + .landing-page { + align-items: flex-start; + padding: 2rem 0; + } + .landing-content { - padding: 1rem; + padding: 2rem 1rem; + max-width: 100%; + } + + .dragon-container { + margin-bottom: 1rem; + } + + .dragon-image { + max-width: 250px; + } + + .info-container h1 { + font-size: 1.8rem; + margin-bottom: 1rem; + } + + .info-container .description { + font-size: 1rem; + margin-bottom: 1.5rem; + } + + .version-info { + margin-bottom: 1.5rem; + font-size: 0.85rem; + } + + .action-links { + flex-direction: column; + align-items: center; + margin-bottom: 1rem; + } + + .action-links .btn { + width: 100%; + max-width: 300px; + } + + .quick-links { + gap: 0.75rem; + } + + .quick-link { + font-size: 0.85rem; + padding: 6px 12px; + } +} + +@media (max-width: 480px) { + .landing-page { + padding: 1rem 0; + } + + .landing-content { + padding: 1.5rem 0.75rem; } .dragon-image { @@ -4104,21 +4164,31 @@ a:focus { } .info-container h1 { - font-size: 1.8rem; + font-size: 1.5rem; } .info-container .description { - font-size: 1rem; + font-size: 0.9rem; } - .action-links { - flex-direction: column; - align-items: center; + .version-info { + font-size: 0.8rem; } .action-links .btn { - width: 100%; - max-width: 300px; + font-size: 1rem; + padding: 10px 20px; + } + + .quick-links { + flex-direction: column; + gap: 0.5rem; + align-items: center; + } + + .quick-link { + min-width: 200px; + text-align: center; } } /* ===== Maintenance SkillView Styles ===== */