Skip to content

Commit f729f4b

Browse files
leonjohannessenleonjohannessen
committed
subscribe form
1 parent b42c305 commit f729f4b

12 files changed

+215
-46
lines changed

‎_sass/jekyll-theme-cayman.scss

Lines changed: 103 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,51 @@ a {
4545
}
4646
}
4747

48+
@mixin button {
49+
display: inline-block;
50+
margin-bottom: 1rem;
51+
color: rgba(255, 255, 255, 0.7);
52+
background-color: rgba(255, 255, 255, 0.08);
53+
border-color: rgba(255, 255, 255, 0.2);
54+
border-style: solid;
55+
border-width: 1px;
56+
border-radius: 0.3rem;
57+
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
58+
59+
&:hover {
60+
color: rgba(255, 255, 255, 0.8);
61+
text-decoration: none;
62+
background-color: rgba(255, 255, 255, 0.2);
63+
border-color: rgba(255, 255, 255, 0.3);
64+
}
65+
66+
+ .btn {
67+
margin-left: 1rem;
68+
}
69+
70+
@include large {
71+
padding: 0.75rem 1rem;
72+
}
73+
74+
@include medium {
75+
padding: 0.6rem 0.9rem;
76+
font-size: 0.9rem;
77+
}
78+
79+
@include small {
80+
display: block;
81+
width: 100%;
82+
padding: 0.75rem;
83+
font-size: 0.9rem;
84+
85+
+ .btn {
86+
margin-top: 1rem;
87+
margin-left: 0;
88+
}
89+
}
90+
91+
}
92+
4893
.btn {
4994
display: inline-block;
5095
margin-bottom: 1rem;
@@ -362,19 +407,15 @@ a {
362407
}
363408

364409
@include large {
365-
& {
366-
flex-direction: row;
367-
}
410+
& { flex-direction: row; }
368411

369412
.team-member {
370413
width: 33%;
371414
}
372415
}
373416

374417
@include medium {
375-
& {
376-
flex-direction: row;
377-
}
418+
& { flex-direction: row; }
378419

379420
.team-member {
380421
width: 33%;
@@ -383,14 +424,67 @@ a {
383424
}
384425

385426
@include small {
386-
& {
387-
flex-direction: column;
427+
& { flex-direction: column; }
388428

389-
}
390429
.team-member {
391430
width: auto;
392431
}
393432

394433
}
395434

396435
}
436+
437+
#signup {
438+
width: 100%;
439+
440+
#mc-embedded-subscribe-form {
441+
display: flex;
442+
443+
@include large { & { flex-direction: row; } }
444+
@include medium { & { flex-direction: row; } }
445+
@include small { & { flex-direction: column; } }
446+
447+
#mce-EMAIL {
448+
@include button {}
449+
450+
border-color: lighten($mediumgrey, 50%);
451+
color: lighten($body-text-color, 25%);
452+
453+
flex: 1;
454+
455+
@include large { & { margin-right: 1em; } }
456+
@include medium { & { margin-right: 1em; } }
457+
458+
459+
&:hover {
460+
border-color: darken($mediumgrey, 35%);
461+
color: darken($body-text-color, 15%);
462+
}
463+
464+
&:focus, &:active {
465+
outline: none;
466+
border-color: $intenseblue;
467+
color: $intenseblue;
468+
}
469+
}
470+
471+
#mc-embedded-subscribe {
472+
@include button {}
473+
474+
background: $body-link-color;
475+
border-color: darken($body-link-color, 2%);
476+
477+
&:hover {
478+
background: darken(saturate($body-link-color, 20%), 5%);
479+
border-color: darken(saturate($body-link-color, 20%), 5%);
480+
}
481+
482+
&:focus, &:active {
483+
outline: none;
484+
background: $intenseblue !important;
485+
border-color: $intenseblue !important;
486+
}
487+
488+
}
489+
}
490+
}

‎_sass/variables.scss

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,25 @@
22
$large-breakpoint: 64em !default;
33
$medium-breakpoint: 42em !default;
44

5+
// Palette
6+
$darkblue: #000422;
7+
$mediumblue: #00024f;
8+
$intenseblue: #00087f;
9+
$darkred: #bc001f;
10+
$intensered: #ef0027;
11+
$yellow: #fff35f;
12+
$darkgrey: #242426;
13+
$mediumgrey: #1c1d25;
14+
515
// Headers
616
$header-heading-color: #fff !default;
7-
$header-bg-color: #242426 !default;
17+
$header-bg-color: $darkgrey !default;
818
$header-bg-color-secondary: #000422 !default;
919

1020
// Text
11-
$section-headings-color: #ed2a25 !default;
12-
$body-text-color: #1c1d25 !default;
13-
$body-link-color: #1c1d25 !default;
21+
$section-headings-color: $intensered !default;
22+
$body-text-color: $darkgrey !default;
23+
$body-link-color: darken($yellow, 30%) !default;
1424
$blockquote-text-color: #819198 !default;
1525

1626
// Code
@@ -21,10 +31,3 @@ $code-text-color: #567482 !default;
2131
$border-color: #dce6f0 !default;
2232
$table-border-color: #e9ebec !default;
2333
$hr-border-color: #eff0f1 !default;
24-
25-
// Palette
26-
// Dark blue 000422
27-
// Medium blue 00024f
28-
// Intense blue 00087f
29-
// Dark red bc001f
30-
// Intense red ef0027

‎_site/another-page.html

Lines changed: 10 additions & 9 deletions
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="#157878">
22-
<link rel="stylesheet" href="/assets/css/style.css?v=2868b236291af8407c8710333c1aa771b04da69f">
22+
<link rel="stylesheet" href="/assets/css/style.css?v=b42c30558e1e3061b8d274377eaf1ff3a8ba4ace">
2323
</head>
2424
<body>
2525
<section class="page-header">
@@ -53,15 +53,16 @@ <h2 id="welcome-to-another-page">Welcome to another page</h2>
5353
</section>
5454

5555

56-
<script type="text/javascript">
57-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
58-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
59-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
60-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
56+
<script type="text/javascript">
57+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
58+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
59+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
60+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
61+
62+
ga('create', 'UA-107694606-1', 'auto');
63+
ga('send', 'pageview');
64+
</script>
6165

62-
ga('create', 'UA-107694606-1', 'auto');
63-
ga('send', 'pageview');
64-
</script>
6566

6667
</body>
6768
</html>

‎_site/assets/css/style.css

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -254,9 +254,9 @@ td, th { padding: 0; }
254254
/* inter ui font family*/
255255
* { box-sizing: border-box; }
256256

257-
body { padding: 0; margin: 0; font-family: 'Inter UI', sans-serif; font-size: 16px; line-height: 1.5; color: #1c1d25; }
257+
body { padding: 0; margin: 0; font-family: 'Inter UI', sans-serif; font-size: 16px; line-height: 1.5; color: #242426; }
258258

259-
a { color: #1c1d25; text-decoration: none; }
259+
a { color: #c5b600; text-decoration: none; }
260260
a:hover { text-decoration: underline; }
261261

262262
.btn { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
@@ -288,7 +288,7 @@ a:hover { text-decoration: underline; }
288288
@media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 2rem 4rem; font-size: 1.1rem; } }
289289
@media screen and (max-width: 42em) { .main-content { padding: 2rem 1rem; font-size: 1rem; } }
290290
.main-content img { max-width: 100%; }
291-
.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: #ed2a25; }
291+
.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; }
292292
.main-content p { margin-bottom: 1em; }
293293
.main-content code { padding: 2px 4px; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.9rem; color: #567482; background-color: #f3f6fa; border-radius: 0.3rem; }
294294
.main-content pre { padding: 0.8rem; margin-top: 0; margin-bottom: 1rem; font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace; color: #567482; word-wrap: normal; background-color: #f3f6fa; border: solid 1px #dce6f0; border-radius: 0.3rem; }
@@ -327,3 +327,29 @@ a:hover { text-decoration: underline; }
327327
.team .team-member { width: 33%; } }
328328
@media screen and (max-width: 42em) { .team { flex-direction: column; }
329329
.team .team-member { width: auto; } }
330+
331+
#signup { width: 100%; }
332+
#signup #mc-embedded-subscribe-form { display: flex; }
333+
@media screen and (min-width: 64em) { #signup #mc-embedded-subscribe-form { flex-direction: row; } }
334+
@media screen and (min-width: 42em) and (max-width: 64em) { #signup #mc-embedded-subscribe-form { flex-direction: row; } }
335+
@media screen and (max-width: 42em) { #signup #mc-embedded-subscribe-form { flex-direction: column; } }
336+
#signup #mc-embedded-subscribe-form #mce-EMAIL { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; border-color: #9396ad; color: #626267; flex: 1; }
337+
#signup #mc-embedded-subscribe-form #mce-EMAIL:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
338+
#signup #mc-embedded-subscribe-form #mce-EMAIL + .btn { margin-left: 1rem; }
339+
@media screen and (min-width: 64em) { #signup #mc-embedded-subscribe-form #mce-EMAIL { padding: 0.75rem 1rem; } }
340+
@media screen and (min-width: 42em) and (max-width: 64em) { #signup #mc-embedded-subscribe-form #mce-EMAIL { padding: 0.6rem 0.9rem; font-size: 0.9rem; } }
341+
@media screen and (max-width: 42em) { #signup #mc-embedded-subscribe-form #mce-EMAIL { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
342+
#signup #mc-embedded-subscribe-form #mce-EMAIL + .btn { margin-top: 1rem; margin-left: 0; } }
343+
@media screen and (min-width: 64em) { #signup #mc-embedded-subscribe-form #mce-EMAIL { margin-right: 1em; } }
344+
@media screen and (min-width: 42em) and (max-width: 64em) { #signup #mc-embedded-subscribe-form #mce-EMAIL { margin-right: 1em; } }
345+
#signup #mc-embedded-subscribe-form #mce-EMAIL:hover { border-color: black; color: black; }
346+
#signup #mc-embedded-subscribe-form #mce-EMAIL:focus, #signup #mc-embedded-subscribe-form #mce-EMAIL:active { outline: none; border-color: #00087f; color: #00087f; }
347+
#signup #mc-embedded-subscribe-form #mc-embedded-subscribe { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; background: #c5b600; border-color: #bbad00; }
348+
#signup #mc-embedded-subscribe-form #mc-embedded-subscribe:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
349+
#signup #mc-embedded-subscribe-form #mc-embedded-subscribe + .btn { margin-left: 1rem; }
350+
@media screen and (min-width: 64em) { #signup #mc-embedded-subscribe-form #mc-embedded-subscribe { padding: 0.75rem 1rem; } }
351+
@media screen and (min-width: 42em) and (max-width: 64em) { #signup #mc-embedded-subscribe-form #mc-embedded-subscribe { padding: 0.6rem 0.9rem; font-size: 0.9rem; } }
352+
@media screen and (max-width: 42em) { #signup #mc-embedded-subscribe-form #mc-embedded-subscribe { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
353+
#signup #mc-embedded-subscribe-form #mc-embedded-subscribe + .btn { margin-top: 1rem; margin-left: 0; } }
354+
#signup #mc-embedded-subscribe-form #mc-embedded-subscribe:hover { background: #ac9f00; border-color: #ac9f00; }
355+
#signup #mc-embedded-subscribe-form #mc-embedded-subscribe:focus, #signup #mc-embedded-subscribe-form #mc-embedded-subscribe:active { outline: none; background: #00087f !important; border-color: #00087f !important; }

‎_site/assets/img/bjorn_portrait.jpg

139 KB
Loading

‎_site/assets/img/leon_portrait.jpg

157 KB
Loading

‎_site/assets/img/mats_portrait.jpg

86 KB
Loading

‎_site/index.html

Lines changed: 26 additions & 12 deletions
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="#157878">
22-
<link rel="stylesheet" href="/assets/css/style.css?v=2868b236291af8407c8710333c1aa771b04da69f">
22+
<link rel="stylesheet" href="/assets/css/style.css?v=b42c30558e1e3061b8d274377eaf1ff3a8ba4ace">
2323
</head>
2424
<body>
2525
<section class="page-header">
@@ -66,8 +66,21 @@ <h2>Leon Johannessen</h2>
6666

6767
<hr />
6868

69-
<h1 id="get-updates">Get updates</h1>
70-
<p>Email harvester here</p>
69+
<h1 id="preview-bloc-beta">Preview Bloc Beta</h1>
70+
<p>Bloc is currently in private beta. Do you want to experience the future of bouldering? Slip us your e-mail, and we’ll send you a beta key when it’s ready.</p>
71+
72+
<!-- Begin MailChimp Signup Form -->
73+
<div id="signup">
74+
<form action="//xyz.us16.list-manage.com/subscribe/post?u=44c038089473a79e2d32cf186&amp;id=b708711862" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
75+
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required="" />
76+
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
77+
<div style="position: absolute; left: -5000px;" aria-hidden="true">
78+
<input type="text" name="b_44c038089473a79e2d32cf186_b708711862" tabindex="-1" value="" /></div>
79+
<input type="submit" value="Get the beta" name="subscribe" id="mc-embedded-subscribe" class="button" />
80+
</form>
81+
</div>
82+
83+
<!--End mc_embed_signup-->
7184

7285

7386
<footer class="site-footer">
@@ -79,15 +92,16 @@ <h1 id="get-updates">Get updates</h1>
7992
</section>
8093

8194

82-
<script type="text/javascript">
83-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
84-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
85-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
86-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
87-
88-
ga('create', 'UA-107694606-1', 'auto');
89-
ga('send', 'pageview');
90-
</script>
95+
<script type="text/javascript">
96+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
97+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
98+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
99+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
100+
101+
ga('create', 'UA-107694606-1', 'auto');
102+
ga('send', 'pageview');
103+
</script>
104+
91105

92106
</body>
93107
</html>

‎assets/img/bjorn_portrait.jpg

139 KB
Loading

‎assets/img/leon_portrait.jpg

157 KB
Loading

‎assets/img/mats_portrait.jpg

86 KB
Loading

‎index.md

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,36 @@ Intro to team. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
3131

3232
* * *
3333

34-
# Get updates
35-
Email harvester here
34+
# Preview Bloc Beta
35+
Bloc is currently in private beta. Do you want to experience the future of bouldering? Slip us your e-mail, and we'll send you a beta key when it's ready.
36+
37+
<!-- Begin MailChimp Signup Form -->
38+
<div id="signup">
39+
<form
40+
action="//xyz.us16.list-manage.com/subscribe/post?u=44c038089473a79e2d32cf186&amp;id=b708711862"
41+
method="post"
42+
id="mc-embedded-subscribe-form"
43+
name="mc-embedded-subscribe-form"
44+
class="validate"
45+
target="_blank"
46+
novalidate>
47+
<input type="email"
48+
value=""
49+
name="EMAIL"
50+
class="email"
51+
id="mce-EMAIL"
52+
placeholder="email address"
53+
required>
54+
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
55+
<div style="position: absolute; left: -5000px;" aria-hidden="true">
56+
<input type="text" name="b_44c038089473a79e2d32cf186_b708711862" tabindex="-1" value=""></div>
57+
<input
58+
type="submit"
59+
value="Get the beta"
60+
name="subscribe"
61+
id="mc-embedded-subscribe"
62+
class="button">
63+
</form>
64+
</div>
65+
66+
<!--End mc_embed_signup-->

0 commit comments

Comments
 (0)