Merge pull request #85 from code4policy/newpage

Newpage and Historical trend button
code4policy · Jan 18, 2025 · a66a5c9 · a66a5c9
2 parents 74b8c08 + 4113bc5
commit a66a5c9
Show file tree

Hide file tree

Showing 4 changed files with 6,377 additions and 9 deletions.
diff --git a/agile/css/agile.css b/agile/css/agile.css
@@ -12,14 +12,14 @@ html, body {
     padding: 0;
     width: 100%;
     height: 100%;
-    background-color: #F2F2F2; /* 60% Background */
+    background-color: #F2F2F2; /* Light gray for background */
     color: #333; /* Neutral text color for readability */
     overflow-x: hidden; /* Prevent horizontal scrolling */
 }
 
 /* Navigation Bar */
 .navbar {
-    background-color: #A41034; /* 10% Accent */
+    background-color: #A41034; /* Dark red */
     color: #fff; /* White text for contrast */
     display: flex;
     justify-content: space-between;
@@ -28,6 +28,7 @@ html, body {
     position: sticky;
     top: 0;
     z-index: 1000;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 /* Responsive adjustments */
@@ -66,15 +67,17 @@ html, body {
 }
 
 .logo img {
-    height: 65px; /* Proportional height */
-    width: auto; /* Maintains aspect ratio */
+    height: 100%;
+    max-height: 65px; /* Optional: Set a maximum height */
+    width: auto; /* Maintain aspect ratio */
 }
 
 /* Navigation Links */
 .nav-menu {
     list-style: none;
     display: flex;
     gap: 1rem;
+    flex-grow: 1;
 }
 
 .nav-item {
@@ -93,6 +96,10 @@ html, body {
     border-radius: 5px;
 }
 
+.nav-right {
+    margin-left: auto; /* Pushes the item to the right */
+}
+
 /* Banner Section */
 .banner {
     text-align: center;
@@ -125,18 +132,24 @@ html, body {
     background-color: #A41034; /* 10% Accent */
 }
 
-/* Content Section */
+/* Main Content */
 .content-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 2rem;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
-    padding: 2rem;
     background: rgba(255, 255, 255, 0.8); /* Slight transparency for readability */
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .text-column {
+    flex: 1;
+    min-width: 300px;
+    margin-right: 2rem;
     margin-bottom: 2rem;
 }
 
@@ -157,16 +170,21 @@ html, body {
     color: #333; /* Neutral text color */
 }
 
+.image-column {
+    flex: 1;
+    min-width: 300px;
+}
+
 .image-column img {
-    max-width: 100%;
+    width: 100%;
     height: auto;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 /* Footer Section */
 .footer {
-    background-color: #A41034; /* 10% Accent */
+    background-color: #A41034; /* Dark red */
     color: #fff;
     padding: 2rem 1rem;
     text-align: center;
@@ -253,4 +271,35 @@ html, body {
         flex-direction: column;
         text-align: center;
     }
+
+    .nav-menu {
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    .nav-item {
+        width: 100%;
+    }
+
+    .nav-link {
+        width: 100%;
+        text-align: left;
+        padding: 1rem;
+    }
+}
+
+/* Additional Styles */
+ul {
+    list-style-type: disc;
+    margin-left: 20px;
+}
+
+h1, h2 {
+    color: #A41034; /* Dark red */
+}
+
+p {
+    margin-top: 1rem;
+    line-height: 1.6;
 }