adjusted style and Algoa model

SAEON · Feb 7, 2025 · bacd045 · bacd045
1 parent 3e2a910
commit bacd045
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 11 deletions.
diff --git a/sa-southeast-model.html b/sa-southeast-model.html
@@ -14,3 +14,62 @@ <h1>SA S.East Model</h1>
     </a>
 </body>
 </html>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>SA West Model</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <!-- Page Header with Back Navigation -->
+    <div class="page-header">
+        <a href="newpage.html" class="back-nav">
+            <img src="left-arrow.png" alt="Back">
+        </a>
+        <h1 class="page-title">SA West Model</h1>
+    </div>
+
+    <!-- Content Section -->
+    <div class="content-container model-content">
+
+        <!-- GIF Section -->
+        <div class="model-images">
+            <div class="gif-container">
+                <h3>SST</h3>
+                <img src="croco_avg_temp_surf.gif" alt="Sea Surface Temperature Animation">
+            </div>
+            <div class="gif-container">
+                <h3>Temp at 100m</h3>
+                <img src="croco_avg_temp_100m.gif" alt="Temperature at 100m Animation">
+            </div>
+        </div>
+
+        <!-- Right Section: Blurb -->
+        <div class="model-description">
+            <h2>SA S.East Model<</h2>
+            <p>
+                Past, present and future ocean state at the water surface from a Coastal and Regional Ocean 
+                Community (CROCO) numerical model configuration of the Algoa Bay region. The model is 
+                initialized once a day, and produces output at an hourly temporal resolution for a period 
+                of 5 days into the past to 5 days into the future.
+            </p>
+            <p>
+                The provided variables are sea surface temperature (SST), sea surface height (SSH), salinity, 
+                and surface currents. Boundary conditions for the model are obtained from the ~9km resolution 
+                Mercator global ocean analysis and forecast product, while surface forcing is obtained from 
+                the Global Forecast System (GFS). 
+            </p>
+            <p>
+                Our configuration represents a 'downscaling' of the Mercator global ocean product to high 
+                resolution (~500 m) over Algoa Bay, allowing for the simulation of local bay-scale processes.
+            </p>
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -366,37 +366,38 @@ html, body {
 }
 
 
-
 /* RESPONSIVE DESIGN: Mobile View */
 @media screen and (max-width: 768px) {
 
-  /* Stack the GIF and text vertically on mobile */
-  .model-content {
+  /* Stack the GIFs vertically on mobile */
+  .model-images {
     flex-direction: column;
-    align-items: stretch; /* Makes both GIF and text expand fully */
-    text-align: left;
+    align-items: center;
   }
 
-  /* Ensure GIF takes full width */
-  .model-image {
+  /* Ensure GIF containers take full width */
+  .gif-container {
     width: 100%;
-    text-align: center; /* Centers the GIF */
+    text-align: center;
   }
 
-  .model-image img {
+  /* Ensure each GIF is visible and takes full width */
+  .gif-container img {
     width: 100%;
-    max-width: none; /* Ensures it expands fully */
+    max-width: 500px; /* Prevents GIFs from getting too large */
+    height: auto;
     display: block;
     margin: 0 auto;
   }
 
   /* Ensure text (blurb) fills available space */
   .model-description {
     width: 100%;
-    max-width: none; /* Expands to fill available space */
+    max-width: none;
     text-align: left;
     padding: 20px;
   }
 }
 
 
+