Final fix to header, reimplement deliverables css

Decysif · Sep 23, 2024 · 4ad6730 · 4ad6730
1 parent 8c7e03a
commit 4ad6730
Showing 1 changed file with 37 additions and 116 deletions.
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -4,8 +4,9 @@
   width: 100%;
   position: relative;
   z-index: 1;
-  text-align: center; // Center content in headers
+  text-align: center;
 
+  // Remove text-align overrides in case flexbox conflicts exist
   &.page-header-no-image {
     background-color: #1a1a1a;
     padding: 3rem 1rem;
@@ -23,7 +24,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    text-align: center; // Center text
+    text-align: center;
     position: relative;
 
     &::after {
@@ -44,6 +45,10 @@
     padding: 2rem 1rem;
     max-width: 1200px;
     margin: 0 auto;
+    display: flex;
+    justify-content: center; /* Ensure content (logo) stays centered */
+    align-items: center;
+    flex-direction: column; /* Stack content vertically */
 
     @media screen and (min-width: 48em) {
       padding: 4rem 2rem;
@@ -85,78 +90,53 @@
   }
 }
 
-// Responsive typography for better mobile experience
-h1, h2 {
-  line-height: 1.2;
-  margin-bottom: 1rem;
+.tc-l {
+  text-align: center;
 }
-
-img {
-  max-width: 100%;
+// Centering the header logo
+#headerlogo {
+  display: block;
+  margin: 0 auto; /* Center the logo horizontally */
+  max-width: 100%; /* Ensure the image doesn't exceed its container */
   height: auto;
-}
+  padding: 1rem; /* Adjust padding to prevent any content overflow */
 
-// Adjust padding and spacing for different screen sizes
-@media screen and (min-width: 48em) {
-  .site-header,
-  .page-header {
-    padding: 6rem 3rem;
+  /* Force centering at specific breakpoints */
+  @media screen and (max-width: 960px) {
+    max-width: 75%; /* Adjust width for smaller screens */
   }
 
-  .header-content,
-  .page-content {
-    padding: 6rem 3rem;
+  @media screen and (max-width: 480px) {
+    max-width: 60%; /* Further reduce the logo size on very small screens */
   }
 }
 
-  // Main title (h1)
-  .header-title,
-  .page-title {
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: #fff;
-    text-transform: uppercase;
-    margin-bottom: 1rem;
-    text-align: center;
 
-    @media screen and (min-width: 48em) {
-      font-size: 3.5rem;
-    }
+// Flexbox centering for headers
+.site-header,
+.page-header {
+  display: flex;
+  flex-direction: column; /* Stack the content vertically */
+  justify-content: center; /* Vertically center the content */
+  align-items: center; /* Horizontally center the content */
 
-    @media screen and (min-width: 64em) {
-      font-size: 4.5rem;
-    }
+  .header-content,
+  .page-content {
+    display: flex;
+    justify-content: center;
+    flex-direction: column; /* Keep everything in the center */
+    align-items: center;
+    text-align: center; /* Ensure text is also centered */
   }
 
-  // Subtitle (h2)
-  .header-subtitle,
-  .page-subtitle {
-    font-size: 1.25rem;
-    font-weight: 300;
-    color: #eaeaea;
-    max-width: 40rem;
-    margin: 0 auto;
-    text-align: center;
-
-    @media screen and (min-width: 48em) {
-      font-size: 1.5rem;
-    }
-
-    @media screen and (min-width: 64em) {
-      font-size: 1.75rem;
-    }
+  @media screen and (min-width: 48em) {
+    padding: 6rem 3rem;
   }
-
-
-// Responsive typography for better mobile experience
-h1, h2 {
-  line-height: 1.2;
-  margin-bottom: 1rem;
 }
 
-// Ensure all images scale properly
 img {
   max-width: 100%;
+  text-align: center;
   height: auto;
 }
 
@@ -173,65 +153,6 @@ img {
   }
 }
 
-
-section {
-  padding: 4rem 0;
-
-  h2 {
-    font-size: 1.75rem;
-    margin-bottom: 2rem;
-  }
-
-  p {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-
-  img {
-    display: block;
-    margin: 2rem auto;
-    max-width: 100%;
-    height: auto;
-  }
-
-  &.bg-light-gray {
-    background-color: #f4f4f4;
-  }
-
-  &.bg-near-white {
-    background-color: #fafafa;
-  }
-
-  a {
-    color: #007aff;
-    text-decoration: underline;
-
-    &:hover {
-      color: #0056b3;
-    }
-  }
-
-  .consortium {
-    display: flex;
-    flex-wrap: wrap;
-
-    &__item {
-      flex: 1 1 50%;
-      padding: 1rem;
-    }
-  }
-}
-
-#sitelogo {
-  max-width: 15rem;
-}
-
-#headerlogo {
-  justify-self: center; /* Center the logo in the middle column */
-  max-width: 50%;
-  height: auto;
-}
-
 // Styling for the main deliverables and publications container
 .deliverables,
 .publications {