slow-steps 0.1.6 → 0.1.7

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: ea0adad81a3cdbea1a8db232f1da78ab42069e6e86e52bef7ce62f17860b9867
4
- data.tar.gz: 2dd0710e2683aaba83cc677066fb7d55bbb581372d044977c879c0e1e887eea2
3
+ metadata.gz: a9d08362eb798582d3b515c95e1aa22ff5b67ed74b430bc7381f2dccd38ff2bd
4
+ data.tar.gz: 722e64963e49d0935b9e203f93fd0072f084d0983f9bc1ae99d44c50312eef2a
5
5
  SHA512:
6
- metadata.gz: 37704673dbcb40560041f0ad82b94842ce2b11edeb21dcf49bb5850b9b5cb5969cce20f82f7ff5fd233bb0113745904f44821460a0f2578010a4bd9c38ecb5d7
7
- data.tar.gz: b75c4f3e0db8825fbd23f3475bc1e2329c360edb50f9cc44f8ee3c4e2540418796f18583c6505b8372582c08f2c9869aa8c32ce4bc53f88685a65350e3047826
6
+ metadata.gz: fe6226e3fe6111d6012f02475c78b63364cda441211edef74a005e46a217bc4a61293026a5e6c53b7c2c0ca14a2969b7836969759fcf00c6b263386f543f47ae
7
+ data.tar.gz: 37d00e20b8b27a8d65f371e6cb0ce84d7f0c0eb1e473fb90cf411e353ab23f4e3550872503f7165bb54f87ea19dc11f62a27a53c80f6b1da3a328dea8acfcd4b
@@ -0,0 +1,25 @@
1
+ <div class="contact-details">
2
+
3
+ <h4 class="form-instruction">Contact us directly</h4>
4
+
5
+ <p><i class="fas fa-envelope"></i>
6
+ <a href="mailto:{{ site.email }}">{{ site.email }}</a></p>
7
+
8
+ {% if site.phone %}
9
+ <p><i class="fas fa-phone-square"></i>
10
+ <a href="tel:{{ site.phone }}‬" ‬>{{ site.phone }}‬</a></p>
11
+ {% endif %}
12
+
13
+ <h4 class="form-instruction">Connect with us socially</h4>
14
+
15
+ <ul class="social-media">
16
+
17
+ {% for social in site.socials %}
18
+ <li class="social-media-item">
19
+ <a href="{{ social.url }}">
20
+ <i class="fab fa-{{ social.icon }} social--{{ social.name }} social-media-link"></i></a>
21
+ </li>
22
+ {% endfor %}
23
+
24
+ </ul>
25
+ </div>
@@ -0,0 +1,18 @@
1
+ <div class="contact-form">
2
+ <h4 class="form-instruction">Get in touch using the form below</h4>
3
+
4
+ <form action="https://formspree.io/f/{{ site.formspree }}" method="post" >
5
+
6
+ <label for="name">Enter your name</label>
7
+ <input type="text" class="form-element" name="name" id="name" placeholder="Your Name" required>
8
+
9
+ <label for="email">Enter your email</label>
10
+ <input type="text" class="form-element" name="email" id="email" placeholder="Your email" required>
11
+
12
+ <label for="message">Enter your message</label>
13
+ <textarea class="form-element" rows="5" name="message" id="message" placeholder="Your Message" required></textarea>
14
+
15
+ <button class="btn btn-pop btn-outline btn-contact" type="submit">SEND</button>
16
+
17
+ </form>
18
+ </div>
@@ -0,0 +1,5 @@
1
+ <div class="google-map">
2
+ <h4 class="form-instruction">Where to find us</h4>
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>
5
+ </div>
@@ -9,6 +9,17 @@
9
9
  </a>
10
10
  </div>
11
11
 
12
+ <ul class="social-media">
13
+
14
+ {% for social in site.socials %}
15
+ <li class="social-media-item">
16
+ <a href="{{ social.url }}">
17
+ <i class="fab fa-{{ social.icon }} social--{{ social.name }} social-media-link"></i></a>
18
+ </li>
19
+ {% endfor %}
20
+
21
+ </ul>
22
+
12
23
  {% if page.layout == "env/landing" or page.layout == "error-page" %}
13
24
  </nav>
14
25
  {% else %}
@@ -0,0 +1,39 @@
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="contact__wrapper">
29
+
30
+ <div class="contact--left">
31
+ {% include contact-form.html %}
32
+ </div>
33
+
34
+ <div class="contact--right">
35
+ {% include gmap.html %}
36
+
37
+ {% include contact-details.html %}
38
+ </div>
39
+ </div>
@@ -0,0 +1,227 @@
1
+
2
+
3
+ .contact__wrapper
4
+ display: flex
5
+ width: 100%
6
+ background-color: $white
7
+ padding: 5rem 0
8
+ flex-direction: column
9
+
10
+ .contact--left
11
+ width: auto
12
+ padding: 0 1rem
13
+ padding-bottom: 5rem
14
+
15
+ .contact--right
16
+ //width: 100%
17
+ padding: 0 1rem
18
+
19
+ .form-instruction
20
+ padding-bottom: 2rem
21
+
22
+ .contact-form
23
+ width: 100%
24
+ display: block
25
+
26
+ form
27
+ border: solid 1px rgba($env-primary, .2)
28
+ border-radius: 4px
29
+ padding: 2rem
30
+ label
31
+ font-size: $font-size * .8
32
+ color: $black
33
+
34
+ .google-map
35
+ //grid-area: googleMap
36
+ width: 100%
37
+
38
+ //padding: 0 5rem
39
+ //filter: sepia(.3)
40
+ iframe
41
+ width: 100%
42
+ height: 40vh
43
+ border: solid 1px rgba($env-primary, .2)
44
+
45
+ .contact-details
46
+ display: flex
47
+ flex-direction: column
48
+ padding: 4rem 0
49
+ p
50
+ padding-bottom: 2rem
51
+ .fas
52
+ color: $env-primary
53
+ a
54
+ color: $black
55
+ transition: all .2s ease-in-out
56
+ //text-decoration: none
57
+ &:hover
58
+ color: $env-primary
59
+ .social-media-link
60
+ font-size: $font-size * 1.4
61
+
62
+ .form-element
63
+ width: 100%
64
+ height: 40px
65
+ border-radius: 4px
66
+ //font-size: 1rem
67
+ font-weight: 100
68
+ margin: 2vh 0
69
+ border: none
70
+ background-color: $pure-white
71
+ padding: .1rem 0 .4rem 0
72
+ text-indent: 1rem
73
+
74
+ &::placeholder
75
+ color: rgba($env-primary, .3)
76
+
77
+ .btn-contact
78
+ background: $env-primary
79
+ color: #ffffff
80
+ cursor: pointer
81
+ font-size: $font-size * .8
82
+ padding: 1rem 2rem
83
+ border: 0
84
+ transition: all .3s
85
+ border-radius: 4px
86
+ width: auto
87
+ position: relative
88
+
89
+ .social-media
90
+ display: flex
91
+ justify-content: center
92
+ padding: 0
93
+ margin: 0
94
+ z-index: 9999
95
+
96
+ .social-media-item
97
+ list-style: none
98
+ padding-right: 2rem
99
+
100
+ .social-media-link
101
+ color: $grey
102
+ transition: all .3s ease-in-out
103
+
104
+
105
+
106
+ @media screen and ( min-width: 1024px )
107
+
108
+ .contact__wrapper
109
+ display: flex
110
+ flex-direction: row
111
+ width: 100%
112
+ background-color: $white
113
+ padding: 5rem 0
114
+
115
+ .contact--left
116
+ width: 40%
117
+ padding: 0 5rem
118
+
119
+ .contact--right
120
+ width: 60%
121
+ padding: 0 5rem
122
+
123
+ .form-instruction
124
+ padding-bottom: 2rem
125
+
126
+ .contact-form
127
+ width: 100%
128
+ display: block
129
+
130
+ form
131
+ border: solid 1px rgba($env-primary, .2)
132
+ border-radius: 4px
133
+ padding: 2rem
134
+ label
135
+ font-size: $font-size * .8
136
+ color: $black
137
+
138
+ .google-map
139
+ //grid-area: googleMap
140
+ width: 100%
141
+
142
+ //padding: 0 5rem
143
+ //filter: sepia(.3)
144
+ iframe
145
+ width: 100%
146
+ height: 40vh
147
+ border: solid 1px rgba($env-primary, .2)
148
+
149
+ .contact-details
150
+ display: flex
151
+ flex-direction: column
152
+ padding: 4rem 0
153
+ p
154
+ padding-bottom: 2rem
155
+ .fas
156
+ color: $env-primary
157
+ a
158
+ color: $black
159
+ transition: all .2s ease-in-out
160
+ text-decoration: none
161
+ &:hover
162
+ color: $env-primary
163
+ .social-media-link
164
+ font-size: $font-size * 2
165
+
166
+ .form-element
167
+ width: 100%
168
+ height: 40px
169
+ border-radius: 4px
170
+ //font-size: 1rem
171
+ font-weight: 100
172
+ margin: 2vh 0
173
+ border: none
174
+ background-color: $pure-white
175
+ padding: .1rem 0 .4rem 0
176
+ text-indent: 1rem
177
+
178
+ &::placeholder
179
+ color: rgba($env-primary, .3)
180
+
181
+ .btn-contact
182
+ background: $env-primary
183
+ color: #ffffff
184
+ cursor: pointer
185
+ font-size: $font-size * .8
186
+ padding: 1rem 2rem
187
+ border: 0
188
+ transition: all .3s
189
+ border-radius: 4px
190
+ width: auto
191
+ position: relative
192
+
193
+ &::after
194
+ content: "\f054"
195
+ font-family: "Font Awesome 5 Free"
196
+ font-weight: 900
197
+ position: absolute
198
+ //left: 85%
199
+ top: 28%
200
+ right: 5%
201
+ bottom: 0
202
+ opacity: 0
203
+
204
+ &:hover
205
+ background: rgba($env-primary, .9)
206
+ transition: all .5s
207
+ box-shadow: 0px 6px 15px rgba($env-primary, .3)
208
+ padding: 1rem 3rem 1rem 2.1rem
209
+
210
+ &::after
211
+ opacity: 1
212
+ transition: all 0.3s
213
+
214
+ .social-media
215
+ display: flex
216
+ justify-content: flex-start
217
+ padding: 0
218
+ margin: 0
219
+ z-index: 9999
220
+
221
+ .social-media-item
222
+ list-style: none
223
+ padding-right: 2rem
224
+
225
+ .social-media-link
226
+ color: $grey
227
+ transition: all .3s ease-in-out
@@ -15,6 +15,9 @@
15
15
  -ms-transition: none !important
16
16
  -o-transition: none !important
17
17
 
18
+ body
19
+ background-color: $white
20
+
18
21
  .fullwidth__wrap
19
22
  width: 90vw
20
23
  max-width: 800px
@@ -97,7 +100,7 @@
97
100
 
98
101
 
99
102
  .hero__strap--center
100
- padding-top: $navbar-height
103
+ //padding-top: $navbar-height
101
104
 
102
105
  span
103
106
  animation-duration: .1s
@@ -282,6 +285,10 @@ $svg-text-offset: 60px
282
285
  max-width: 600px
283
286
  margin: 0 auto
284
287
 
288
+ .social--Facebook
289
+ &:hover
290
+ color: $facebook-primary
291
+
285
292
  .social--Twitter
286
293
  &:hover
287
294
  color: $twitter-primary
@@ -18,6 +18,15 @@
18
18
  width: 100%
19
19
  z-index: 99
20
20
 
21
+ .social-media-link
22
+ color: $white
23
+ transform: translateX(20px)
24
+ font-size: $font-size * .8
25
+ &:hover
26
+ text-shadow: 3px 3px 6px rgba($black, .2)
27
+ font-size: $font-size * 1.2
28
+
29
+
21
30
  .nav-brand
22
31
  width: 30vw
23
32
  padding-left: 3vw
@@ -32,3 +32,5 @@ $baseurl: '{{ site.baseurl }}/'
32
32
  @import 'breakpoints/about'
33
33
 
34
34
  @import 'forms/mc-forms'
35
+
36
+ @import 'contact'
@@ -32,3 +32,5 @@ $baseurl: '{{ site.baseurl }}/'
32
32
  @import 'breakpoints/about'
33
33
 
34
34
  @import 'forms/mc-forms'
35
+
36
+ @import 'contact'
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.6
4
+ version: 0.1.7
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-14 00:00:00.000000000 Z
11
+ date: 2021-01-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -181,6 +181,8 @@ files:
181
181
  - _config.yml
182
182
  - _includes/.DS_Store
183
183
  - _includes/branding/site-logo.svg
184
+ - _includes/contact-details.html
185
+ - _includes/contact-form.html
184
186
  - _includes/env_filter.html
185
187
  - _includes/errors/robot-403.svg
186
188
  - _includes/errors/robot-404.svg
@@ -190,6 +192,7 @@ files:
190
192
  - _includes/forms/mc-register.html
191
193
  - _includes/functions/calc-svg-coord.html
192
194
  - _includes/functions/pull_page_args.html
195
+ - _includes/gmap.html
193
196
  - _includes/head/.DS_Store
194
197
  - _includes/head/README.md
195
198
  - _includes/head/descriptors/og-meta.html
@@ -204,6 +207,7 @@ files:
204
207
  - _includes/vimeoPlayer.html
205
208
  - _layouts/about.html
206
209
  - _layouts/compress.html
210
+ - _layouts/contact.html
207
211
  - _layouts/default.html
208
212
  - _layouts/env/clinician.html
209
213
  - _layouts/env/landing.html
@@ -226,6 +230,7 @@ files:
226
230
  - _sass/colors/env/_pwp.sass
227
231
  - _sass/colors/global.sass
228
232
  - _sass/colors/navigation.sass
233
+ - _sass/contact.sass
229
234
  - _sass/env/breakpoints/768.sass
230
235
  - _sass/env/clinician.sass
231
236
  - _sass/env/landing.sass