cms/styling: use container to contain header, footer and landing page

The header and footer had different width on the cms-pages and the rest
of the platform. This is the first attempt to use the smaller
width-version with containers.

apps/cms/contacts/templates/a4_candy_cms_contacts/includes/form.html

@@ -1,12 +1,12 @@
 {% load wagtailcore_tags widget_tweaks form_field_tags i18n wagtailsettings_tags wagtailimages_tags %}
 {% get_settings %}
-<div class="contact_form">
+<div class="contact_form container">
     <div class="l-center-6 text-center mb-md-5">
         <h2>{{ page.header }}</h2>
         <p>{{ page.intro|richtext }}</p>
     </div>
     <div class="row">
-        <div class="col-lg-5 offset-lg-1">
+        <div class="col-lg-6">
             <form action="{% pageurl page %}" method="POST">
                 <div class="form-group">
                     {% csrf_token %}
@@ -17,7 +17,7 @@ <h2>{{ page.header }}</h2>
                 </div>
             </form>
         </div>
-        <div class="col-lg-5 my-5 my-lg-0">
+        <div class="col-lg-6">
 
             {% if page.contact_person_name %}
                 <div class="row mb-3 pb-3 position-relative">

apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_cta_block.html

@@ -17,4 +17,4 @@
             {% endif %}
         </div>
     {% endfor %}
-</div> 
+</div>

apps/cms/pages/templates/a4_candy_cms_pages/blocks/img_cta_block.html

@@ -1,5 +1,6 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
+<div class="container">
 <div class="block block__background">
     <div class="container">
         <div class="block mb-5 pb-2 pt-4 text-center text-light">
@@ -8,3 +9,4 @@
         </div>
     </div>
 </div>
+</div>

apps/cms/pages/templates/a4_candy_cms_pages/home_page.html

@@ -3,10 +3,10 @@
 
 {% block content %}
     <div class="homepage__wrapper p-3">
-        <div class="homepage-header">
+        <div class="homepage-header container">
             <div class="row">
                 <div class="col-lg-6">
-                    <h1 class="homepage-header__teaser ml-md-4">{{ page.teaser|richtext }}</h1>
+                    <h1 class="homepage-header__teaser">{{ page.teaser|richtext }}</h1>
                 </div>
                 <div class="col-lg-6">
                     {% image page.image width-800 as image %}
@@ -22,7 +22,7 @@ <h1 class="homepage-header__teaser ml-md-4">{{ page.teaser|richtext }}</h1>
             {% endif %}
         </div>
 
-        <div>{{ page.body|richtext }}</div>
+        <div class="container">{{ page.body|richtext }}</div>
         <div>{{ page.body_streamfield }}</div>
 
         {% if page.form_page %}

liqd_product/assets/scss/components/_contact_form.scss

@@ -12,14 +12,6 @@ $block-padding-md: 7.5*$padding;
     .form-check-input {
         width: 5% !important;
     }
-
-    @media screen and (min-width: $breakpoint-xs) {
-        padding: $block-padding;
-    }
-
-    @media screen and (min-width: $breakpoint-md) {
-        padding: $block-padding-md;
-    }
 }
 
 .contact_form__divider {

liqd_product/assets/scss/components/_userindicator.scss

@@ -1,8 +1,4 @@
 .userindicator__dropdown {
-    @media screen and (min-width: $breakpoint) {
-        margin-right: 2 * $r-spacer;
-    }
-
     .btn {
         padding: 0.5em 1em;
     }

liqd_product/templates/base_cms.html

@@ -1,9 +1 @@
 {% extends "base.html" %}
-
-{% block header %}
-{% include 'header_cms.html' %}
-{% endblock %}
-
-{% block footer %}
-{% include 'footer_cms.html' %}
-{% endblock %}

liqd_product/templates/footer.html

@@ -2,7 +2,7 @@
 {% get_settings %}
 
 <footer class="footer px-3 pt-3">
-    <div class="l-wrapper">
+    <div class="container">
         <div class="row mt-3 mb-3 mb-sm-4 justify-content-lg-center">
             <div class="col-lg-6">
                 <p class="footer__description">

liqd_product/templates/header.html

@@ -8,7 +8,7 @@
     <div class="u-page-ribbon u-page-ribbon--platform"></div>
     {% endif %}
 
-    <div class="l-wrapper">
+    <div class="container u-position-relative">
         <div class="navbar-brand main-header__brand">
             {% spaceless %}
                 <a href="{% if ORGANISATION %}{% url 'organisation' organisation_slug=ORGANISATION.slug %}{% else %}/{% endif %}" class="platform-brand__link">{% if ORGANISATION %}{{ ORGANISATION.name }}{% else %}<img src="/static/images/logo.png" alt="Adhocracy+" class="main-header__logo-img" />{% endif %}</a>