Create initial stack. #134

Author: BenJetson

_data/stack.yml

@@ -0,0 +1,16 @@
+message: >
+  This is my message.
+
+links:
+  - title: Twitter
+    icon: twitter
+    url: https://twitter.com/BenJetson # TODO use site.yml
+  - title: Instagram
+    icon: instagram
+    url: https://instagram.com/bfgodfr # TODO use site.yml
+  - title: GitHub
+    icon: github
+    url: https://github.com/BenJetson # TODO use site.yml
+  - title: LinkedIn
+    icon: linkedin
+    url: https://linkedin.com # TODO use site.yml

_sass/custom/overrides/vars.scss

@@ -18,8 +18,11 @@ $primary: $brand-color;
 $chip-size: 30px;
 
 // Enable background gradient classes.
+$gradient-max: rgba(#fff, 15%);
+$gradient-min: rgba(#fff, 0%);
+
 $gradient: linear-gradient(
   0deg /* must be 0deg for home page gradient */,
-  rgba(#fff, 0.15),
-  rgba(#fff, 0)
+  $gradient-max,
+  $gradient-min
 );

_sass/custom/styles/_stack.scss

@@ -0,0 +1,43 @@
+.stack {
+  @extend .bg-primary;
+  @extend .text-light;
+  @extend .p-3;
+
+  text-align: center;
+
+  // Make the stack have the same color as the bottom of the gradient from the
+  // introduction banner at the top of the viewport.
+  //
+  // Using a linear gradient here to ensure:
+  //   - the color is a perfect match since browser gradient calculation
+  //     algorithms might differ, best to use same algorithm to calc.
+  //   - ensure that browsers that do not support the gradient for the banner
+  //     will have the same color as banner for the stack.
+  background-image: linear-gradient(0deg, $gradient-max, $gradient-max);
+}
+
+.stack-item {
+  @extend .my-3;
+  @extend .mx-auto;
+  @extend .p-3;
+  @extend .text-dark;
+
+  position: relative;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  max-width: 400px;
+
+  text-align: center;
+
+  border: 1px solid #fff;
+  border-radius: 15px;
+
+  background-color: rgba($white, 85%);
+
+  font-weight: bold;
+  font-size: $font-size-lg;
+}

_sass/custom/styles/styles.scss

@@ -17,5 +17,6 @@
 @import "octicons";
 @import "preview";
 @import "projects";
+@import "stack";
 @import "usercontent";
 @import "utilities";

stack/index.html

@@ -0,0 +1,44 @@
+---
+layout: boilerplate
+title: Links
+---
+
+{% include introduction.html %}
+
+<section class="stack">
+  {% assign stack = site.data.stack %}
+
+  <p>{{stack.message | markdownify}}</p>
+
+  {% for item in stack.links %}
+
+  <div class="stack-item">
+    <a href="{{link.url}}" class="stretched-link">
+      {% comment %}
+      <!-- prettier-ignore -->
+      {% endcomment %}
+
+      {% if item.icon %}
+
+      {% comment %}
+      <!-- prettier-ignore -->
+      {% endcomment %}
+
+      <i class="bi bi-{{item.icon}}"></i>
+
+      {% comment %}
+      <!-- prettier-ignore -->
+      {% endcomment %}
+
+      {% endif %}
+
+      {{item.title}}
+
+      {% comment %}
+      <!-- prettier-ignore -->
+      {% endcomment %}
+    </a>
+  </div>
+
+  {% endfor %}
+</section>