Skip to content

Commit de5c85c

Browse files
leonjohannessenleonjohannessen
committed
team layout
1 parent f729f4b commit de5c85c

File tree

6 files changed

+66
-47
lines changed

6 files changed

+66
-47
lines changed

‎_layouts/default.html

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,14 @@
1414
<div class="page-header-content">
1515
<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
1616
<h2 class="project-tagline">{{ site.description | default: site.github.project_tagline }}</h2>
17-
{% if site.github.is_project_page %}
18-
<a href="#get-updates" class="btn">Preview the Bloc Beta</a>
19-
{% endif %}
20-
{% if site.show_downloads %}
21-
<a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
22-
<a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
23-
{% endif %}
17+
<a href="#preview-bloc-beta" class="btn">Preview the <strong>Bloc</strong> Beta</a>
2418
</div>
2519
</section>
2620

2721
<section class="main-content">
2822
{{ content }}
2923

3024
<footer class="site-footer">
31-
{% if site.github.is_project_page %}
32-
<span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
33-
{% endif %}
3425
<span class="site-footer-credits">Bloc Bouldering AS, 2017.</span>
3526
</footer>
3627
</section>

‎_sass/jekyll-theme-cayman.scss

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -204,13 +204,13 @@ a {
204204

205205
@include large {
206206
max-width: 64rem;
207-
padding: 2rem 6rem;
207+
padding: 4rem 6rem;
208208
margin: 0 auto;
209209
font-size: 1.1rem;
210210
}
211211

212212
@include medium {
213-
padding: 2rem 4rem;
213+
padding: 4rem;
214214
font-size: 1.1rem;
215215
}
216216

@@ -235,6 +235,7 @@ a {
235235
color: $section-headings-color;
236236
}
237237

238+
238239
p {
239240
margin-bottom: 1em;
240241
}
@@ -366,7 +367,7 @@ a {
366367
hr {
367368
height: 2px;
368369
padding: 0;
369-
margin: 1rem 0;
370+
margin: 3rem 0;
370371
background-color: $hr-border-color;
371372
border: 0;
372373
}
@@ -401,9 +402,33 @@ a {
401402

402403
.team {
403404
display: flex;
405+
margin-top: 4rem;
404406

405407
.team-member {
406408
flex: auto;
409+
410+
h2 {
411+
color: $body-text-color;
412+
text-transform: uppercase;
413+
letter-spacing: 0.05em;
414+
margin-bottom: 0;
415+
font-size: 1em;
416+
}
417+
418+
.role {
419+
margin: 0;
420+
}
421+
422+
.mail a {
423+
color: $body-text-color;
424+
border-bottom: 2px solid $yellow;
425+
}
426+
427+
.portrait {
428+
width: 61.8%;
429+
border-radius: 100%;
430+
filter: grayscale(100%);
431+
}
407432
}
408433

409434
@include large {
@@ -428,8 +453,15 @@ a {
428453

429454
.team-member {
430455
width: auto;
456+
text-align: center;
457+
458+
& + .team-member {
459+
margin-top: 2rem;
460+
}
431461
}
432462

463+
464+
433465
}
434466

435467
}
@@ -471,18 +503,21 @@ a {
471503
#mc-embedded-subscribe {
472504
@include button {}
473505

474-
background: $body-link-color;
475-
border-color: darken($body-link-color, 2%);
506+
background: lighten($body-link-color, 20%);
507+
border-color: lighten($body-link-color, 10%);
508+
color: $body-text-color;
476509

477510
&:hover {
478-
background: darken(saturate($body-link-color, 20%), 5%);
479-
border-color: darken(saturate($body-link-color, 20%), 5%);
511+
background: lighten($body-link-color, 10%);
512+
border-color: lighten($body-link-color, 10%);
513+
color: $body-text-color;
480514
}
481515

482516
&:focus, &:active {
483517
outline: none;
484518
background: $intenseblue !important;
485519
border-color: $intenseblue !important;
520+
color: white;
486521
}
487522

488523
}

‎_site/another-page.html

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,14 @@
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=b42c30558e1e3061b8d274377eaf1ff3a8ba4ace">
22+
<link rel="stylesheet" href="/assets/css/style.css?v=f729f4b6ea2e0c63a393cfbde448ebd028db8bcd">
2323
</head>
2424
<body>
2525
<section class="page-header">
2626
<div class="page-header-content">
2727
<h1 class="project-name">Bloc Bouldering</h1>
2828
<h2 class="project-tagline">Bouldering Reimagined</h2>
29-
30-
<a href="#get-updates" class="btn">Preview the Bloc Beta</a>
31-
32-
33-
<a href="http://github.com/getbloc/getbloc.github.io/zipball/gh-pages" class="btn">Download .zip</a>
34-
<a href="http://github.com/getbloc/getbloc.github.io/tarball/gh-pages" class="btn">Download .tar.gz</a>
35-
29+
<a href="#preview-bloc-beta" class="btn">Preview the <strong>Bloc</strong> Beta</a>
3630
</div>
3731
</section>
3832

@@ -45,9 +39,6 @@ <h2 id="welcome-to-another-page">Welcome to another page</h2>
4539

4640

4741
<footer class="site-footer">
48-
49-
<span class="site-footer-owner"><a href="http://github.com/getbloc/getbloc.github.io">getbloc.github.io</a> is maintained by <a href="http://github.com/getbloc">getbloc</a>.</span>
50-
5142
<span class="site-footer-credits">Bloc Bouldering AS, 2017.</span>
5243
</footer>
5344
</section>

‎_site/assets/css/style.css

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -284,8 +284,8 @@ a:hover { text-decoration: underline; }
284284

285285
.main-content { word-wrap: break-word; }
286286
.main-content :first-child { margin-top: 0; }
287-
@media screen and (min-width: 64em) { .main-content { max-width: 64rem; padding: 2rem 6rem; margin: 0 auto; font-size: 1.1rem; } }
288-
@media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 2rem 4rem; font-size: 1.1rem; } }
287+
@media screen and (min-width: 64em) { .main-content { max-width: 64rem; padding: 4rem 6rem; margin: 0 auto; font-size: 1.1rem; } }
288+
@media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 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%; }
291291
.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; }
@@ -308,7 +308,7 @@ a:hover { text-decoration: underline; }
308308
.main-content dl { padding: 0; }
309309
.main-content dl dt { padding: 0; margin-top: 1rem; font-size: 1rem; font-weight: bold; }
310310
.main-content dl dd { padding: 0; margin-bottom: 1rem; }
311-
.main-content hr { height: 2px; padding: 0; margin: 1rem 0; background-color: #eff0f1; border: 0; }
311+
.main-content hr { height: 2px; padding: 0; margin: 3rem 0; background-color: #eff0f1; border: 0; }
312312

313313
.site-footer { padding-top: 2rem; margin-top: 2rem; border-top: solid 1px #eff0f1; }
314314
@media screen and (min-width: 64em) { .site-footer { font-size: 1rem; } }
@@ -319,14 +319,19 @@ a:hover { text-decoration: underline; }
319319

320320
.site-footer-credits { color: #819198; }
321321

322-
.team { display: flex; }
322+
.team { display: flex; margin-top: 4rem; }
323323
.team .team-member { flex: auto; }
324+
.team .team-member h2 { color: #242426; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; font-size: 1em; }
325+
.team .team-member .role { margin: 0; }
326+
.team .team-member .mail a { color: #242426; border-bottom: 2px solid #fff35f; }
327+
.team .team-member .portrait { width: 61.8%; border-radius: 100%; filter: grayscale(100%); }
324328
@media screen and (min-width: 64em) { .team { flex-direction: row; }
325329
.team .team-member { width: 33%; } }
326330
@media screen and (min-width: 42em) and (max-width: 64em) { .team { flex-direction: row; }
327331
.team .team-member { width: 33%; } }
328332
@media screen and (max-width: 42em) { .team { flex-direction: column; }
329-
.team .team-member { width: auto; } }
333+
.team .team-member { width: auto; text-align: center; }
334+
.team .team-member + .team-member { margin-top: 2rem; } }
330335

331336
#signup { width: 100%; }
332337
#signup #mc-embedded-subscribe-form { display: flex; }
@@ -344,12 +349,12 @@ a:hover { text-decoration: underline; }
344349
@media screen and (min-width: 42em) and (max-width: 64em) { #signup #mc-embedded-subscribe-form #mce-EMAIL { margin-right: 1em; } }
345350
#signup #mc-embedded-subscribe-form #mce-EMAIL:hover { border-color: black; color: black; }
346351
#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; }
352+
#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: #ffef2c; border-color: #f8e500; color: #242426; }
348353
#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); }
349354
#signup #mc-embedded-subscribe-form #mc-embedded-subscribe + .btn { margin-left: 1rem; }
350355
@media screen and (min-width: 64em) { #signup #mc-embedded-subscribe-form #mc-embedded-subscribe { padding: 0.75rem 1rem; } }
351356
@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; } }
352357
@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; }
353358
#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; }
359+
#signup #mc-embedded-subscribe-form #mc-embedded-subscribe:hover { background: #f8e500; border-color: #f8e500; color: #242426; }
360+
#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; color: white; }

‎_site/index.html

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,14 @@
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=b42c30558e1e3061b8d274377eaf1ff3a8ba4ace">
22+
<link rel="stylesheet" href="/assets/css/style.css?v=f729f4b6ea2e0c63a393cfbde448ebd028db8bcd">
2323
</head>
2424
<body>
2525
<section class="page-header">
2626
<div class="page-header-content">
2727
<h1 class="project-name">Bloc Bouldering</h1>
2828
<h2 class="project-tagline">Bouldering Reimagined</h2>
29-
30-
<a href="#get-updates" class="btn">Preview the Bloc Beta</a>
31-
32-
33-
<a href="http://github.com/getbloc/getbloc.github.io/zipball/gh-pages" class="btn">Download .zip</a>
34-
<a href="http://github.com/getbloc/getbloc.github.io/tarball/gh-pages" class="btn">Download .tar.gz</a>
35-
29+
<a href="#preview-bloc-beta" class="btn">Preview the <strong>Bloc</strong> Beta</a>
3630
</div>
3731
</section>
3832

@@ -46,18 +40,21 @@ <h1 id="team">Team</h1>
4640

4741
<div class="team">
4842
<div class="team-member">
43+
<img class="portrait" src="/assets/img/mats_portrait.jpg" alt="Portrait of Mats Julian Olsen" />
4944
<h2>Mats Julian Olsen</h2>
5045
<p class="role">Club Mate Enthusiast</p>
5146
<p class="mail"><a href="mailto:mats@getbloc.xyz">mats@getbloc.xyz</a></p>
5247
</div>
5348

5449
<div class="team-member">
50+
<img class="portrait" src="/assets/img/bjorn_portrait.jpg" alt="Portrait of Bjorn Rustad" />
5551
<h2>Bjørn Rustad</h2>
5652
<p class="role">Data Scientist</p>
5753
<p class="mail"><a href="mailto:mats@getbloc.xyz">bjorn@getbloc.xyz</a></p>
5854
</div>
5955

6056
<div class="team-member">
57+
<img class="portrait" src="/assets/img/leon_portrait.jpg" alt="Portrait of Leon Johannessen" />
6158
<h2>Leon Johannessen</h2>
6259
<p class="role">UX Designer</p>
6360
<p class="mail"><a href="mailto:mats@getbloc.xyz">leon@getbloc.xyz</a></p>
@@ -84,9 +81,6 @@ <h1 id="preview-bloc-beta">Preview Bloc Beta</h1>
8481

8582

8683
<footer class="site-footer">
87-
88-
<span class="site-footer-owner"><a href="http://github.com/getbloc/getbloc.github.io">getbloc.github.io</a> is maintained by <a href="http://github.com/getbloc">getbloc</a>.</span>
89-
9084
<span class="site-footer-credits">Bloc Bouldering AS, 2017.</span>
9185
</footer>
9286
</section>

‎index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,21 @@ Intro to team. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
1111

1212
<div class="team">
1313
<div class="team-member">
14+
<img class="portrait" src="/assets/img/mats_portrait.jpg" alt="Portrait of Mats Julian Olsen"/>
1415
<h2>Mats Julian Olsen</h2>
1516
<p class="role">Club Mate Enthusiast</p>
1617
<p class="mail"><a href="mailto:mats@getbloc.xyz">mats@getbloc.xyz</a></p>
1718
</div>
1819

1920
<div class="team-member">
21+
<img class="portrait" src="/assets/img/bjorn_portrait.jpg" alt="Portrait of Bjorn Rustad"/>
2022
<h2>Bjørn Rustad</h2>
2123
<p class="role">Data Scientist</p>
2224
<p class="mail"><a href="mailto:mats@getbloc.xyz">bjorn@getbloc.xyz</a></p>
2325
</div>
2426

2527
<div class="team-member">
28+
<img class="portrait" src="/assets/img/leon_portrait.jpg" alt="Portrait of Leon Johannessen"/>
2629
<h2>Leon Johannessen</h2>
2730
<p class="role">UX Designer</p>
2831
<p class="mail"><a href="mailto:mats@getbloc.xyz">leon@getbloc.xyz</a></p>

0 commit comments

Comments
 (0)