renames section2 to keyfeatures

Author: joelachance

config.yaml

@@ -54,7 +54,7 @@ params:
       alttext: Cricket ball on green field.
       url: /case-studies/cricket-analytics
 
-  section2:
+  keyfeatures:
     title: KEY FEATURES
     features:
     - title: Powerful N-dimensional arrays

layouts/index.html

@@ -7,8 +7,8 @@
     {{ partial "news.html" . }}
     {{ end }}
 
-    {{ if .Site.Params.section2 }}
-    {{ partial "section2.html" . }}
+    {{ if .Site.Params.keyfeatures }}
+    {{ partial "keyfeatures.html" . }}
     {{ end }}
 
     {{ if .Site.Params.shell }}

layouts/partials/css.html

@@ -25,5 +25,5 @@
 <link rel="stylesheet" type="text/css" href="{{ "css/tabs.css" | relURL }}" />
 <link rel="stylesheet" type="text/css" href="{{ "css/content.css" | relURL }}" />
 <link rel="stylesheet" type="text/css" href="{{ "css/news.css" | relURL }}" />
-<link rel="stylesheet" type="text/css" href="{{ "css/section2.css" | relURL }}" />
+<link rel="stylesheet" type="text/css" href="{{ "css/keyfeatures.css" | relURL }}" />
 <link rel="stylesheet" type="text/css" href="{{ "css/section3.css" | relURL }}" />

layouts/partials/keyfeatures.html

@@ -0,0 +1,26 @@
+{{- $keyfeatures := .Site.Params.keyfeatures }}
+{{- $title    := index $keyfeatures "title" }}
+{{- $features := index $keyfeatures "features" }}
+<section class="keyfeatures">
+    <div class="container">
+        <h1 class="keyfeatures-header">
+            {{ $title }}
+            <a class="keyfeatures-header-link hvr-icon-forward" href="/learn">
+                <span class="keyfeatures-header-link-title">LEARN MORE</span>
+                <span class="keyfeatures-header-link-icon" style="color: firebrick;">
+                    <i class="fal fa-arrow-circle-right hvr-icon"></i>
+                </span>
+            </a>
+        </h1>
+        <div class="keyfeatures-box-container">
+            {{- range $features }}
+            <div class="keyfeatures-box-content keyfeatures-underline">
+                <p>
+                    <div class="keyfeatures-box-title">{{ .title }}</div>
+                    <div class="keyfeatures-box-text">{{ .text | markdownify }}</div>
+                </p>
+            </div>
+            {{- end }}
+        </div>
+    </div>
+</section>

layouts/partials/section2.html

@@ -1,13 +1,13 @@
-.section2 {
+.keyfeatures {
     margin-bottom: 30px;
 }
 
-.section2 .container {
+.keyfeatures .container {
     display: flex;
     flex-direction: column;
 }
 
-.section2-header {
+.keyfeatures-header {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -16,7 +16,7 @@
     font-size: 27px;
 }
 
-.section2-header-link {
+.keyfeatures-header-link {
     display: flex;
     width: 156px;
     align-items: baseline;
@@ -29,12 +29,12 @@
     margin-top: 5px;
 }
 
-.section2-header-link-title {
+.keyfeatures-header-link-title {
     padding: 2px 5px 0 0;
     color: #013243;
 }
 
-section2-header-link i {
+keyfeatures-header-link i {
     padding: 2px 0 0 0;
 }
 
@@ -64,76 +64,76 @@ section2-header-link i {
     transform: translateX(4px);
 }
 
-.section2-box-container {
+.keyfeatures-box-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 }
 
-.section2-box-content {
+.keyfeatures-box-content {
     height: 175px;
     min-width: 275px;
     width: 325px;
     margin: 30px 30px 30px 0;
     border-radius: 3px;
 }
 
-.section2-box-title {
+.keyfeatures-box-title {
     margin: 15px;
     font-size: 16px;
     text-transform: uppercase;
 }
 
-.section2-box-text > a {
+.keyfeatures-box-text > a {
     color: #4D77CF;
 }
 
-.section2-box-text {
+.keyfeatures-box-text {
     margin: 30px 15px;
     font-size: 14px;
 }
 
-.section2-box-content:hover > .section2-box-text, .section2-box-content:focus > .section2-box-text, .section2-box-content:active > .section2-box-text {
+.keyfeatures-box-content:hover > .keyfeatures-box-text, .keyfeatures-box-content:focus > .keyfeatures-box-text, .keyfeatures-box-content:active > .keyfeatures-box-text {
     color: #6C7A89;
 }
 
 @media only screen and (max-width: 1280px) {
-    .section2 .container {
+    .keyfeatures .container {
         align-items: center;
         justify-content: center;
     }
 
-    .section2-box-container {
+    .keyfeatures-box-container {
         justify-content: center;
     }
 }
 
 @media only screen and (max-width: 1090px) {
-    .section2 .container {
+    .keyfeatures .container {
         margin: 0 6vw;
     }
 }
 
 
 @media only screen and (max-width: 525px) {
-    .section2-header {
+    .keyfeatures-header {
         flex-direction: column;
     }
 }
 
 @media only screen and (max-width: 425px) {
-    .section2 .container {
+    .keyfeatures .container {
         align-items: center;
         justify-content: center;
         margin: 0 10%;
     }
 
-    .section2-box-content {
+    .keyfeatures-box-content {
         margin: 30px;
     }
 }
 
-.section2-underline {
+.keyfeatures-underline {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
@@ -144,7 +144,7 @@ section2-header-link i {
     overflow: hidden;
 }
 
-.section2-underline:before {
+.keyfeatures-underline:before {
     content: "";
     position: absolute;
     z-index: -1;
@@ -161,6 +161,6 @@ section2-header-link i {
     transition-timing-function: ease-out;
 }
 
-.section2-underline:hover:before, .section2-underline:focus:before, .section2-underline:active:before {
+.keyfeatures-underline:hover:before, .keyfeatures-underline:focus:before, .keyfeatures-underline:active:before {
     right: 0;
 }