Skip to content

Commit f446f6a

Browse files
leonjohannessenleonjohannessen
committed
mobile tweaks, cta button visibility
1 parent 42e30d7 commit f446f6a

File tree

5 files changed

+55
-26
lines changed

5 files changed

+55
-26
lines changed

‎_sass/jekyll-theme-cayman.scss

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,26 @@ a {
132132
margin-left: 0;
133133
}
134134
}
135+
136+
&#cta-button {
137+
background: lighten($body-link-color, 20%);
138+
border-color: lighten($body-link-color, 10%);
139+
color: $body-text-color;
140+
141+
&:hover {
142+
background: lighten($body-link-color, 10%);
143+
border-color: lighten($body-link-color, 10%);
144+
color: $body-text-color;
145+
}
146+
147+
&:focus, &:active {
148+
outline: none;
149+
background: $intenseblue !important;
150+
border-color: $intenseblue !important;
151+
color: white;
152+
}
153+
154+
}
135155
}
136156

137157
.page-header {
@@ -141,6 +161,7 @@ a {
141161
color: $header-heading-color;
142162
text-align: center;
143163
min-height: 70vh;
164+
144165
background-color: $header-bg-color;
145166
background-image: url('/assets/img/bg_apollo_17.jpg');
146167
background-position: center;
@@ -156,7 +177,7 @@ a {
156177
}
157178

158179
@include small {
159-
padding: 2rem 1rem;
180+
padding: 1rem 2rem 0rem;
160181
}
161182
}
162183
#bloc-logo {
@@ -190,6 +211,7 @@ a {
190211
}
191212

192213
@include small {
214+
padding-top: 3rem;
193215
font-size: 2.5rem;
194216
}
195217
}
@@ -217,10 +239,6 @@ a {
217239
z-index: 2;
218240
word-wrap: break-word;
219241

220-
> p:first-of-type {
221-
font-size: 1.3rem;
222-
font-style: italic;
223-
}
224242

225243
:first-child {
226244
margin-top: 0;
@@ -231,16 +249,22 @@ a {
231249
padding: 4rem 6rem;
232250
margin: 0 auto;
233251
font-size: 1.1rem;
252+
253+
> p:first-of-type { font-size: 1.45rem; }
234254
}
235255

236256
@include medium {
237257
padding: 4rem;
238258
font-size: 1.1rem;
259+
260+
> p:first-of-type { font-size: 1.3rem; }
239261
}
240262

241263
@include small {
242264
padding: 2rem 1rem;
243265
font-size: 1rem;
266+
267+
> p:first-of-type { font-size: 1.2rem; }
244268
}
245269

246270
img {
@@ -560,8 +584,8 @@ a {
560584
-webkit-animation: hangLoose .5s step-start 0s infinite;
561585

562586
&.delay {
563-
animation-delay: 10s;
564-
-webkit-animation-delay: 10s;
587+
animation-delay: 25s;
588+
-webkit-animation-delay: 25s;
565589
animation-iteration-count: 2;
566590
-webkit-animation-iteration-count: 2;
567591
}

‎_site/assets/css/style.css

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -266,11 +266,14 @@ a:hover { text-decoration: underline; }
266266
@media screen and (min-width: 42em) and (max-width: 64em) { .btn { padding: 0.6rem 0.9rem; font-size: 0.9rem; } }
267267
@media screen and (max-width: 42em) { .btn { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
268268
.btn + .btn { margin-top: 1rem; margin-left: 0; } }
269+
.btn#cta-button { background: #ffef2c; border-color: #f8e500; color: #242426; }
270+
.btn#cta-button:hover { background: #f8e500; border-color: #f8e500; color: #242426; }
271+
.btn#cta-button:focus, .btn#cta-button:active { outline: none; background: #00087f !important; border-color: #00087f !important; color: white; }
269272

270273
.page-header { display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; min-height: 70vh; background-color: #242426; background-image: url("/assets/img/bg_apollo_17.jpg"); background-position: center; background-size: cover; background-blend-mode: overlay; }
271274
@media screen and (min-width: 64em) { .page-header { padding: 5rem 6rem; } }
272275
@media screen and (min-width: 42em) and (max-width: 64em) { .page-header { padding: 3rem 4rem; } }
273-
@media screen and (max-width: 42em) { .page-header { padding: 2rem 1rem; } }
276+
@media screen and (max-width: 42em) { .page-header { padding: 1rem 2rem 0rem; } }
274277

275278
#bloc-logo { position: fixed; left: 1rem; top: 1rem; width: 5rem; }
276279
#bloc-logo.inverted { filter: invert(1); }
@@ -279,19 +282,21 @@ a:hover { text-decoration: underline; }
279282
.project-name { margin-top: 0; margin-top: 1em; margin-bottom: 0.1rem; line-height: 1em; }
280283
@media screen and (min-width: 64em) { .project-name { font-size: 6rem; max-width: 50vw; } }
281284
@media screen and (min-width: 42em) and (max-width: 64em) { .project-name { font-size: 5rem; max-width: 70vw; } }
282-
@media screen and (max-width: 42em) { .project-name { font-size: 2.5rem; } }
285+
@media screen and (max-width: 42em) { .project-name { padding-top: 3rem; font-size: 2.5rem; } }
283286

284287
.project-tagline { margin-bottom: 2rem; font-weight: normal; opacity: 0.7; }
285288
@media screen and (min-width: 64em) { .project-tagline { font-size: 1.25rem; } }
286289
@media screen and (min-width: 42em) and (max-width: 64em) { .project-tagline { font-size: 1.15rem; } }
287290
@media screen and (max-width: 42em) { .project-tagline { font-size: 1rem; } }
288291

289292
.main-content { position: relative; z-index: 2; word-wrap: break-word; }
290-
.main-content > p:first-of-type { font-size: 1.3rem; font-style: italic; }
291293
.main-content :first-child { margin-top: 0; }
292-
@media screen and (min-width: 64em) { .main-content { max-width: 64rem; padding: 4rem 6rem; margin: 0 auto; font-size: 1.1rem; } }
293-
@media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 4rem; font-size: 1.1rem; } }
294-
@media screen and (max-width: 42em) { .main-content { padding: 2rem 1rem; font-size: 1rem; } }
294+
@media screen and (min-width: 64em) { .main-content { max-width: 64rem; padding: 4rem 6rem; margin: 0 auto; font-size: 1.1rem; }
295+
.main-content > p:first-of-type { font-size: 1.45rem; } }
296+
@media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 4rem; font-size: 1.1rem; }
297+
.main-content > p:first-of-type { font-size: 1.3rem; } }
298+
@media screen and (max-width: 42em) { .main-content { padding: 2rem 1rem; font-size: 1rem; }
299+
.main-content > p:first-of-type { font-size: 1.2rem; } }
295300
.main-content img { max-width: 100%; }
296301
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 { margin-top: 2rem; margin-bottom: 1rem; font-weight: bold; color: #ef0027; }
297302
.main-content p { margin-bottom: 1em; }
@@ -367,4 +372,4 @@ a:hover { text-decoration: underline; }
367372
@keyframes hangLoose { 50% { transform: rotate(-17deg); } }
368373
@-webkit-keyframes hangLoose { 50% { -webkit-transform: rotate(-17deg); } }
369374
.hang-loose { display: inline-block; animation: hangLoose .5s step-start 0s infinite; -webkit-animation: hangLoose .5s step-start 0s infinite; }
370-
.hang-loose.delay { animation-delay: 10s; -webkit-animation-delay: 10s; animation-iteration-count: 2; -webkit-animation-iteration-count: 2; }
375+
.hang-loose.delay { animation-delay: 25s; -webkit-animation-delay: 25s; animation-iteration-count: 2; -webkit-animation-iteration-count: 2; }

‎_site/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<meta name="description" content="Bouldering Reimagined"/>
3535
<meta name="viewport" content="width=device-width, initial-scale=1">
3636
<meta name="theme-color" content="#00087f">
37-
<link rel="stylesheet" href="/assets/css/style.css?v=029007382265da9421108e2893bd22b39f0e998e">
37+
<link rel="stylesheet" href="/assets/css/style.css?v=42e30d737cf135c5180898b2ddac96f3124a2109">
3838
</head>
3939
<body>
4040
<section class="page-header">
@@ -47,30 +47,30 @@ <h2 class="project-tagline">&mdash;<br><span id="tagline"></h2>
4747
</section>
4848

4949
<section class="main-content">
50-
<p>Bloc is a new platform for bouldering. It is reimagined and built from the ground up without the restraints of present solutions. Whether you’re a publisher, pro climber or amateur rock-fiddler – meet Bloc – your future best friend.</p>
50+
<p>Bloc is a new platform for bouldering. It is designed and built from the ground up, solving the real needs of boulderers, without the restraints of present solutions. Whether you’re a pro climber, amateur rock-fiddler, or publisher — meet Bloc — your future best friend.</p>
5151

5252
<hr />
5353

5454
<h1 id="team">Team</h1>
55-
<p>Bloc is built by a team of machine learning experts and designers, Club Mate-enthusiasts and boulderers — hard at work shaping the future.</p>
55+
<p>Bloc is built by a team of machine learning and UX design experts, Club Mate-enthusiasts and boulderers — hard at work shaping the future.</p>
5656

5757
<div class="team">
5858
<div class="team-member">
59-
<img class="portrait" src="/assets/img/mats_portrait.jpg" alt="Club-Mate Enthusiast Mats Julian Olsen" />
59+
<img class="portrait" src="/assets/img/mats_portrait.jpg" alt="Club Mate-enthusiast Mats Julian Olsen" />
6060
<h2>Mats Julian Olsen</h2>
6161
<p class="role">Machine Learning Engineer</p>
6262
<p class="mail"><a href="mailto:mats@getbloc.xyz">mats@getbloc.xyz</a></p>
6363
</div>
6464

6565
<div class="team-member">
66-
<img class="portrait" src="/assets/img/bjorn_portrait.jpg" alt="Club-Mate Enthusiast Bjorn Rustad" />
66+
<img class="portrait" src="/assets/img/bjorn_portrait.jpg" alt="Club Mate-enthusiast Bjorn Rustad" />
6767
<h2>Bjørn Rustad</h2>
6868
<p class="role">Machine Learning Engineer</p>
6969
<p class="mail"><a href="mailto:mats@getbloc.xyz">bjorn@getbloc.xyz</a></p>
7070
</div>
7171

7272
<div class="team-member">
73-
<img class="portrait" src="/assets/img/leon_portrait.jpg" alt="Club-Mate Enthusiast and Chief Astronaut Leon Johannessen" />
73+
<img class="portrait" src="/assets/img/leon_portrait.jpg" alt="Club Mate-enthusiast and Chief Astronaut Leon Johannessen" />
7474
<h2>Leon Johannessen</h2>
7575
<p class="role">Industrial Design Engineer</p>
7676
<p class="mail"><a href="mailto:mats@getbloc.xyz">leon@getbloc.xyz</a></p>

‎_site/thanks.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<meta name="description" content="Bouldering Reimagined"/>
2020
<meta name="viewport" content="width=device-width, initial-scale=1">
2121
<meta name="theme-color" content="#00087f">
22-
<link rel="stylesheet" href="/assets/css/style.css?v=029007382265da9421108e2893bd22b39f0e998e">
22+
<link rel="stylesheet" href="/assets/css/style.css?v=42e30d737cf135c5180898b2ddac96f3124a2109">
2323
</head>
2424
<body>
2525
<section class="page-header">

‎index.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,30 @@
22
layout: default
33
---
44

5-
Bloc is a new platform for bouldering. It is reimagined and built from the ground up without the restraints of present solutions. Whether you're a publisher, pro climber or amateur rock-fiddler – meet Bloc – your future best friend.
5+
Bloc is a new platform for bouldering. It is designed and built from the ground up, solving the real needs of boulderers, without the restraints of present solutions. Whether you're a pro climber, amateur rock-fiddler, or publisher &mdash; meet Bloc &mdash; your future best friend.
66

77
* * *
88

99
# Team
10-
Bloc is built by a team of machine learning experts and designers, Club Mate-enthusiasts and boulderers &mdash; hard at work shaping the future.
10+
Bloc is built by a team of machine learning and UX design experts, Club Mate-enthusiasts and boulderers &mdash; hard at work shaping the future.
1111

1212
<div class="team">
1313
<div class="team-member">
14-
<img class="portrait" src="/assets/img/mats_portrait.jpg" alt="Club-Mate Enthusiast Mats Julian Olsen"/>
14+
<img class="portrait" src="/assets/img/mats_portrait.jpg" alt="Club Mate-enthusiast Mats Julian Olsen"/>
1515
<h2>Mats Julian Olsen</h2>
1616
<p class="role">Machine Learning Engineer</p>
1717
<p class="mail"><a href="mailto:mats@getbloc.xyz">mats@getbloc.xyz</a></p>
1818
</div>
1919

2020
<div class="team-member">
21-
<img class="portrait" src="/assets/img/bjorn_portrait.jpg" alt="Club-Mate Enthusiast Bjorn Rustad"/>
21+
<img class="portrait" src="/assets/img/bjorn_portrait.jpg" alt="Club Mate-enthusiast Bjorn Rustad"/>
2222
<h2>Bjørn Rustad</h2>
2323
<p class="role">Machine Learning Engineer</p>
2424
<p class="mail"><a href="mailto:mats@getbloc.xyz">bjorn@getbloc.xyz</a></p>
2525
</div>
2626

2727
<div class="team-member">
28-
<img class="portrait" src="/assets/img/leon_portrait.jpg" alt="Club-Mate Enthusiast and Chief Astronaut Leon Johannessen"/>
28+
<img class="portrait" src="/assets/img/leon_portrait.jpg" alt="Club Mate-enthusiast and Chief Astronaut Leon Johannessen"/>
2929
<h2>Leon Johannessen</h2>
3030
<p class="role">Industrial Design Engineer</p>
3131
<p class="mail"><a href="mailto:mats@getbloc.xyz">leon@getbloc.xyz</a></p>

0 commit comments

Comments
 (0)