Commit 9b87c95e authored by Nichlas W. Andersen's avatar Nichlas W. Andersen
Browse files

New blocks

More block options
parent a5c7dc29
<section class="block block-feature-1">
<div class="container">
<div class="columns">
<div class="column text">
<h2>Great feature</h2>
<p>Some nice text to back it up, and explain some stuff.</p>
</div>
<div class="column media">
<img src="/img/product-shot-1.png" alt="Product shot">
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="block block-feature-2">
<div class="container">
<div class="columns">
<div class="column media">
<img src="/img/product-shot-1.png" alt="Product shot">
</div>
<div class="column text">
<h2>Great feature</h2>
<p>Some nice text to back it up, and explain some stuff.</p>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="block block-footer-2">
<div class="container">
<div class="columns">
<div class="column">
<img src="/img/forestry-symbol.svg" width="24" height="auto" alt="Logo">
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="block block-media-1">
<div class="container">
<figure>
<img src="https://images.unsplash.com/photo-1487304655522-c039cc299c9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=15a58e54813d0e07775a5ab8d505f4dc&auto=format&fit=crop&w=1950&q=80" alt="Image 1">
<!-- Only render the figcaption only if it's set in FMT -->
<figcaption>Some cool content</figcaption>
</figure>
</div>
</section>
\ No newline at end of file
<section class="block block-media-2">
<div class="container">
<div class="columns">
<div class="column">
<figure>
<img src="https://images.unsplash.com/photo-1487304655522-c039cc299c9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=15a58e54813d0e07775a5ab8d505f4dc&auto=format&fit=crop&w=1950&q=80" alt="Image 1">
<!-- Only render the figcaption only if it's set in FMT -->
<!-- <figcaption>Some cool content</figcaption> -->
</figure>
</div>
<div class="column">
<figure>
<img src="https://images.unsplash.com/photo-1487304655522-c039cc299c9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=15a58e54813d0e07775a5ab8d505f4dc&auto=format&fit=crop&w=1950&q=80" alt="Image 1">
<!-- Only render the figcaption only if it's set in FMT -->
<!-- <figcaption>Some cool content</figcaption> -->
</figure>
</div>
</div>
</div>
</section>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
...@@ -5,8 +5,13 @@ title: Homepage ...@@ -5,8 +5,13 @@ title: Homepage
{% include block-header-1.html %} {% include block-header-1.html %}
{% include block-hero-2.html %} {% include block-hero-2.html %}
{% include block-text-1.html %} {% include block-text-1.html %}
{% include block-feature-1.html %}
{% include block-feature-2.html %}
{% include block-one-column-1.html %} {% include block-one-column-1.html %}
{% include block-media-1.html %}
{% include block-two-column-1.html %} {% include block-two-column-1.html %}
{% include block-media-2.html %}
{% include block-three-column-1.html %} {% include block-three-column-1.html %}
{% include block-cta-bar.html %} {% include block-cta-bar.html %}
{% include block-footer-1.html %} {% include block-footer-1.html %}
\ No newline at end of file {% include block-footer-2.html %}
\ No newline at end of file
...@@ -17,7 +17,10 @@ ...@@ -17,7 +17,10 @@
} }
.block-cta-bar .text h3 { margin-bottom: 1rem; } .block-cta-bar .text h3 { margin-bottom: 1rem; }
.block-cta-bar .text p { color: var(--color-white); } .block-cta-bar .text p {
font-size: 1.25rem;
color: var(--color-white);
}
.block-cta-bar .cta { .block-cta-bar .cta {
flex: 0 0 100%; flex: 0 0 100%;
......
.block-feature-1 .columns {
display: flex;
align-items: center;
flex-wrap: wrap;
text-align: center;
}
.block-feature-1 .column.text {
flex: 0 0 100%;
margin-right: 0;
margin-bottom: 2rem;
}
.block-feature-1 .column.media {
flex: 0 0 100%;
}
.block-feature-1 .column.text h2 {
margin-bottom: 1rem;
}
.block-feature-1 .column.media img {
max-width: 100%;
}
@media screen and (min-width: 700px) {
.block-feature-1 .columns {
text-align: left;
}
.block-feature-1 .column.text {
flex: 0 0 40%;
margin-right: 2rem;
margin-bottom: 0;
}
.block-feature-1 .column.media {
flex: 0 0 calc(60% - 2rem);
}
}
\ No newline at end of file
.block-feature-2 .columns {
display: flex;
align-items: center;
flex-wrap: wrap;
text-align: center;
}
.block-feature-2 .column.text {
flex: 0 0 100%;
order: 1;
margin-bottom: 2rem;
}
.block-feature-2 .column.media {
flex: 0 0 100%;
order: 2;
margin-right: 0;
}
.block-feature-2 .column.text h2 {
margin-bottom: 1rem;
}
.block-feature-2 .column.media img {
max-width: 100%;
}
@media screen and (min-width: 700px) {
.block-feature-2 .columns {
text-align: left;
}
.block-feature-2 .column.text {
flex: 0 0 50%;
order: 2;
margin-bottom: 0;
}
.block-feature-2 .column.media {
flex: 0 0 calc(50% - 4rem);
margin-right: 4rem;
order: 1;
}
}
\ No newline at end of file
.block-footer-2 .columns {
display: flex;
flex-wrap: wrap;
font-size: 0.8rem;
margin: -2rem;
}
.block-footer-2 .column {
flex: 0 0 calc(50% - 4rem);
margin: 2rem;
}
.block-footer-2 img {
max-width: 100%;
}
@media screen and (min-width: 700px) {
.block-footer-2 .column {
flex: 0 0 calc(25% - 4rem);
}
}
\ No newline at end of file
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
} }
@media screen and (min-width: 700px) { @media screen and (min-width: 700px) {
.block-hero-2 .column.text { .block-hero-2 .column.text {
flex: 0 0 45%; flex: 0 0 45%;
text-align: left; text-align: left;
...@@ -60,4 +61,5 @@ ...@@ -60,4 +61,5 @@
width: 45vw; width: 45vw;
max-width: 520px; max-width: 520px;
} }
} }
\ No newline at end of file
.block-media-1 img {
max-width: 100%;
}
.block-media-1 figcaption {
font-size: 0.7rem;
color: var(--color-black-3);
text-align: center;
margin-top: 0.5rem;
}
\ No newline at end of file
.block-media-2 .columns {
display: flex;
flex-wrap: wrap;
margin: -2rem;
}
.block-media-2 .column {
flex: 0 0 100%;
margin: 2rem;
}
.block-media-2 .column img {
max-width: 100%;
}
.block-media-2 figcaption {
font-size: 0.7rem;
color: var(--color-black-3);
text-align: center;
margin-top: 0.5rem;
}
@media screen and (min-width: 700px) {
.block-media-2 .column {
flex: 0 0 calc(50% - 4rem);
margin: 2rem;
}
}
\ No newline at end of file
...@@ -17,7 +17,12 @@ ...@@ -17,7 +17,12 @@
@import "imports/block-three-column-1.css"; @import "imports/block-three-column-1.css";
@import "imports/block-cta-bar.css"; @import "imports/block-cta-bar.css";
@import "imports/block-footer-1.css"; @import "imports/block-footer-1.css";
@import "imports/block-footer-2.css";
@import "imports/block-text-1.css"; @import "imports/block-text-1.css";
@import "imports/block-feature-1.css";
@import "imports/block-feature-2.css";
@import "imports/block-media-1.css";
@import "imports/block-media-2.css";
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment