Add baseline start point (#1)

Co-authored-by: Michael DiLeo <michael.dileo@oakstreethealth.com> Reviewed-on: #1
2025-08-13 20:56:29 +00:00
parent a0ea8872e4
commit 12eadac926
303 changed files with 315117 additions and 0 deletions
--- a/public/site-styles/style.css
+++ b/public/site-styles/style.css
@@ -0,0 +1,178 @@
+.banner-container {
+    position: relative;
+    width: 100%;
+    max-height: 40vh;
+    min-height: 200px;
+    overflow: hidden;
+}
+
+.banner {
+    width: 100%;
+    max-height: 40vh;
+    min-height: 200px;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+}
+
+.banner-title {
+    position: absolute;
+    top: var(--pico-typography-spacing-vertical);
+    left: var(--pico-spacing);
+    color: white; /* Keep white for banner overlay readability */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+    margin: 0;
+    font-family: var(--pico-font-family);
+    font-size: 2.5rem;
+    font-weight: 700;
+    z-index: 10;
+}
+
+.banner-subtitle {
+    position: absolute;
+    bottom: var(--pico-typography-spacing-vertical);
+    left: var(--pico-spacing);
+    right: var(--pico-spacing);
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+    margin: 0;
+    font-family: var(--pico-font-family);
+    font-size: var(--pico-font-size);
+    font-weight: var(--pico-font-weight);
+    z-index: 10;
+}
+
+@media (max-width: 768px) {
+    .banner-title {
+        font-size: 1.8rem;
+        top: calc(var(--pico-typography-spacing-vertical) * 0.5);
+        left: var(--pico-spacing);
+    }
+}
+
+@media (min-width: 576px) {
+    .banner-subtitle {
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+        max-width: 510px;
+        width: 100%;
+    }
+}
+
+@media (min-width: 768px) {
+    .banner-subtitle {
+        max-width: 700px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .banner-subtitle {
+        max-width: 950px;
+    }
+}
+
+@media (min-width: 1280px) {
+    .banner-subtitle {
+        max-width: 1200px;
+    }
+}
+
+@media (min-width: 1536px) {
+    .banner-subtitle {
+        max-width: 1450px;
+    }
+}
+
+/* Video iframe centering and responsive */
+.video-container {
+    position: relative;
+    width: 100%;
+    max-width: 560px;
+    margin: var(--pico-typography-spacing-vertical) auto;
+}
+
+.video-container::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
+}
+
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* Photo gallery layout */
+.photo-gallery {
+    display: flex;
+    gap: calc(var(--pico-spacing) * 2);
+    justify-content: center;
+    align-items: flex-start;
+    margin: var(--pico-typography-spacing-vertical) 0;
+    flex-wrap: wrap;
+}
+
+.photo-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 800px;
+    flex: 0 1 auto;
+}
+
+.photo-item small {
+    margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.5);
+    text-align: center;
+    width: 100%;
+    display: block;
+}
+
+.photo-item img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.25rem;
+}
+
+/* Responsive behavior */
+@media (max-width: 768px) {
+    .photo-gallery {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .photo-item {
+        max-width: 100%;
+        margin-bottom: var(--pico-typography-spacing-vertical);
+    }
+}
+
+/* Make headers use primary green color */
+:root {
+    --pico-h1-color: var(--pico-primary);
+    --pico-h2-color: var(--pico-primary);
+    --pico-h3-color: var(--pico-primary);
+    --pico-h4-color: var(--pico-primary);
+    --pico-h5-color: var(--pico-primary);
+    --pico-h6-color: var(--pico-primary);
+}
+
+/* Custom header colors for green theme - light mode */
+/* [data-theme="light"],
+:root:not([data-theme="dark"]) {
+    --pico-h1-color: #2d5016;
+    --pico-h2-color: #3e6b1f;
+    --pico-h3-color: #4f8528;
+    --pico-h4-color: #609f31;
+    --pico-h5-color: #71ba3a;
+    --pico-h6-color: #5a9428;
+}*/
+
+/* Test: Force green color on ALL headings */
+/* h1, h2, h3, h4, h5, h6 {
+    color: #2d5016 !important;
+}  */