diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 0507fb3..0deffba 100644 --- 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 {