Merge pull request #151 from numpy/feature/84-nutshell

section2 2x2 tiles

Author: joelachance

config.yaml

@@ -27,20 +27,16 @@ params:
   # Customizable navbar. For a dropdown, add a "sublinks" list.
 
   section2:
-    title: In a Nutshell
+    title: KEY FEATURES
     features:
     - title: Powerful N-dimensional arrays
-      icon: cartesian
       subtitle: Fast, versatile and easy to use
       text:  Fast, versatile and easy to use, the NumPy vectorization, indexing and broadcasting concepts are the de-facto standards of array computing today.
     - title: Numerical computing tools
-      icon: chip
       text: Fundamental package for scientific computing, NumPy offers comprehensive mathematical functions, random number generators, linear algebra routines, Fourier transforms and more.
     - title: Interoperable
-      icon: computer
       text: Works on your choice of computing platform, whether your code fits in memory and runs on a CPU or requires a GPU. NumPy supports a wide range of computing platforms and works well with all major distributed arrays and sparse arrays libraries. 
     - title: Open source
-      icon: web-programming
       text: Distributed under a liberal [BSD license](https://github.com/numpy/numpy/blob/master/LICENSE.txt), NumPy is developed and maintained publicly on GitHub by a vibrant, responsive and diverse community.
   tabs:
     title: Ecosystem

layouts/partials/css.html

@@ -17,6 +17,7 @@
 <!-- Custom CSS -->
 <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | relURL }}" />
 <link rel="stylesheet" type="text/css" href="{{ "css/shell.css" | relURL }}" />
+<link rel="stylesheet" type="text/css" href="{{ "css/section2.css" | relURL }}" />
 <!-- Numpy Favicon -->
 <link rel="icon" type="image/png" href="{{ "images/favicon.png" | relURL }}" />
 <!-- Google Fonts - Ubuntu -->

layouts/partials/section2.html

@@ -1,34 +1,18 @@
 {{- $section2 := .Site.Params.section2 }}
 {{- $title    := index $section2 "title" }}
-{{- $subtitle := index $section2 "subtitle" }}
 {{- $features := index $section2 "features" }}
-<section class="section is-medium">
-  <div class="container">
-    <div class="columns is-centered">
-      <div class="column is-8">
-        <h1 class="title section-title">{{ $title }}</h1>
-        <h3 class="subtitle is-muted">{{ $subtitle }}</h3>
-        <div class="divider"></div>
-        <div class="mt-30"></div>
-        {{- range $features }}
-        <article class="media icon-box">
-          <figure class="media-left">
-            <p id="section2-image" class="image">
-              <img src="{{ printf "/images/illustrations/icons/%s.svg" .icon | relURL }}">
-            </p>
-          </figure>
-          <div class="media-content mt-50">
-            <div class="content">
-              <p>
-                <span class="icon-box-title">{{ .title }}</span>
-
-                <span class="icon-box-text">{{ .text | markdownify }}</span>
-              </p>
+<section class="section2">
+    <div class="container">
+        <h1 class="section2-title">{{ $title }}</h1>
+        <div class="section2-box-container">
+            {{- range $features }}
+            <div class="section2-box-content section2-underline">
+                <p>
+                    <div class="section2-box-title">{{ .title }}</div>
+                    <div class="section2-box-text">{{ .text | markdownify }}</div>
+                </p>
             </div>
-          </div>
-        </article>
-        {{- end }}
-      </div>
+            {{- end }}
+        </div>
     </div>
-  </div>
 </section>

static/css/section2.css

@@ -0,0 +1,73 @@
+.section2 {
+    padding: 30px;
+    margin: 35px 0 0 0;
+}
+
+.section2-title {
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
+}
+
+.section2-box-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.section2-box-content {
+    height: 250px;
+    width: 30vw;
+    margin: 30px;
+    border-radius: 5px;
+}
+
+.section2-box-title {
+    margin: 15px;
+    font-size: 19px;
+}
+
+.section2-box-text {
+    margin: 30px 15px;
+}
+
+@media only screen and (max-width: 900px) {
+    .section2-box-container {
+        flex-direction: column;
+    }
+
+    .section2-box-content {
+        width: 80vw;
+    }
+}
+
+.section2-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;
+}
+
+.section2-underline:before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    right: 100%;
+    bottom: 0;
+    background: #013243;
+    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;
+}
+
+.section2-underline:hover:before, .section2-underline:focus:before, .section2-underline:active:before {
+    right: 0;
+}