New blocks

More block options

site/_includes/block-feature-1.html

+<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

site/_includes/block-feature-2.html

+<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

site/_includes/block-footer-2.html

+<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

site/_includes/block-media-1.html

+<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

site/_includes/block-media-2.html

+<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

site/index.md

@@ -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 %}
\ No newline at end of file
+{% include block-footer-1.html %}
+{% include block-footer-2.html %}
\ No newline at end of file

src/css/imports/block-cta-bar.css

@@ -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%;

src/css/imports/block-feature-1.css

+.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

src/css/imports/block-feature-2.css

+.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

src/css/imports/block-footer-2.css

+.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

src/css/imports/block-hero-2.css

@@ -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

src/css/imports/block-media-1.css

+.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

src/css/imports/block-media-2.css

+.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

src/css/styles.css

@@ -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;