Reorder content on home page, and CSS changes to support that

Also found some bits where .row then .section but some were other way around? No idea why this was, have put .section then .row because as far as I can tell that is the intended way
IATI · Nov 13, 2024 · 2b97e15 · 2b97e15
1 parent 2322d67
commit 2b97e15
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 10 deletions.
diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html
@@ -9,10 +9,10 @@
 {% endblock %}
 
 {% block content %}
-    {% include 'home/modules/statistics.html' %}
     {% include 'home/modules/getting-started.html' %}
-    {% include 'home/modules/about-iati.html' %}
+    {% include 'home/modules/statistics.html' %}
     {% include 'home/modules/iati-in-action.html' %}
+    {% include 'home/modules/about-iati.html' %}
     {% include 'home/modules/iati-tools.html' %}
     {% include 'home/modules/flexible-features.html' %}
     {% include 'home/modules/news-tweets.html' with notalt=page.flexible_features|length|divisibleby:2 %}

diff --git a/home/templates/home/modules/about-iati.html b/home/templates/home/modules/about-iati.html
@@ -1,7 +1,7 @@
 {% load iati_tags %}
 
-<div class="row">
-    <div class="section-alt-top section-alt-bottom">
+<div class="section">
+    <div class="row">
         <h2 class="section__heading">{{ page.about_iati_title }}</h2>
         {% if page.about_iati_video %}
             <div class="l-2up">

diff --git a/home/templates/home/modules/flexible-features.html b/home/templates/home/modules/flexible-features.html
@@ -1,7 +1,7 @@
 {% load wagtailcore_tags responsive %}
 
 {% for child in page.flexible_features %}
-    <div class="{% cycle 'section' 'section-alt' %}">
+    <div class="{% cycle 'section' 'section-alt section-alt-top' %}">
         <div class="row">
             <h2 class="section__heading">{{ child.value.title }}</h2>
             {% if child.value.image %}

diff --git a/home/templates/home/modules/getting-started.html b/home/templates/home/modules/getting-started.html
@@ -1,6 +1,6 @@
 {% load responsive %}
 
-<div class="section">
+<div class="section-alt">
     <div class="row">
         <h2 class="section__heading">{{ page.getting_started_title }}</h2>
         <div class="l-3up">

diff --git a/home/templates/home/modules/iati-in-action.html b/home/templates/home/modules/iati-in-action.html
@@ -1,6 +1,6 @@
 {% load responsive %}
 
-<div class="section section-alt-bottom">
+<div class="section-alt section-alt-top section-alt-bottom">
     <div class="row">
         <h2 class="section__heading">{{ page.iati_in_action_title }}</h2>
         {% if page.iati_in_action_description %}

diff --git a/home/templates/home/modules/iati-tools.html b/home/templates/home/modules/iati-tools.html
@@ -1,7 +1,7 @@
 {% load responsive i18n tool_utils %}
 
-<div class="row">
-    <div class="section-alt">
+<div class="section-alt section-alt-top">
+    <div class="row">
         <h2 class="section__heading">{{ page.iati_tools_title }}</h2>
         {% if page.iati_tools_description %}
             <div class="max-meter is-typeset is-typeset--article">

diff --git a/home/templates/home/modules/statistics.html b/home/templates/home/modules/statistics.html
@@ -1,5 +1,6 @@
 {% load static responsive iati_tags %}
 
+<div class="section">
 <div class="row">
     <div class="stats stats--standout">
         {% if page.testimonial %}
@@ -30,3 +31,4 @@ <h2 class="stat__heading stat__heading--large" id="stat-publishers" data-inc-dur
         </div>
     </div>
 </div>
+</div>
diff --git a/patterns/assets/css/modules/_stats.scss b/patterns/assets/css/modules/_stats.scss
@@ -8,7 +8,6 @@
 }
 
 .stat {
-    background-color: #fff;
     box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
     .stats--grid & {
         border-left: 3px solid $iati-ocean;