Imrpv CSS

static/main.css

@@ -308,99 +308,183 @@ pre code {
 }
 
 /* Responsive design */
-@media (max-width: 1200px) {
+@media (max-width: 1280px) {
     .three-column-layout {
-        gap: 15px;
+        grid-template-columns: 1fr 0.6fr 0.6fr;
-        padding: 15px;
+        gap: 16px;
+        padding: 16px;
     }
     
     .content-container {
-        padding: 20px;
+        padding: 24px;
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     .three-column-layout {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr;
-        grid-template-rows: auto auto;
+        grid-template-rows: auto auto auto;
-        gap: 15px;
+        gap: 16px;
-        padding: 15px;
+        padding: 16px;
         height: auto;
         min-height: 100vh;
     }
     
-    /* Main content spans both columns in first row */
+    /* Main content in first row */
-    .content-container:first-child {
-        grid-column: 1 / -1;
-        grid-row: 1;
-    }
-    
-    /* Changelog and about in second row, side by side */
-    .content-container:nth-child(2) {
-        grid-column: 1;
-        grid-row: 2;
-    }
-    
-    .content-container:nth-child(3) {
-        grid-column: 2;
-        grid-row: 2;
-    }
-    
-    .content-container { 
-        padding: 20px;
-        border-radius: 15px;
-        max-height: 60vh;
-    }
-    
-    h1 { font-size: 2rem; }
-    h2 { font-size: 1.5rem; }
-}
-
-@media (max-width: 480px) {
-    .three-column-layout {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto auto auto;
-        padding: 10px;
-        gap: 10px;
-    }
-    
-    /* Stack all columns vertically on mobile */
     .content-container:first-child {
         grid-column: 1;
         grid-row: 1;
     }
     
+    /* Changelog in second row */
     .content-container:nth-child(2) {
         grid-column: 1;
         grid-row: 2;
     }
     
+    /* About in third row */
     .content-container:nth-child(3) {
         grid-column: 1;
         grid-row: 3;
     }
     
     .content-container { 
-        padding: 15px;
+        padding: 28px;
-        max-height: 50vh;
+        max-height: none;
+        min-height: 450px;
+        width: 100%;
+    }
+    
+    h1 { font-size: 2.25rem; }
+    h2 { font-size: 1.625rem; }
+}
+
+@media (max-width: 768px) {
+    .three-column-layout {
+        display: block;
+        padding: 16px;
+        width: 100%;
+    }
+    
+    .content-container { 
+        display: block;
+        width: 100%;
+        margin: 0 0 20px 0;
+        padding: 24px;
+        max-height: none;
+        min-height: auto;
+        box-sizing: border-box;
+    }
+    
+    .content-container:last-child {
+        margin-bottom: 0;
+    }
+    
+    h1 { font-size: 2rem; }
+    h2 { font-size: 1.5rem; margin-bottom: 1rem; }
+    
+    .endpoint, 
+    .storage-info, 
+    .changelog-section { 
+        padding: 20px; 
+        margin: 16px 0;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    
+    .step { 
+        padding: 16px 20px; 
+        margin: 12px 0;
+        width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+@media (max-width: 640px) {
+    .three-column-layout {
+        display: block;
+        padding: 12px;
+        width: 100%;
+    }
+    
+    .content-container { 
+        display: block;
+        width: 100%;
+        margin: 0 0 16px 0;
+        padding: 20px;
+        border-radius: 12px;
+        min-height: auto;
+        box-sizing: border-box;
+    }
+    
+    .content-container:last-child {
+        margin-bottom: 0;
+    }
+    
+    h1 {
+        font-size: 1.75rem;
+        margin-bottom: 16px;
+    }
+    
+    h2 {
+        font-size: 1.375rem;
+        margin-top: 1.25rem;
+        margin-bottom: 0.75rem;
+    }
+    
+    .about-content h3 {
+        font-size: 1.125rem;
+        margin: 1rem 0 0.5rem 0;
     }
     
     .endpoint, 
     .storage-info, 
     .changelog-section { 
-        padding: 15px; 
+        padding: 16px; 
+        margin: 12px 0;
+        width: 100%;
+        box-sizing: border-box;
     }
     
     .step { 
-        padding: 12px 15px; 
+        padding: 12px 16px;
+        margin: 10px 0; 
+        width: 100%;
+        box-sizing: border-box;
     }
     
-    h1 {
+    .method {
-        font-size: 1.8rem;
+        padding: 4px 8px;
+        font-size: 11px;
+        margin-right: 8px;
     }
     
-    .about-content h3 {
+    .changelog-entry {
-        font-size: 1.1rem;
+        padding: 14px;
+        margin: 10px 0;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    
+    .about-content li {
+        padding: 10px 12px;
+        margin: 6px 0;
+    }
+    
+    .contact-info {
+        padding: 14px;
+        margin: 10px 0;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    
+    .about-content p {
+        font-size: 14px;
+        line-height: 1.5;
+    }
+    
+    .about-content ul {
+        padding-left: 16px;
     }
 }
 
@@ -414,6 +498,13 @@ pre code {
     box-sizing: border-box;
 }
 
+@media (max-width: 1024px) {
+    .three-column-layout {
+        grid-template-columns: 1fr !important;
+        grid-template-rows: auto auto auto !important;
+    }
+}
+
 /* Content containers with equal height and scrolling */
 .content-container {
     background: #ffffff;