fix(district): homepage header block shadow & responsinvness

district/models.py

@@ -1044,7 +1044,10 @@ class DistrictElectionRootPage(RoutablePageMixin, Page):
     ### RELATIONS
 
     parent_page_types = ["district.DistrictHomePage"]
-    subpage_types = ["district.DistrictElectionCampaignPage"]
+    subpage_types = [
+        "district.DistrictElectionCampaignPage",
+        "district.DistrictGeoFeatureCollectionPage",
+    ]
 
     ### OTHERS
 
@@ -1372,7 +1375,10 @@ class DistrictGeoFeatureCollectionPage(
 
     ### RELATIONS
 
-    parent_page_types = ["district.DistrictHomePage"]
+    parent_page_types = [
+        "district.DistrictHomePage",
+        "district.DistrictElectionRootPage",
+    ]
     subpage_types = ["district.DistrictGeoFeatureDetailPage"]
 
     class Meta:

district/templates/district/blocks/homepage_header_block.html

 {% load wagtailimages_tags %}
 
 <header class="hero py-8 lg:py-16">
-  <div class="container container--default grid lg:grid-cols-7 lg:grid-rows-3 gap-2 items-center">
-    <div class="lg:col-span-3 lg:row-span-2 order-1">
-      <h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">{% firstof self.title page.title %}</h1>
+  <div class="container container--default grid md:grid-cols-7 md:grid-rows-3 gap-2 items-center text-center md:text-left">
+    <div class="md:col-span-3 md:row-span-2 order-2 md:order-1">
+      <h1 class="head-alt-lg lg:head-alt-xl">{% firstof self.title page.title %}</h1>
     </div>
 
-    <div class="lg:row-span-1 lg:col-span-3 order-3">
+    <div class="md:row-span-1 md:col-span-3 order-3">
       <div class="mt-4 md:mt-8 space-y-4 ">
         {% if self.button_link and self.button_text %}
-          <a href="{{ self.button_link }}" class="btn btn--icon btn--hoveractive btn--fullwidth md:btn--autowidth text-lg">
+          <a href="{{ self.button_link }}" class="btn btn--icon btn--hoveractive btn--fullwidth sm:btn--autowidth text-lg">
             <div class="btn__body-wrap">
               <div class="btn__body ">{{ self.button_text }}</div>
               <div class="btn__icon ">
@@ -21,9 +21,9 @@
       </div>
     </div>
 
-    <div class="lg:col-span-4 order-2 row-span-1 lg:row-span-3">
+    <div class="md:col-span-4 order-1 md:order-2 md:row-span-3">
       {% image self.image width-495 as img %}
-      <img src="{{ img.url }}" alt="" class="object-contain h-32 lg:h-80 lg:m-auto hidden md:block">
+      <img src="{{ img.url }}" alt="" class="object-contain h-32 md:h-64 lg:h-80 m-auto block">
     </div>
   </div>
 </header>