Skip to content

Commit c00e71f

Browse files
bradfrostbmuenzenmeyer
authored andcommitted
Homepage WIP
1 parent 724c7dc commit c00e71f

File tree

9 files changed

+71
-36
lines changed

9 files changed

+71
-36
lines changed
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="c-hero">
2+
<h1 class="c-hero__title">{{heroTitle}}</h1>
3+
4+
<div class="c-hero__footer">
5+
<pre><code>npm create pattern-lab</code></pre>
6+
</div>
7+
</div>

packages/docs/src/_includes/layouts/base.njk

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,9 @@
2121
<!--end l-grid__sidebar-->
2222

2323
<div class="l-grid__main">
24-
<main>
25-
<div class="l-container">
26-
<div
27-
class="l-linelength-container"
28-
>
29-
{% block content %}
30-
{% endblock content %}
31-
</div>
32-
</div>
24+
<main {% if pageType=="Homepage" %}class="c-main--flush"{% endif %}>
25+
{% block content %}
26+
{% endblock content %}
3327
</main>
3428

3529
{% include "components/footer.njk" %}

packages/docs/src/_includes/layouts/docs.njk

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,17 @@ permalink: docs/{{ title | slug }}/
1212
{% endset %}
1313

1414
{% block content %}
15-
<main id="main-content">
16-
<article>
17-
{% include "components/page-header.njk" %}
18-
<div class="c-text-passage">
19-
{{ content | safe }}
20-
</div>
21-
22-
</article>
23-
</main>
15+
<div class="l-container">
16+
<div class="l-linelength-container">
17+
<article>
18+
{% include "components/page-header.njk" %}
19+
<div class="c-text-passage">
20+
{{ content | safe }}
21+
</div>
22+
23+
</article>
24+
</div>
25+
</div>
2426
{% endblock %}
2527

2628
{{ content | safe }}

packages/docs/src/_includes/layouts/home.njk

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
{% set pageType = 'Homepage' %}
33

44
{# Intro content #}
5-
{% set introHeading = title %}
5+
{% set heroTitle = title %}
66

77
{% block content %}
8-
<main id="main-content">
9-
{% include "components/page-header.njk" %}
8+
9+
{% include "components/hero.njk" %}
1010
{{ content | safe }}
11-
</main>
11+
1212
{% endblock %}

packages/docs/src/_includes/layouts/page.njk

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,17 @@
55
{% set introHeading = title %}
66

77
{% block content %}
8-
<main id="main-content">
9-
<article class="[ post ] [ h-entry ]">
10-
{% include "partials/components/intro.njk" %}
11-
<div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
12-
{{ content | safe }}
8+
<div class="l-container">
9+
<div class="l-linelength-container">
10+
<article class="[ post ] [ h-entry ]">
11+
{% include "partials/components/intro.njk" %}
12+
<div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
13+
{{ content | safe }}
14+
</div>
15+
</article>
16+
</div>
1317
</div>
14-
</article>
15-
</main>
18+
1619
{% endblock %}
1720

1821
{{ content | safe }}

packages/docs/src/_includes/layouts/post.njk

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
{% endset %}
1414

1515
{% block content %}
16-
<main id="main-content">
16+
<div class="l-container">
17+
<div class="l-linelength-container">
1718
<article class="[ post ] [ h-entry ]">
1819
{% include "partials/components/intro.njk" %}
1920
{% include "components/page-header.njk" %}
@@ -37,7 +38,8 @@
3738
</footer>
3839
{% endif %}
3940
</article>
40-
</main>
41+
</div>
42+
</div>
4143
{% endblock %}
4244

4345
{{ content | safe }}

packages/docs/src/scss/base/_main.scss

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,18 @@
66
* Main element
77
*/
88
main {
9-
display: block;
10-
margin-top: 2rem;
9+
display: block;
10+
margin-top: 2rem;
1111

12-
@media all and (min-width: $bp-med) {
13-
margin-top: 5rem;
14-
}
12+
@media all and (min-width: $bp-med) {
13+
margin-top: 5rem;
14+
}
15+
}
16+
17+
.c-main--flush {
18+
margin-top: 0;
19+
20+
@media all and (min-width: $bp-med) {
21+
margin-top: 0;
22+
}
1523
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/*------------------------------------*\
2+
    #HERO
3+
\*------------------------------------*/
4+
5+
.c-hero {
6+
padding: 2rem;
7+
background: orange;
8+
height: 50vh;
9+
position: relative;
10+
}
11+
12+
.c-hero__footer {
13+
position: absolute;
14+
bottom: -55px;
15+
left: 50%;
16+
width: 320px;
17+
margin-left: -160px;
18+
}

packages/docs/src/scss/style.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
@import 'components/footer-nav';
4646
@import 'components/header';
4747
@import 'components/heading-permalink';
48+
@import 'components/hero';
4849
@import 'components/logo';
4950
@import 'components/icon';
5051
@import 'components/page-header';

0 commit comments

Comments
 (0)