Merge fa9f0ec into 7e6ed50

liqd · Oct 14, 2019 · 5448696 · 5448696
2 parents 7e6ed50 + fa9f0ec
commit 5448696
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/apps/cms/pages/templates/a4_candy_cms_pages/blocks/img_cta_block.html b/apps/cms/pages/templates/a4_candy_cms_pages/blocks/img_cta_block.html
@@ -1,6 +1,5 @@
 {% 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">
@@ -9,4 +8,3 @@
         </div>
     </div>
 </div>
-</div>
diff --git a/apps/cms/pages/templates/a4_candy_cms_pages/home_page.html b/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 container">
+        <div class="homepage-header">
             <div class="row">
                 <div class="col-lg-6">
-                    <h1 class="homepage-header__teaser">{{ page.teaser|richtext }}</h1>
+                    <h1 class="homepage-header__teaser ml-md-4">{{ 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">{{ page.teaser|richtext }}</h1>
             {% endif %}
         </div>
 
-        <div class="container">{{ page.body|richtext }}</div>
+        <div>{{ page.body|richtext }}</div>
         <div>{{ page.body_streamfield }}</div>
 
         {% if page.form_page %}

diff --git a/liqd_product/assets/scss/_variables.scss b/liqd_product/assets/scss/_variables.scss
@@ -78,22 +78,26 @@ $grid-breakpoints: (
     sm: 576px,
     md: 768px,
     lg: 992px,
-    xl: 1200px
+    xl: 1200px,
+    xxl: 1440px,
+    xxxl: 2000px,
 ) !default;
 
 // use for min-width media-queries
 $breakpoint-xs: map-get($grid-breakpoints, "sm") !default;
 $breakpoint: map-get($grid-breakpoints, "md") !default;
 $breakpoint-md: map-get($grid-breakpoints, "lg") !default;
 $breakpoint-lg: map-get($grid-breakpoints, "xl") !default;
-$breakpoint-xl: 1440px !default;
+$breakpoint-xl: map-get($grid-breakpoints, "xxl") !default;
+$breakpoint-xxl: map-get($grid-breakpoints, "xxxl") !default;
 
 // use for max-width media queries
 $breakpoint-xs-down: $breakpoint-xs - 0.1px !default;
 $breakpoint-down: $breakpoint - 0.1px !default;  // sm
 $breakpoint-md-down: $breakpoint-md - 0.1px !default;
 $breakpoint-lg-down: $breakpoint-lg - 0.1px !default;
 $breakpoint-xl-down: $breakpoint-xl - 0.1px !default;
+$breakpoint-xxl-down: $breakpoint-xxl - 0.1px !default;
 
 $hero-height: 25.5rem !default;
 $hero-height-secondary: 20rem !default;

diff --git a/liqd_product/assets/scss/components/_blocks.scss b/liqd_product/assets/scss/components/_blocks.scss
@@ -212,9 +212,9 @@ $block-padding-md: 7.5*$padding;
     margin-left: -$r-spacer;
     margin-right: -$r-spacer;
 
-    @media screen and (min-width: $breakpoint-xl) {
-        margin-left: 2*-$r-spacer;
-        margin-right: 2*-$r-spacer;
+    @media screen and (min-width: $breakpoint-xxl) {
+        margin-left: 0;
+        margin-right: 0;
     }
 
     .block {

diff --git a/liqd_product/assets/scss/components/_homepage.scss b/liqd_product/assets/scss/components/_homepage.scss
@@ -4,8 +4,9 @@ $spacer-xl: 7.5rem;
     background-color: $bg-light;
     margin: 0 $r-spacer 0 $r-spacer;
 
-    @media screen and (min-width: $breakpoint-xl) {
-        margin: 0 2*$r-spacer 0 2*$r-spacer;
+    @media screen and (min-width: $breakpoint-xxl) {
+        max-width: $breakpoint-xl;
+        margin: auto;
     }
 
     .block {