From 9d430e7ed1bc0519c90b444c3b964584a3347dcc Mon Sep 17 00:00:00 2001
From: Norbert Kwizera <norkans7@gmail.com>
Date: Thu, 25 Jan 2024 17:03:53 +0200
Subject: [PATCH] Adjust logo footer size

---
 templates/base_admin_dashboard.html | 223 ++++---
 templates/public_base.html          | 898 +++++++++++++++-------------
 2 files changed, 595 insertions(+), 526 deletions(-)

diff --git a/templates/base_admin_dashboard.html b/templates/base_admin_dashboard.html
index 2afaeac30..4f257ff7b 100644
--- a/templates/base_admin_dashboard.html
+++ b/templates/base_admin_dashboard.html
@@ -1,65 +1,84 @@
 {% extends "frame.html" %}
 {% load smartmin i18n thumbnail ureport compress %}
+
 {% block styles %}
     {% compress css %}
         <link rel="stylesheet" href="{{ STATIC_URL }}css/tailwind.css">
     {% endcompress %}
     {% if is_rtl_org %}
         {% compress css %}
-            <link type="text/css"
-                  rel="stylesheet"
-                  href="{{ STATIC_URL }}css/bulma0.7.1.css">
-            <link type="text/css"
-                  rel="stylesheet"
-                  href="{{ STATIC_URL }}css/bulma-rtl0.7.1.css">
-            <link type="text/less"
-                  rel="stylesheet"
-                  href="{{ STATIC_URL }}less/styles.less">
+            <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/bulma0.7.1.css">
+            <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/bulma-rtl0.7.1.css">
+            <link type="text/less" rel="stylesheet" href="{{ STATIC_URL }}less/styles.less">
         {% endcompress %}
     {% else %}
         {% compress css %}
             <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/bulma.css">
-            <link type="text/css"
-                  rel="stylesheet"
-                  href="{{ STATIC_URL }}css/Chart.min.css">
-            <link type="text/less"
-                  rel="stylesheet"
-                  href="{{ STATIC_URL }}less/styles.less">
+            <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/Chart.min.css">
+            <link type="text/less" rel="stylesheet" href="{{ STATIC_URL }}less/styles.less">
         {% endcompress %}
     {% endif %}
     <style type="text/css">
-    table.list-table {
-      font-size: 0.85rem;
-    }
-    
-    .row1 a, .row2 a {
-      display: block;
-      padding-left: 5px;
-    
-      color: {{ org|config:'dark1_color'|default:'#439932' }};
-      border-left: 5px solid {{ org|config:'dark1_color'|default:'#439932' }};
-    }
-    
-    .row1 a:hover, .row2 a:hover {
-      background-color: #E6E7E8;
-      color: {{ org|config:'dark1_color'|default:'#439932' }};
-    }
-    
-    .row1.inactive a, .row2.inactive a, {
+      table.list-table {
+        font-size: 0.85rem;
+      }
+
+      .row1 a,
+      .row2 a {
+        display: block;
+        padding-left: 5px;
+
+        color: {
+            {
+            org|config: 'dark1_color' |default:'#439932'
+          }
+        }
+
+        ;
+
+        border-left: 5px solid {
+            {
+            org|config: 'dark1_color' |default:'#439932'
+          }
+        }
+
+        ;
+      }
+
+      .row1 a:hover,
+      .row2 a:hover {
+        background-color: #E6E7E8;
+
+        color: {
+            {
+            org|config: 'dark1_color' |default:'#439932'
+          }
+        }
+
+        ;
+      }
+
+      .row1.inactive a,
+      .row2.inactive a,
+      {
       border-left: 5px solid #bbb;
       padding-left: 5px;
-    }
-    
-    .row1.inactive a, .row2.inactive a, .row1.inactive td, .row2.inactive td {
-      color: #ccc;
-    }
-    
-    .row1.inactive a:hover, .row2.inactive a:hover {
-      color: #ccc;
-      text-decoration: none;
-      font-weight: normal;
-    
-    }
+      }
+
+      .row1.inactive a,
+      .row2.inactive a,
+      .row1.inactive td,
+      .row2.inactive td {
+        color: #ccc;
+      }
+
+      .row1.inactive a:hover,
+      .row2.inactive a:hover {
+        color: #ccc;
+        text-decoration: none;
+        font-weight: normal;
+
+      }
     </style>
 {% endblock styles %}
 {% block body-content %}
@@ -72,13 +91,8 @@
                 <div class="level">
                     {% if is_rtl_org %}<div class="level-left"></div>{% endif %}
                     <div class="{% if is_rtl_org %}level-right{% else %}level-left{% endif %}">
-                        <a href="{% url 'public.index' %}"
-                           style="justify-content: start"
-                           class="level-item has-text-black">
-                            <div style="{% if is_rtl_org %}margin-right:0;
-                                        margin-left:1.25rem;
-                                        {% endif %}"
-                                 class="icon">
+                        <a href="{% url 'public.index' %}" style="justify-content: start" class="level-item has-text-black">
+                            <div style="{% if is_rtl_org %}margin-right:0; margin-left:1.25rem; {% endif %}" class="icon">
                                 <i class="{% if is_rtl_org %}fa-arrow-circle-right{% else %}fa-arrow-circle-left{% endif %} fas"></i>
                             </div>
                             {% trans "Back to Website" %}
@@ -93,17 +107,16 @@
                             <div style="justify-content: start;" class="level-item square-logo">
                                 <div style="width:360px">
                                     {% if org|config:"has_new_brand" %}
-                                    <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo.png" alt="{{ org.name }}" class="logo">
+                                        <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo.png" alt="{{ org.name }}" class="logo">
                                     {% else %}
-                                    {% thumbnail org.get_logo "x180" format="PNG" as im %}
-                                        <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
-                                    {% endthumbnail %}
+                                        {% thumbnail org.get_logo "x180" format="PNG" as im %}
+                                            <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
+                                        {% endthumbnail %}
                                     {% endif %}
                                 </div>
                                 {% if org|config:"has_new_brand" %}
-                                <div class="flex-1 text-center font-bold flex-center-y mx-4 mt-4" style="font-family:'Noto Sans', sans-serif;">
-                                    {{ org.name }}
-                                </div>
+                                    <div class="flex-1 text-center font-bold flex-center-y mx-4 mt-4"
+                                         style="font-family:'Noto Sans', sans-serif">{{ org.name }}</div>
                                 {% endif %}
                             </div>
                         </div>
@@ -117,19 +130,15 @@
                                     <br class="is-hidden-mobile">
                                     {{ request.user.username }}
                                 </div>
-                                <a href="{% url 'users.user_logout' %}?go=/"
-                                   class="level-item button is-outlined logout-button">{% trans "Logout" %}</a>
+                                <a href="{% url 'users.user_logout' %}?go=/" class="level-item button is-outlined logout-button">{% trans "Logout" %}</a>
                             {% else %}
-                                <a href="{% org_host_link %}{% url 'users.user_login' %}"
-                                   class="level-item button is-outlined">{% trans "Login" %}</a>
+                                <a href="{% org_host_link %}{% url 'users.user_login' %}" class="level-item button is-outlined">{% trans "Login" %}</a>
                             {% endif %}
                         {% endblock login %}
                     </div>
                     {% if is_rtl_org %}
                         <div class="level-right">
-                            <div style="justify-content: start;
-                                        margin-right: 0rem"
-                                 class="level-item square-logo">
+                            <div style="justify-content: start; margin-right: 0rem" class="level-item square-logo">
                                 <div style="width:360px">
                                     {% thumbnail org.get_logo "x180" format="PNG" as im %}
                                         <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
@@ -271,7 +280,7 @@
                                             <li>
                                                 <a href="{% url 'users.user_list' %}">
                                                     <span class="icon">
-                                                        <img src="{{ STATIC_URL }}img/settings_icon.png" alt="" >
+                                                        <img src="{{ STATIC_URL }}img/settings_icon.png" alt="">
                                                     </span>
                                                     <span class="menu-link-title">{% trans "Users" %}</span>
                                                 </a>
@@ -322,44 +331,50 @@
             {% block footer %}
                 <!-- footer navbar -->
                 <div class="md:grid md:grid-cols-3 grid grid-cols-1 gap-4 px-home mt-12 mb-3">
-                    <a href="{% url 'public.index' %}"
-                       class="md:block flex-1 text-center mb-2 hidden">
-                        <div style="max-width:360px">
-                            {% if org|config:"has_new_brand" %}
-                            <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo.png" alt="{{ org.name }}" class="logo">
-                            {% else %}
-                            {% thumbnail org.get_logo "x180" format="PNG" as im %}
-                                <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
-                            {% endthumbnail %}
-                            {% endif %}
-                        </div>
+                    <a href="{% url 'public.index' %}" class="md:block flex-1 text-center mb-2 hidden">
+                        {% if org|config:"has_new_brand" %}
+                            <div style="max-width:220px">
+                                <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo_footer.png" alt="{{ org.name }}" class="logo">
+                            </div>
+                        {% else %}
+                            <div style="max-width:360px">
+                                {% thumbnail org.get_logo "x180" format="PNG" as im %}
+                                    <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
+                                {% endthumbnail %}
+                            </div>
+                        {% endif %}
                     </a>
                     <div class="md:flex justify-center hidden">
                         <div style="max-width:150px" class="md:block block">
                             {% if org.language != "ar" and org.language != "ru" and org.language != "ch" and org.language != "fr" %}
-                                <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_EN.png" class="md:-ml-0 -ml-2">
+                                <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_EN.png" class="md:-ml-0 -ml-2" alt="">
                             {% else %}
-                                <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_{{ org.language|upper }}.png" class="md:-ml-0 -ml-2">
+                                <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_{{ org.language|upper }}.png"
+                                     class="md:-ml-0 -ml-2"
+                                     alt="">
                             {% endif %}
                         </div>
                     </div>
-                    <a href="{% url 'public.index' %}"
-                       class="md:hidden flex-1 text-center mb-6 inline-flex">
+                    <a href="{% url 'public.index' %}" class="md:hidden flex-1 text-center mb-6 inline-flex">
                         <div style="width:180px">
                             {% if org|config:"has_new_brand" %}
                                 <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo.png" alt="{{ org.name }}" class="logo">
                             {% else %}
-                            {% thumbnail org.get_logo "x180" format="PNG" as im %}
-                                <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
-                            {% endthumbnail %}
+                                {% thumbnail org.get_logo "x180" format="PNG" as im %}
+                                    <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
+                                {% endthumbnail %}
                             {% endif %}
                         </div>
                         <div class="md:hidden flex flex-1 justify-end float-right">
                             <div style="width:120px" class="md:block block">
                                 {% if org.language != "ar" and org.language != "ru" and org.language != "ch" and org.language != "fr" %}
-                                    <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_EN.png" class="md:-ml-0 -ml-2" alt="UNICEF logo">
+                                    <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_EN.png"
+                                         class="md:-ml-0 -ml-2"
+                                         alt="UNICEF logo">
                                 {% else %}
-                                    <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_{{ org.language|upper }}.png" class="md:-ml-0 -ml-2" alt="UNICEF logo">
+                                    <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_{{ org.language|upper }}.png"
+                                         class="md:-ml-0 -ml-2"
+                                         alt="UNICEF logo">
                                 {% endif %}
                             </div>
                         </div>
@@ -368,40 +383,28 @@
                         <div class="md:ml-6 font-bold text-2xl flex-center-y">
                             <div>
                                 <a href="{% url 'public.opinions' %}"
-                                   class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                                    {% trans "Opinions" %}
-                                </a>
+                                   class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Opinions" %}</a>
                             </div>
                         </div>
                         <div class="font-bold text-2xl ml-6 flex-center-y">
                             <div>
                                 <a href="{% url 'public.stories' %}"
-                                   class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                                    {% trans "Stories" %}
-                                </a>
+                                   class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Stories" %}</a>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="md:grid grid-cols-2 gap-4 px-home mt-5 mb-12">
                     <div class="text-sm font-bold">
-                        <a href="{% url 'public.about' %}"
-                           class="hover:text-gray-750 flex-initial py-menu">{% trans "About" %}</a>
-                        <a href="{% url 'public.ureporters' %}"
-                           class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Engagement" %}</a>
+                        <a href="{% url 'public.about' %}" class="hover:text-gray-750 flex-initial py-menu">{% trans "About" %}</a>
+                        <a href="{% url 'public.ureporters' %}" class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Engagement" %}</a>
                         <a href="{% url 'public.bots' %}"
-                           class="{% if is_rtl_org %}md:mr-4{% else %}md:ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">
-                            {% trans "Bots" %}
-                        </a>
+                           class="{% if is_rtl_org %}md:mr-4{% else %}md:ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">{% trans "Bots" %}</a>
                         <a href="{% url 'public.reports' %}"
-                           class="{% if is_rtl_org %}md:mr-4{% else %}md:ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">
-                            {% trans "Reports" %}
-                        </a>
+                           class="{% if is_rtl_org %}md:mr-4{% else %}md:ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">{% trans "Reports" %}</a>
                         {% if org|config:"has_jobs" %}
                             <a href="{% url 'public.jobs' %}"
-                               class="{% if is_rtl_org %}md:mr-4{% else %}md:ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">
-                                {% trans "Jobs" %}
-                            </a>
+                               class="{% if is_rtl_org %}md:mr-4{% else %}md:ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">{% trans "Jobs" %}</a>
                         {% endif %}
                     </div>
                     <div class="md:justify-end flex text-sm font-bold">
@@ -429,14 +432,10 @@
                         {% if show_login %}
                             {% if request.user and request.user.is_authenticated %}
                                 <a href="{% url 'users.user_logout' %}?go=/"
-                                   class="{% if is_rtl_org %}mr-4{% else %}ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">
-                                    {% trans "Logout" %}
-                                </a>
+                                   class="{% if is_rtl_org %}mr-4{% else %}ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">{% trans "Logout" %}</a>
                             {% else %}
                                 <a href="{% org_host_link %}{% url 'users.user_login' %}"
-                                   class="{% if is_rtl_org %}mr-4{% else %}ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">
-                                    {% trans "Login" %}
-                                </a>
+                                   class="{% if is_rtl_org %}mr-4{% else %}ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">{% trans "Login" %}</a>
                             {% endif %}
                         {% endif %}
                     </div>
diff --git a/templates/public_base.html b/templates/public_base.html
index 0d1a4b0c2..8a98b9027 100644
--- a/templates/public_base.html
+++ b/templates/public_base.html
@@ -1,13 +1,11 @@
 <!DOCTYPE html>
 {% load static compress dashblocks dashorgs thumbnail ureport smartmin i18n %}
+
 {% load_qbs request.org 'additional_menu' %}
 <html dir="{% if is_rtl_org %}rtl{% else %}ltr{% endif %}">
     <head>
         <meta charset="UTF-8">
-        {% if org|config:"facebook_meta_verification" %}
-            <meta name="facebook-domain-verification"
-                  content="{{ org|config:'facebook_meta_verification' }}">
-        {% endif %}
+        {% if org|config:"facebook_meta_verification" %}<meta name="facebook-domain-verification" content="{{ org|config:'facebook_meta_verification' }}">{% endif %}
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>
@@ -19,13 +17,9 @@
         <meta name="author" content="">
         {% if has_better_domain %}<meta name="robots" content="noindex">{% endif %}
         {% if org|config:"has_new_brand" %}
-        <link rel="icon"
-              type="image/x-icon"
-              href="{{ STATIC_URL }}img/favicon-v2024.png">
+            <link rel="icon" type="image/x-icon" href="{{ STATIC_URL }}img/favicon-v2024.png">
         {% elif org.subdomain %}
-            <link rel="icon"
-                  type="image/x-icon"
-                  href="{{ STATIC_URL }}img/favicos/flag_{{ org.subdomain }}.png">
+            <link rel="icon" type="image/x-icon" href="{{ STATIC_URL }}img/favicos/flag_{{ org.subdomain }}.png">
         {% else %}
             <link rel="icon" type="image/x-icon" href="{{ STATIC_URL }}img/favicon.png">
         {% endif %}
@@ -36,181 +30,314 @@
             {% endthumbnail %}
         {% endblock meta-extra %}
         <!-- Google fonts we use -->
-        <link href="https://fonts.googleapis.com/css2?family=Livvic:wght@300;400;700&family=Noto+Sans:wght@400;700&family=Roboto+Condensed:wght@500&family=Roboto:wght@500&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Livvic:wght@300;400;700&family=Noto+Sans:wght@400;700&family=Roboto+Condensed:wght@500&family=Roboto:wght@500&display=swap"
+              rel="stylesheet">
         <!-- Font awesome icons -->
-        <link rel="stylesheet"
-              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
         <!-- Leaflet for maps -->
-        <link rel="stylesheet"
-              href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
         <!-- AOS, animation library -->
-        <link rel="stylesheet"
-              href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
         <!-- U-Report styles, compress so they cache bust -->
         {% compress css %}
             <link rel="stylesheet" href="{{ STATIC_URL }}css/tailwind.css">
         {% endcompress %}
         <style type="text/css">
-      .bg-dark1, .bg-dark1-v2024 {
-        background: {{ org|config:'dark1_color'|default:'#439932'  }};
-      }
-      
-      .border-dark1, .border-dark1-v2024 {
-        border-color: {{ org|config:'dark1_color'|default:'#439932' }};
-      }
-      
-      .hover\:border-dark1:hover, .hover\:border-dark1-v2024:hover {
-        border-color: {{ org|config:'dark1_color'|default:'#439932' }};
-      }
-      
-      .bg-dark2, .bg-dark2-v2024 {
-        background: {{ org|config:'dark2_color'|default:'#1751af' }};
-      }
-      
-      .border-dark2, .border-dark2-v2024 {
-        border-color: {{ org|config:'dark2_color'|default:'#1751af' }};
-      }
-      
-      .hover\:border-dark2:hover, .hover\:border-dark2-v2024:hover {
-        border-color: {{ org|config:'dark2_color'|default:'#1751af' }};
-      }
-      
-      .bg-dark3, .bg-dark3-v2024 {
-        background: {{ org|config:'dark3_color'|default:'#5eb3e0' }};
-      }
-      
-      .border-dark3, .border-dark3-v2024  {
-        border-color: {{ org|config:'dark3_color'|default:'#5eb3e0' }};
-      }
-      
-      .hover\:border-dark3:hover, .hover\:border-dark3-v2024:hover {
-        border-color: {{ org|config:'dark3_color'|default:'#5eb3e0' }};
-      }
-      
-      .border-light1, .border-light1-v2024 {
-        border-color: {{ org|config:'light1_color'|default:'#FFD100' }};
-      }
-      
-      .bg-light1, .bg-light1-v2024 {
-        background: {{ org|config:'light1_color'|default:'#FFD100' }};
-      }
-      
-      .bg-light1.hover-dark:hover, .bg-light1-v2024.hover-dark:hover {
-        background: #ffda33;
-      }
-      
-      .text-light1, .text-light1-v2024 {
-        color: {{ org|config:'light1_color'|default:'#FFD100' }};
-      }
-      
-      .bg-light2, .bg-light2-v2024 {
-        background: {{ org|config:'light2_color'|default:'#5eb3e0' }};
-      }
-      
-      .bg-light2.hover-dark:hover, .bg-light2-v2024.hover-dark:hover {
-        background: #89c7e8;
-      }
-      
-      .ligth-black {
-        background: lighten(#000000, 10%);
-      }
-      
-      .slideout-menu {
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        width: 230px;
-        min-height: 100vh;
-        will-change: transform;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        z-index: 0;
-        display: none;
-      }
-      
-      .slideout-menu-left {
-        left: 0;
-      }
-      
-      .slideout-menu-right {
-        right: 0;
-      }
-      
-      .slideout-panel {
-        position: relative;
-        z-index: 1;
-        will-change: transform;
-        background-color: #FFF; /* A background-color is required */
-        min-height: 100vh;
-      }
-      
-      .slideout-open,
-      .slideout-open body,
-      .slideout-open .slideout-panel {
-        overflow: hidden;
-      }
-      
-      .slideout-open .slideout-menu {
-        display: block;
-      }
-      {% if org|config:"has_new_brand" %}
-      .bg-dark1-v2024, .bg-dark2-v2024,  .bg-dark3-v2024, .bg-light1-v2024, .bg-light2-v2024 {
-        background: #00aeef;
-      }
+          .bg-dark1,
+          .bg-dark1-v2024 {
+            background: {
+                {
+                org|config: 'dark1_color' |default:'#439932'
+              }
+            }
+
+            ;
+          }
+
+          .border-dark1,
+          .border-dark1-v2024 {
+            border-color: {
+                {
+                org|config: 'dark1_color' |default:'#439932'
+              }
+            }
+
+            ;
+          }
+
+          .hover\:border-dark1:hover,
+          .hover\:border-dark1-v2024:hover {
+            border-color: {
+                {
+                org|config: 'dark1_color' |default:'#439932'
+              }
+            }
+
+            ;
+          }
+
+          .bg-dark2,
+          .bg-dark2-v2024 {
+            background: {
+                {
+                org|config: 'dark2_color' |default:'#1751af'
+              }
+            }
+
+            ;
+          }
+
+          .border-dark2,
+          .border-dark2-v2024 {
+            border-color: {
+                {
+                org|config: 'dark2_color' |default:'#1751af'
+              }
+            }
+
+            ;
+          }
+
+          .hover\:border-dark2:hover,
+          .hover\:border-dark2-v2024:hover {
+            border-color: {
+                {
+                org|config: 'dark2_color' |default:'#1751af'
+              }
+            }
+
+            ;
+          }
+
+          .bg-dark3,
+          .bg-dark3-v2024 {
+            background: {
+                {
+                org|config: 'dark3_color' |default:'#5eb3e0'
+              }
+            }
+
+            ;
+          }
+
+          .border-dark3,
+          .border-dark3-v2024 {
+            border-color: {
+                {
+                org|config: 'dark3_color' |default:'#5eb3e0'
+              }
+            }
+
+            ;
+          }
+
+          .hover\:border-dark3:hover,
+          .hover\:border-dark3-v2024:hover {
+            border-color: {
+                {
+                org|config: 'dark3_color' |default:'#5eb3e0'
+              }
+            }
+
+            ;
+          }
+
+          .border-light1,
+          .border-light1-v2024 {
+            border-color: {
+                {
+                org|config: 'light1_color' |default:'#FFD100'
+              }
+            }
+
+            ;
+          }
+
+          .bg-light1,
+          .bg-light1-v2024 {
+            background: {
+                {
+                org|config: 'light1_color' |default:'#FFD100'
+              }
+            }
+
+            ;
+          }
+
+          .bg-light1.hover-dark:hover,
+          .bg-light1-v2024.hover-dark:hover {
+            background: #ffda33;
+          }
+
+          .text-light1,
+          .text-light1-v2024 {
+            color: {
+                {
+                org|config: 'light1_color' |default:'#FFD100'
+              }
+            }
+
+            ;
+          }
+
+          .bg-light2,
+          .bg-light2-v2024 {
+            background: {
+                {
+                org|config: 'light2_color' |default:'#5eb3e0'
+              }
+            }
+
+            ;
+          }
+
+          .bg-light2.hover-dark:hover,
+          .bg-light2-v2024.hover-dark:hover {
+            background: #89c7e8;
+          }
+
+          .ligth-black {
+            background: lighten(#000000, 10%);
+          }
+
+          .slideout-menu {
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            width: 230px;
+            min-height: 100vh;
+            will-change: transform;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling: touch;
+            z-index: 0;
+            display: none;
+          }
+
+          .slideout-menu-left {
+            left: 0;
+          }
+
+          .slideout-menu-right {
+            right: 0;
+          }
+
+          .slideout-panel {
+            position: relative;
+            z-index: 1;
+            will-change: transform;
+            background-color: #FFF;
+            /* A background-color is required */
+            min-height: 100vh;
+          }
 
-      .bg-dark1-home.hover-dark:hover, .bg-dark2-home.hover-dark:hover,  .bg-dark3-home.hover-dark:hover, .bg-light1-home.hover-dark:hover, .bg-light2-home.hover-dark:hover {
-        background: #98DFF9;
-      }
+          .slideout-open,
+          .slideout-open body,
+          .slideout-open .slideout-panel {
+            overflow: hidden;
+          }
 
-      .border-dark1-v2024, .border-dark2-v2024, .border-dark3-v2024, .border-light1-v2024 {
-        border-color: #00aeef;
-      }
+          .slideout-open .slideout-menu {
+            display: block;
+          }
 
-      .hover\:border-dark1-v2024:hover,  .hover\:border-dark2-v2024:hover,  .hover\:border-dark3-v2024:hover {
-        border-color: #00aeef;
-      }
+            {
+            % if org|config: "has_new_brand" %
+          }
 
-      .bg-light1-v2024.hover-dark:hover {
-        background: #98DFF9;
-      }
+          .bg-dark1-v2024,
+          .bg-dark2-v2024,
+          .bg-dark3-v2024,
+          .bg-light1-v2024,
+          .bg-light2-v2024 {
+            background: #00aeef;
+          }
 
-      .text-light1-v2024 {
-        color: #00aeef;
-      }
+          .bg-dark1-home.hover-dark:hover,
+          .bg-dark2-home.hover-dark:hover,
+          .bg-dark3-home.hover-dark:hover,
+          .bg-light1-home.hover-dark:hover,
+          .bg-light2-home.hover-dark:hover {
+            background: #98DFF9;
+          }
 
-      {% endif %}
+          .border-dark1-v2024,
+          .border-dark2-v2024,
+          .border-dark3-v2024,
+          .border-light1-v2024 {
+            border-color: #00aeef;
+          }
 
+          .hover\:border-dark1-v2024:hover,
+          .hover\:border-dark2-v2024:hover,
+          .hover\:border-dark3-v2024:hover {
+            border-color: #00aeef;
+          }
+
+          .bg-light1-v2024.hover-dark:hover {
+            background: #98DFF9;
+          }
+
+          .text-light1-v2024 {
+            color: #00aeef;
+          }
+
+            {
+            % endif %
+          }
         </style>
         <script type="text/javascript">
-      var defaultColors = ["#e4002b", "#ff8200", "#ffd100", "#009a17", "#41b6e6", "#0050b5", "#d9d9d6"];
-      var orgColors = '{{org|config:"colors"|default:""}}'.toUpperCase().split(',');
-      
-      for (var i = 0; i < defaultColors.length; i++) {
-        var elt = defaultColors[i].trim().toUpperCase();
-        if ((orgColors.length <= 6) && (!orgColors.includes(elt))) {
-          orgColors.push(elt);
-        }
-      }
+          var defaultColors = ["#e4002b", "#ff8200", "#ffd100", "#009a17", "#41b6e6", "#0050b5", "#d9d9d6"];
+          var orgColors = '{{org|config:"colors"|default:""}}'.toUpperCase().split(',');
+
+          for (var i = 0; i < defaultColors.length; i++) {
+            var elt = defaultColors[i].trim().toUpperCase();
+            if ((orgColors.length <= 6) && (!orgColors.includes(elt))) {
+              orgColors.push(elt);
+            }
+          }
         </script>
         {% if org and org|config:"google_tag_manager_id" %}
             <!-- Google Tag Manager -->
-            <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','{{ org|config:"google_tag_manager_id" }}');
+            <script>
+              (function(w, d, s, l, i) {
+                w[l] = w[l] || [];
+                w[l].push({
+                  'gtm.start': new Date().getTime(),
+                  event: 'gtm.js'
+                });
+                var f = d.getElementsByTagName(s)[0],
+                  j = d.createElement(s),
+                  dl = l != 'dataLayer' ? '&l=' + l : '';
+                j.async = true;
+                j.src =
+                  'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+                f.parentNode.insertBefore(j, f);
+              })(window, document, 'script', 'dataLayer', '{{ org|config:"google_tag_manager_id" }}');
             </script>
             <!-- End Google Tag Manager -->
         {% endif %}
         {% if org|config:"facebook_pixel_id" %}
             <script>
-        !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-        n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
-        n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
-        t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
-        document,'script','//connect.facebook.net/{{ org_lang }}/fbevents.js');
-        fbq('init', '{{ org|config:"facebook_pixel_id" }}');
-        fbq('track', 'PageView');
+              ! function(f, b, e, v, n, t, s) {
+                if (f.fbq) return;
+                n = f.fbq = function() {
+                  n.callMethod ?
+                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
+                };
+                if (!f._fbq) f._fbq = n;
+                n.push = n;
+                n.loaded = !0;
+                n.version = '2.0';
+                n.queue = [];
+                t = b.createElement(e);
+                t.async = !0;
+                t.src = v;
+                s = b.getElementsByTagName(e)[0];
+                s.parentNode.insertBefore(t, s)
+              }(window,
+                document, 'script', '//connect.facebook.net/{{ org_lang }}/fbevents.js');
+              fbq('init', '{{ org|config:"facebook_pixel_id" }}');
+              fbq('track', 'PageView');
             </script>
             <noscript>
                 <img height="1"
@@ -225,29 +352,30 @@
         <div id="fb-root"></div>
         {% if org|config:"facebook_page_id" and org|config:"facebook_app_id" %}
             <script>
-        window.fbAsyncInit = function() {
-          FB.init({
-            appId      : '{{ org|config:"facebook_app_id" }}',
-            autoLogAppEvents: true,
-            xfbml      : true,
-            version    : 'v4.0'
-          });
-        };
+              window.fbAsyncInit = function() {
+                FB.init({
+                  appId: '{{ org|config:"facebook_app_id" }}',
+                  autoLogAppEvents: true,
+                  xfbml: true,
+                  version: 'v4.0'
+                });
+              };
             </script>
             <div class="fb-customerchat"
                  page_id="{{ org|config:"facebook_page_id" }}"
                  greeting_dialog_display="icon"
                  logged_in_greeting="{{ org|config:"facebook_welcome_text"|default:"Hi! Welcome to U-Report, chat to register and start speaking out today!" }}"
-                 logged_out_greeting="{{ org|config:"facebook_welcome_text"|default:"Hi! Welcome to U-Report, chat to register and start speaking out today!" }}">
-            </div>
+                 logged_out_greeting="{{ org|config:"facebook_welcome_text"|default:"Hi! Welcome to U-Report, chat to register and start speaking out today!" }}"></div>
         {% endif %}
-        <script>(function(d, s, id) {
-      var js, fjs = d.getElementsByTagName(s)[0];
-      if (d.getElementById(id)) return;
-      js = d.createElement(s); js.id = id;
-      js.src = "//connect.facebook.net/{{ org_lang }}/sdk/xfbml.customerchat.js{% if not org|config:'facebook_page_id' or not org|config:'facebook_app_id' %}#xfbml=1&autoLogAppEvents=1&version=v12.0{% endif %}";
-      fjs.parentNode.insertBefore(js, fjs);
-      }(document, 'script', 'facebook-jssdk'));
+        <script>
+          (function(d, s, id) {
+            var js, fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) return;
+            js = d.createElement(s);
+            js.id = id;
+            js.src = "//connect.facebook.net/{{ org_lang }}/sdk/xfbml.customerchat.js{% if not org|config:'facebook_page_id' or not org|config:'facebook_app_id' %}#xfbml=1&autoLogAppEvents=1&version=v12.0{% endif %}";
+            fjs.parentNode.insertBefore(js, fjs);
+          }(document, 'script', 'facebook-jssdk'));
         </script>
         {% if org and org|config:"google_tag_manager_id" %}
             <!-- Google Tag Manager (noscript) -->
@@ -264,19 +392,15 @@
     <div class="w-3/5 modal-content mx-auto my-40 p-6 border border-black bg-white sticky top-45">
         <div class="font-bold text-xl mb-2 inline-block">{% trans "Export and Share" %}</div>
         <i class="rtl:float-left ltr:float-right fas fa-times text-xl export-modal-close cursor-pointer"></i>
-        <div style="min-height:30rem"
-             class="export-modal-progress flex text-center">
+        <div style="min-height:30rem" class="export-modal-progress flex text-center">
             <div class="fa-5x inline-block m-auto self-center">
                 <i class="fas fa-spinner fa-spin"></i>
             </div>
         </div>
         <div class="export-modal-content">
-            <div class="md:w-3/4 inline-block mb-4">
-                {% trans "Want to tell the world about this? Download this image to easily share on social media or for a beautiful presentation!" %}
-            </div>
+            <div class="md:w-3/4 inline-block mb-4">{% trans "Want to tell the world about this? Download this image to easily share on social media or for a beautiful presentation!" %}</div>
             <div class="md:w-1/4 rtl:float-left rtl:text-left ltr:float-right ltr:text-right   inline-block mb-4">
-                <a href="#"
-                   class="btn bg-light1-v2024 text-black inline-block download-screenshot hover-dark">Download</a>
+                <a href="#" class="btn bg-light1-v2024 text-black inline-block download-screenshot hover-dark">Download</a>
             </div>
             <div class="mt-4 shadow">
                 <img src="#" alt="" class="screenshot-rendered">
@@ -287,29 +411,22 @@
 <!-- mobile menu -->
 <div class="md:hidden flex bg-black" id="mobile-menu-container">
     <div class="bg-black text-white py-home pl-home pr-16 h-auto">
-        <a href="{% url 'public.opinions' %}"
-           class="hover:text-gray-600 block font-bold">{% trans "Opinions" %}</a>
-        <a href="{% url 'public.stories' %}"
-           class="hover:text-gray-600 block mt-4 font-bold">{% trans "Stories" %}</a>
+        <a href="{% url 'public.opinions' %}" class="hover:text-gray-600 block font-bold">{% trans "Opinions" %}</a>
+        <a href="{% url 'public.stories' %}" class="hover:text-gray-600 block mt-4 font-bold">{% trans "Stories" %}</a>
         {% if org|config:"is_global" %}
-        <a href="https://www.voicesofyouth.org/"
-           class="hover:text-gray-600 block mt-4 font-bold">{% trans "Co-Create" %}</a>
+            <a href="https://www.voicesofyouth.org/" class="hover:text-gray-600 block mt-4 font-bold">{% trans "Co-Create" %}</a>
         {% endif %}
-        <a href="{% url 'public.about' %}"
-           class="hover:text-gray-600 block mt-8">{% trans "About" %}</a>
-        <a href="{% url 'public.ureporters' %}"
-           class="hover:text-gray-600 block mt-4">{% trans "Engagement" %}</a>
+        <a href="{% url 'public.about' %}" class="hover:text-gray-600 block mt-8">{% trans "About" %}</a>
+        <a href="{% url 'public.ureporters' %}" class="hover:text-gray-600 block mt-4">{% trans "Engagement" %}</a>
         {% if show_bots_link %}
             <a href="{% url 'public.bots' %}" class="hover:text-gray-600 block mt-4">{% trans "Bots" %}</a>
         {% endif %}
-        <a href="{% url 'public.reports' %}"
-           class="hover:text-gray-600 block mt-4">{% trans "Reports" %}</a>
+        <a href="{% url 'public.reports' %}" class="hover:text-gray-600 block mt-4">{% trans "Reports" %}</a>
         {% if org|config:"has_jobs" %}
             <a href="{% url 'public.jobs' %}" class="hover:text-gray-600 block mt-4">{% trans "Jobs" %}</a>
         {% endif %}
         {% for custom_page in additional_menu|slice:":3" %}
-            <a href="{% url 'public.custom_page' custom_page.link %}"
-               class="hover:text-gray-600 block mt-4">{{ custom_page.title }}</a>
+            <a href="{% url 'public.custom_page' custom_page.link %}" class="hover:text-gray-600 block mt-4">{{ custom_page.title }}</a>
         {% endfor %}
         <div class="block mt-4">
             {% if org|config:"instagram_username" %}
@@ -334,8 +451,7 @@
                 </a>
             {% endif %}
         </div>
-        <a href="{% url 'public.join' %}"
-           class="hover:text-gray-600 block font-bold mt-4">
+        <a href="{% url 'public.join' %}" class="hover:text-gray-600 block font-bold mt-4">
             {% if org|config:"join_button_text" %}
                 {{ org|config:"join_button_text" }}
             {% else %}
@@ -346,8 +462,7 @@
             <div class="block mt-4 font-bold mobile-accordion text-sm cursor-pointer">
                 <i style="padding-top:2px"
                    class="ltr:float-left rtl:float-right {% if is_rtl_org %}fa-caret-left{% else %}fa-caret-right{% endif %} fas closed"></i>
-                <i style="padding-top:4px"
-                   class="ltr:float-left rtl:float-right fas fa-caret-down hidden open"></i>
+                <i style="padding-top:4px" class="ltr:float-left rtl:float-right fas fa-caret-down hidden open"></i>
                 <div class="hover:text-gray-750 px-3 whitespace-nowrap">{% trans "SELECT LANGUAGE" %}</div>
                 <div class="mobile-accordion-content text-white">
                     {% for lang in other_languages_sites %}
@@ -366,13 +481,10 @@
         <div class="block mt-4 font-bold mobile-accordion text-sm cursor-pointer">
             <i style="padding-top:2px"
                class="ltr:float-left rtl:float-right {% if is_rtl_org %}fa-caret-left{% else %}fa-caret-right{% endif %} fas closed"></i>
-            <i style="padding-top:4px"
-               class="ltr:float-left rtl:float-right fas fa-caret-down hidden open"></i>
+            <i style="padding-top:4px" class="ltr:float-left rtl:float-right fas fa-caret-down hidden open"></i>
             <div class="hover:text-gray-750 px-3 whitespace-nowrap">{% trans "SELECT COUNTRY" %}</div>
             <div class="mobile-accordion-content text-white">
-                {% for site in linked_orgs %}
-                    <a href="{{ site.host }}" class="hover:text-gray-600 block p-1">{{ site.name }}</a>
-                {% endfor %}
+                {% for site in linked_orgs %}<a href="{{ site.host }}" class="hover:text-gray-600 block p-1">{{ site.name }}</a>{% endfor %}
             </div>
         </div>
     </div>
@@ -382,20 +494,17 @@
     <div class="block bg-black h-2"></div>
     <!-- countries (off screen to start) -->
     <div class="bg-black text-white z-600" id="countries">
-        <a href="javascript:void(0)"
-           class="rtl:float-left ltr:float-right p-4"
-           id="countries-closer">
+        <a href="javascript:void(0)" class="rtl:float-left ltr:float-right p-4" id="countries-closer">
             <i class="fas fa-times text-3xl"></i>
         </a>
         <div class="flex p-home">
             <div class="md:w-1/6 {% if not org|config:"has_new_brand" %}flex-center-y{% endif %}">
                 <div class="p-4 ">
-                    <a href="https://ureport.in/"
-                       class="hover:bg-gray-900 inline-block border-white p-2">
-                       {% if org|config:"has_new_brand" %}
-                       <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo_invert.png" alt="{{ org.name }}" class="logo">
-                   {% else %}
-                        <img src="{{ STATIC_URL }}img/u-report-global-logo-white.png" alt="">
+                    <a href="https://ureport.in/" class="hover:bg-gray-900 inline-block border-white p-2">
+                        {% if org|config:"has_new_brand" %}
+                            <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo_invert.png" alt="{{ org.name }}" class="logo">
+                        {% else %}
+                            <img src="{{ STATIC_URL }}img/u-report-global-logo-white.png" alt="">
                         {% endif %}
                     </a>
                 </div>
@@ -412,8 +521,7 @@
             <ul class="flex">
                 {% if request.user.is_superuser %}
                     <li>
-                        <a href="{% url 'orgs.org_home' %}"
-                           class="inline-block px-1 pl-4 py-2 text-lg">
+                        <a href="{% url 'orgs.org_home' %}" class="inline-block px-1 pl-4 py-2 text-lg">
                             <i class="fas fa-cog"></i>
                         </a>
                     </li>
@@ -426,59 +534,49 @@
                                 <i class="fas fa-caret-down"></i>
                             </a>
                             <div class="hidden dropdown-content absolute bg-gray-800 text-white z-auto">
-                                <a href="{% url 'orgs.org_list' %}"
-                                   class="admin-menu small-link-no-wrap">{% trans "Orgs" %}</a>
+                                <a href="{% url 'orgs.org_list' %}" class="admin-menu small-link-no-wrap">{% trans "Orgs" %}</a>
                                 <a href="{% url 'users.user_list' %}" class="admin-menu small-link-no-wrap">{% trans "Users" %}</a>
-                                <a href="{% url 'dashblocks.dashblocktype_list' %}"
-                                   class="admin-menu small-link-no-wrap">{% trans "Content Types" %}</a>
+                                <a href="{% url 'dashblocks.dashblocktype_list' %}" class="admin-menu small-link-no-wrap">{% trans "Content Types" %}</a>
                                 {% if request.user.is_superuser or org_perms.assets.image_list %}
-                                    <a href="{% url 'assets.image_list' %}"
-                                       class="admin-menu small-link-no-wrap">{% trans "Images" %}</a>
+                                    <a href="{% url 'assets.image_list' %}" class="admin-menu small-link-no-wrap">{% trans "Images" %}</a>
                                 {% endif %}
                             </div>
                         </div>
                     </li>
                     <li>
-                        <a href="{% url 'dashblocks.dashblock_list' %}"
-                           class="admin-menu text-sm leading-loose">{% trans "Content" %}</a>
+                        <a href="{% url 'dashblocks.dashblock_list' %}" class="admin-menu text-sm leading-loose">{% trans "Content" %}</a>
                     </li>
                 {% endif %}
                 {% if org|config:"is_global" %}
                     {% if request.user.is_superuser or perms.countries.countryalias_list %}
                         <li>
-                            <a href="{% url 'countries.countryalias_list' %}"
-                               class="admin-menu text-sm leading-loose">{% trans "Country Aliases" %}</a>
+                            <a href="{% url 'countries.countryalias_list' %}" class="admin-menu text-sm leading-loose">{% trans "Country Aliases" %}</a>
                         </li>
                     {% endif %}
                 {% endif %}
                 {% if request.user.is_superuser or org_perms.polls.poll_list %}
                     <li>
-                        <a href="{% url 'polls.poll_list' %}"
-                           class="admin-menu text-sm leading-loose">{% trans "Opinions" %}</a>
+                        <a href="{% url 'polls.poll_list' %}" class="admin-menu text-sm leading-loose">{% trans "Opinions" %}</a>
                     </li>
                 {% endif %}
                 {% if request.user.is_superuser or org_perms.stories.story_list %}
                     <li>
-                        <a href="{% url 'stories.story_list' %}"
-                           class="admin-menu text-sm leading-loose">{% trans "Stories" %}</a>
+                        <a href="{% url 'stories.story_list' %}" class="admin-menu text-sm leading-loose">{% trans "Stories" %}</a>
                     </li>
                 {% endif %}
                 {% if request.user.is_superuser or org_perms.bots.bot_list %}
                     <li>
-                        <a href="{% url 'bots.bot_list' %}"
-                           class="admin-menu text-sm leading-loose">{% trans "Bots" %}</a>
+                        <a href="{% url 'bots.bot_list' %}" class="admin-menu text-sm leading-loose">{% trans "Bots" %}</a>
                     </li>
                 {% endif %}
                 {% if request.user.is_superuser or org_perms.categories.category_list %}
                     <li>
-                        <a href="{% url 'categories.category_list' %}"
-                           class="admin-menu text-sm leading-loose">{% trans "Categories" %}</a>
+                        <a href="{% url 'categories.category_list' %}" class="admin-menu text-sm leading-loose">{% trans "Categories" %}</a>
                     </li>
                 {% endif %}
                 {% if request.user.is_superuser or org_perms.tags.tag_list %}
                     <li>
-                        <a href="{% url 'tags.tag_list' %}"
-                           class="admin-menu text-sm leading-loose">{% trans "Tags" %}</a>
+                        <a href="{% url 'tags.tag_list' %}" class="admin-menu text-sm leading-loose">{% trans "Tags" %}</a>
                     </li>
                 {% endif %}
                 <li>
@@ -489,42 +587,34 @@
                         </a>
                         <div class="hidden dropdown-content absolute bg-gray-800 text-white z-700">
                             {% if request.user.is_superuser or org_perms.jobs.jobsource_list %}
-                                <a href="{% url 'jobs.jobsource_list' %}"
-                                   class="admin-menu small-link-no-wrap separator">{% trans "Job Sources" %}</a>
+                                <a href="{% url 'jobs.jobsource_list' %}" class="admin-menu small-link-no-wrap separator">{% trans "Job Sources" %}</a>
                             {% endif %}
                             {% if perms.dashblocks.dashblock_list or org_perms.dashblocks.dashblock_list %}
-                                <a href="{% url 'dashblocks.dashblock_list' %}?slug=jobs"
-                                   class="admin-menu small-link-no-wrap">{% trans "Jobs Content" %}</a>
+                                <a href="{% url 'dashblocks.dashblock_list' %}?slug=jobs" class="admin-menu small-link-no-wrap">{% trans "Jobs Content" %}</a>
                             {% endif %}
                             {% if perms.dashblocks.dashblock_list or org_perms.dashblocks.dashblock_list %}
                                 <a href="{% url 'dashblocks.dashblock_list' %}?slug=about"
                                    class="admin-menu small-link-no-wrap separator">{% trans "About Content" %}</a>
                             {% endif %}
                             {% if perms.assets.image_list or org_perms.assets.image_list %}
-                                <a href="{% url 'assets.image_list' %}"
-                                   class="admin-menu small-link-no-wrap separator">{% trans "Partners Logos" %}</a>
+                                <a href="{% url 'assets.image_list' %}" class="admin-menu small-link-no-wrap separator">{% trans "Partners Logos" %}</a>
                             {% endif %}
                             {% if perms.dashblocks.dashblock_list or org_perms.dashblocks.dashblock_list %}
                                 <a href="{% url 'dashblocks.dashblock_list' %}?slug=ureporters"
-                                   class="admin-menu small-link-no-wrap separator">
-                                    {% trans "U-Reporters Content" %}
-                                </a>
+                                   class="admin-menu small-link-no-wrap separator">{% trans "U-Reporters Content" %}</a>
                                 <hr>
-                                <a href="{% url 'dashblocks.dashblock_list' %}?slug=join_engage"
-                                   class="admin-menu small-link-no-wrap">{% trans "Join &amp; Engage Content" %}</a>
+                                <a href="{% url 'dashblocks.dashblock_list' %}?slug=join_engage" class="admin-menu small-link-no-wrap">{% trans "Join &amp; Engage Content" %}</a>
                                 <hr>
                                 <a href="{% url 'dashblocks.dashblock_list' %}?slug=additional_menu"
                                    class="admin-menu small-link-no-wrap">{% trans "Custom pages" %}</a>
-                                <a href="{% url 'landingpages.landingpage_list' %}"
-                                   class="admin-menu small-link-no-wrap separator">{% trans "Landing pages" %}</a>
+                                <a href="{% url 'landingpages.landingpage_list' %}" class="admin-menu small-link-no-wrap separator">{% trans "Landing pages" %}</a>
                             {% endif %}
                         </div>
                     </div>
                 </li>
                 {% block login %}
                     <li class="{% if is_rtl_org %}mr-auto{% else %}ml-auto{% endif %}">
-                        <a href="{% org_host_link %}{% url 'users.user_profile' request.user.pk %}"
-                           class="admin-menu text-lg">
+                        <a href="{% org_host_link %}{% url 'users.user_profile' request.user.pk %}" class="admin-menu text-lg">
                             <i class="fas fa-user-circle"></i>
                         </a>
                         <a href="{% url 'users.user_logout' %}?go=/" class="admin-menu text-lg">
@@ -540,9 +630,7 @@
         <!-- desktop header nav -->
         <ul class="md:flex md:justify-between my-5 px-home text-sm font-bold">
             <div class="li flex-none mr-4 py-menu">
-                <a href="javascript:void(0)"
-                   class="hover:text-gray-750 flex items-center"
-                   id="countries-toggler">
+                <a href="javascript:void(0)" class="hover:text-gray-750 flex items-center" id="countries-toggler">
                     <div class="w-12 flex mx-1">
                         <img src="{{ STATIC_URL }}img/selectcountry.png" class="inline" alt="">
                     </div>
@@ -551,20 +639,15 @@
                 </a>
             </div>
             <div class="md:justify-end li flex-grow flex">
-                <a href="{% url 'public.ureporters' %}"
-                   class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Engagement" %}</a>
-                <a href="{% url 'public.about' %}"
-                   class="hover:text-gray-750 flex-initial ml-4 py-menu">{% trans "About" %}</a>
+                <a href="{% url 'public.ureporters' %}" class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Engagement" %}</a>
+                <a href="{% url 'public.about' %}" class="hover:text-gray-750 flex-initial ml-4 py-menu">{% trans "About" %}</a>
                 {% if show_bots_link %}
-                    <a href="{% url 'public.bots' %}"
-                       class="hover:text-gray-750 flex-initial ml-4 py-menu">{% trans "Bots" %}</a>
+                    <a href="{% url 'public.bots' %}" class="hover:text-gray-750 flex-initial ml-4 py-menu">{% trans "Bots" %}</a>
                 {% endif %}
                 {% if org|config:"has_jobs" %}
-                    <a href="{% url 'public.jobs' %}"
-                       class="hover:text-gray-750 flex-initial ml-4 py-menu">{% trans "Jobs" %}</a>
+                    <a href="{% url 'public.jobs' %}" class="hover:text-gray-750 flex-initial ml-4 py-menu">{% trans "Jobs" %}</a>
                 {% endif %}
-                <a href="{% url 'public.reports' %}"
-                   class="hover:text-gray-750 flex-initial ml-4 py-menu">{% trans "Reports" %}</a>
+                <a href="{% url 'public.reports' %}" class="hover:text-gray-750 flex-initial ml-4 py-menu">{% trans "Reports" %}</a>
                 {% for custom_page in additional_menu|slice:":3" %}
                     <a href="{% url 'public.custom_page' custom_page.link %}"
                        class="hover:text-gray-750 flex-initial ml-4 py-menu">{{ custom_page.title }}</a>
@@ -635,74 +718,60 @@
         </ul>
         <!-- header menu -->
         {% if org|config:"has_new_brand" %}
-        <div class="md:flex max-w-page mx-auto justify-around mt-5 mb-12 hidden border-b pb-6">
-            <a href="{% url 'public.index' %}" class="flex-initial text-center">
-                <div style="width:360px">
-                    <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo.png" alt="{{ org.name }}" class="logo">
-                </div>
-            </a>
-            <div class="flex-1 font-bold mt-12" style="font-family:'Noto Sans', sans-serif;">
+            <div class="md:flex max-w-page mx-auto justify-around mt-5 mb-12 hidden border-b pb-6">
                 <a href="{% url 'public.index' %}" class="flex-initial text-center">
-                    {{ org.name }}
+                    <div style="width:360px">
+                        <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo.png" alt="{{ org.name }}" class="logo">
+                    </div>
                 </a>
+                <div class="flex-1 font-bold mt-12" style="font-family:'Noto Sans', sans-serif;">
+                    <a href="{% url 'public.index' %}" class="flex-initial text-center">{{ org.name }}</a>
+                </div>
+                <div class="md:flex flex-1">
+                    <div class="flex-1 text-center font-bold text-2xl flex-center-y">
+                        <div>
+                            <a href="{% url 'public.opinions' %}"
+                               class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Opinions" %}</a>
+                        </div>
+                    </div>
+                    <div class="flex-1 text-center font-bold text-2xl flex-center-y">
+                        <div>
+                            <a href="{% url 'public.stories' %}"
+                               class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Stories" %}</a>
+                        </div>
+                    </div>
+                    {% if org|config:"is_global" %}
+                        <div class="flex-1 text-center font-bold text-2xl flex-center-y">
+                            <div>
+                                <a href="https://www.voicesofyouth.org/"
+                                   class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Co-Create" %}</a>
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
             </div>
-            <div class="md:flex flex-1">
+        {% else %}
+            <div class="md:flex max-w-page mx-auto justify-around mt-5 mb-12 px-home hidden border-b pb-6">
                 <div class="flex-1 text-center font-bold text-2xl flex-center-y">
                     <div>
                         <a href="{% url 'public.opinions' %}"
-                            class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                        {% trans "Opinions" %}
-                        </a>
+                           class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Opinions" %}</a>
                     </div>
                 </div>
-
-                <div class="flex-1 text-center font-bold text-2xl flex-center-y">
-                    <div>
-                        <a href="{% url 'public.stories' %}"
-                            class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                            {% trans "Stories" %}
-                        </a>
+                <a href="{% url 'public.index' %}" class="flex-initial text-center">
+                    <div style="width:360px">
+                        {% thumbnail org.get_logo "x180" format="PNG" as im %}
+                            <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
+                        {% endthumbnail %}
                     </div>
-                </div>
-                {% if org|config:"is_global" %}
+                </a>
                 <div class="flex-1 text-center font-bold text-2xl flex-center-y">
                     <div>
-                        <a href="https://www.voicesofyouth.org/"
-                            class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                            {% trans "Co-Create" %}
-                        </a>
+                        <a href="{% url 'public.stories' %}"
+                           class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Stories" %}</a>
                     </div>
                 </div>
-                {% endif %}
             </div>
-        </div>
-
-        {% else %}
-        <div class="md:flex max-w-page mx-auto justify-around mt-5 mb-12 px-home hidden border-b pb-6">
-            <div class="flex-1 text-center font-bold text-2xl flex-center-y">
-                <div>
-                    <a href="{% url 'public.opinions' %}"
-                       class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                        {% trans "Opinions" %}
-                    </a>
-                </div>
-            </div>
-            <a href="{% url 'public.index' %}" class="flex-initial text-center">
-                <div style="width:360px">
-                    {% thumbnail org.get_logo "x180" format="PNG" as im %}
-                        <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
-                    {% endthumbnail %}
-                </div>
-            </a>
-            <div class="flex-1 text-center font-bold text-2xl flex-center-y">
-                <div>
-                    <a href="{% url 'public.stories' %}"
-                       class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                        {% trans "Stories" %}
-                    </a>
-                </div>
-            </div>
-        </div>
         {% endif %}
     </div>
     <!-- mobile header -->
@@ -714,17 +783,15 @@
                         {% if org|config:"has_new_brand" %}
                             <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo.png" alt="{{ org.name }}" class="logo">
                         {% else %}
-                        {% thumbnail org.get_logo "x180" format="PNG" as im %}
-                            <img src="{{ im.url }}" alt="{{ org.name }}" class="logo" alt="">
-                        {% endthumbnail %}
+                            {% thumbnail org.get_logo "x180" format="PNG" as im %}
+                                <img src="{{ im.url }}" alt="{{ org.name }}" class="logo" alt="">
+                            {% endthumbnail %}
                         {% endif %}
                     </div>
                 </a>
             </div>
             <div class="flex-1 font-bold mt-6 -ml-12 text-xs p-home" style="font-family:'Noto Sans', sans-serif;">
-                <a href="{% url 'public.index' %}" class="flex-initial text-center">
-                    {{ org.name }}
-                </a>
+                <a href="{% url 'public.index' %}" class="flex-initial text-center">{{ org.name }}</a>
             </div>
             <div class="flex-center-y p-home">
                 <div class="block text-3xl mr-4">
@@ -776,9 +843,7 @@
                                 <img width="100%" src="{{ im.url }}" alt="">
                             {% endthumbnail %}
                         </div>
-                        <div class="{% if story.title|length < 50 %}text-lg{% else %}text-base{% endif %} font-bold mt-4 h-20">
-                            {{ story.title }}
-                        </div>
+                        <div class="{% if story.title|length < 50 %}text-lg{% else %}text-base{% endif %} font-bold mt-4 h-20">{{ story.title }}</div>
                         <div class="md:block mt-4 hidden">
                             <button class="btn {% if org|config:"has_new_brand" %} bg-light1-v2024 hover-dark{% else %}bg-black hover:bg-gray-700{% endif %} text-white">{% trans "READ MORE" %}</button>
                         </div>
@@ -793,9 +858,7 @@
         <div class="md:flex max-w-page mx-auto text-white p-home">
             <div class="md:w-1/3 md:block hidden">
                 <div class="w-40">
-                    {% if not org|config:"has_new_brand" %}
-                    <img src="{{ STATIC_URL }}img/blue_u.png">
-                    {% endif %}
+                    {% if not org|config:"has_new_brand" %}<img src="{{ STATIC_URL }}img/blue_u.png" alt="">{% endif %}
                 </div>
             </div>
             <div class="md:w-2/3 {% if is_rtl_org %}md:text-left{% else %}md:text-right{% endif %} text-center">
@@ -808,37 +871,38 @@
                             {% trans "See by the numbers how we are engaging youth voices for positive social change." %}
                         {% endif %}
                     </div>
-                    <a href="{% url 'public.ureporters' %}"
-                       class="btn bg-light2-v2024 text-white inline-block hover-dark">{% trans "EXPLORE ENGAGEMENT" %}</a>
+                    <a href="{% url 'public.ureporters' %}" class="btn bg-light2-v2024 text-white inline-block hover-dark">{% trans "EXPLORE ENGAGEMENT" %}</a>
                 </div>
             </div>
         </div>
     </div>
     <!-- footer navbar -->
     <div class="md:grid md:grid-cols-3 grid grid-cols-1 gap-4 px-home mt-12 mb-3">
-        <a href="{% url 'public.index' %}"
-           class="md:block flex-1 text-center mb-2 hidden">
-            <div style="max-width:360px">
-                {% if org|config:"has_new_brand" %}
+        <a href="{% url 'public.index' %}" class="md:block flex-1 text-center mb-2 hidden">
+            {% if org|config:"has_new_brand" %}
+                <div style="max-width:220px">
                     <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo_footer.png" alt="{{ org.name }}" class="logo">
-                {% else %}
-                {% thumbnail org.get_logo "x180" format="PNG" as im %}
-                    <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
-                {% endthumbnail %}
-                {% endif %}
-            </div>
+                </div>
+            {% else %}
+                <div style="max-width:360px">
+                    {% thumbnail org.get_logo "x180" format="PNG" as im %}
+                        <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
+                    {% endthumbnail %}
+                </div>
+            {% endif %}
         </a>
         <div class="md:flex justify-center hidden">
             <div style="max-width:150px" class="md:block block">
                 {% if org.language != "ar" and org.language != "ru" and org.language != "ch" and org.language != "fr" %}
-                    <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_EN.png" class="md:-ml-0 -ml-2">
+                    <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_EN.png" class="md:-ml-0 -ml-2" alt="">
                 {% else %}
-                    <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_{{ org.language|upper }}.png" class="md:-ml-0 -ml-2">
+                    <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_{{ org.language|upper }}.png"
+                         class="md:-ml-0 -ml-2"
+                         alt="">
                 {% endif %}
             </div>
         </div>
-        <a href="{% url 'public.index' %}"
-           class="md:hidden flex-1 text-center mb-6 inline-flex">
+        <a href="{% url 'public.index' %}" class="md:hidden flex-1 text-center mb-6 inline-flex">
             <div style="width:180px">
                 {% if org|config:"has_new_brand" %}
                     <img src="{{ STATIC_URL }}/img/logos/UREPORT/U-Report_Logo_footer.png" alt="{{ org.name }}" class="logo">
@@ -846,14 +910,18 @@
                     {% thumbnail org.get_logo "x180" format="PNG" as im %}
                         <img src="{{ im.url }}" alt="{{ org.name }}" class="logo">
                     {% endthumbnail %}
-                    {% endif %}
+                {% endif %}
             </div>
             <div class="md:hidden flex flex-1 justify-end float-right">
                 <div style="width:120px" class="md:block block">
                     {% if org.language != "ar" and org.language != "ru" and org.language != "ch" and org.language != "fr" %}
-                        <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_EN.png" class="md:-ml-0 -ml-2" alt="UNICEF logo">
+                        <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_EN.png"
+                             class="md:-ml-0 -ml-2"
+                             alt="UNICEF logo">
                     {% else %}
-                        <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_{{ org.language|upper }}.png" class="md:-ml-0 -ml-2" alt="UNICEF logo">
+                        <img src="{{ STATIC_URL }}/img/logos/UNICEF/UNICEF_logo_footer_{{ org.language|upper }}.png"
+                             class="md:-ml-0 -ml-2"
+                             alt="UNICEF logo">
                     {% endif %}
                 </div>
             </div>
@@ -862,34 +930,25 @@
             <div class="md:ml-6 font-bold text-2xl flex-center-y">
                 <div>
                     <a href="{% url 'public.opinions' %}"
-                       class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                        {% trans "Opinions" %}
-                    </a>
+                       class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Opinions" %}</a>
                 </div>
             </div>
             <div class="font-bold text-2xl ml-6 flex-center-y">
                 <div>
                     <a href="{% url 'public.stories' %}"
-                       class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">
-                        {% trans "Stories" %}
-                    </a>
+                       class="hover:text-gray-750 hover:border-dark1-v2024 pb-2 border-b-2 border-black">{% trans "Stories" %}</a>
                 </div>
             </div>
         </div>
     </div>
     <div class="md:grid grid-cols-2 gap-4 px-home mt-5 mb-12">
         <div class="text-sm font-bold">
-            <a href="{% url 'public.about' %}"
-               class="hover:text-gray-750 flex-initial py-menu">{% trans "About" %}</a>
-            <a href="{% url 'public.ureporters' %}"
-               class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Engagement" %}</a>
-            <a href="{% url 'public.bots' %}"
-               class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Bots" %}</a>
-            <a href="{% url 'public.reports' %}"
-               class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Reports" %}</a>
+            <a href="{% url 'public.about' %}" class="hover:text-gray-750 flex-initial py-menu">{% trans "About" %}</a>
+            <a href="{% url 'public.ureporters' %}" class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Engagement" %}</a>
+            <a href="{% url 'public.bots' %}" class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Bots" %}</a>
+            <a href="{% url 'public.reports' %}" class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Reports" %}</a>
             {% if org|config:"has_jobs" %}
-                <a href="{% url 'public.jobs' %}"
-                   class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Jobs" %}</a>
+                <a href="{% url 'public.jobs' %}" class="md:ml-4 hover:text-gray-750 flex-initial py-menu">{% trans "Jobs" %}</a>
             {% endif %}
         </div>
         <div class="md:justify-end flex text-sm font-bold">
@@ -917,14 +976,10 @@
             {% if show_login %}
                 {% if request.user and request.user.is_authenticated %}
                     <a href="{% url 'users.user_logout' %}?go=/"
-                       class="{% if is_rtl_org %}mr-4{% else %}ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">
-                        {% trans "Logout" %}
-                    </a>
+                       class="{% if is_rtl_org %}mr-4{% else %}ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">{% trans "Logout" %}</a>
                 {% else %}
                     <a href="{% org_host_link %}{% url 'users.user_login' %}"
-                       class="{% if is_rtl_org %}mr-4{% else %}ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">
-                        {% trans "Login" %}
-                    </a>
+                       class="{% if is_rtl_org %}mr-4{% else %}ml-4{% endif %} hover:text-gray-750 flex-initial py-menu">{% trans "Login" %}</a>
                 {% endif %}
             {% endif %}
         </div>
@@ -953,33 +1008,46 @@
     <!-- Age charts -->
     <script type="text/coffeescript" src="{{ STATIC_URL }}coffee/v2_age.coffee"></script>
     <!-- Scheme charts -->
-    <script type="text/coffeescript"
-            src="{{ STATIC_URL }}coffee/v2_scheme_bar.coffee"></script>
+    <script type="text/coffeescript" src="{{ STATIC_URL }}coffee/v2_scheme_bar.coffee"></script>
     <!-- FB Shares -->
-    <script type="text/coffeescript"
-            src="{{ STATIC_URL }}coffee/v2_fb_share.coffee"></script>
+    <script type="text/coffeescript" src="{{ STATIC_URL }}coffee/v2_fb_share.coffee"></script>
     <!-- Locations -->
-    <script type="text/coffeescript"
-            src="{{ STATIC_URL }}coffee/v2_locations.coffee"></script>
+    <script type="text/coffeescript" src="{{ STATIC_URL }}coffee/v2_locations.coffee"></script>
     <!-- Polls -->
     <script type="text/coffeescript" src="{{ STATIC_URL }}coffee/v2_polls.coffee"></script>
     <!-- Search -->
-    <script type="text/coffeescript"
-            src="{{ STATIC_URL }}coffee/v2_search.coffee"></script>
+    <script type="text/coffeescript" src="{{ STATIC_URL }}coffee/v2_search.coffee"></script>
     <!-- countries list -->
-    <script type="text/coffeescript"
-            src="{{ STATIC_URL }}coffee/v2_countries.coffee"></script>
+    <script type="text/coffeescript" src="{{ STATIC_URL }}coffee/v2_countries.coffee"></script>
 {% endcompress %}
-<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+<script>
+  ! function(d, s, id) {
+    var js, fjs = d.getElementsByTagName(s)[0],
+      p = /^http:/.test(d.location) ? 'http' : 'https';
+    if (!d.getElementById(id)) {
+      js = d.createElement(s);
+      js.id = id;
+      js.src = p + "://platform.twitter.com/widgets.js";
+      fjs.parentNode.insertBefore(js, fjs);
+    }
+  }(document, "script", "twitter-wjs");
+</script>
 {% if org and org|config:"google_tracking_id" %}
     <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+      (function(i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r;
+        i[r] = i[r] || function() {
+          (i[r].q = i[r].q || []).push(arguments)
+        }, i[r].l = 1 * new Date();
+        a = s.createElement(o),
+          m = s.getElementsByTagName(o)[0];
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m)
+      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
 
-    ga('create', '{{ org|config:"google_tracking_id" }}', 'auto');
-    ga('send', 'pageview');
+      ga('create', '{{ org|config:"google_tracking_id" }}', 'auto');
+      ga('send', 'pageview');
     </script>
 {% endif %}
 {% block script %}
@@ -990,7 +1058,7 @@
       window.string_Polled = "{% trans "Polled" %}";
       window.string_Reporters = "{% trans "Reporters" %}";
       window.string_TopRegion = "{% trans "Top Region" %}";
-      
+
       Highcharts.setOptions({
         lang: {
           months: [
@@ -1023,61 +1091,63 @@
           ],
         }
       });
-      
+
       // country menu toggling
-      $("#countries-toggler").click(function(){
+      $("#countries-toggler").click(function() {
         $("#countries").toggleClass("open");
       });
-      $("#countries-closer").click(function(){
+      $("#countries-closer").click(function() {
         $("#countries").removeClass("open");
       });
-      
-      $("#languages-toggler").click(function(){
+
+      $("#languages-toggler").click(function() {
         $(this).toggleClass("open");
       });
-      
+
       $(".export-modal-close").on('click', function() {
         $(".export-modal").addClass('hidden');
       });
-      
+
       $(".mobile-accordion").on('click', function() {
         $(this).toggleClass('open');
       })
-      
-      
+
+
       $(".screenshot-share").on("click", function() {
-        var eltID= $(this).attr("data-screen-id");
+        var eltID = $(this).attr("data-screen-id");
         $(".export-modal-progress").show();
         $(".export-modal-content").hide();
-      
+
         $('.export-modal').toggleClass('hidden');
-        $('.modal-content').offset({top: $(window).scrollTop() + 150})
+        $('.modal-content').offset({
+          top: $(window).scrollTop() + 150
+        })
         var region = document.body.querySelector("#" + eltID);
-      
+
         html2canvas(region).then(canvas => {
           var imageData = canvas.toDataURL("image/png");
           $("img.screenshot-rendered").attr("src", imageData);
           $("a.download-screenshot").attr("download", "ureport-screenshare-" + eltID + Date.now() + ".png")
           $("a.download-screenshot").attr("href", imageData);
-      
+
           $(".export-modal-progress").hide();
           $(".export-modal-content").show();
         });
       });
-      
-      $(".dropdown-button").on('click', function(event){
+
+      $(".dropdown-button").on('click', function(event) {
         event.stopPropagation();
         event.preventDefault();
-      
-        if($(this).parent().children(".dropdown-content").hasClass("hidden")) {
+
+        if ($(this).parent().children(".dropdown-content").hasClass("hidden")) {
           $(".dropdown-content").addClass("hidden");
           $(this).parent().children(".dropdown-content").removeClass("hidden");
         } else {
           $(this).parent().children(".dropdown-content").addClass("hidden");
         }
-      
+
       });
-      
+
       var slideout = new Slideout({
         'panel': document.getElementById('mobile-sliding-panel'),
         'menu': document.getElementById('mobile-menu-container'),
@@ -1085,19 +1155,19 @@
         'tolerance': 70,
         'side': 'right',
       });
-      
+
       // mobile menu toggling
       //$("#mobile-menu-toggler").click(function(){
       //  slideout.toggle();
       //});
-      
+
       // Toggle button
       document.querySelector('#mobile-menu-toggler').addEventListener('click', function() {
         //$("#mobile-menu-container").toggleClass("open");
         $("#mobile-menu-toggler").children().toggleClass("hidden");
         slideout.toggle();
       });
-      
+
       // initialize our animations
       AOS.init({
         "duration": 1200,