Merge pull request #515 from GSA/RITM1279040

Ritm1279040

_includes/banner.html

@@ -28,7 +28,7 @@ <h1 class="usa-hero__heading"><span class="font-ui-lg text-normal text-primary-d
         <section class="carousel-screen usa-graphic-list padding-y-4 abstract-background-federal-data-trust">
             <div class="grid-container">
                 <div class="grid-gap-banner">
-                    <div class="usa-hero__callout carousel-content-box">
+                    <div class="usa-hero__callout carousel-content-box" style="position:relative; margin-top: -20px;">
                         <h2 class="usa-hero__heading"><span class="font-ui-lg text-normal text-primary-darker text-bold">Federal Zero Trust Data Security Guide </span>
                         </h2>
                         <p class="text-gray-70 font-sans-md text-bold">The CDO Council and CISO Council released a groundbreaking Federal Zero Trust Data Security Guide, offering a vital framework to help operationalize data security in complex cyber landscapes.</p>
@@ -40,7 +40,7 @@ <h2 class="usa-hero__heading"><span class="font-ui-lg text-normal text-primary-d
         <section class="carousel-screen usa-graphic-list padding-y-4 abstract-background-cdoc-symposium">
             <div class="grid-container">
                 <div class="grid-gap-banner">
-                    <div class="usa-hero__callout wide-content-box carousel-content-box">
+                    <div class="usa-hero__callout wide-content-box carousel-content-box" style="margin-left: -40px;">
                         <h2 class="usa-hero__heading"><span class="font-ui-lg text-normal text-primary-darker text-bold">2024 CDOC Symposium</span>
                         </h2>
                         <p class="text-gray-70 font-sans-md text-bold">The CDO Council’s inaugural symposium marked a significant milestone, highlighting data’s vital role as a strategic enabler in modernizing agency missions and enhancing capabilities, while fostering collaboration for effective federal program delivery.
@@ -80,3 +80,28 @@ <h2 class="usa-hero__heading"><span class="font-ui-lg text-normal text-primary-d
     </div>
 </section>
 
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+    function adjustBackgroundImage() {
+        const targetSection = document.querySelector('.abstract-background-federal-data-trust');
+
+        if (targetSection) {
+            const sectionWidth = targetSection.offsetWidth; 
+            const screenWidth = window.innerWidth;
+
+            if (sectionWidth > screenWidth) {
+                targetSection.style.backgroundSize = `${screenWidth}px auto`;
+                targetSection.style.backgroundPosition = 'center top';
+            } else {
+                targetSection.style.backgroundSize = 'cover'; 
+                targetSection.style.backgroundPosition = 'center top'; 
+            }
+        }
+    }
+
+        adjustBackgroundImage();
+
+        window.addEventListener('resize', adjustBackgroundImage);
+    });
+
+</script>

alter_img.py

@@ -0,0 +1,52 @@
+from PIL import Image, ImageDraw
+
+def reposition_box(in_, out_, shift_pixels):
+
+    img = Image.open(in_)
+    img_width, img_height = img.size
+
+    img = img.convert("RGBA")
+    pixels = img.load()
+
+    def is_color_close(pixel, target_color, margin):
+        count = 0
+        for i in range(3):
+            if abs(pixel[i]-target_color[i])<= margin:
+                count+=1
+        return count==3
+
+
+    white_bounds = None
+    target_color = (66, 144, 181, 1)
+    for x in range(img_width):
+        for y in range(img_height):
+            r, g, b, a = pixels[x, y]
+            if is_color_close((r,g,b,a), target_color, 10): 
+                if not white_bounds:
+                    white_bounds = [x, y, x, y] 
+                else:
+                    white_bounds[0] = min(white_bounds[0], x)
+                    white_bounds[1] = min(white_bounds[1], y)
+                    white_bounds[2] = max(white_bounds[2], x)
+                    white_bounds[3] = max(white_bounds[3], y)
+
+    if not white_bounds:
+        print("White section not found!")
+        return
+    x1, y1, x2, y2 = white_bounds
+    white_section = img.crop((x1, y1, x2, y2))
+    draw = ImageDraw.Draw(img)
+    draw.rectangle([x1, y1, x2, y2], fill=(2, 13, 56, 255))
+    new_x1 = max(0, x1 - shift_pixels)
+    new_x2 = new_x1 + (x2 - x1)
+    img.paste(white_section, (new_x1, y1, new_x2, y2), white_section)
+    img.save(out_)
+    print(f"Adjusted image saved to {out_}")
+
+
+input_img = "input.png"  
+output_img = "output.png" 
+
+shift_pixels = 1000
+
+reposition_box(input_img, output_img, shift_pixels)

assets/css/banner.scss

@@ -14,13 +14,15 @@
 }
 
 .carousel-container img {
-    padding-bottom: 2rem;
-    padding-top: 2rem;
-    background-position: center;
-    background-size: cover;
-    color: #fff;
+  max-width: 25vw; 
+  width: auto; 
+  height: auto; 
+  object-fit: contain; 
+  overflow: hidden; 
+  position: relative; 
 }
 
+
 .left-arrow {
   position: absolute;
   display: flex;
@@ -225,13 +227,15 @@
 }
 
 .abstract-background-federal-data-trust{
-  background-image: url(../images/background/CDO-Zero-Trust-Data-Security-Guide-Banner-Graphic-Option-2.png);
+  background-image: url(../images/background/cdo_federal_zero_trust.png);
   background-color: #172636;
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
 }
 
+
+
 .abstract-background-review-2024{
   background-image: url(../images/background/year-review-2024-carousel.jpg);
   background-color: #172636;
@@ -241,10 +245,10 @@
 }
 
 .abstract-background-cdoc-symposium{
-  background-image: url(../images/background/cdoc-symposium-carousel.jpg);
+  background-image: url(../images/background/2025_data_powers_mission1.png);
   background-color: #172636;
   background-repeat: no-repeat;
-  background-position: top center;
+  background-position: 35%;
   background-size: cover;
 }