From 35d1e568fa43b966fae11c2f63e9db2e6686b9a6 Mon Sep 17 00:00:00 2001
From: Ben Sturmfels <ben@sturm.com.au>
Date: Wed, 23 Jul 2025 22:45:25 +1000
Subject: [PATCH] Fix Vizio image alignment

Use of ::before was possibly a little complicated. I've added an explicit
element for the image and displayed using flexbox.
---
 .../content/copyleft-compliance/vizio.html    |  2 +-
 conservancy/static/css/conservancy.css        | 37 -------------------
 conservancy/templates/base_vizio.html         |  5 ++-
 3 files changed, 4 insertions(+), 40 deletions(-)

diff --git a/conservancy/content/copyleft-compliance/vizio.html b/conservancy/content/copyleft-compliance/vizio.html
index 3e798c72..9b2959b3 100644
--- a/conservancy/content/copyleft-compliance/vizio.html
+++ b/conservancy/content/copyleft-compliance/vizio.html
@@ -18,7 +18,7 @@
 {% block on-page-css %}
 <style>
 
-.case-header {
+.case-image {
   background: url("{% static 'img/vizio-image.webp' %}") right center no-repeat;
   background-size: cover;
 }
diff --git a/conservancy/static/css/conservancy.css b/conservancy/static/css/conservancy.css
index aad7d150..3419e0e5 100644
--- a/conservancy/static/css/conservancy.css
+++ b/conservancy/static/css/conservancy.css
@@ -1611,21 +1611,7 @@ Court Case Page Styles (MT/2025)
 ================================================================================================ */
 
 .case-header {
-  position: relative;
-  overflow: hidden;
-}
-
-.case-header::before {
-  content: "";
-  position: absolute;
-  left: 0; top: 0; bottom: 0; width: 50%;
   background: var(--washed-green);
-  z-index: 0;
-}
-
-.case-header > * {
-  position: relative;
-  z-index: 1;
 }
 
 .case-bar {
@@ -1637,18 +1623,10 @@ Court Case Page Styles (MT/2025)
 }
 
 .case-info {
-  width: 100%;
   max-width: var(--max-site-width);
-  display: grid;
-  grid-template-columns: 1fr 1fr;
   margin: 0 auto;
 }
 
-.case-info > * {
-  padding: 100px 0;
-  margin-right: 150px;
-}
-
 .case-info h1 {
   margin: 0 0 10px;
   padding: 0;
@@ -1671,25 +1649,10 @@ Court Case Page Styles (MT/2025)
 }
 
 @media screen and (max-width: 66.999em) { 
-
-  .case-header {
-    background: var(--washed-green) !important;
-  }
-
-  .case-header::before {
-    display: none;
-  }
-
   .case-info {
-    grid-template-columns: 1fr;
     text-align: center;
     padding: 50px 20px 0;
   }
-
-  .case-info > * {
-    margin: 0;
-  }
-
 }
 
 .case-content {
diff --git a/conservancy/templates/base_vizio.html b/conservancy/templates/base_vizio.html
index 9ee0319b..47e494f2 100644
--- a/conservancy/templates/base_vizio.html
+++ b/conservancy/templates/base_vizio.html
@@ -12,11 +12,12 @@
 {% block outercontent %}
 
 <section class="case-header">
-  <div class="case-info">
-      <div>
+  <div class="case-info flex">
+    <div class="case-info w-50-l" style="padding: 100px">
       <h4>Court Case</h4>
       {% block case-info %}{% endblock %}
     </div>
+    <div class="case-image w-50-ns dn db-l"></div>
   </div>
   <div class="case-bar"></div>
 </section>