slow-steps 0.1.8 → 0.1.13

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 332f670401ff9b865530c6eb7c0feba92d41d5ff6ddaae6261becd8993c6a413
4
- data.tar.gz: b26f9e29f7509b7b5b5a8552c8374417bc27047b4a88a5611b3f076c24b21a74
3
+ metadata.gz: 6cbd613cb2698f8b14ddec71ea31af9f93863331204dec4e6ee3e188736bad82
4
+ data.tar.gz: 95587738b544403e67b69c33e22edcad508f4c91ea115dede5e4cc4bae6fd634
5
5
  SHA512:
6
- metadata.gz: dcd734f318740df554def7c646ae56c0bc5ff6b27dcb138cd4d486fe9b0a2973221f3f147cc2acb14a9dfd0d94d0a753770929ed4936bdebf48fb95e4c335ecf
7
- data.tar.gz: b841ebdd6f68eb65e8dfbcaa060855287ab7bcdd92b5dcdb6af689aaf5e92381926ebbad2ad04806d0b162257383260f1fab3f9a1e4a935bdab4f70e4b3919e4
6
+ metadata.gz: 96ec670bbc9d10e86879c34a9d662c5b5860bbef00bbf41467492ccaa1be6a59a99a94acab6ea5e3e03ed2925a75fbb4dfd8f76c4c88399539434f8213ba5a25
7
+ data.tar.gz: d9f8f6106c4d4192087e320bbe4536507f157fa90b3e4a77a2754f8f69f96719cf7de8dd149898dd4f33f57844526f9453928c9c403c01ddfd04df436e423fe0
data/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2021 Made Slowly and contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md CHANGED
@@ -1,55 +1,53 @@
1
1
  ---
2
2
  ---
3
- # Slow Steps, a Jekyll theme
3
+ # [Slow Steps, a Jekyll theme](https://www.gaitq.madeslowly.xyz/clinician/about/)
4
4
 
5
- A jekyll theme built for GaitQ
5
+ [![Ruby gem](https://badge.fury.io/rb/slow-steps.svg)](https://badge.fury.io/rb/slow-steps)
6
+
7
+ [![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://github.com/madeslowly/slow-steps/blob/master/LICENSE)
8
+
9
+ [![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%203.7-blue.svg)](https://jekyllrb.com/)
10
+
11
+ A bold jekyll theme built for gaitQ. Designed to have two distinct styling, depending on current URL.
6
12
 
7
13
  ## Jekyll Theme Scaffolding
8
14
 
9
- 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 %}`.
15
+ 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 %}`.
10
16
 
11
17
  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`.
12
18
 
13
19
  ```
14
20
  https://github.com/madeslowly/slow-steps/
15
21
  |
16
- ├─ _config.yml/ # Jekyll build settings and data, site.variable
22
+ ├─ _config.yml/ # Website settings
17
23
  |
18
- ├─ _data/ # Site wide data, site.data.variable
24
+ ├─ _data/ # Site data
19
25
  | | |
20
- | | ├─ forms/ # inputs for MailChimp forms, picked up by _includes/forms/
26
+ | | ├─ forms/ # Inputs for MailChimp forms
21
27
  | |
22
- | ├─ copy.yml # Website copy picked up with {{ site.data.copy.copy.variable }}
28
+ | ├─ copy.yml # Website copy
23
29
  | |
24
- | ├─ menu.yml # Menu structure for GaitQ.com
30
+ | ├─ menu.yml # Menu structure
25
31
  |
26
32
  ├─ _includes/ # HTML and Liquid templating
27
33
  | |
28
34
  | ├─ branding/ # Site branding SVGs
29
35
  | | |
30
- | | ├─ site__logo.svg # Site wide logo with CSS classes, see front matter comments for class details.
31
- | |
32
- | ├─ errors/ # Error page SVGs
33
- | | |
34
- | | ├─ robot-403.svg # 403 - Forbidden
35
- | | |
36
- | | ├─ robot-404.svg # 404 - Not Found
37
- | | |
38
- | | ├─ robot-405.svg # 405 - Method Not Allowed
36
+ | | ├─ site__logo.svg # Site wide logo
39
37
  | |
40
38
  | ├─ footer/ # Site wide footers
41
39
  | | |
42
- | | ├─ footer_full.html # Multi div footer with sitemaps and contact etc
40
+ | | ├─ footer_full.html # Multi col footer
43
41
  | | |
44
- | | ├─ footer.html # Simple single div footer with legal links and copyright
42
+ | | ├─ footer.html # Simple footer
45
43
  | |
46
- | ├─ forms/ # MailChimp scaffolding, pulls data from _data/forms/
44
+ | ├─ forms/ # Form scaffolding
47
45
  | | |
48
- | | ├─ mc-register.html # Registration form, data from _data/forms/register
46
+ | | ├─ mc-register.html # MailChimp registration form
49
47
  | |
50
- | ├─ head/ # Header partials, everything inside our <html> tags comes from here.
48
+ | ├─ head/ # Header partials
51
49
  | | |
52
- | | ├─ descriptor/ # Site wide descriptors, basically this is where much of our SEO occurs.
50
+ | | ├─ descriptor/ # Site wide descriptors
53
51
  | | | |
54
52
  | | | ├─ og-meta.html
55
53
  | | | ├─ structured-data.html
@@ -59,7 +57,7 @@ https://github.com/madeslowly/slow-steps/
59
57
  | | | |
60
58
  | | | ├─ conditional.html # Page env: condition --> gaitq_env.css
61
59
  | | |
62
- | | ├─ head.html # Routine to collect header partials, page.env and page.layout dependencies. We also open <body> here.
60
+ | | ├─ head.html # Routine to collate header partials
63
61
  | |
64
62
  | ├─ navigation/ # HTML and Liquid templating
65
63
  | | |
@@ -69,7 +67,7 @@ https://github.com/madeslowly/slow-steps/
69
67
  |
70
68
  ├─ _layouts/ # HTML and Liquid templating
71
69
  | |
72
- | ├─ env/ # Environmental specific layouts, passed onto default.html after processing
70
+ | ├─ env/ # Environmental specific layouts
73
71
  | | |
74
72
  | | ├─ clinician.html # Professionals and press
75
73
  | | ├─ pwp.html # Patients and carers
@@ -77,9 +75,9 @@ https://github.com/madeslowly/slow-steps/
77
75
  | |
78
76
  | ├─ compress.html # Final step for all pages. Strips html comments, carriage returns and white space.
79
77
  | |
80
- | ├─ 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.
78
+ | ├─ default.html # Wraps page content with header, nav, scripts and footer.
81
79
  | |
82
- | ├─ error-page.html # Landing page. Passed onto default.html after processing.
80
+ | ├─ error-page.html # HTTP error pages
83
81
  |
84
82
  ├─ _plugins/ # Custom Ruby plugins
85
83
  | |
@@ -135,17 +133,17 @@ https://github.com/madeslowly/slow-steps/
135
133
 
136
134
  `_config.yml` is where most variables are set.
137
135
 
138
- #### title:
136
+ #### `title:`
139
137
 
140
138
  The global title of the website.
141
139
 
142
- #### subtitle:
140
+ #### `subtitle:`
143
141
 
144
142
  The global subtitle of the website.
145
143
 
146
144
  #### Page Titling
147
145
 
148
- Pages are given titles according to,
146
+ Each pages is given a title according to,
149
147
 
150
148
  ```Liquid
151
149
  {% if page.title %}
@@ -155,11 +153,11 @@ Pages are given titles according to,
155
153
  {% endif %}
156
154
  ```
157
155
 
158
- #### description:
156
+ #### `description:`
159
157
 
160
158
  Site wide description, used in head description, og:description, twitter:description and structured data. Overwritten by page front matter, `description:`
161
159
 
162
- #### url:
160
+ #### `url:`
163
161
 
164
162
  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 `/`*.
165
163
 
@@ -172,23 +170,23 @@ url: "http://www.gaitq.com"
172
170
  url: ""
173
171
  ```
174
172
 
175
- #### baseurl:
173
+ #### `baseurl:`
176
174
 
177
175
  Used when we are developing a partial.
178
176
 
179
- #### author:
177
+ #### `author:`
180
178
 
181
179
  Author of this Jekyll project. Content authors can be added to _data/authors.yml and assigned in a pages front matter.
182
180
 
183
- #### postal_add:
181
+ #### `postal_add:`
184
182
 
185
183
  Postal address of GaitQ Ltd. Used in structured data.
186
184
 
187
- #### opening_hours:
185
+ #### `opening_hours:`
188
186
 
189
187
  Used in structured data. This lets google know when we are open.
190
188
 
191
- #### logo
189
+ #### `logo:`
192
190
 
193
191
  Site wide logo, used as a default image for Twitter and Facebook. Can be over written by a pages front matter: `image:`.
194
192
 
File without changes
@@ -16,8 +16,20 @@
16
16
  {% for item in site.postal_add %}
17
17
  <li class="address">{{ item[1] }}</li>
18
18
  {% endfor %}
19
+ <li><a class="ft--link" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
19
20
  <li>{{ site.phone }}</li>
20
- <li>{{ site.email }}</li>
21
+
22
+ <ul class="social-media">
23
+
24
+ {% for social in site.socials %}
25
+ <li class="social-media-item">
26
+ <a href="{{ social.url }}">
27
+ <i class="fab fa-{{ social.icon }} social--{{ social.name }} social-media-link"></i></a>
28
+ </li>
29
+ {% endfor %}
30
+
31
+ </ul>
32
+
21
33
  </ul>
22
34
 
23
35
  </div>
@@ -35,7 +47,7 @@
35
47
  <h4 class="ft__sitemap--env-header">{{ item.name }}</h4>
36
48
  <ul class="ft__sitemap--submenu">
37
49
  {% for sub in item.submenu %}
38
- <li><a href="{{ sub.url }}">{{ sub.alt }}</a></li>
50
+ <li><a class="ft--link" href="{{ sub.url }}">{{ sub.alt }}</a></li>
39
51
  {% endfor %}
40
52
  </ul>
41
53
  </div>
@@ -61,7 +73,7 @@
61
73
  <a href="{{ item.url }}">{{ item.name }}</a>
62
74
  {% endfor %}
63
75
  </div>
64
- <a href="{{ site.author.url }}" class="slogan">made slowly</a>
76
+ <a href="{{ site.author.url }}" class="slogan">Jekyll theme Slow Steps</a>
65
77
  </div>
66
78
 
67
79
  </footer>
@@ -1,5 +1,5 @@
1
1
  <div class="google-map">
2
- <h4 class="form-instruction">Where to find us</h4>
2
+ <h4 class="form-instruction">Where to find us</h4>
3
3
 
4
- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2469.4696265600305!2d-1.2640352834469863!3d51.76102127967778!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876c6a77fce02c7%3A0x1d053d3e05342acd!2s46%20Woodstock%20Rd%2C%20Oxford%20OX2%206HT!5e0!3m2!1sen!2suk!4v1610722975887!5m2!1sen!2suk" frameborder="1" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
4
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2469.4696265600305!2d-1.2640352834469863!3d51.76102127967778!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876c6a77fce02c7%3A0x1d053d3e05342acd!2s46%20Woodstock%20Rd%2C%20Oxford%20OX2%206HT!5e0!3m2!1sen!2suk!4v1610722975887!5m2!1sen!2suk" frameborder="1" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
5
5
  </div>
@@ -0,0 +1,15 @@
1
+ <!-- This goes before </head> closing tag -->
2
+
3
+ <!-- Google site verification -->
4
+ <meta name="google-site-verification" content="{{ site.google.verification }}" />
5
+
6
+ <!-- Google Analytics -->
7
+
8
+ <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google.analytics }}"></script>
9
+
10
+ <script>
11
+ window.dataLayer = window.dataLayer || [];
12
+ function gtag(){dataLayer.push(arguments);}
13
+ gtag('js', new Date());
14
+ gtag('config', '{{ site.google.analytics }}');
15
+ </script>
@@ -70,7 +70,9 @@
70
70
 
71
71
  <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}{{ site.fallback_path }}{{ site.favicon }}">
72
72
 
73
-
73
+ {% if jekyll.environment == "production" %}
74
+ {% include google-analytics.html %}
75
+ {% endif %}
74
76
 
75
77
  </head>
76
78
 
@@ -33,6 +33,7 @@
33
33
 
34
34
  <div class="nav-group-content {{ item.env }}-group">
35
35
  {% for sub in item.submenu %}
36
+ <div class="nav-group-container">
36
37
  <a
37
38
  class="
38
39
  nav-link
@@ -42,9 +43,20 @@
42
43
  {% endif %}" href="{{ sub.url | relative_url }}">
43
44
  <span>{{ sub.name }}</span></a>
44
45
 
46
+ {% if sub.subsubmenu %}
47
+ <div class="nav-subsub-content ">
48
+ {% for subsub in sub.subsubmenu %}
49
+ <a class="nav-link subsub-link" href="{{ subsub.url | relative_url }}">
50
+ <span>{{ subsub.name }}</span></a>
51
+
52
+ {% endfor %}
53
+ </div>
54
+ {% endif %}
55
+
56
+ </div>
45
57
  {% endfor %}
46
- </div>
47
58
 
59
+ </div>
48
60
  </li>
49
61
  {% endfor %}
50
62
 
@@ -1,6 +1,7 @@
1
1
 
2
2
  {% assign scripts = page.scripts | split: ', '%}
3
3
  {% if scripts contains 'svg-aos' %}
4
+
4
5
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" ></script>
5
6
 
6
7
  <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/svg_text_width.js" | relative_url }}" async></script>
@@ -18,6 +19,10 @@
18
19
 
19
20
  <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/calc-mobile-viewport.js" | relative_url }}" async></script>
20
21
 
22
+ {% if page.url != '/' %}
23
+ <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/nav-scroll.js" | relative_url }}" async></script>
24
+ {% endif %}
25
+
21
26
  <script type="text/javascript" src="{{ site.baseurl }}/assets/vendor/aos/aos.js" ></script>
22
27
 
23
28
  <script>
@@ -1,12 +1,12 @@
1
1
 
2
- <div class="embed-container">
3
- <iframe
4
- src="https://player.vimeo.com/video/{{ include.id }}"
5
- width="500"
6
- height="281"
7
- frameborder="0"
8
- webkitallowfullscreen
9
- mozallowfullscreen
10
- allowfullscreen>
11
- </iframe>
2
+ <div class="video__container">
3
+ <iframe
4
+ src="https://player.vimeo.com/video/{{ include.id }}?autoplay=1&title=0&byline=0&portrait=0"
5
+ frameborder="0"
6
+ allow="autoplay"
7
+ webkitallowfullscreen
8
+ mozallowfullscreen
9
+ allowfullscreen>
10
+ </iframe>
12
11
  </div>
12
+ <script src="https://player.vimeo.com/api/player.js"></script>
@@ -50,9 +50,18 @@ Last full read through 29/12/2020
50
50
  </div>
51
51
  {% endif %}
52
52
 
53
- <div class="about__team">
53
+ <div class="embedded__video about--video">
54
+ <!--
55
+ <h2>Watch our company video</h2>
56
+ -->
57
+ {% include vimeoPlayer.html id="493777125" %}
58
+
59
+ </div>
54
60
 
61
+ <div class="about__team">
62
+ <h2 class="bg--env-50 about__team--title">Meet the team</h2>
55
63
  <div class="team__head bg--env-50">
64
+
56
65
  {% for menu in site.data.team.menu %}
57
66
  <h3 class="team__title team--js-script-{{ menu.script }}"
58
67
  id="team{{ menu.script }}"
@@ -63,7 +72,7 @@ Last full read through 29/12/2020
63
72
  {% endfor %}
64
73
  </div>
65
74
 
66
- <div class="team__members">
75
+ <div class="team__members" id="gaitq-team">
67
76
 
68
77
  {% for member in site.data.team.members %}
69
78
 
@@ -0,0 +1,22 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+
6
+
7
+ <div class="spacefiller"></div>
8
+ <div class="hero hero-65 collage">
9
+
10
+ {% for collage in page.collage %}
11
+ <div class="collage__image__wrap collage__image__wrap-{{ forloop.index }}">
12
+ <h3 class="image__header">{{ collage.reasons }}</h3>
13
+ {% picture {{ collage.image | prepend: 'content/' }}
14
+ --img class="collage__image collage__image-{{ forloop.index }}"
15
+ --alt {{ collage.reasons }} %}
16
+ </div>
17
+ {% endfor %}
18
+ </div>
19
+
20
+ <div class="fullwidth__wrap">
21
+ {{ content }}
22
+ </div>
@@ -8,10 +8,6 @@ layout: compress
8
8
 
9
9
  {{ content }}
10
10
 
11
- {% if page.layout != "error-page" %}
12
-
13
- {% include footer/footer_full.html %}
14
-
15
- {% endif %}
11
+ {% include footer/footer_full.html %}
16
12
 
17
13
  {% include scripts.html %}
@@ -0,0 +1,72 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {% assign strap = page.title %}
6
+
7
+
8
+ <div class="hero hero-65">
9
+
10
+ <div class="hero__overlay h-100">
11
+ {% picture {{ page.hero.image | prepend: 'content/' }}
12
+ --img class="hero__image hero__image--fixed hero-65"
13
+ --alt {{ page.hero.alt }} %}</div>
14
+
15
+ <header class="hero__strap hero__strap--center image__filter--blur hero-65" aria-label="{{ strap }}">
16
+
17
+ <h1 aria-hidden="true" >
18
+ {% assign n = strap.size | minus: 1 %}
19
+ {%- for char in (0..n ) -%}
20
+
21
+ <span style="animation-delay: {{ char | times: 40 | plus: 200 }}ms;">{{ strap | slice: char }}</span>
22
+ {%- endfor -%}</h1>
23
+
24
+ </header>
25
+
26
+ </div>
27
+
28
+ <div class="faq__wrapper">
29
+ {% for faq in site.data.faq %}
30
+ <div class="faq__panel">
31
+ <div class="faq__question">
32
+ <h4 class="faq__question--title">{{ faq.question }}</h4><i class="fas fa-chevron-down"></i>
33
+ </div>
34
+
35
+ <div class="faq__answer faq__answer--reveal">
36
+ <p>{{ faq.answer }}</p>
37
+ </div>
38
+ </div>
39
+ {% endfor %}
40
+ </div>
41
+
42
+
43
+ <script>
44
+ /*
45
+ On load we hide all the answers.
46
+ */
47
+
48
+ const title = document.querySelectorAll(".faq__answer--reveal");
49
+ for(var i = 0; i < title.length; i++)
50
+ title[i].classList.remove('faq__answer--reveal');
51
+
52
+ </script>
53
+
54
+ <script>
55
+ /* Watch for clicks and reveal text */
56
+ document.querySelectorAll('.faq__question').forEach(function(el){
57
+ el.addEventListener('click', function() {
58
+ this.classList.toggle('faq__question--reveal');
59
+ const n = this.nextElementSibling;
60
+ n.classList.toggle('faq__answer--reveal');
61
+ });
62
+ });
63
+
64
+ </script>
65
+
66
+
67
+
68
+ <div class="faq__contact">
69
+ <h2 class="faq__contact--strap">Not found the answer?</h2>
70
+ {% include contact-form.html %}
71
+
72
+ </div>
@@ -38,6 +38,9 @@
38
38
  @mixin build-in($name)
39
39
  animation: .8s $bezier-snap 0s 1 $name
40
40
 
41
+ @mixin default-trans
42
+ transition: all .4s ease-in-out
43
+
41
44
  // Keyframes
42
45
  @mixin slide-from-left
43
46
  @keyframes slide-from-left
@@ -33,10 +33,43 @@
33
33
  .about--copy
34
34
  padding: 3rem 0
35
35
 
36
+ .about--video
37
+ width: 100vw
38
+ background-color: $opd-grey-neutral
39
+ display: flex
40
+ flex-direction: column
41
+ padding: 5rem 0
42
+ padding: 0
43
+ justify-content: space-between
44
+ & > h2
45
+ color: $env-primary
46
+ text-align: center
47
+ padding: 1rem
48
+ .video__container
49
+ display: block
50
+ position: relative
51
+ width: 100%
52
+ padding-top: 56.25%
53
+ iframe
54
+ position: absolute
55
+ top: 0
56
+ left: 0
57
+ bottom: 0
58
+ right: 0
59
+ width: 100%
60
+ height: 100%
61
+
62
+
36
63
  .about__team
37
64
  display: flex
38
65
  flex-direction: column
39
66
  background-color: $pure-white
67
+ border-top: solid 1px $opd-blue-confidence
68
+
69
+ .about__team--title
70
+ padding-top: 3rem
71
+ text-align: center
72
+ color: $pure-white
40
73
 
41
74
  .team__head
42
75
  align-items: flex-end
@@ -68,6 +101,14 @@
68
101
  .title__title--text
69
102
  display: none
70
103
 
104
+ .team__title--active
105
+ .title__title--text
106
+ display: block
107
+ position: absolute
108
+ margin-top: 4rem
109
+ left: 2rem
110
+
111
+
71
112
  .team__members
72
113
  background-color: $white
73
114
  color: $opd-blue-confidence
@@ -7,6 +7,22 @@
7
7
  .about__team
8
8
  flex-direction: row
9
9
 
10
+ .about__team--title
11
+ display: none
12
+
13
+ .about--video
14
+ flex-direction: row
15
+ padding: 12rem 0
16
+ padding: 0
17
+
18
+ & > h2
19
+ padding-left: 5rem
20
+ text-align: left
21
+
22
+ .video__container
23
+ padding-top: 56.25%
24
+ //margin-right: 5rem
25
+
10
26
  .team__head
11
27
  border-bottom: none
12
28
  border-right: solid 1px $opd-blue-confidence
@@ -19,6 +35,14 @@
19
35
  .title__title--text
20
36
  display: block
21
37
 
38
+ .team__title--active
39
+ .title__title--text
40
+ display: block
41
+ position: relative
42
+ margin-top: 0
43
+ left: auto
44
+
45
+
22
46
  .team__title
23
47
  display: flex
24
48
  border-radius: 6px 0 0 6px
@@ -0,0 +1,129 @@
1
+ .spacefiller
2
+ width: 100vw
3
+ height: $navbar-height + $secondary-navbar-height + 5vh
4
+
5
+ .collage
6
+ display: flex
7
+ flex-flow: wrap
8
+ background-color: $env-primary
9
+ justify-content: flex-start
10
+ align-items: flex-start
11
+ position: relative
12
+ border: solid 10px $pure-white
13
+
14
+ & > *
15
+ border: solid 10px $pure-white
16
+
17
+ .image__header
18
+ text-align: center
19
+ color: $pure-white
20
+ padding: 0 2rem
21
+
22
+ .collage__image__wrap
23
+ display: flex
24
+ justify-content: center
25
+ align-items: center
26
+ width: 19%
27
+ height: 49%
28
+ position: absolute
29
+ opacity: 0
30
+ animation: .4s ease-in-out aniCollage forwards
31
+ perspective: 1000px
32
+ &:after
33
+ position: absolute
34
+ content: ''
35
+ width: 100%
36
+ height: 100%
37
+ box-shadow: inset 0 0 40px 12px rgba($env-primary, .2)
38
+ z-index: 99
39
+ &:hover
40
+ .collage__image
41
+ transform: rotateX(90deg)
42
+ opacity: 0
43
+
44
+ .collage__image
45
+ display: block
46
+ position: absolute
47
+ object-fit: cover
48
+ object-position: center
49
+ width: 100%
50
+ height: 100%
51
+ transition: .4s ease-in-out
52
+ transform-style: preserve-3d
53
+
54
+ .collage__image__wrap-1
55
+ height: 65%
56
+ top: 0
57
+ width: 30%
58
+ left: 0
59
+ animation-delay: 700ms
60
+
61
+ .collage__image__wrap-2
62
+ height: 50%
63
+ width: 40%
64
+ left: 30%
65
+ animation-delay: 100ms
66
+
67
+ .collage__image__wrap-3
68
+ height: 50%
69
+ width: 30%
70
+ left: 70%
71
+ top: 0
72
+ animation-delay: 500ms
73
+
74
+ .collage__image__wrap-4
75
+ height: 35%
76
+ width: 40%
77
+ left: 0
78
+ top: 65%
79
+ animation-delay: 300ms
80
+
81
+ .collage__image__wrap-5
82
+ width: 60%
83
+ height: 50%
84
+ left: 40%
85
+ top: 50%
86
+ animation-delay: 900ms
87
+
88
+ @keyframes aniCollage
89
+ 0%
90
+ opacity: 0
91
+ 100%
92
+ opacity: 1
93
+
94
+
95
+ p.job__deadline
96
+ padding: 1rem 0
97
+ font-size: $font-size * .8
98
+
99
+ p.job__description
100
+ padding: 2rem 0
101
+ //padding-bottom: 3rem
102
+
103
+ p.job__links
104
+ padding: 0
105
+ padding-bottom: 2rem
106
+ margin-bottom: 4rem
107
+ & > a
108
+ text-decoration: none
109
+ color: $env-primary
110
+ &:hover
111
+ color: $pure-black
112
+ & > a:first-child
113
+ text-decoration: none
114
+ color: $pure-white
115
+ background-color: $env-primary
116
+ padding: 1rem 2.5rem
117
+ border-radius: 8px
118
+ font-weight: 600
119
+ margin-right: 3rem
120
+ @include default-trans
121
+ &:hover
122
+ background-color: lighten($env-primary, 10)
123
+ box-shadow: 1px 1px 5px $light-grey
124
+
125
+ .fullwidth__wrap > .job__links
126
+ border-bottom: solid 1px rgba($env-primary, .4)
127
+ &:last-child
128
+ border-bottom: none
129
+ margin-bottom: 10rem
@@ -3,7 +3,7 @@
3
3
  .contact__wrapper
4
4
  display: flex
5
5
  width: 100%
6
- background-color: $white
6
+ background-color: $pure-white
7
7
  padding: 5rem 0
8
8
  flex-direction: column
9
9
 
@@ -24,6 +24,7 @@
24
24
  display: block
25
25
 
26
26
  form
27
+ background-color: $white
27
28
  border: solid 1px rgba($env-primary, .2)
28
29
  border-radius: 4px
29
30
  padding: 2rem
@@ -32,12 +33,12 @@
32
33
  color: $black
33
34
 
34
35
  .google-map
35
- //grid-area: googleMap
36
36
  width: 100%
37
37
 
38
38
  //padding: 0 5rem
39
39
  //filter: sepia(.3)
40
40
  iframe
41
+ border-radius: 4px
41
42
  width: 100%
42
43
  height: 40vh
43
44
  border: solid 1px rgba($env-primary, .2)
@@ -109,7 +110,6 @@
109
110
  display: flex
110
111
  flex-direction: row
111
112
  width: 100%
112
- background-color: $white
113
113
  padding: 5rem 0
114
114
 
115
115
  .contact--left
@@ -0,0 +1,62 @@
1
+ .faq__wrapper
2
+ display: flex
3
+ flex-direction: column
4
+ background-color: $pure-white
5
+ padding: 10vh 0
6
+
7
+ .faq__panel
8
+ border: solid 1px rgba($env-primary, .4)
9
+ margin: 2rem auto
10
+ border-radius: 4px
11
+ width: 60%
12
+
13
+ .faq__question
14
+ display: flex
15
+ justify-content: space-between
16
+ width: 100%
17
+ padding: 1rem 0
18
+ background-color: rgba($opd-blue-trust, .2)
19
+ border-radius: 4px
20
+ cursor: pointer
21
+ transition: .2s ease-in-out
22
+
23
+ &:hover
24
+ background-color: rgba($opd-blue-trust, 1)
25
+
26
+ & > .faq__question--title
27
+ padding-left: 1rem
28
+
29
+ & > .fas
30
+ padding-right: 1rem
31
+ transition: .4s ease-in-out
32
+
33
+ .faq__answer
34
+ max-height: 0
35
+ overflow: hidden
36
+ transition: .4s ease-in-out
37
+
38
+ & > *
39
+ padding: 1rem
40
+
41
+ .faq__answer--reveal
42
+ max-height: 1000px
43
+ transition: .6s ease-in-out
44
+
45
+ .faq__question--reveal
46
+ & > .fas
47
+ transform: rotateX(180deg) translateY(.5rem)
48
+
49
+ .faq__contact
50
+ width: 100vw
51
+ background-color: lighten($env-primary, 0%)
52
+ padding: 4rem 0
53
+
54
+ .contact-form
55
+ width: 95%
56
+ margin: auto
57
+ max-width: 600px
58
+
59
+ .faq__contact--strap
60
+ text-align: center
61
+ padding: 4rem 0
62
+ color: $white
@@ -88,7 +88,7 @@
88
88
  line-height: 3rem
89
89
  list-style: none
90
90
 
91
- .ft__sitemap--submenu li a
91
+ .ft--link
92
92
  color: $pure-white
93
93
 
94
94
  .ft__sitemap--env-wrap
@@ -114,7 +114,7 @@
114
114
  width: 60vw
115
115
 
116
116
  .ft__contact--list
117
- font-size: $font-size * .7
117
+ font-size: $font-size * .8
118
118
  li
119
119
  line-height: 4rem
120
120
  .address
@@ -126,14 +126,14 @@
126
126
 
127
127
  .ft__sitemap
128
128
  .ft__sitemap--env-header
129
- font-size: $font-size * .8
129
+ font-size: $font-size * .9
130
130
  .ft__sitemap--submenu
131
- font-size: $font-size * .7
131
+ font-size: $font-size * .8
132
132
 
133
133
  .ft__base
134
134
  a,
135
135
  p
136
- font-size: $font-size * .6
136
+ font-size: $font-size * .7
137
137
 
138
138
  .legal-links
139
139
  flex-direction: row
@@ -15,6 +15,9 @@
15
15
  -ms-transition: none !important
16
16
  -o-transition: none !important
17
17
 
18
+ *
19
+ box-sizing: border-box
20
+
18
21
  body
19
22
  background-color: $white
20
23
 
@@ -10,17 +10,29 @@ $brand-height: 55%
10
10
  @media screen and ( min-width: 1024px )
11
11
 
12
12
  .navbar
13
+ @include default-trans
13
14
  height: $navbar-height
14
15
  align-items: center
15
16
 
17
+ .nav-scrolled
18
+ @include default-trans
19
+ top: -$navbar-height
20
+ .nav-group-content
21
+ @include default-trans
22
+ height: 10vh
23
+ .nav-brand
24
+ @include default-trans
25
+ height: 8vh
26
+ top: 6vh
27
+
16
28
  .nav-brand
29
+ @include default-trans
17
30
  display: flex
18
31
  position: absolute
19
32
  max-width: 160px
20
33
  height: 10vh
21
34
  z-index: 999
22
35
  top: 7.5vh
23
- //align-items: center
24
36
 
25
37
  .site__logo
26
38
  position: absolute
@@ -49,6 +61,7 @@ $brand-height: 55%
49
61
  opacity: 1
50
62
  margin: 0
51
63
  overflow: hidden
64
+ position: relative
52
65
 
53
66
  // Surround current link with lines
54
67
 
@@ -70,6 +83,7 @@ $brand-height: 55%
70
83
  margin-right: -10%
71
84
 
72
85
  .nav-group-content
86
+ @include default-trans
73
87
  align-items: center
74
88
  justify-content: flex-end
75
89
  position: absolute
@@ -78,6 +92,7 @@ $brand-height: 55%
78
92
  width: 100vw
79
93
  padding: 0
80
94
  height: $secondary-navbar-height
95
+ //max-height: 100px
81
96
  backdrop-filter: blur(20px)
82
97
 
83
98
  .nav-group-content .nav-link
@@ -85,3 +100,44 @@ $brand-height: 55%
85
100
 
86
101
  .burger
87
102
  display: none
103
+
104
+ .nav-subsub-content
105
+ background-color: $pure-white
106
+ box-shadow: 1px 1px 1px rgba(0, 0, 0, .1)
107
+ visibility: hidden
108
+ opacity: 0
109
+ border-radius: 6px
110
+ z-index: 1
111
+ position: absolute
112
+ padding: 1rem 0
113
+ margin-left: 3rem
114
+ transform: translateY(10px)
115
+ .subsub-link
116
+ &:hover
117
+ background: $white
118
+
119
+ &:before
120
+ background: inherit
121
+ content: ""
122
+ display: block
123
+ height: 16px
124
+ width: 16px
125
+ left: 5px
126
+ position: absolute
127
+ bottom: 100%
128
+ border-radius: 2px
129
+ transform: rotate(-45deg) translateY(14px)
130
+ z-index: -1
131
+
132
+ .nav-group-container:hover > .nav-subsub-content
133
+ visibility: visible
134
+ opacity: 1
135
+ transform: translateY(0px)
136
+ transition: opacity .1s ease-in, transform .2s ease-in
137
+
138
+ .nav-subsub-content .sub-link
139
+ transition: background-color .1s ease-in
140
+
141
+ .nav-subsub-content .sub-link:hover
142
+ background-color: $white
143
+ transition: background-color .1s ease-in
@@ -25,12 +25,14 @@
25
25
  left: 0
26
26
  flex-direction: row
27
27
 
28
- .nav-group-content
28
+ .nav-group-container
29
+
29
30
 
30
31
  .nav-link
31
32
  font-weight: 400
32
33
  color: $env-primary
33
34
  text-transform: uppercase
34
- padding: 0 3rem
35
- &:hover
36
- text-decoration: underline
35
+ padding: 1rem 3rem
36
+ &:not(.current--url)
37
+ &:hover
38
+ text-decoration: underline
@@ -21,13 +21,14 @@
21
21
  left: 0
22
22
  flex-direction: row
23
23
 
24
- .nav-group-content
24
+ .nav-group-container
25
25
 
26
26
 
27
27
  .nav-link
28
28
  font-weight: 400
29
+ color: $env-primary
29
30
  text-transform: uppercase
30
- padding: 0 3rem
31
+ padding: 1rem 3rem
31
32
  &:not(.current--url)
32
33
  &:hover
33
34
  text-decoration: underline
@@ -18,13 +18,16 @@
18
18
  width: 100%
19
19
  z-index: 99
20
20
 
21
+ .social-media
22
+ padding-left: 4rem
21
23
  .social-media-link
22
24
  color: $white
23
- transform: translateX(20px)
24
25
  font-size: $font-size * .8
26
+ transform: translateY(0)
25
27
  &:hover
26
28
  text-shadow: 3px 3px 6px rgba($black, .2)
27
- font-size: $font-size * 1.2
29
+ //font-size: $font-size * 1
30
+ transform: translateY(-2px)
28
31
 
29
32
 
30
33
  .nav-brand
@@ -51,6 +54,7 @@
51
54
  transform: translateX(100%)
52
55
  transition: $nav-slider-transition
53
56
  width: 100vw
57
+ box-sizing: content-box
54
58
 
55
59
  .nav-link
56
60
  margin: 6vh 15vw
@@ -34,3 +34,7 @@ $baseurl: '{{ site.baseurl }}/'
34
34
  @import 'forms/mc-forms'
35
35
 
36
36
  @import 'contact'
37
+
38
+ @import 'faq'
39
+
40
+ @import 'collage'
@@ -34,3 +34,5 @@ $baseurl: '{{ site.baseurl }}/'
34
34
  @import 'forms/mc-forms'
35
35
 
36
36
  @import 'contact'
37
+
38
+ @import 'faq'
@@ -0,0 +1,16 @@
1
+ navbar = document.querySelector('nav');
2
+
3
+ function navBarScroll() {
4
+ var currentScrollPos = window.pageYOffset;
5
+ if (window.pageYOffset != 0) {
6
+ navbar.classList.add('nav-scrolled');
7
+ } else {
8
+ navbar.classList.remove('nav-scrolled');
9
+ }
10
+ };
11
+
12
+ /* load nav color if reloading and pageYOffset != 0 */
13
+ /* moved to scripts to avoid conflicts with other onloads */
14
+ /*window.onload = function() { navBarScroll() };*/
15
+
16
+ window.onscroll = function() { navBarScroll() };
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: slow-steps
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.8
4
+ version: 0.1.13
5
5
  platform: ruby
6
6
  authors:
7
7
  - Made Slowly
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-01-15 00:00:00.000000000 Z
11
+ date: 2021-01-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -177,10 +177,11 @@ executables: []
177
177
  extensions: []
178
178
  extra_rdoc_files: []
179
179
  files:
180
+ - LICENSE
180
181
  - README.md
181
182
  - _config.yml
182
- - _includes/.DS_Store
183
183
  - _includes/branding/site-logo.svg
184
+ - _includes/build-version.html
184
185
  - _includes/contact-details.html
185
186
  - _includes/contact-form.html
186
187
  - _includes/env_filter.html
@@ -193,7 +194,7 @@ files:
193
194
  - _includes/functions/calc-svg-coord.html
194
195
  - _includes/functions/pull_page_args.html
195
196
  - _includes/gmap.html
196
- - _includes/head/.DS_Store
197
+ - _includes/google-analytics.html
197
198
  - _includes/head/README.md
198
199
  - _includes/head/descriptors/og-meta.html
199
200
  - _includes/head/descriptors/structured-data.html
@@ -206,6 +207,7 @@ files:
206
207
  - _includes/scripts.html
207
208
  - _includes/vimeoPlayer.html
208
209
  - _layouts/about.html
210
+ - _layouts/careers.html
209
211
  - _layouts/compress.html
210
212
  - _layouts/contact.html
211
213
  - _layouts/default.html
@@ -213,6 +215,7 @@ files:
213
215
  - _layouts/env/landing.html
214
216
  - _layouts/env/pwp.html
215
217
  - _layouts/error-page.html
218
+ - _layouts/faq.html
216
219
  - _layouts/feed.html
217
220
  - _layouts/full-width.html
218
221
  - _layouts/post.html
@@ -223,6 +226,7 @@ files:
223
226
  - _sass/about.sass
224
227
  - _sass/aos-overrides.sass
225
228
  - _sass/breakpoints/about.sass
229
+ - _sass/collage.sass
226
230
  - _sass/colors/_variables.sass
227
231
  - _sass/colors/breakpoints/1024.sass
228
232
  - _sass/colors/burger.sass
@@ -236,6 +240,7 @@ files:
236
240
  - _sass/env/landing.sass
237
241
  - _sass/env/pwp.sass
238
242
  - _sass/error-page.sass
243
+ - _sass/faq.sass
239
244
  - _sass/feed.sass
240
245
  - _sass/footer.sass
241
246
  - _sass/footer_full.sass
@@ -290,6 +295,7 @@ files:
290
295
  - assets/js/animate_after_load.js
291
296
  - assets/js/calc-mobile-viewport.js
292
297
  - assets/js/mobile-nav-slider.js
298
+ - assets/js/nav-scroll.js
293
299
  - assets/js/svg_aos.js
294
300
  - assets/js/svg_text_width.js
295
301
  - assets/vendor/aos/aos.css
Binary file
Binary file