slow-steps 0.1.11 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c5221f077e12c5832eab33a312f51422a160857b6a737bdbe83b6f456f6055e8
-  data.tar.gz: 93666e548893b8e7924368f197304b9bd6c3b143219177513cb7e1d6ab3330b6
+  metadata.gz: 05bd2b6e5c0020cb8c9e141e5ef424b1d96e6b94e831031006ad9e7b05858184
+  data.tar.gz: a25dbf1aec46fd111662f6395a4b5ed08b9a7a3bc94810510dc039348e4c06f2
 SHA512:
-  metadata.gz: c103bda5ff2d2f0cdbb02a82bff1100da7d1cc64351a35b6d9132f516bc2bc3cf5a3605460bb675c433fdd70aa8c44bcdf0b37cbbf64ec4054b920b43238103d
-  data.tar.gz: 03a69ac4ab04684b74376a951f8f8d5d8ea8f5405a36513773af1c1d0813423f2ad4aedf5c974953dfc245f69c4a9260341c22e6f841166ed4d07630b52d3f59
+  metadata.gz: 79c36b139da45d35a18b43f1cf2c62f8456310e389dc0843ea1a6af95e7e8e66b6807796b497534f12b53abf7b4d419b7a966a2369b4b898d7bab2a51e1c1a24
+  data.tar.gz: 5d9d3842bccfc26c126c1f48311fb433f07a1c10a1989d4f1474171a4db0873bf810541e676b61555068b5333f989de19fb5b3e04406c3d504c2f75286cdef0a

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Made Slowly and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -1,55 +1,53 @@
 ---
 ---
-# Slow Steps, a Jekyll theme
+# [Slow Steps, a Jekyll theme](https://www.gaitq.madeslowly.xyz/clinician/about/)
 
-A jekyll theme built for GaitQ
+[![Ruby gem](https://badge.fury.io/rb/slow-steps.svg)](https://badge.fury.io/rb/slow-steps)
+
+[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://github.com/madeslowly/slow-steps/blob/master/LICENSE)
+
+[![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%203.7-blue.svg)](https://jekyllrb.com/)
+
+A bold jekyll theme built for gaitQ. Designed to have two distinct styling, depending on current URL.
 
 ## Jekyll Theme Scaffolding
 
-How this repo is organised and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped nicely under the root folder. The compiled Jekyll site outputs to `_site/`, which is never pushed to this repo, see https://www.gaitq.madeslowly.xyz/. General flow starts with a `.md` file in our root. With Front Matter, we declare our layout which points to a structural `.html` file in `_layouts`. From here, the layout file can call in data from our `_config.yml` with `{{ site.variable }}` and from any of our `YAML` files in `_data/file.yml` with `{{ site.data.file.variable }}`. The layout can also pull in other structural html snippets from `_includes` with `{% raw %}{% include relative/path/file.html %}{% endraw %}`.
+How this repo is organised and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped  under the root folder. The compiled Jekyll site outputs to `_site/`, which is never pushed to this repo, see https://www.gaitq.madeslowly.xyz/. General flow starts with a `.md` file in our root. With Front Matter, we declare our layout which points to a structural `.html` file in `_layouts`. From here, the layout file can call in data from our `_config.yml` with `{{ site.variable }}` and from any of our `YAML` files in `_data/file.yml` with `{{ site.data.file.variable }}`. The layout can also pull in other structural html snippets from `_includes` with `{% raw %}{% include relative/path/file.html %}{% endraw %}`.
 
 It is worth noting that _include files can also perform the tasks just described. So, for example, when the `deafult.html` layout is executed (the penultimate step for *all* `.md` files), the `head.html` snippet is called, which in turn calls `og-meta.html`. Based on our sites settings and any relevant Front Matter belonging to the calling file, `og-meta.html` compiles all our `og:meta` tags and passes them to `head.html` which after adding further code, passes on to our default layout where it is placed at the top of our webpages `html`.
 
 ```
 https://github.com/madeslowly/slow-steps/
 |
-├─ _config.yml/                   # Jekyll build settings and data, site.variable
+├─ _config.yml/                   # Website settings
 |
-├─ _data/                         # Site wide data, site.data.variable
+├─ _data/                         # Site data
 |  |  |
-|  |  ├─ forms/                   # inputs for MailChimp forms, picked up by _includes/forms/
+|  |  ├─ forms/                   # Inputs for MailChimp forms
 |  |
-|  ├─ copy.yml                    # Website copy picked up with {{ site.data.copy.copy.variable }}
+|  ├─ copy.yml                    # Website copy
 |  |
-|  ├─ menu.yml                    # Menu structure for GaitQ.com
+|  ├─ menu.yml                    # Menu structure
 |
 ├─ _includes/                     # HTML and Liquid templating
 |  |
 |  ├─ branding/                   # Site branding SVGs
 |  |  |
-|  |  ├─ site__logo.svg           # Site wide logo with CSS classes, see front matter comments for class details.
-|  |
-|  ├─ errors/                     # Error page SVGs
-|  |  |
-|  |  ├─ robot-403.svg            # 403 - Forbidden
-|  |  |
-|  |  ├─ robot-404.svg            # 404 - Not Found
-|  |  |
-|  |  ├─ robot-405.svg            # 405 - Method Not Allowed
+|  |  ├─ site__logo.svg           # Site wide logo
 |  |
 |  ├─ footer/                     # Site wide footers
 |  |  |
-|  |  ├─ footer_full.html         # Multi div footer with sitemaps and contact etc
+|  |  ├─ footer_full.html         # Multi col footer
 |  |  |
-|  |  ├─ footer.html              # Simple single div footer with legal links and copyright
+|  |  ├─ footer.html              # Simple footer
 |  |
-|  ├─ forms/                      # MailChimp scaffolding, pulls data from _data/forms/
+|  ├─ forms/                      # Form scaffolding
 |  |  |
-|  |  ├─ mc-register.html         # Registration form, data from _data/forms/register
+|  |  ├─ mc-register.html         # MailChimp registration form
 |  |
-|  ├─ head/                       # Header partials, everything inside our <html> tags comes from here.
+|  ├─ head/                       # Header partials
 |  |  |
-|  |  ├─ descriptor/              # Site wide descriptors, basically this is where much of our SEO occurs.
+|  |  ├─ descriptor/              # Site wide descriptors
 |  |  |  |
 |  |  |  ├─ og-meta.html
 |  |  |  ├─ structured-data.html
@@ -59,7 +57,7 @@ https://github.com/madeslowly/slow-steps/
 |  |  |  |
 |  |  |  ├─ conditional.html      # Page env: condition --> gaitq_env.css
 |  |  |
-|  |  ├─ head.html                # Routine to collect header partials, page.env and page.layout dependencies. We also open <body> here.
+|  |  ├─ head.html                # Routine to collate header partials
 |  |
 |  ├─ navigation/                 # HTML and Liquid templating
 |  |  |
@@ -69,7 +67,7 @@ https://github.com/madeslowly/slow-steps/
 |
 ├─ _layouts/                      # HTML and Liquid templating
 |  |
-|  ├─ env/                        # Environmental specific layouts, passed onto default.html after processing
+|  ├─ env/                        # Environmental specific layouts
 |  |  |
 |  |  ├─ clinician.html           # Professionals and press
 |  |  ├─ pwp.html                 # Patients and carers
@@ -77,9 +75,9 @@ https://github.com/madeslowly/slow-steps/
 |  |
 |  ├─ compress.html               # Final step for all pages. Strips html comments, carriage returns and white space.
 |  |
-|  ├─ default.html                # Wraps page content with header, nav and scripts. For all pages, also this is where Jekyll looks if no front matter defined. Passed onto compress.html after processing.
+|  ├─ default.html                # Wraps page content with header, nav, scripts and footer.
 |  |
-|  ├─ error-page.html             # Landing page. Passed onto default.html after processing.
+|  ├─ error-page.html             # HTTP error pages
 |
 ├─ _plugins/                      # Custom Ruby plugins
 |  |
@@ -135,17 +133,17 @@ https://github.com/madeslowly/slow-steps/
 
 `_config.yml` is where most variables are set.
 
-#### title:
+#### `title:`
 
 The global title of the website.
 
-#### subtitle:
+#### `subtitle:`
 
 The global subtitle of the website.
 
 #### Page Titling
 
-Pages are given titles according to,
+Each pages is given a title according to,
 
 ```Liquid
 {% if page.title %}
@@ -155,11 +153,11 @@ Pages are given titles according to,
 {% endif %}
 ```
 
-#### description:
+#### `description:`
 
 Site wide description, used in head description, og:description, twitter:description and structured data. Overwritten by page front matter, `description:`
 
-#### url:
+#### `url:`
 
 Used to generate absolute URLs for sitemaps, feeds and for generating canonical URLs in a page's `<head>`. When developing locally either comment this out or use something like `http://localhost:4000` so all assets load properly. *Don't include a trailing `/`*.
 
@@ -172,23 +170,23 @@ url: "http://www.gaitq.com"
 url: ""
 ```
 
-#### baseurl:
+#### `baseurl:`
 
 Used when we are developing a partial.
 
-#### author:
+#### `author:`
 
 Author of this Jekyll project. Content authors can be added to _data/authors.yml and assigned in a pages front matter.
 
-#### postal_add:
+#### `postal_add:`
 
 Postal address of GaitQ Ltd. Used in structured data.
 
-#### opening_hours:
+#### `opening_hours:`
 
 Used in structured data. This lets google know when we are open.
 
-#### logo
+#### `logo:`
 
 Site wide logo, used as a default image for Twitter and Facebook. Can be over written by a pages front matter: `image:`.
 

data/_includes/footer/footer_full.html

@@ -16,8 +16,20 @@
           {% for item in site.postal_add %}
           <li class="address">{{ item[1] }}</li>
           {% endfor %}
+          <li><a class="ft--link" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
           <li>{{ site.phone }}</li>
-          <li>{{ site.email }}</li>
+
+          <ul class="social-media">
+
+          {% for social in site.socials %}
+          <li class="social-media-item">
+          <a href="{{ social.url }}">
+          <i class="fab fa-{{ social.icon }} social--{{ social.name }} social-media-link"></i></a>
+          </li>
+          {% endfor %}
+
+          </ul>
+
         </ul>
 
       </div>
@@ -35,7 +47,7 @@
           <h4 class="ft__sitemap--env-header">{{ item.name }}</h4>
           <ul class="ft__sitemap--submenu">
           {% for sub in item.submenu %}
-          <li><a href="{{ sub.url }}">{{ sub.alt }}</a></li>
+          <li><a class="ft--link" href="{{ sub.url }}">{{ sub.alt }}</a></li>
           {% endfor %}
           </ul>
         </div>
@@ -61,7 +73,7 @@
       <a href="{{ item.url }}">{{ item.name }}</a>
       {% endfor %}
     </div>
-    <a href="{{ site.author.url }}" class="slogan">made slowly</a>
+    <a href="{{ site.author.url }}" class="slogan">Jekyll theme Slow Steps</a>
   </div>
 
 </footer>

data/_includes/vimeoPlayer.html

@@ -1,12 +1,12 @@
 
-<div class="embed-container">
-  <iframe
-      src="https://player.vimeo.com/video/{{ include.id }}"
-      width="500"
-      height="281"
-      frameborder="0"
-      webkitallowfullscreen
-      mozallowfullscreen
-      allowfullscreen>
-  </iframe>
+<div class="video__container">
+<iframe
+    src="https://player.vimeo.com/video/{{ include.id }}?autoplay=1&title=0&byline=0&portrait=0"
+    frameborder="0"
+    allow="autoplay"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen>
+</iframe>
 </div>
+<script src="https://player.vimeo.com/api/player.js"></script>

data/_layouts/about.html

@@ -50,9 +50,18 @@ Last full read through 29/12/2020
 </div>
 {% endif %}
 
-<div class="about__team">
+<div class="embedded__video about--video">
+  <!--
+  <h2>Watch our company video</h2>
+  -->
+  {% include vimeoPlayer.html id="493777125" %}
+
+</div>
 
+<div class="about__team">
+  <h2 class="bg--env-50 about__team--title">Meet the team</h2>
   <div class="team__head bg--env-50">
+
     {% for menu in site.data.team.menu %}
     <h3 class="team__title team--js-script-{{ menu.script }}"
         id="team{{ menu.script }}"

data/_layouts/careers.html

@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+
+
+<div class="spacefiller"></div>
+<div class="hero hero-65 collage">
+
+{% for collage in page.collage  %}
+  <div class="collage__image__wrap collage__image__wrap-{{ forloop.index }}" style="animation-delay: {{ forloop.index0 | times: 110 }}ms">
+    <h3 class="image__header">{{ collage.reasons }}</h3>
+      {% picture {{ collage.image | prepend: 'content/' }}
+        --img class="collage__image collage__image-{{ forloop.index }}"
+        --alt {{ collage.reasons }} %}
+  </div>
+{% endfor %}
+</div>
+
+<div class="fullwidth__wrap">
+{{ content }}
+</div>

data/_layouts/faq.html

@@ -29,7 +29,7 @@ layout: default
 {% for faq in site.data.faq %}
 <div class="faq__panel">
   <div class="faq__question">
-    <h4>{{ faq.question }}</h4>
+    <h4 class="faq__question--title">{{ faq.question }}</h4><i class="fas fa-chevron-down"></i>
   </div>
 
   <div class="faq__answer faq__answer--reveal">
@@ -52,12 +52,21 @@ layout: default
 </script>
 
 <script>
-/* Watch for clicks on more info and reveal text */
+/* Watch for clicks and reveal text */
 document.querySelectorAll('.faq__question').forEach(function(el){
   el.addEventListener('click', function() {
+    this.classList.toggle('faq__question--reveal');
     const n = this.nextElementSibling;
     n.classList.toggle('faq__answer--reveal');
   });
 });
 
 </script>
+
+
+
+<div class="faq__contact">
+    <h2 class="faq__contact--strap">Not found the answer?</h2>
+    {% include contact-form.html %}
+
+</div>

data/_sass/about.sass

@@ -33,10 +33,43 @@
 .about--copy
   padding: 3rem 0
 
+.about--video
+  width: 100vw
+  background-color: $opd-grey-neutral
+  display: flex
+  flex-direction: column
+  padding: 5rem 0
+  padding: 0
+  justify-content: space-between
+  & > h2
+    color: $env-primary
+    text-align: center
+    padding: 1rem
+.video__container
+  display: block
+  position: relative
+  width: 100%
+  padding-top: 56.25%
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    width: 100%
+    height: 100%
+
+
 .about__team
   display: flex
   flex-direction: column
   background-color: $pure-white
+  border-top: solid 1px $opd-blue-confidence
+
+.about__team--title
+  padding-top: 3rem
+  text-align: center
+  color: $pure-white
 
 .team__head
   align-items: flex-end
@@ -68,6 +101,14 @@
 .title__title--text
   display: none
 
+.team__title--active
+  .title__title--text
+    display: block
+    position: absolute
+    margin-top: 4rem
+    left: 2rem
+
+
 .team__members
   background-color: $white
   color: $opd-blue-confidence

data/_sass/breakpoints/about.sass

@@ -7,6 +7,22 @@
   .about__team
     flex-direction: row
 
+  .about__team--title
+    display: none
+
+  .about--video
+    flex-direction: row
+    padding: 12rem 0
+    padding: 0
+
+    & > h2
+      padding-left: 5rem
+      text-align: left
+
+  .video__container
+    padding-top: 56.25%
+    //margin-right: 5rem
+
   .team__head
     border-bottom: none
     border-right: solid 1px $opd-blue-confidence
@@ -19,6 +35,14 @@
   .title__title--text
     display: block
 
+  .team__title--active
+    .title__title--text
+      display: block
+      position: relative
+      margin-top: 0
+      left: auto
+
+
   .team__title
     display: flex
     border-radius: 6px 0 0 6px

data/_sass/collage.sass

@@ -0,0 +1,89 @@
+.spacefiller
+  width: 100vw
+  height: $navbar-height + $secondary-navbar-height + 5vh
+
+.collage
+  display: flex
+  flex-flow: wrap
+  background-color: $env-primary
+  justify-content: flex-start
+  align-items: flex-start
+  position: relative
+  border: solid 10px $pure-white
+
+  & > *
+    border: solid 10px $pure-white
+
+.image__header
+  text-align: center
+  color: $pure-white
+  padding: 0 2rem
+
+.collage__image__wrap
+  display: flex
+  justify-content: center
+  align-items: center
+  width: 19%
+  height: 49%
+  position: absolute
+  opacity: 0
+  animation: .4s ease-in-out aniCollage forwards
+  perspective: 1000px
+
+  &:hover
+    .collage__image
+      transform: rotateY(90deg)
+
+.collage__image
+  display: block
+  position: absolute
+  object-fit: cover
+  object-position: center
+  width: 100%
+  height: 100%
+  transition: .4s ease-in-out
+  transform-style: preserve-3d
+
+.collage__placeholder
+  background-color: $env-primary
+  width: 19%
+  height: 49%
+  position: absolute
+
+.collage__image__wrap-1
+  left: 0
+
+.collage__image__wrap-1
+  height: 65%
+  top: 0
+  width: 30%
+  left: 0
+
+.collage__image__wrap-2
+  height: 50%
+  width: 40%
+  left: 30%
+
+.collage__image__wrap-3
+  height: 50%
+  width: 30%
+  left: 70%
+  top: 0
+
+.collage__image__wrap-4
+  height: 35%
+  width: 40%
+  left: 0
+  top: 65%
+
+.collage__image__wrap-5
+  width: 60%
+  height: 50%
+  left: 40%
+  top: 50%
+
+@keyframes aniCollage
+  0%
+    opacity: 0
+  100%
+    opacity: 1

data/_sass/contact.sass

@@ -3,7 +3,7 @@
 .contact__wrapper
   display: flex
   width: 100%
-  background-color: $white
+  background-color: $pure-white
   padding: 5rem 0
   flex-direction: column
 
@@ -24,6 +24,7 @@
   display: block
 
   form
+    background-color: $white
     border: solid 1px rgba($env-primary, .2)
     border-radius: 4px
     padding: 2rem
@@ -32,12 +33,12 @@
     color: $black
 
 .google-map
-  //grid-area: googleMap
   width: 100%
 
   //padding: 0 5rem
   //filter: sepia(.3)
   iframe
+    border-radius: 4px
     width: 100%
     height: 40vh
     border: solid 1px rgba($env-primary, .2)
@@ -109,7 +110,6 @@
     display: flex
     flex-direction: row
     width: 100%
-    background-color: $white
     padding: 5rem 0
 
   .contact--left

data/_sass/faq.sass

@@ -11,6 +11,8 @@
   width: 60%
 
 .faq__question
+  display: flex
+  justify-content: space-between
   width: 100%
   padding: 1rem 0
   background-color: rgba($opd-blue-trust, .2)
@@ -21,9 +23,13 @@
   &:hover
     background-color: rgba($opd-blue-trust, 1)
 
-  & > *
+  & > .faq__question--title
     padding-left: 1rem
 
+  & > .fas
+    padding-right: 1rem
+    transition: .4s ease-in-out
+
 .faq__answer
   max-height: 0
   overflow: hidden
@@ -35,3 +41,22 @@
 .faq__answer--reveal
   max-height: 1000px
   transition: .6s ease-in-out
+
+.faq__question--reveal
+  & > .fas
+    transform: rotateX(180deg) translateY(.5rem)
+
+.faq__contact
+  width: 100vw
+  background-color: lighten($env-primary, 0%)
+  padding: 4rem 0
+
+  .contact-form
+    width: 95%
+    margin: auto
+    max-width: 600px
+
+.faq__contact--strap
+  text-align: center
+  padding: 4rem 0
+  color: $white

data/_sass/footer_full.sass

@@ -88,7 +88,7 @@
     line-height: 3rem
     list-style: none
 
-.ft__sitemap--submenu li a
+.ft--link
   color: $pure-white
 
 .ft__sitemap--env-wrap
@@ -114,7 +114,7 @@
     width: 60vw
 
   .ft__contact--list
-    font-size: $font-size * .7
+    font-size: $font-size * .8
     li
       line-height: 4rem
     .address
@@ -126,14 +126,14 @@
 
   .ft__sitemap
     .ft__sitemap--env-header
-      font-size: $font-size * .8
+      font-size: $font-size * .9
     .ft__sitemap--submenu
-      font-size: $font-size * .7
+      font-size: $font-size * .8
 
   .ft__base
     a,
     p
-      font-size: $font-size * .6
+      font-size: $font-size * .7
 
   .legal-links
     flex-direction: row

data/_sass/global.sass

@@ -15,6 +15,9 @@
   -ms-transition: none !important
   -o-transition: none !important
 
+*
+  box-sizing: border-box
+
 body
   background-color: $white
 

data/_sass/navigation/breakpoints/1024.sass

@@ -92,6 +92,7 @@ $brand-height: 55%
     width: 100vw
     padding: 0
     height: $secondary-navbar-height
+    //max-height: 100px
     backdrop-filter: blur(20px)
 
   .nav-group-content .nav-link

data/assets/css/env/gaitq_clinician.sass

@@ -36,3 +36,5 @@ $baseurl: '{{ site.baseurl }}/'
 @import 'contact'
 
 @import 'faq'
+
+@import 'collage'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slow-steps
 version: !ruby/object:Gem::Version
-  version: 0.1.11
+  version: 0.1.12
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-16 00:00:00.000000000 Z
+date: 2021-01-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -177,9 +177,9 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- LICENSE
 - README.md
 - _config.yml
-- _includes/.DS_Store
 - _includes/branding/site-logo.svg
 - _includes/build-version.html
 - _includes/contact-details.html
@@ -195,7 +195,6 @@ files:
 - _includes/functions/pull_page_args.html
 - _includes/gmap.html
 - _includes/google-analytics.html
-- _includes/head/.DS_Store
 - _includes/head/README.md
 - _includes/head/descriptors/og-meta.html
 - _includes/head/descriptors/structured-data.html
@@ -208,6 +207,7 @@ files:
 - _includes/scripts.html
 - _includes/vimeoPlayer.html
 - _layouts/about.html
+- _layouts/careers.html
 - _layouts/compress.html
 - _layouts/contact.html
 - _layouts/default.html
@@ -226,6 +226,7 @@ files:
 - _sass/about.sass
 - _sass/aos-overrides.sass
 - _sass/breakpoints/about.sass
+- _sass/collage.sass
 - _sass/colors/_variables.sass
 - _sass/colors/breakpoints/1024.sass
 - _sass/colors/burger.sass