Added new css

Author: Vic-Nas

styles.css

@@ -307,12 +307,12 @@ h1 {
     font-style: italic;
 }
 
+/* ===== GENERATED PAGE STYLES ===== */
+
 .generated-page {
     background: white;
     min-height: 100vh;
     padding: 2rem;
-    overflow-x: hidden;
-    width: 100%;
 }
 
 .nav-buttons {
@@ -351,6 +351,11 @@ h1 {
     box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 }
 
+.content-wrapper {
+    max-width: 1600px;
+    margin: 0 auto;
+}
+
 .page-title {
     font-size: 2.5rem;
     color: #2d3748;
@@ -365,47 +370,51 @@ h1 {
     margin-bottom: 2rem;
 }
 
-.content-wrapper {
-    max-width: 1600px;
-    margin: 0 auto;
-    width: 100%;
-    padding: 0 2rem;
+/* ===== SIDE-BY-SIDE LAYOUT ===== */
+
+.side-by-side-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin: 2rem auto;
+    max-width: 100%;
 }
 
+/* ===== STANDARD IMAGES GRID (for multiple images) ===== */
+
 .images-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     gap: 2rem;
-    margin: 2rem 0;
+    margin: 2rem auto;
+    max-width: 100%;
 }
 
-/* When there's only one image and code, show side-by-side on large screens */
 .images-grid.single-image {
     grid-template-columns: 1fr;
+    max-width: 800px;
 }
 
+/* ===== IMAGE CONTAINER ===== */
+
 .image-container {
     border: 1px solid #e2e8f0;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0,0,0,0.1);
     transition: transform 0.3s ease;
-    max-height: 700px;
-    display: flex;
-    flex-direction: column;
+    background: white;
 }
 
 .image-container:hover {
     transform: translateY(-5px);
+    box-shadow: 0 6px 25px rgba(0,0,0,0.15);
 }
 
 .image-container img {
     width: 100%;
     height: auto;
-    max-height: 650px;
-    object-fit: contain;
     display: block;
-    background: white;
 }
 
 .image-caption {
@@ -414,54 +423,24 @@ h1 {
     font-size: 0.9rem;
     color: #666;
     text-align: center;
+    border-top: 1px solid #e2e8f0;
 }
 
+/* ===== CODE SECTION ===== */
+
 .code-section {
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     border-radius: 10px;
     padding: 2rem;
-    margin: 2rem 0;
-}
-
-/* Side-by-side layout for single image + code */
-.side-by-side-layout {
-    display: grid;
-    grid-template-columns: 45% 55%;
-    gap: 2rem;
-    margin: 2rem 0;
-    align-items: start;
-    width: 100%;
-}
-
-.side-by-side-layout .image-container {
-    margin: 0;
-    height: fit-content;
-    max-height: none;
-    min-width: 0;
-}
-
-.side-by-side-layout .image-container img {
-    max-height: none;
-    width: 100%;
-}
-
-.side-by-side-layout .code-section {
-    margin: 0;
-    height: fit-content;
-    min-width: 0;
-}
-
-/* Stack on medium screens */
-@media (max-width: 1200px) {
-    .side-by-side-layout {
-        grid-template-columns: 1fr;
-    }
+    margin: 2rem auto;
+    max-width: 100%;
 }
 
 .code-section h3 {
     margin-bottom: 1rem;
     color: #2d3748;
+    font-size: 1.3rem;
 }
 
 .code-content {
@@ -470,42 +449,49 @@ h1 {
     padding: 1.5rem;
     border-radius: 8px;
     font-family: 'Monaco', 'Menlo', monospace;
-    font-size: 0.88rem;
-    line-height: 1.5;
-    white-space: pre-wrap;
+    font-size: 0.9rem;
+    line-height: 1.6;
     overflow-x: auto;
-    font-weight: normal;
-    scrollbar-width: thin;
-    scrollbar-color: #475569 #1e293b;
-    max-height: 700px;
     overflow-y: auto;
+    max-height: 600px;
 }
 
-/* Remove max-height when IN side-by-side layout */
-.side-by-side-layout .code-content {
-    max-height: none;
-    overflow-y: visible;
+.code-content pre {
+    margin: 0;
 }
 
 .code-content::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 10px;
+    height: 10px;
 }
 
 .code-content::-webkit-scrollbar-track {
-    background: #1e293b;
-    border-radius: 4px;
+    background: #0f172a;
 }
 
 .code-content::-webkit-scrollbar-thumb {
     background: #475569;
-    border-radius: 4px;
+    border-radius: 5px;
 }
 
 .code-content::-webkit-scrollbar-thumb:hover {
     background: #64748b;
 }
 
+/* Remove height restriction for side-by-side code */
+.side-by-side-layout .code-content {
+    max-height: none;
+    overflow-y: visible;
+}
+
+/* ===== RESPONSIVE ===== */
+
+@media (max-width: 1400px) {
+    .side-by-side-layout {
+        grid-template-columns: 1fr;
+    }
+}
+
 @media (max-width: 768px) {
     .container {
         padding: 1rem;
@@ -516,11 +502,9 @@ h1 {
         position: fixed;
         top: 1rem;
         right: 1rem;
-        left: auto;
         padding: 0.6rem 1rem;
         font-size: 0.8rem;
         border-radius: 20px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
     }
 
     .portfolio-link::before {
@@ -554,4 +538,8 @@ h1 {
     .page-title {
         font-size: 2rem;
     }
+    
+    .generated-page {
+        padding: 1rem;
+    }
 }