Merge pull request #857 from liqd/pm-2019-07-list-block

Pm 2019 07 list block

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

@@ -1,6 +1,6 @@
 {% load wagtailcore_tags widget_tweaks form_field_tags i18n wagtailsettings_tags wagtailimages_tags %}
 {% get_settings %}
-<div class="contact_form p-sm-3 py-md-5">
+<div class="contact_form">
     <div class="l-center-6 text-center mb-md-5">
         <h2>{{ page.header }}</h2>
         <p>{{ page.intro|richtext }}</p>

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/col_img_cta_block.html

@@ -1,6 +1,6 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="block row mb-3 mb-md-5">
+<div class="block row">
     {% for column in value.columns %}
         <div class="block-img-col-{{ forloop.counter }}">
             {% if column.image %}

liqd_product/assets/scss/_variables.scss

@@ -14,7 +14,6 @@ $platform-primary: #46caad !default;
 $platform-danger: #d0011b !default;
 
 $body-bg: #fff !default;
-$body-bg-darker: #f7f7f7 !default;
 
 $text-color: #1a1a1a !default;
 $text-color-inverted: $body-bg !default;

liqd_product/assets/scss/components/_blocks.scss

@@ -1,5 +1,5 @@
 $block-padding: 3.5*$padding;
-$block-padding-md: 7*$padding;
+$block-padding-md: 7.5*$padding;
 
 //non block specific styles
 .block-col-6 {
@@ -13,7 +13,11 @@ $block-padding-md: 7*$padding;
 
 .block-col-3 {
     @extend .col-md-4;
-    padding: $block-padding;
+    padding: $padding;
+
+    @media screen and (min-width: $breakpoint-lg) {
+        padding: $padding $block-padding-md 0 $block-padding-md;
+    }
 }
 
 .block-col-2 {
@@ -85,8 +89,19 @@ $block-padding-md: 7*$padding;
 }
 
 //image/list cta block
+
+.block-image_cta_block {
+    text-align: left;
+}
+
 .block-img-col-1 {
     @extend .col-md-7;
+
+    img {
+        display: inline-block;
+        float: left;
+        padding-right: $padding;
+    }
 }
 
 .block-img-col-2 {
@@ -97,7 +112,7 @@ $block-padding-md: 7*$padding;
         padding: 0 0 0 2*$r-spacer;
 
         @media screen and (min-width: $breakpoint-md) {
-            padding: 0 $block-padding-md 0 5*$r-spacer;
+            padding: 0 $block-padding-md $block-padding-md 5*$r-spacer;
         }
     }
 }
@@ -115,35 +130,6 @@ $block-padding-md: 7*$padding;
     }
 }
 
-.block-image_cta_block {
-    text-align: left;
-
-    //list styling
-    ul {
-        list-style: none;
-        padding: 0;
-    }
-
-    li:before {
-        margin-right: 0.5*$spacer;
-        color: $gray-lightest;
-        font-family: "Font Awesome 5 Free", sans-serif;
-        font-weight: 900;
-        content: '\f111';
-        font-size: $font-size-xxl;
-    }
-
-    p {
-        width: 79%;
-        vertical-align: middle;
-        display: inline-block;
-
-        @media screen and (min-width: $breakpoint-md) {
-            width: 90%;
-        }
-    }
-}
-
 //old block styling, still used in activity block
 .block--bordered {
     padding: 1em;
@@ -155,6 +141,20 @@ $block-padding-md: 7*$padding;
     }
 }
 
+//responsive padding for image, 2 col cta and whole
+.block-img-col-1,
+.block-row-2 {
+    padding: $padding;
+
+    @media screen and (min-width: $breakpoint-xs) {
+        padding: $block-padding;
+    }
+
+    @media screen and (min-width: $breakpoint-md) {
+        padding: $block-padding-md;
+    }
+}
+
 //some old some current general styling
 .block {
     @include clearfix;
@@ -181,10 +181,16 @@ $block-padding-md: 7*$padding;
     h2:after {
         content: "";
         position: absolute;
-        left: calc(50% - 25px);
-        bottom: -10px;
-        width: 50px;
-        border-bottom: solid 4px $brand-secondary;
+        left: calc(50% - 40px);
+        bottom: -20px;
+        width: 80px;
+        border-bottom: solid 8px $brand-secondary;
+    }
+
+    .block-img-col-1 {
+        h2:after {
+            left: 0;
+        }
     }
 }
 
@@ -244,17 +250,3 @@ $block-padding-md: 7*$padding;
         }
     }
 }
-
-//responsive padding for image, 2 col cta and whole
-.block-img-col-1,
-.block-row-2 {
-    padding: $padding;
-
-    @media screen and (min-width: $breakpoint-xs) {
-        padding: $block-padding;
-    }
-
-    @media screen and (min-width: $breakpoint-md) {
-        padding: $block-padding-md;
-    }
-}

liqd_product/assets/scss/components/_contact_form.scss

@@ -1,3 +1,6 @@
+$block-padding: 3.5*$padding;
+$block-padding-md: 7.5*$padding;
+
 //nasty hack until forms are refactored
 .contact_form {
     .form-control {
@@ -9,6 +12,14 @@
     .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/_homepage.scss

@@ -1,7 +1,7 @@
-$spacer-xl: 7rem;
+$spacer-xl: 7.5rem;
 
 .hompage__wrapper {
-    background-color: $body-bg;
+    background-color: $bg-light;
     margin: $r-spacer;
 
     @media screen and (min-width: $breakpoint-lg) {
@@ -10,7 +10,11 @@ $spacer-xl: 7rem;
 }
 
 .homepage-header {
-    margin-bottom: $spacer-xl;
+    margin-bottom: 2*$r-spacer;
+
+    @media screen and (min-width: $breakpoint-xs) {
+        margin-bottom: $spacer-xl;
+    }
 }
 
 .homepage-header__image-wrapper {

liqd_product/assets/scss/components/_style_guide.scss

@@ -43,10 +43,6 @@
     background-color: $body-bg;
 }
 
-.background-darker.colour-block {
-    background-color: $body-bg-darker;
-}
-
 .bg-secondary.colour-block {
     background-color: $bg-secondary;
 }