slow-steps 0.1.1

data/_layouts/env/pwp.html

@@ -0,0 +1,83 @@
+---
+layout: default
+---
+{% if site.data.copy.landing.pwp.description %}
+{% assign description = site.data.copy.landing.pwp.description %}
+{% else %}
+{% assign description = site.description %}
+{% endif %}
+
+<div class="pwp__mast">
+
+  <div class="pwp__overlay">
+    <div class="pwp__bg">
+    </div>
+  </div>
+
+  <div class="pwp--strap">
+    <h1>
+      <span class="pwp--strap-start">
+        {% assign header = site.data.copy.landing.pwp %}
+        {% assign title = header.title | split: " " %}
+        {% assign n = header.split %}
+        {% for word in (1..title.size) %}
+
+          {{ title[forloop.index0] }}
+          {% if forloop.index == n %}
+      </span>{% endif %}
+
+        {% endfor %}
+
+    </h1>
+  </div>
+
+  <div class="pwp__follow"></div>
+
+</div>
+
+<div data-aos="fade-in" data-aos-anchor-placement="top-bottom" class="pwp__device--img pwp__device--docked">
+
+<div class="pulsating-circle"></div></div>
+
+<div class="pwp__straps pwp__device--strap">
+  <h2>{{ site.data.copy.landing.pwp.subtitle }}</h2>
+  <p data-aos="fade-in">{{ site.data.copy.landing.pwp.strap }}</p>
+</div>
+
+<div class="pwp__grid-wrap">
+
+  <div class="pwp__grid-col-l">
+  <div class="pwp__grid__text pwp__straps">
+    <div data-aos="fade-right">
+      {% include branding/site-logo.svg %}</div>
+    <p data-aos="fade-in" class="pwp--guarantee">
+      {{ description }}</p></div>
+
+  <div class="pwp__straps pwp__grid_keywords">
+    {% assign keyword = site.data.copy.landing.pwp.keywords | split: ", " %}
+    {% for word in (1..keyword.size) %}
+    <h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3>
+    {% endfor %}</div>
+
+  </div>
+
+  <div class="pwp__grid-col-r">
+    <div class="pwp__straps pwp__grid_img"></div>
+
+    <svg  viewBox="-50 -50 100 100" width="40vw" height="100vh" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="-28%" cy="20%" r="1" fill="white"/>
+    </svg>
+  </div>
+
+</div>
+
+<div data-aos="fade-in" data-aos-anchor-placement="top-bottom" class="pwp__device--img pwp__device--group">
+
+<svg  width="100vw" height="100%" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20%" cy="30%" r="6" fill="white"/>
+<line x1="10%" y1="30%" x2="20%" y2="30%" style='stroke:white;stroke-width:2' />
+<style>
+    .text { fill: white; }
+  </style>
+<text data-aos="fade-in" data-aos-anchor-placement="top-center" x="2%" y="31%" class="text" >Controller</text>
+</svg></div>

data/_layouts/error-page.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+
+<section class="error-page">
+
+{{ content }}
+
+</section>

data/_layouts/feed.html

@@ -0,0 +1,39 @@
+---
+layout: default
+---
+
+<!-- this page shows all our posts ordered by date -->
+<!-- we link to this with /posts/ -->
+
+<section class="feed__head">
+
+<h1 class="feed__title">
+  {{ page.title }}
+</h1>
+
+
+</section>
+
+<div class="post__feed">
+
+  {% for post in site.posts %}
+
+  <div class="feed__card">
+
+    {% picture {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
+
+    <div class="feed__card--text">
+
+      <a class="feed__card--link" href="{{ site.baseurl }}{{ post.url }}">
+
+      <p class="feed__card--title">{{ post.title }}</p></a>
+
+
+    </div>
+
+  </div>
+
+  {% endfor %}
+
+
+</div>

data/_layouts/post.html

@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+<section class="post_head">
+
+{% picture {{ page.image | prepend: 'posts/' }} --alt {{ page.image_alt }} --img class="post__hero" %}
+
+<div class="post__title">
+<h1 >{{ page.title }}</h1>
+<p class="post__meta">{{ site.data.authors[page.author].name }} | {{ site.data.authors[page.author].email }} | {{ page.date | date: "%d-%m-%y" }}</p>
+</div>
+</section>
+
+
+<section class="post__content">
+
+<h2 class="post__subtitle">{{ page.subtitle }}</h2>
+
+{{ content }}
+
+</section>
+
+<section class="post__footer">
+
+</section>

data/_layouts/register.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<div class="fullwidth__wrap bg--light">
+  <div class="narrow__wrap no-touch__wrap">
+    <div class="form__wrap">
+    {% include /forms/mc-register.html %}
+  </div></div>
+</div>

data/_sass/about.sass

@@ -0,0 +1,178 @@
+
+.about__head
+  align-items: center
+  backdrop-filter: blur(8px)
+  background-color: rgba($env-primary, .5)
+  color: $white
+  display: flex
+  height: $mobile-navbar-height * 4
+  justify-content: center
+  padding-top: $mobile-navbar-height
+  text-align: center
+  span
+    animation-duration: .1s
+    animation-fill-mode: forwards
+    animation-iteration-count: 1
+    animation-name: fadeInOpacity
+    opacity: 0
+
+@keyframes fadeInOpacity
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
+
+.about__head__bg
+  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
+  filter: contrast(3) brightness(.6)
+  background-position: center
+  background-repeat: no-repeat
+  background-size: cover
+  height: $mobile-navbar-height * 5
+  position: fixed
+  width: 100vw
+  z-index: -1
+
+.about__copy
+  align-items: center
+  background-color: $env-primary
+  color: $white
+  display: flex
+  flex-direction: column
+  justify-content: center
+  padding: 5rem 2rem
+  text-align: center
+
+.about--copy
+  padding: 3rem 0
+
+.about__team
+  display: flex
+  flex-direction: column
+  background-color: $pure-white
+
+.team__head
+  align-items: flex-end
+  background-color: rgba($env-primary, .5)
+  border-bottom: solid 1px $opd-blue-confidence
+  display: flex
+  height: 10rem
+  justify-content: space-around
+  width: 100vw
+
+.team__title
+  color: $opd-blue-confidence
+  padding-bottom: 2rem
+  transition: .4s ease-out
+  i
+    font-size: $font-size * 1.2
+    transition: .4s ease-out
+
+.team__title--active
+  color: $env-primary
+  padding-bottom: 2.3rem
+  i
+    text-shadow: 0px 12px 10px rgba($pure-black, .3)
+    font-size: $font-size * 1.5
+
+.team__title.team__title--active
+  transition: .4s ease-out
+
+.title__title--text
+  display: none
+
+.team__members
+  background-color: $white
+  color: $opd-blue-confidence
+  padding-top: 10rem
+
+.single__member
+  display: none
+  flex-direction: column
+  width: 90%
+  margin: auto
+
+.single__member--active
+  display: flex
+
+.single__member__image
+  display: flex
+  justify-content: center
+  width: 100%
+  padding-bottom: 3rem
+
+.member--image
+  width: 200px
+  height: 200px
+  object-fit: cover
+  border-radius: 12px
+  padding: 3px
+  border: solid 1px $light-grey
+  transition: .3s ease-in-out
+  &:hover
+    border: solid 1px $white
+    box-shadow: 1px 1px 5px $light-grey
+
+.single__member__text
+  width: 90%
+  margin: auto
+
+.member__position
+  display: flex
+  align-items: center
+  color: $grey
+
+.member__socials
+  align-items: center
+  list-style: none
+  margin: 0
+  padding: 0
+  li
+    display: inline
+
+.social
+  color: $env-primary
+  font-size: $font-size * .7
+
+.member__info
+  height: $font-size * 4
+  max-height: $font-size * 4
+  overflow: hidden
+  transition: .8s cubic-bezier(0,.98,.48,.92)
+
+.member__info--reveal
+  height: 100%
+  max-height: 1000px
+  transition: .6s cubic-bezier(.51,.38,1,.42)
+
+.info__conceal
+  align-items: flex-end
+  background-image: linear-gradient(rgba(0,0,0,0), $white, $white)
+  color: $black
+  cursor: pointer
+  display: flex
+  font-size: $font-size * .8
+  height: $font-size * 3
+  transform: translateY(-100%)
+  transition: .4s ease-in-out
+  width: 100%
+
+  &::before
+    content: 'more \00a0 '
+
+  i
+    font-size: $font-size * .6
+
+.info__reveal
+  height: $font-size * 1
+  padding-bottom: $font-size * 2
+  transform: translateY(0)
+  transition: .4s ease-in-out
+
+  &::before
+    content: 'less \00a0 '
+
+  i
+    transform: rotate(180deg)

data/_sass/aos-overrides.sass

@@ -0,0 +1,5 @@
+// Override build in delays on mobile devices
+// This is a work around, we often build arrays of elements with incremental delays for UX effects, but often these arrays are columns on mob to it doesnt make sense to delay anything.
+@media screen and (max-width: 1024px)
+  [data-aos-delay]
+    transition-delay: 0s !important

data/_sass/breakpoints/about.sass

@@ -0,0 +1,78 @@
+
+@media screen and ( min-width: 768px )
+
+  .about--copy
+    max-width: 800px
+
+  .about__team
+    flex-direction: row
+
+  .team__head
+    border-bottom: none
+    border-right: solid 1px $opd-blue-confidence
+    display: block
+    height: auto
+    width: auto
+    padding: 10rem 0 0 5rem
+
+
+  .title__title--text
+    display: block
+
+  .team__title
+    display: flex
+    border-radius: 6px 0 0 6px
+    padding: 2rem 4rem 2rem 2rem
+    transform: rotate(0)
+    white-space: nowrap
+    color: $opd-blue-confidence
+    border: solid 1px rgba($env-primary, 0)
+    margin: 2rem 0
+    &:not(.team__title--active)
+      transition:  .2s ease-out
+
+    &:hover:not(.team__title--active)
+      background-color: rgba($white,.3)
+      transform: translateX(-2px)
+      box-shadow: -1px 1px 10px 0px rgba($env-secondary,.5)
+      border: solid 1px $env-secondary
+      border-radius: 6px
+    i
+      &::after
+        content: " "
+        white-space: pre
+
+  .team__title.team__title--active
+    transition: .4s ease-out
+
+  .team__members
+    //padding: 10rem
+    color: $opd-blue-confidence
+    background-color: $white
+
+  .team__title--active
+    //transition: 2s ease-in-out
+    justify-content: flex-end
+    padding-right: 1rem !important
+    color: $env-primary !important
+    background-color: $white
+    border: solid 1px $opd-blue-confidence
+    border-right: solid 1px $white
+    transform: translateX(1px)
+    text-align: right
+    //font-size: inherit
+
+  .single__member
+    width: 90%
+    margin: auto
+    flex-direction: row
+
+  .single__member__image
+    width: 25%
+
+  .member--image
+    width: 10vw
+    height: 10vw
+
+  .single__member__text
+    width: 75%

data/_sass/colors/_variables.sass

@@ -0,0 +1,43 @@
+// Colour variables, accessible within _sass/
+
+// Oxford Product Design
+
+$opd-blue-confidence: rgba(62, 86, 112, 1)
+
+$opd-orange-confidence: rgba(210, 84, 75, 1)
+
+$opd-blue-trust: rgba(179, 201, 226, 1)
+
+$opd-grey-neutral: rgba(178, 178, 178, 1)
+
+// Socials
+
+$twitter-primary: rgb(56, 161, 243)
+
+$facebook-primary: rgb(66, 103, 178)
+
+$linkedin-primary: rgb(14, 118, 168)
+
+$instagram-primary: rgb(64, 93, 230)
+
+// General
+
+$pure-white: rgb(255, 255, 255)
+
+$white: rgb(240, 240, 240)
+
+$soft-white: rgb(230, 230, 230)
+
+$pure-black: rgb(0, 0, 0)
+
+$black: rgb(10, 10, 10)
+
+$soft-black: rgb(80, 80, 80)
+
+$light-grey: rgb(220, 220, 220)
+
+$grey: rgb(130, 130, 130)
+
+$box-shadow-shade: rgba(0, 0, 0, .2)
+
+$secondary_navbar_color: rgba(255, 255, 255, .3)