Moves shell below key features

config.yaml

@@ -31,7 +31,11 @@ params:
     image: logos/numpy.svg
   # Customizable navbar. For a dropdown, add a "sublinks" list.
   news:
-    title: NumPy News
+    title: NumPy v1.18.0
+    content: The C-API for numpy.random defined and documented - Basic infrastructure for linking with 64-bit BLAS and LAPACK - Improved documentation
+
+  shell:
+    title: placeholder
   section3:
     title: CASE STUDIES
     features:
@@ -51,7 +55,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,12 @@
     {{ partial "news.html" . }}
     {{ end }}
 
-    {{ if .Site.Params.section2 }}
-    {{ partial "section2.html" . }}
+    {{ if .Site.Params.keyfeatures }}
+    {{ partial "keyfeatures.html" . }}
+    {{ end }}
+
+    {{ if .Site.Params.shell }}
+    {{ partial "shell.html" . }}
     {{ end }}
 
     {{ if .Site.Params.tabs }}
@@ -37,4 +41,4 @@
     {{ if .Site.Params.sidebar }}
     {{ partial "sidebar.html" . }}
     {{ end }}
-{{ end }}
+{{ end }}

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/hero-body.html

@@ -22,25 +22,5 @@
                 </div>
             </div>
         </div>
-        <div class="hero-right">
-            <div class="numpy-shell-canvas">
-                <div class="numpy-shell-container">
-                    {{ partial "shell-content.html" . }}
-                    <!-- Interactive Shell -->
-                    <div class="fake-shell" id="demo-code">
-                        <div class="demo-caret" aria-label="interactive shell prompt">&gt;</div>
-                        <button class="shell-enable-button shell-button" onclick="loadShell();" aria-label="Enables the interactive tutorial shell">
-                            Enable
-                            <div class="loader-container">
-                                <div id="shell-loader" class="loader"></div>
-                            </div>
-                        </button>
-                    </div>
-                    <div class="real-shell" id="numpy-shell" style="display: none;">
-                        <pre id="demo-code" data-executable="true" data-language="python" style="white-space: pre-line;">import numpy as np</pre>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
 </div>

layouts/partials/hero.html

@@ -2,5 +2,4 @@
   {{ partial "navbar.html" . }}
   {{ partial "navbar-clone.html" . }}
   {{ partial "hero-body.html" . }}
-  {{ partial "hero-footer.html" . }}
 </section>

layouts/partials/keyfeatures.html

@@ -0,0 +1,21 @@
+{{- $keyfeatures := .Site.Params.keyfeatures }}
+{{- $title    := index $keyfeatures "title" }}
+{{- $features := index $keyfeatures "features" }}
+
+<section class="keyfeatures">
+    <div class="container">
+        <h1 class="keyfeatures-header">
+            {{ $title }}
+        </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/news.html

@@ -1,7 +1,8 @@
 {{- $news       := .Site.Params.news }}
 {{- $title      := index $news "title" }}
+{{- $content      := index $news "content" }}
 
 <div class="news-container">
     <div class="news-title">{{ $title }}</div>
-    <div class="news-content">NumPy News goes here</div>
+    <div class="news-content">{{ $content }}</div>
 </div>

layouts/partials/shell.html

@@ -0,0 +1,22 @@
+<div class="hero-right">
+    <div class="numpy-shell-canvas">
+        <div class="numpy-shell-container">
+            <div class="flex-column shell-title-container">
+                {{ partial "shell-content.html" . }}
+            </div>
+            <!-- Interactive Shell -->
+            <div class="fake-shell" id="demo-code">
+                <div class="demo-caret" aria-label="interactive shell prompt">&gt;</div>
+                <button class="shell-enable-button shell-button" onclick="loadShell();" aria-label="Enables the interactive tutorial shell">
+                    Enable
+                    <div class="loader-container">
+                        <div id="shell-loader" class="loader"></div>
+                    </div>
+                </button>
+            </div>
+            <div class="real-shell" id="numpy-shell" style="display: none;">
+                <pre id="demo-code" data-executable="true" data-language="python" style="white-space: pre-line;">import numpy as np</pre>
+            </div>
+        </div>
+    </div>
+</div>

static/css/keyfeatures.css

@@ -0,0 +1,117 @@
+.keyfeatures {
+    margin: 50px 0;
+}
+
+.keyfeatures .container {
+    display: flex;
+    flex-direction: column;
+}
+
+.keyfeatures-header {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    letter-spacing: 1.5px;
+    font-size: 27px;
+}
+
+.keyfeatures-box-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.keyfeatures-box-content {
+    height: 175px;
+    min-width: 275px;
+    width: 325px;
+    margin: 30px 30px 30px 0;
+    border-radius: 3px;
+}
+
+.keyfeatures-box-title {
+    margin: 15px;
+    font-size: 16px;
+    text-transform: uppercase;
+}
+
+.keyfeatures-box-text > a {
+    color: #4D77CF;
+}
+
+.keyfeatures-box-text {
+    margin: 30px 15px;
+    font-size: 14px;
+}
+
+.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) {
+    .keyfeatures .container {
+        align-items: center;
+        justify-content: center;
+    }
+
+    .keyfeatures-box-container {
+        justify-content: center;
+    }
+}
+
+@media only screen and (max-width: 1090px) {
+    .keyfeatures .container {
+        margin: 0 6vw;
+    }
+}
+
+@media only screen and (max-width: 525px) {
+    .keyfeatures-header {
+        flex-direction: column;
+    }
+}
+
+@media only screen and (max-width: 425px) {
+    .keyfeatures .container {
+        align-items: center;
+        justify-content: center;
+        margin: 0 10%;
+    }
+
+    .keyfeatures-box-content {
+        margin: 30px;
+    }
+}
+
+.keyfeatures-underline {
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    /* Black, with 10% opacity */
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.keyfeatures-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;
+}
+
+.keyfeatures-underline:hover:before, .keyfeatures-underline:focus:before, .keyfeatures-underline:active:before {
+    right: 0;
+}

static/css/news.css

@@ -1,16 +1,39 @@
 .news-container {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     align-items: center;
     width: 100vw;
-    min-height: 100px;
+    min-height: 45px;
+    background-color: #013243;
+    color: white;
+    white-space: nowrap;
 }
 
 .news-title {
     display: flex;
-    flex-direction: column;
-    width: 100%;
-    align-items: center;
     letter-spacing: 1.5px;
     font-size: 27px;
-}
+    font-weight: bold;
+    margin: 10px;
+}
+
+@media only screen and (max-width: 1300px) {
+    .news-container {
+        white-space: unset;
+    }
+
+    .news-title {
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 1087px) {
+    .news-container {
+        flex-direction: column;
+        padding: 30px;
+    }
+
+    .news-content {
+        text-align: center;
+    }
+}