💄 [#1338] Improved banner syntax and adjusted top position

Author: jiromaykin

src/open_inwoner/accounts/templates/registration/login.html

@@ -3,7 +3,7 @@
 
 
 {% block header_image %}
-<aside aria-hidden="true">
+<aside class="banner" aria-hidden="true">
     <img class="main-image" src="{{ hero_image_login }}" alt="Header afbeelding">
 </aside>
 {% endblock header_image %}

src/open_inwoner/scss/components/Container/Container.scss

@@ -1,5 +1,5 @@
 .container {
-  margin: var(--row-height) var(--spacing-large) var(--row-height)
+  margin: var(--spacing-large) var(--spacing-large) var(--row-height)
     var(--spacing-large);
   min-height: calc(
     100vh - var(--header-height) - calc(var(--row-height) * 3) - 400px

src/open_inwoner/scss/components/MainImage/MainImage.scss

@@ -12,7 +12,7 @@ $image-height: 261px;
   @media (min-width: 768px) {
     aspect-ratio: 64 / 13;
     position: relative;
-    top: calc(-1 * var(--row-height));
+    top: 0;
   }
 
   &.main-image--start-after ~ .container {

src/open_inwoner/templates/pages/category/detail.html

@@ -3,7 +3,7 @@
 
 {% block header_image %}
 {% if object.image %}
-    <aside aria-hidden="true">
+    <aside class="banner" aria-hidden="true">
         <img class="main-image main-image--start-after" src="{{ object.image.url }}" alt="{{ object.image.default_alt_text|default:'Header afbeelding' }}">
     </aside>
 {% endif %}

src/open_inwoner/templates/pages/home.html

@@ -2,7 +2,7 @@
 {% load i18n button_tags card_tags map_tags questionnaire_tags grid_tags product_tags utils string_tags %}
 
 {% block header_image %}
-<aside aria-hidden="true">
+<aside class="banner" aria-hidden="true">
     <img class="main-image" src="{{ hero_image_login }}" alt="Header image">
 </aside>
 {% endblock header_image %}

src/open_inwoner/templates/pages/plans/list.html

@@ -3,7 +3,7 @@
 
 {% block header_image %}
     {% if plans_banner %}
-        <aside aria-hidden="true">
+        <aside class="banner" aria-hidden="true">
             <img class="main-image main-image--start-after" src="{{ plans_banner }}" alt="{{ plans_banner.default_alt_text|default:'Header afbeelding' }}">
         </aside>
     {% endif %}

src/open_inwoner/templates/pages/product/detail.html

@@ -3,7 +3,7 @@
 
 {% block header_image %}
 {% if object.image %}
-    <aside aria-hidden="true">
+    <aside class="banner" aria-hidden="true">
         <img class="main-image main-image--start-after" src="{{ object.image.url }}">
     </aside>
 {% endif %}