Added case studies section to front page (#159)

Author: MarsBarLee

config.yaml

@@ -26,6 +26,21 @@ params:
     image: logos/numpy.svg
   # Customizable navbar. For a dropdown, add a "sublinks" list.
 
+  section3:
+    title: Case Studies
+    features:
+    - title: First Image of a Black Hole
+      text: How NumPy, together with libraries like SciPy and Matplotlib that depend on NumPy, enabled the Event Horizon Telescope to produce the first ever image of a black hole
+      img: images/content_images/case_studies/blackhole.png
+      url: /case-studies/blackhole-image
+    - title: Detection of Gravitational Waves
+      text: One hundred years after they were predicted by Albert Einstein, NumPy was instrumental in the first observation of gravitational waves by LIGO in 2016.
+      img: images/content_images/case_studies/gravitional.png
+      url: /case-studies/gw-discov
+    - title: Sports Analytics
+      text: TODO!
+      img: images/content_images/case_studies/sports.jpg
+      url: /
   section2:
     title: KEY FEATURES
     features:

layouts/partials/css.html

@@ -26,3 +26,5 @@
 <link rel="stylesheet" type="text/css" href="{{ "css/shell.css" | relURL }}" />
 <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/section2.css" | relURL }}" />
+<link rel="stylesheet" type="text/css" href="{{ "css/section3.css" | relURL }}" />

layouts/partials/section3.html

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

static/css/section3.css

@@ -0,0 +1,74 @@
+.section3 {
+    padding: 30px; 
+    margin: 35px 0 0 0;
+}
+
+.section3-title {
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
+}
+
+.section3-box-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.section3-box-content {
+    height: 450px;
+    width: 20vw;
+    margin: 30px 15px 30px 15px;
+    border-radius: 5px;
+}
+
+.section3-box-title {
+    margin: 15px;
+    font-size: 16px;
+}
+
+.section3-box-text {
+    margin: 30px 15px;
+    color: black;
+}
+
+@media only screen and (max-width: 900px) {
+    .section3-box-container {
+        flex-direction: column;
+    }
+
+    .section3-box-content {
+        width: 80vw;
+    }
+}
+
+.section3-underline {
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.section3-underline:before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    right: 100%;
+    bottom: 0;
+    background: #013343;
+    height: 4px;
+    -webkit-transition-property: right;
+    transition-property: right;
+    -webkit-transition-duration: 0.3s;
+    transition-duration: 0.3s;
+    -webkit-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
+}
+
+.section3-underline:hover:before, .section3-underline:focus:before, .section3-underline:active:before {
+    right: 0;
+}