Merge pull request #310 from numpy/bug/clickable-case-studies

Bug/clickable case studies

Author: rgommers

config.yaml

@@ -38,7 +38,7 @@ params:
 
   shell:
     title: placeholder
-  section3:
+  casestudies:
     title: CASE STUDIES
     features:
     - title: First Image of a Black Hole

layouts/index.html

@@ -19,8 +19,8 @@
     {{ partial "tabs.html" . }}
     {{ end }}
 
-    {{ if .Site.Params.section3 }}
-    {{ partial "section3.html" . }}
+    {{ if .Site.Params.casestudies }}
+    {{ partial "casestudies.html" . }}
     {{ end }}
 
     {{ if .Site.Params.section4 }}

layouts/partials/casestudies.html

@@ -0,0 +1,17 @@
+{{- $casestudies := .Site.Params.casestudies }}
+{{- $title    := index $casestudies "title" }}
+{{- $features := index $casestudies "features" }}
+<section class="casestudies">
+    <div class="container">
+        <h1 class="casestudies-title">{{ $title }}</h1>
+        <div class="casestudies-box-container">
+            {{- range $features }}
+            <a class="casestudies-box-content casestudies-underline" href="{{ .url }}">
+                <div class="casestudies-box-title">{{ .title }}</div>
+                    <img src="{{ .img }}" alt="{{ .alttext }}">
+                <div class="casestudies-box-text">{{ .text | markdownify }}</div>
+            </a>
+            {{- end }}
+        </div>
+    </div>
+</section>

layouts/partials/css.html

@@ -26,4 +26,4 @@
 <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/keyfeatures.css" | relURL }}" />
-<link rel="stylesheet" type="text/css" href="{{ "css/section3.css" | relURL }}" />
+<link rel="stylesheet" type="text/css" href="{{ "css/casestudies.css" | relURL }}" />

layouts/partials/section3.html

@@ -1,62 +1,62 @@
-.section3 {
+.casestudies {
     padding: 30px;
 }
 
-.section3 a:hover {
+.casestudies a:hover {
     text-decoration: none;
     color:black
 }
 
-.section3-title {
+.casestudies-title {
     display: flex;
     justify-content: center;
     letter-spacing: 1.5px;
     font-size: 27px;
 }
 
-.section3-box-container {
+.casestudies-box-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 }
 
-.section3-box-content {
+.casestudies-box-content {
     height: 450px;
     min-width: 275px;
     width: 350px;
     margin: 30px auto;
     border-radius: 3px;
 }
 
-.section3 a {
+.casestudies a {
     color: #013243 !important;
 }
 
-.section3-box-title {
+.casestudies-box-title {
     margin: 15px;
     font-size: 16px;
     text-transform: uppercase;
 }
 
-.section3-box-text {
+.casestudies-box-text {
     margin: 30px 15px;
     font-size: 14px;
 }
 
 @media only screen and (max-width: 1300px) {
-    .section3-box-container {
+    .casestudies-box-container {
         justify-content: center;
     }
 }
 
 @media only screen and (min-width: 600px) and (max-width: 700px) {
-    .section3-box-container {
+    .casestudies-box-container {
         flex-direction: column;
         align-items: center;
     }
 }
 
-.section3-underline {
+.casestudies-underline {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
@@ -67,7 +67,7 @@
     overflow: hidden;
 }
 
-.section3-underline:before {
+.casestudies-underline:before {
     content: "";
     position: absolute;
     z-index: -1;
@@ -84,6 +84,6 @@
     transition-timing-function: ease-out;
 }
 
-.section3-underline:hover:before, .section3-underline:focus:before, .section3-underline:active:before {
+.casestudies-underline:hover:before, .casestudies-underline:focus:before, .casestudies-underline:active:before {
     right: 0;
 }