made-slowly 0.0.1

data/_layouts/case-study.html

@@ -0,0 +1,51 @@
+---
+layout: single-post
+---
+<!-- Layout for client case studies -->
+
+{{ content }}
+
+{% if page.logos != null %}
+<h4>Branding</h4><hr>
+<section class="flex-display">
+{% for item in page.logos %}
+  <img class="theme-images"
+  src="{{ site.baseurl }}/assets/img/clients/{{ page.directory }}/logos/{{ item }}"
+  alt="{{ page.directory }} {{ item }}">
+{% endfor %}
+</section>
+{% endif %}
+
+{% if page.icons != null %}
+<h4 class="blog-para">Iconography</h4><hr>
+<section class="flex-display">
+{% for item in page.icons %}
+  <img class="theme-images"
+  src="{{ site.baseurl }}/assets/img/clients/{{ page.directory }}/iconography/{{ item }}"
+  alt="{{ page.directory }} {{ item }}">
+{% endfor %}
+</section>
+{% endif %}
+
+{% if page.colors != null %}
+<h4 class="blog-para">Colour Scheme</h4><hr>
+<section class="flex-display">
+{% for item in page.colors %}
+  <svg class="theme-colors"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0, 0, 50, 50" preserveAspectRatio="none" ><defs/>
+  <circle cx="25" cy="25" r="20"
+  fill="#{{ item }}"
+  alt="{{ page.directory }} color #{{ item }}" />
+  </svg>
+{% endfor %}
+</section>
+{% endif %}
+
+<h4 class="blog-para">Typography</h4><hr>
+<section class="flex-display">
+  <img class="theme-images"
+  src="{{ site.baseurl }}/assets/img/clients/{{ page.directory }}/font/font.png"
+  width="100%"
+  alt="{{ page.directory }} font {{ page.font }}">
+</section>

data/_layouts/categories.html

@@ -0,0 +1,25 @@
+---
+layout: default
+thumbnail:
+---
+
+<section class="blog-masthead global-masthead">
+
+<h1>
+  {{ page.title }} | {{ page.category }}
+</h1>
+
+</section>
+
+<div class="blog-wrapper">
+<!-- list posts in page.catogory -->
+  {% for category in site.categories %}
+  {% if category[0] == page.category %}
+  {% for post in category[1] %}
+  {% include list-post-items.html %}
+  {% endfor %}
+  {% endif %}
+  {% endfor %}
+
+{% include paginator.html %}
+</div>

data/_layouts/compress.html

@@ -0,0 +1,11 @@
+---
+# Jekyll layout that compresses HTML
+# v3.1.0
+# http://jch.penibelst.de/
+# https://github.com/penibelst/jekyll-compress-html
+# © 2014–2015 Anatol Broder
+# MIT License
+---
+
+{% capture _LINE_FEED %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

data/_layouts/default.html

@@ -0,0 +1,26 @@
+---
+layout: compress
+---
+
+{% include header.html %}
+
+{% if page.url == "/" %}
+<a name"#"></a>
+{% endif %}
+
+{% include nav.html %}
+
+{% if page.url == "/styleguide/" %}
+<section class="global-wrapper" style="margin:100px 2rem">
+{{ content }}
+</section>
+{% else %}
+{{ content }}
+{% endif %}
+
+{% include footer.html %}
+
+{% include scripts.html %}
+
+</body>
+</html>

data/_layouts/error-page.html

@@ -0,0 +1,18 @@
+---
+layout: compress
+---
+
+{% include header.html %}
+
+{% include nav.html %}
+
+<section class="error-page">
+
+{{ content }}
+
+</section>
+
+{% include scripts.html %}
+
+</body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,45 @@
+---
+layout: default
+---
+<section class="landing-wraper">
+  <div class="landing-content">
+    <h1 class="h-light">
+    {{ page.title }}</h1>
+    <div class="mouse">
+        <div class="scroll"></div>
+    </div>
+    {% assign n = page.subtitle | size %}
+    {% for items in page.subtitle %}
+    <h3 class="h-light landing-page-sub-title"> {{ items }} </h3>
+    {% if n != forloop.index %}
+    <!-- keeping these outside <h incase it affects seo -->
+    <span class="h-light landing-page-sub-title">|</span>
+    {% endif %}
+    {% endfor %}
+
+    <div class="btn-landing">
+      <div
+      data-aos="fade-in"
+      data-aos-delay="1000"
+      data-aos-easing="ease">
+        <!-- wrapping in div to use AOS -->
+        <!-- really need to write our own AOS -->
+        <a href="/#services" class="btn btn-pop btn-solid btn-pink" role="button">{{ page.cta }}</a>
+      </div>
+      <!--
+      <div data-aos="fade-up">
+        <a href="" class="btn btn-outline btn-color-swoosh" role="button">INSTANT QUOTE</a>
+      </div>
+      -->
+    </div>
+  </div>
+</section>
+
+
+{{ content }}
+
+<a name="services"></a>
+
+{% include services.html %}
+
+<section class="spacer portfolio-wraper"></section>

data/_layouts/single-post-old.html

@@ -0,0 +1,46 @@
+---
+layout: default
+---
+<!-- single post layout -->
+
+<section class="blog-masthead global-masthead"  style="background-image: url('{{ site.baseurl }}/{{ page.background }}');"></section>
+
+<div class="post-preview-text">
+
+<h2 class="post-preview-title">{{ page.title }}</h2>
+
+<h3 class="post-preview-subtitle">{{ page.subtitle }}</h3>
+
+<p class="post-meta">
+{{ page.date | date: '%B %d, %Y' }}
+</p>
+
+<ul class="post-meta">
+  {% assign n = page.categories | size | minus:1 %}
+  {% assign p = page.categories | sort %}
+
+  {% for categories in p %}
+
+  <li>
+    {% assign i = forloop.index | minus:1 %}
+    <a href="{{ site.baseurl }}/slow-blog/categories/{{ page.categories[ i ] | replace: ' ', '-' }}">
+    {{ page.categories[ i ] }}
+    {% if n != i %} | {% endif %}
+    </a>
+  </li>
+
+  {% endfor %}
+
+</ul>
+
+</div>
+
+<section class="blog-content">
+
+{{ content }}
+
+{% include share-buttons.html %}
+
+</section>
+
+{% include blog-footer.html %}

data/_layouts/single-post.html

@@ -0,0 +1,56 @@
+---
+layout: default
+
+---
+<!-- single post layout -->
+
+<section class="single-post-masthead" ></section>
+
+{% include blog-nav.html %}
+
+<div class="single-post-header">
+
+<h1 class="single-post-title">{{ page.title }}</h1>
+
+<h3 class="single-post-subtitle">{{ page.subtitle }}</h3>
+
+<ul>
+  <li class="post-meta">
+    <i class="far fa-calendar" aria-hidden="true"></i>
+  </li>
+  <li class="post-meta">
+    <p class="post-meta">{{ page.date | date: '%B %d, %Y' }}</p>
+  </li>
+  <li class="post-meta">
+<!-- inline style until better solu -->
+    <i class="fas fa-tags" style="padding-left:20px"></i>
+  </li>
+  {% for items in page.categories %}
+  <li class="post-tag">
+    <a href="{{ site.baseurl }}/slow-blog/categories/#{{ items | slugify }}">
+    {{ items | upcase }}
+    </a>
+  </li>
+  {% endfor %}
+  <li class="post-meta">
+    {% include share-buttons.html %}
+  </li>
+</ul>
+
+</div>
+
+<section
+  class="single-post-header-img"
+  style="background-image: url('{{ site.baseurl }}/{{ page.background }}');"></section>
+
+<section class="blog-content">
+
+{{ content }}
+
+{% if page.comments %}
+{% include disquis.html %}
+{% endif %}
+
+</section>
+
+{% include blog-footer.html %}

data/_sass/blog-nav.sass

@@ -0,0 +1,61 @@
+.blog-nav-container
+  margin: 5vh auto
+  width: 100vw
+
+.blog-nav
+  display: flex
+  flex-direction: column
+
+.blog-nav-link
+  display: inline
+  float: none
+  color: black
+  padding-top: 2rem
+  margin: 0 10vw
+  text-decoration: none
+
+.blog-nav-link-active
+  border-bottom: solid 1px $black
+
+.dropbtn
+  border: solid 2px $light-grey
+  background-color: inherit
+  width: 80vw
+  margin: 0 auto
+  //padding: 4vh 0
+
+.dropdown-content
+  position: absolute
+  background-color: $white
+  width: 80%
+  left: 10vw
+  border-radius: 4px
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2)
+  z-index: 1
+
+@media screen and ( min-width: 768px )
+  .blog-nav
+    flex-direction: row
+    max-width: 600px
+    justify-content: space-between
+    margin: 0 auto 100px auto
+    border-bottom: solid 1px $light-grey
+
+  .dropbtn
+    display: none
+
+  .dropdown-content
+    display: block
+    margin: 0
+    padding: 0
+    width: 100%
+    position: inherit
+    background-color: inherit
+    box-shadow: none
+
+  .blog-nav-link
+    padding: 0
+    margin: 0
+    text-decoration: none
+    display: block
+    text-align: left

data/_sass/blog.sass

@@ -0,0 +1,145 @@
+
+.blog-masthead
+  background-color: $blue
+
+.blog-strap
+  font-family: sans-serif
+
+.blog-wrapper
+  background-color: $white
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+  padding: 5vh 5vw
+
+.post-title
+  background-color: rgba(0, 0, 0, .4)
+  padding: 20px
+  text-align: center
+
+.post-title,
+.post-subtitle
+  font-weight: 300
+
+.post-preview-wrapper
+  flex-basis: 100%
+  padding-bottom: 5vh
+
+.post-preview-img
+  background-position: center
+  background-size: cover
+  height: 40vh
+
+.post-preview-text
+  background-color: $white
+  border: solid 1px rgb(230, 232, 237)
+  border-radius: 10px
+  box-shadow: 0 0 6px rgba(0, 0, 0, .1)
+  margin: 0 auto
+  margin-top: -15vh
+  max-width: 512px
+  padding: 20px 0
+  transition: all 0.6s cubic-bezier(.2, .3, 0, 1)
+  width: 90%
+
+  h2,
+  h3,
+  p
+    margin: 0
+    padding: 0
+    padding-bottom: 10px
+    text-align: center
+
+.post-preview-title,
+.post-meta li
+  color: $black
+  transition: all .1s ease-in
+
+// there must be a better way
+.post-preview-title:hover,
+.post-meta li:hover
+  color: $vivid-blue
+
+.post-meta
+  display: inline-block
+  font-size: .8rem
+  margin: 0 auto
+
+  i
+    color: $soft-black
+
+.post-tag
+  background-color: $light-grey
+  border-radius: 6px
+  display: inline-block
+  font-size: .7rem
+  margin: 0 5px
+  padding: 4px 8px
+
+.blog-content
+  margin: 10vh auto
+  max-width: 768px
+  width: 90%
+
+  p
+    font-size: 1.1rem
+    line-height: 2rem
+
+  a
+    text-decoration: underline
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    padding: 3rem 0 0 0
+
+.blog-image
+  width: 100%
+
+.theme-colors
+  height: 90px
+  stroke: $soft-black
+  stroke-width: 1px
+  width: 90px
+
+.theme-images
+  height: auto
+  margin: auto
+  max-height: 100px
+  max-width: 300px
+  padding: 15px 0
+  width: auto
+
+.flex-display
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: center
+  margin: auto
+  padding: 40px 0
+
+@media screen and ( min-width: 1024px )
+  .post-preview-wrapper
+    flex-basis: 42.5vw
+    height: 55vh
+    max-width: 600px
+    padding: 0
+
+  .theme-colors
+    height: 120px
+    width: 120px
+
+  .post-preview-wrapper:hover
+
+    .post-preview-text
+      margin-top: -15.5vh
+      box-shadow: 2px 4px 20px rgba(0, 0, 0, .1)
+
+  .post-preview-text
+    width: 80%
+
+  .blog-wrapper
+    padding: 10vh 5vw

data/_sass/breakpoints/animations.sass

@@ -0,0 +1,41 @@
+// dont hover on phones or tablets
+@media screen and ( min-width: 1024px )
+
+  .btn-pop
+    &:hover
+      @include btn-animation
+      box-shadow: $box-shadow-hover
+
+  .btn-color-swoosh
+    &:hover
+      @include btn-animation
+      box-shadow: $box-shadow-hover
+
+  .nav-menu
+    &:hover > a
+      opacity: .5
+
+    a
+      &:hover
+        opacity: 1
+
+  .footer-nav-links
+    &:hover > li
+      opacity: .5
+
+    li
+      &:hover
+        opacity: 1
+
+  .nav-twitter
+    &:hover
+      color: $twitter-blue
+
+  .nav-facebook
+    &:hover
+      color: $facebook-blue
+
+  nav
+    &:hover
+      .site-logo
+        transform: translateY(5px)

data/_sass/breakpoints/footer.sass

@@ -0,0 +1,23 @@
+@media screen and ( min-width: 768px )
+
+  .footer-wraper
+    grid-column-gap: 5vw
+    grid-row-gap: 20px
+    grid-template-areas: 'footer-header footer-header footer-header' 'sitemap category-links footer-services' 'footer-contact footer-contact footer-contact' 'footer-base footer-base footer-base'
+    grid-template-columns: auto auto auto
+
+  .footer-base
+    flex-direction: row
+    justify-content: space-between
+
+  .footer-services
+    display: block
+    font-weight: 200
+
+@media screen and ( min-width: 1024px )
+
+  .footer-wraper
+    grid-column-gap: 5vw
+    grid-row-gap: 20px
+    grid-template-areas: 'footer-header footer-header footer-header footer-header' 'sitemap category-links footer-services footer-contact' 'footer-base footer-base footer-base footer-base'
+    grid-template-columns: auto auto auto auto

data/_sass/breakpoints/nav.sass

@@ -0,0 +1,40 @@
+// Navbar breakpoints
+
+@media screen and ( min-width: 1024px )
+
+  .nav-menu
+    background-color: rgba(0, 0, 0, 0)
+    font-size: 1.125rem
+    height: auto
+    justify-content: space-around
+    list-style: none
+    margin: 0
+    padding: 0 20px
+    position: relative
+    text-align: right
+    transform: translateX(0)
+
+    a
+      transition: opacity .2s ease-in-out
+
+  .nav-menu-topbar
+    display: none
+
+  .nav-link
+    display: inline
+    margin: 0
+    margin-left: 2rem
+    opacity: 1
+    padding: 0
+
+  .nav-socials
+    display: inline
+    font-size: 1.1rem
+    padding: 0 0 0 1rem
+    transition: color .2s ease-in
+
+  .burger
+    display: none
+
+  .mob-socials
+    display: none

data/_sass/breakpoints/structures.sass

@@ -0,0 +1,11 @@
+// Structure based breakpoints
+
+@media screen and ( min-width: 768px )
+
+  .global-container
+    padding: $container-margin-1024
+
+@media screen and ( min-width: 1280px )
+
+  .display-desktop-only
+    display: inherit

data/_sass/breakpoints/typography.sass

@@ -0,0 +1,31 @@
+// Breakpoints for typography
+
+// break for large mobile displays
+@media screen and ( min-width: 576px )
+
+  h1
+    font-size: 2.6rem
+    letter-spacing: 3px
+
+  h2
+    font-size: 1.6rem
+
+  h3
+    font-size: 1.3rem
+
+  h4
+    font-size: 1rem
+
+// break for tablets
+@media screen and ( min-width: 768px )
+
+  h1
+    font-size: 3.2rem
+    letter-spacing: 3px
+    line-height: 4rem
+
+// break for tablets
+@media screen and ( min-width: 1024px )
+
+  h1
+    font-size: 3.6rem

data/_sass/constants/colors.sass

@@ -0,0 +1,35 @@
+$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(93, 107, 122)
+
+$twitter-dark-mode: rgb(23, 32, 42)
+
+$light-grey: rgb(220, 220, 220)
+
+$grey: rgb(130, 130, 130)
+
+$pink: rgb(193, 28, 66)
+$vivid-pink: rgb(255, 0, 230)
+
+$yellow: rgb(224, 209, 3)
+$vivd-yellow: rgb(250, 255, 0)
+
+$blue: rgb(59, 77, 114)
+$vivid-blue: rgb(41, 119, 185)
+$light-blue: rgb(120, 149, 215)
+
+$red: rgb(255, 0, 0)
+
+$nav-bg: rgb(40, 40, 50)
+
+$footer-bg: $nav-bg
+
+$box-shadow-shade: rgba(0, 0, 0, .2)
+
+$twitter-blue: rgb(56, 161, 243)
+
+$facebook-blue: rgb(66, 103, 178)

data/_sass/constants/dimensions.sass

@@ -0,0 +1,9 @@
+$container-margin-x: 5vw
+
+$container-margin-768: 10vh $container-margin-x 0 $container-margin-x
+
+$container-margin-1024: 20vh $container-margin-x 0 $container-margin-x
+
+$box-shadow: 1px 1px 1px 0
+
+$box-shadow-hover: 3px 3px 1px 0