Landing page CSS

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 ===== */