slow-steps 0.3.3 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 131fd96f7e7f0b993964278f1fcbc9f078a73110f885915a025ddce8f6f42694
-  data.tar.gz: 1f9e861f673cb2c100fa4c1839bfcb900181f99b1e219f6ca7356191b99db974
+  metadata.gz: bbad31b2a8aaea8349d5af8c79aa8b6fb3678e131c2b0fda6bb7daa68b331d51
+  data.tar.gz: 9e1b70d5ee7bc2e102e4e1fa30cedd1f6b7ecadf23816438a15b6d885a40ed34
 SHA512:
-  metadata.gz: e43ca0f024fd548f70a6fe83c1a65a5af1e6c37521fcf7f166fb3e21e7c291e0f70095a24ccbde98a2754c97c7fbc3f98c9805ccae70babc6049c8bf83693c1c
-  data.tar.gz: a8c32a0136eace866ef6a6316ac7890f3bf66e61ec7c7501d42b3ce358bf84b66fa7c556f3032aac750daad4f1861291ed5b4908c97a80377584dd7a40b71011
+  metadata.gz: 5e3164e6bf919b747ca3f25f96cced25aee3fbabb934d0d3176b063f2aa3a31f40b2317d5b4a0acf32fe838df1eb27f2c74247cc48939d45f2f7c39d60034e9c
+  data.tar.gz: 5ab6d9779c3ffc803772a8e2c64327442910d353d2c008e293bbf9101d29f8ef61f9467a77633bb58b9e2c4c416c47999e74a58b64802e78c7d9f03d95057b94

data/_includes/contact-form.html

@@ -3,7 +3,7 @@
 
   <form  action="https://formspree.io/f/{{ site.formspree }}" method="post" >
 
-    <label for="name">Enter your name</label>
+    <label for="name">Enter your full name</label>
     <input type="text" class="form-element" name="name" id="name" placeholder="Your Name" required>
 
     <label for="email">Enter your email</label>

data/_includes/forms/mc-register.html

@@ -11,7 +11,7 @@
       <div class="form__elem {{ item.type }}__elem mc--{{ item.width }} mc-field-group
         {% if item.type == 'select' OR item.type == 'radio' %}input-group{% endif %}">
 
-        <label class="form--label {{ item.type }}-label" for="{{ item.mce-id }}">
+        <label class="form--label {{ item.type }}-label" for="{{ item.id }}">
           {{ item.label }}
           {% if item.required %}
             <span class="mc-asterisk">*</span>
@@ -22,8 +22,8 @@
           {% for option in item.opts %}
             <li>
               <input type="{{ item.type }}" value="{{ option.value }}" name="{{ item.name }}"
-                id="{{ item.mce-id }}-{{ option.mce-id }}" {{ item.autofocus }}>
-              <label for="{{ item.mce-id }}-{{ option.mce-id }}">
+                id="{{ item.id }}-{{ option.id }}" {{ item.autofocus }}>
+              <label for="{{ item.id }}-{{ option.id }}">
                 {{ option.name }}
               </label>
             </li>
@@ -32,10 +32,9 @@
         {% endif %}
 
         {% if item.type == 'select' %}
-        <select name="{{ item.name }}" class="form--select form--elem {% if item.required %}required {% endif %}" id="{{ item.mce-id }}" {{ item.autofocus }}>
+        <select name="{{ item.name }}" class="form--select form--elem {% if item.required %}required {% endif %}" id="{{ item.id }}" {{ item.autofocus }}>
           {% for option in item.opts %}
-          <option type="{{ item.type }}" value="{{ option.value }}" name="{{ item.name }}"
-            id="{{ item.mce-id }}-{{ option.mce-id }}">
+          <option type="{{ item.type }}" value="{{ option.value }}" name="{{ item.name }}">
             {{ option.name }}
           </option>
           {% endfor %}
@@ -43,15 +42,17 @@
         {% endif %}
 
         {% if item.type == 'textarea' %}
-        <textarea rows="4" name="{{ item.name }}" id="item.mce-id"
+        <textarea rows="4" name="{{ item.name }}" id="{{ item.id }}"
           class="form--textarea form--elem" {{ item.autofocus }}></textarea>
         {% endif %}
 
         {% if item.type == 'checkbox' %}
-        <label class="form--label {{ item.type }}-label--mod" for="{{ item.mce-id }}">
+        <label class="form--label {{ item.type }}-label--mod" for="{{ item.id }}">
           <p>{{ item.label }}</p>
           <span class="styled-checkbox__block">
-    	      <input type="checkbox" class="styled-checkbox switch" id="{{ item.mce-id }}" {{ item.autofocus }}>
+
+    	      <input type="checkbox" class="styled-checkbox switch" id="{{ item.id }}" name="{{ item.name }}" {{ item.autofocus }} value="{{ item.value }}">
+
           	<span class="icon"><span class="icon--elem"></span></span>
             <span class="no">NO</span>
           	<span class="yes">YES</span>
@@ -63,13 +64,14 @@
         <input type="{{ item.type }}" value=""
           {% if item.type == 'tel' %}
           placeholder="Landline or mobile"
-          pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}"
+          pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
           {% endif %}
           name="{{ item.name }}"
           class="{% if item.required %}required{% endif %} form--input form--elem"
-          id="{{ item.mce-id }}"
+          id="{{ item.id }}"
           {{ item.autofocus }}>
         {% endif %}
+
       </div>
 
       {% endfor %}
@@ -81,10 +83,10 @@
 
           <fieldset class="mc_fieldset gdprRequired mc-field-group" name="interestgroup_field">
             {% for item in site.data.forms[page.env].gdpr %}
-            <label class="mc--{{ item.width }} form--label {{ item.type }}-label--mod checkbox subfield" for="gdpr_{{ item.mce-id }}">
+            <label class="mc--{{ item.width }} form--label {{ item.type }}-label--mod checkbox subfield" for="{{ item.id }}">
               <p>{{ item.label }}</p>
               <span class="styled-checkbox__block">
-                <input type="checkbox" class="styled-checkbox switch av-checkbox gdpr" id="gdpr_{{ item.mce-id }}" value="Y" name="{{ item.name }}">
+                <input type="checkbox" class="styled-checkbox switch av-checkbox gdpr" id="{{ item.id }}" value="Y" name="{{ item.name }}">
                 <span class="icon"><span class="icon--elem"></span></span>
                 <span class="no">NO</span>
                 <span class="yes">YES</span>
@@ -118,20 +120,14 @@
         <input type="text" name="{{ site.data.forms.pwp.botspot-name }}" tabindex="-1" value="">
       </div>
 
-      <div class="mc-field-group" style="position: absolute; left: -5000px;" aria-hidden="true">
-				<select name="USERTYPE" class="required" id="mce-USERTYPE">
-					<option value="PWP" {% if page.env == 'pwp' %}selected="selected"{% endif %}>PWP</option>
-					<option value="CLINICIAN" {% if page.env == 'clinician' %}selected="selected"{% endif %}>CLINICIAN</option>
-
-				</select>
-			</div>
-
       <div class="mc-field-group input-group" style="position: absolute; left: -5000px;" aria-hidden="true">
-        {% if page.env == 'pwp' %}
-        <input type="checkbox" value="4" name="group[30861][4]" id="mce-group[30861]-30861-0" checked>
-        {% else %}
-        <input type="checkbox" value="8" name="group[30861][8]" id="mce-group[30861]-30861-1" checked>
-        {% endif %}
+        <select name="USERTYPE" class="required" id="mce-USERTYPE" >
+          {% if page.env == 'pwp' %}
+          <option value="PWP" selected></option>
+          {% else %}
+          <option value="CLINICIAN" selected></option>
+          {% endif %}
+        </select>
       </div>
 
     </div>

data/_includes/functions/calc-svg-coord.html

@@ -1,3 +1,5 @@
+<!-- Liquid function -->
+
 <!-- Take inputs from page front matter and calculate the coordinates of the svg elements -->
 {% assign image_handle = include.image_handle %}
 

data/_includes/functions/reposition-svg-labels.html

@@ -0,0 +1,44 @@
+<!-- JS function to reposition SVG labels on images !fullwidth -->
+<!-- We use Front Matter to determine if this script should be included, hence here and not in assets -->
+
+<script type="text/javascript">
+
+  function reposition_svg_labels(){
+
+    /* get svg labels */
+    var svg = document.querySelectorAll('.augment-not-fullwidth .svg__labels');
+
+    /* rendered image in pixels */
+    var x_i_px = document.getElementsByClassName("image--guarantee")[0].offsetWidth ;
+    var y_i_px = document.getElementsByClassName("image--guarantee")[0].offsetHeight ;
+    var r_i = x_i_px / y_i_px ;
+
+    /* original image in pixels */
+    var x_0_px = {{ page.images.guarantee.size | split: ', ' | first }} ;
+    var y_0_px = {{ page.images.guarantee.size | split: ', ' | last }} ;
+    var r_0 = x_0_px / y_0_px ;
+
+    for (let i = 0; i < svg.length; i++) {
+
+      /* Reversing the calculation we did in Liquid on build */
+      var dx_0_px = parseInt( svg[i].getAttribute('x'), 10 ) / 100 * x_0_px ;
+      var dy_0_px = parseInt( svg[i].getAttribute('y'), 10 ) / 100 * y_0_px ;
+
+      if (r_i > r_0 ) { /* x_i / y_i > r_0 so x_i is 100% */
+        /* rendered image magnification */
+        var scale = x_i_px / x_0_px ;
+        var dy_i_px = dy_0_px * scale - ( (y_0_px * scale - y_i_px ) / 2 ) ;
+        svg[i].setAttribute("y", ( dy_i_px * 100 / y_i_px + '%') ) ;
+
+      }
+      if (r_i < r_0 ) { /* x_i/y_i < r_0 so y_i is 100% */
+        /* rendered image magnification */
+        var scale = y_i_px / y_0_px ;
+        var dx_i_px = dx_0_px * scale - ( (x_0_px * scale - x_i_px ) / 2 ) ;
+        svg[i].setAttribute("x", ( dx_i_px * 100 / x_i_px + '%') ) ;
+      }
+    };
+  }
+  reposition_svg_labels()
+
+</script>

data/_includes/{google-analytics.html → head/google-analytics.html}

@@ -1,10 +1,15 @@
 <!-- This goes before </head> closing tag -->
 
-<!-- Google site verification -->
+{% if site.google.verification %}
+
+<!-- Google verification -->
 <meta name="google-site-verification" content="{{ site.google.verification }}" />
 
-<!-- Google Analytics -->
+{% endif %}
+
+{% if site.google.analytics %}
 
+<!-- Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google.analytics }}"></script>
 
 <script>
@@ -13,3 +18,5 @@
   gtag('js', new Date());
   gtag('config', '{{ site.google.analytics }}');
 </script>
+
+{% endif %}

data/_includes/head/head.html

@@ -50,9 +50,11 @@
   {% include /head/stylesheets.html %}
 
   {% if jekyll.environment == "production" %}
-  {% include google-analytics.html %}
+  {% include head/google-analytics.html %}
   {% endif %}
 
+
+
 </head>
 
 <body class="preload" onload="animate_after_load()">

data/_includes/scripts.html

@@ -8,7 +8,7 @@
 
   <script type="text/javascript" src="{{ '/assets/js/svg_aos.js' | relative_url }}" async></script>
 
-  {% include functions/pull_page_args.html %}
+  {% include functions/reposition-svg-labels.html %}
 
 {% endif %}
 

data/_layouts/env/clinician.html

@@ -68,10 +68,10 @@ Last full read through 27/12/2020
 
 <div class="segment__wrap">
 
-  <div class="segment__left">
+  <div class="segment__left strap--opd-trust">
 
 
-  <div class="center-text segment__keywords strap--opd-trust">
+  <div class="center-text segment__keywords ">
     {% assign keyword = site.data.copy.landing.clinician.keywords | split: ", " %}
     {% for word in (1..keyword.size) %}
     <h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3>
@@ -95,8 +95,8 @@ Last full read through 27/12/2020
 
   </div>
 
-  <div class="segment__right augmented-image" >
+  <div class="segment__right augmented-image svg__labels--red" >
 
-    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee h-100"%}
+    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee"%}
 
 </div>

data/_layouts/env/pwp.html

@@ -87,7 +87,7 @@ Last full read through 27/12/2020
 
   <div class="segment__left">
   <div class="segment__gaurentee center-text">
-    <div data-aos="fade-right">
+    <div data-aos="zoom-in">
       {% include branding/site-logo.svg %}</div>
     <p data-aos="fade-in" class="strap__guarantee">
       {{ description }}</p></div>
@@ -100,9 +100,9 @@ Last full read through 27/12/2020
 
   </div>
 
-  <div class="segment__right augmented-image" >
+  <div class="segment__right augmented-image svg__labels--red augment-not-fullwidth" >
 
-    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee h-100"%}
+    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee"%}
 
 
 </div>

data/_sass/_colors/_variables.sass

@@ -53,3 +53,5 @@ $light-grey: rgb(220, 220, 220)
 $grey: rgb(130, 130, 130)
 
 $led: rgb(255, 70, 0)
+
+$image-blend: rgb(73, 100, 122)

data/_sass/_mixins.sass

@@ -18,7 +18,9 @@
   opacity: .6
 
 @mixin image-filter-rotate
-  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
+  mix-blend-mode: screen
+  filter: grayscale(1)
+  //contrast(.5) brightness(1.3) sepia(.6) hue-rotate(180deg) opacity(.5)
 
 // Applied to an overlaying div
 @mixin image-filter--blur

data/_sass/env/breakpoints/768.sass

@@ -3,7 +3,7 @@
 
   .segment__wrap
     display: flex
-    flex-wrap: no-wrap
+    flex-wrap: nowrap
     flex-direction: row
     width: 100vw
     max-height: 100vh
@@ -12,35 +12,40 @@
     height: 100vh
     display: flex
     flex-direction: column
+    justify-content: center
 
   .segment__left
-    width: 60vw
+    width: 40vw
 
   .segment__right
-    width: 40vw
+    width: 60vw
 
   .segment__gaurentee
-    flex-direction: row
+    //flex-direction: row
     height: 50%
-    justify-content: space-between
-    padding: 0
-    text-align: left
+    justify-content: space-around
+    //padding: 0
+    //text-align: left
 
     .site__logo
-      width: 140px
+      height: 10vh
 
   .strap__guarantee
     border: none
-    border-left: solid 2px $pure-white
+    //border-left: solid 2px $pure-white
     width: 35vw
     margin: 0
     padding: 0 3rem
 
   .segment__keywords
     width: 100%
+    height: 60%
+    max-height: 800px
     flex-direction: column
-    align-items: center
-    justify-content: center
+    flex-wrap: nowrap
+    padding: 10rem 0
+    & > *
+      padding: 0
 
   .clinician__strap
     h1

data/_sass/env/clinician.sass

@@ -25,18 +25,17 @@ $hero-follow-bottom: 59.5vh
   top: calc(var(--vh, 1vh) * #{strip-unit($hero-follow-bottom)})
 
 .segment__keywords
-  align-items: center
   display: flex
   flex-direction: column
-  height: 100%
-  justify-content: center
-
+  align-items: center
+  justify-content: space-around
+  padding: 3rem 2rem
   & > *
-    padding: 5rem 0
-    width: 50%
+    padding: 2rem 0
 
 .image--guarantee
   @include image-filter-rotate
+  height: 100vh
 
 .action__call
 
@@ -46,9 +45,13 @@ $hero-follow-bottom: 59.5vh
   span
     color: $env-primary
 
+
   svg
     stroke: $env-primary
 
   &:hover
     &::before
       background-color: rgba($env-secondary, 1)
+
+.segment__right
+  background-color: $image-blend

data/_sass/env/pwp.sass

@@ -50,13 +50,14 @@ $hero-follow-top: 4.5vh
   .site__logo
     margin: 0 5vw
     text-align: center
-    width: 100px
+    height: 10vh
 
 .segment__keywords
   height: 50%
 
 .image--guarantee
   @include image-filter-rotate
+  height: 100vh
 
 .strap__guarantee
   border-top: solid 1px $soft-white
@@ -71,6 +72,11 @@ $hero-follow-top: 4.5vh
   display: flex
   flex-direction: row
   flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
   & > *
     padding: 3rem 0
     width: 50%
+
+.segment__right
+  background-color: $image-blend

data/_sass/footer_redesign.sass

@@ -252,20 +252,18 @@
       &:last-child
         margin-top: 5rem
         width: auto
+        border: solid 1px $opd-coral
         .ft__sitemap--link
           @include default-trans
-          background-color: $opd-coral
-          border: solid 1px $opd-coral
-
           text-align: center
           padding: 2rem 3rem
           width: auto
           border-radius: 6px
           cursor: pointer
           text-transform: uppercase
-          &:hover
-            background-color: rgba($opd-coral,.3)
-            border: solid 1px $pure-white
+        &:hover
+          background-color: rgba($opd-coral,.3)
+          border: solid 1px $pure-white
 
     .ft__sitemap--link
       text-decoration: none

data/_sass/forms/mc-forms.sass

@@ -191,3 +191,12 @@ input.switch
     padding: 5rem
     background-color: $pure-white
     border-radius: 20px
+
+
+.response
+  padding: 2rem 0
+
+.mce_inline_error
+  padding: 1rem 0
+  font-size: $sm-font-size
+  color: $led

data/_sass/global.sass

@@ -87,6 +87,7 @@ body
   object-fit: cover
   object-position: center
   width: 100%
+  display: inherit
 
 .image__filter--mix
   @include image-filter--mix
@@ -206,7 +207,8 @@ body
     stroke-width: 1
 
   & > .svg--text
-    font-size: $font-size * .8
+    font-size: $lg-font-size
+    font-weight: $heavy-font
 
 .svg__labels.hidden
 
@@ -234,6 +236,12 @@ body
   & > .trans-right
     animation: trans-in-right .6s ease-in-out
 
+// This is digusting! We need to tweak the actual html so we can readilly access these elements.
+.svg__labels--red
+  & > svg > * > *
+    fill: $opd-coral
+    stroke: $opd-coral!important
+
 
 $svg-text-offset: 60px
 
@@ -341,9 +349,8 @@ $svg-text-offset: 60px
 
 // This is basically a button and should to be centralised
 .action__call
-  bottom: 0
-  font-size: $font-size * .8
-  margin: -100px auto
+  font-size: $font-size
+  margin: 0 auto
   padding: 2rem
   position: relative
   text-decoration: none
@@ -354,9 +361,9 @@ $svg-text-offset: 60px
     content: ''
     display: block
     height: 6rem
-    left: 0
+    left: -1rem
     position: absolute
-    top: 0
+    top: .5rem
     transition: .2s ease
     width: 6rem
 

data/_sass/navigation/breakpoints/1024.sass

@@ -21,7 +21,8 @@
     .nav-brand
       @include default-trans
       height: 8vh
-      max-height: 100px
+      //max-height: 100px
+      // max-height breaks vertical centering
 
   .nav-scrolled
     background-color: $env-primary
@@ -31,9 +32,11 @@
     @include default-trans
     display: flex
     position: absolute
-    max-width: 160px
+    //max-height: 100px
+    // max-height breaks vertical centering
     height: 10vh
     top: 7.5vh
+    margin-top: 0
 
     .site__logo
       position: absolute

data/_sass/typography/_variables.sass

@@ -22,4 +22,4 @@ $light-font: 200
 
 $medium-font: 400
 
-$heavy-font: 500
+$heavy-font: 600

data/assets/js/svg_text_width.js

@@ -22,21 +22,21 @@ function svg_text_width() {
     if(view_width > 768 ){
       var lineLength = 100 ; // length in pixels of the drawn line
       var x_offset = 10 + width ; // offset the text label s.t. last character sits 10 px from end of line
-      var y_offset = .5 ;
+      var y_offset = 5 ;
     } else {
       var lineLength = 70 ;
       var x_offset = 0 ; // offset the text label s.t. first character sits inline with end of line
-      var y_offset = -1.5 ;}
+      var y_offset = -8 ;}
       lines[i].setAttribute("stroke-dashoffset", lineLength + 'px')
       lines[i].setAttribute("stroke-dasharray", lineLength + 'px')
     if( text[i].classList.contains('trans-left')){
       lines[i].setAttribute("x2", -lineLength + 'px')
       text[i].setAttribute("x", - lineLength - x_offset + 'px');
-      text[i].setAttribute("y", y_offset + 'rem');
+      text[i].setAttribute("y", y_offset + 'px');
     } else {
       lines[i].setAttribute("x2", lineLength + 'px')
       text[i].setAttribute("x", lineLength + x_offset - width + 'px');
-      text[i].setAttribute("y", y_offset + 'rem');
+      text[i].setAttribute("y", y_offset + 'px');
     };
   };
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slow-steps
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.4.0
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-30 00:00:00.000000000 Z
+date: 2021-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -192,13 +192,13 @@ files:
 - _includes/footer/footer_redesign.html
 - _includes/forms/mc-register.html
 - _includes/functions/calc-svg-coord.html
-- _includes/functions/pull_page_args.html
+- _includes/functions/reposition-svg-labels.html
 - _includes/gmap.html
-- _includes/google-analytics.html
 - _includes/head/README.md
 - _includes/head/descriptors/og-meta.html
 - _includes/head/descriptors/structured-data.html
 - _includes/head/descriptors/twitter-meta.html
+- _includes/head/google-analytics.html
 - _includes/head/head.html
 - _includes/head/stylesheets.html
 - _includes/image-post.html

data/_includes/functions/pull_page_args.html

@@ -1,31 +0,0 @@
-
-<script type="text/javascript">
-
-function svg_aug_contained_image(){
-
-  var x_i = document.getElementsByClassName("image--guarantee")[0].offsetWidth ;
-  var y_i = document.getElementsByClassName("image--guarantee")[0].offsetHeight ;
-  /* get svg labels */
-  var svg = document.querySelectorAll('.svg__augment > .augment--guarantee');
-
-  /* origanal image width in pixels */
-  var x_0 = {{ page.images.guarantee.size | split: ', ' | first }} ;
-  var y_0 = {{ page.images.guarantee.size | split: ', ' | last }} ;
-
-  for (let i = 0; i < svg.length; i++) {
-  /* origanal x position in pixels */
-  var dx_0 = parseInt( svg[i].getAttribute('x'), 10 ) / 100 ;
-  var dy_0 = parseInt( svg[i].getAttribute('y'), 10 ) / 100 ;
-
-  var dx_0Pixel = dx_0 * x_0 ;
-  var dy_0Pixel = dy_0 * y_0 ;
-
-  svg[i].setAttribute("x", (dx_0Pixel - ( x_0 / 2) + (x_i / 2) ) / x_i * 100 + '%');
-  svg[i].setAttribute("y", (dy_0Pixel - ( y_0 / 2) + (y_i / 2) ) / y_i * 100 + '%');
- };
-
-}
-
-//window.setInterval(svg_aug_contained_image, 200 )
-
-</script>