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
{% include block-header-1.html %}
{% include block-hero-2.html %}
{% include block-text-1.html %}
{% include block-feature-1.html %}
{% include block-feature-2.html %}
{% include block-one-column-1.html %}
{% include block-media-1.html %}
{% include block-two-column-1.html %}
{% include block-media-2.html %}
{% include block-three-column-1.html %}
{% include block-cta-bar.html %}
{% include block-footer-1.html %}
{% include block-footer-2.html %}
\ No newline at end of file
......@@ -17,7 +17,10 @@
}
.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 {
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 @@
}
@media screen and (min-width: 700px) {
.block-hero-2 .column.text {
flex: 0 0 45%;
text-align: left;
......@@ -60,4 +61,5 @@
width: 45vw;
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 @@
@import "imports/block-three-column-1.css";
@import "imports/block-cta-bar.css";
@import "imports/block-footer-1.css";
@import "imports/block-footer-2.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 {
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