Feature/code demo

config.yaml

@@ -17,7 +17,7 @@ params:
     # Main hero title
     title: NumPy
     # Hero subtitle (optional)
-    subtitle: The fundamental package for scientific computing and data science with Python
+    subtitle: The fundamental package for scientific computing with Python
     # Button text
     buttontext: Get started
     # Where the main hero button links to

layouts/partials/css.html

@@ -21,5 +21,7 @@
 <!-- Google Fonts - Ubuntu -->
 <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
 <!-- Tabs CSS -->
 <link rel="stylesheet" type="text/css" href="{{ "css/tabs.css" | relURL}}" />

layouts/partials/hero-body.html

@@ -4,30 +4,37 @@
 {{- $buttonText := index $hero "buttontext" }}
 {{- $buttonLink := index $hero "buttonlink" }}
 {{- $image      := index $hero "image" }}
-<div class="hero-content">
-    <div class="container">
-        <div class="hero-container">
-            <div class="hero-logo">
-                <div>
-                    <img src="{{ printf "/images/%s" $image | relURL }}" alt="Description">
-                </div>
+<div class="hero-container">
+    <div class="hero-content">
+        <div class="flex-column">
+            <div class="flex-row">
                 <div class="hero-title">
                     {{ $title }}
+                    <img class="hero-logo" src="{{ printf "/images/%s" $image | relURL }}" alt="Description">
                 </div>
-                {{ with $subtitle }}
-                    <div class="hero-subtitle">
-                        {{ . }}
-                    </div>
-                {{ end }}
             </div>
-            <div class="code-sample">
-                <div>Numpy Sample, check it out:</div>
-                <code>
-                    def sample(some_list):
-                        print(some_list)
-                </code>
+            {{ with $subtitle }}
+                <div class="hero-subtitle">
+                    {{ . }}
+                </div>
+            {{ end }}
+            <div class="hero-cta">
+                <button class="cta-button">Download</button>
             </div>
         </div>
-    </div>
+        <div class="hero-demo">
+            <div class="demo-tutorial">
+                <div class="demo-title">Try NumPy!</div>
+                <div class="demo-copy">Give NumPy a shot. We should write some better copy here.</div>
+            </div>
+                <pre data-executable="true" data-language="python">
+%matplotlib inline
+import numpy as np
+import matplotlib.pyplot as plt
+x = np.linspace(0,10)
+plt.plot(x, np.sin(x))
+plt.plot(x, np.cos(x))
+                </pre>
+        </div>
     </div>
 </div>

layouts/partials/javascript.html

@@ -8,5 +8,16 @@
 <!-- Tabs.js -->
 <script src="{{ "js/tabs-main.js" | absURL }}"></script>
 <script src="{{ "js/tabs-utils.js" | absURL }}"></script>
+<!-- Configure and load Thebe -->
+<script type="text/x-thebe-config">
+    {
+        requestKernel: true,
+        bootstrap: true,
+        binderOptions: {
+            repo: "binder-examples/requirements"
+        },
+    }
+</script>
+<script src="https://unpkg.com/thebelab@0.4.0/lib/index.js"></script>
 <!-- app.js -->
 <script src="{{ "js/app.js" | absURL }}"></script>

layouts/partials/navbar.html

@@ -8,6 +8,11 @@
 <nav id="nav" class="navbar is-fresh is-transparent no-shadow" role="navigation" aria-label="main navigation">
   <div class="container">
     <div class="navbar-brand">
+        {{- if $navbarLogo}}
+            <a id="navbar-item" class="navbar-item" href="{{ $navbarLogo.link }}">
+                <img src="{{ printf "/images/%s" $navbarLogo.image | relURL }}" alt="" width="112" height="28">
+            </a>
+        {{- end}}
 
       {{- if $sidebarVisible }}
       <a id="navbar-item" class="navbar-item is-hidden-desktop is-hidden-tablet">

static/css/styles.css

@@ -1,36 +1,163 @@
 body {
-    font-family: 'Rubik', sans-serif;
+    font-family: 'Lato', sans-serif;
 }
 
-.hero-content {
+.hero-container {
     height: 100vh;
-    margin: 100px 0 0 0;
+    min-height: 1000px;
+    width: 100vw;
+    display: flex;
+    align-items: center;
 }
 
-.hero-container {
+.hero-content {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    justify-content: space-between;
+    width: 100vw;
+    padding-left: 7vw;
 }
 
-.hero-logo {
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.hero-headline {
     display: flex;
     flex-direction: column;
 }
 
 .hero-title {
-    font-family: 'Rubik', sans-serif;
-    font-size: 28px;
+    display: flex;
+    font-family: 'Lato', sans-serif;
+    font-weight: 900;
+    font-size: 100px;
+}
+
+.hero-logo {
+    max-height: 75px;
+    padding: 0px 0 0 15px;
 }
 
 .hero-subtitle {
-    width: 35vw;
+    font-size: 18px;
+    max-width: 550px;
+}
+
+.hero-cta {
+    padding: 30px 0;
+}
+
+.hero-demo {
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+    border-radius: 25px 0 0 25px;
+    width: 50vw;
+    height: 60vh;
+    min-height: 630px;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.demo-tutorial {
+    margin: 0 40px;
+}
+
+.demo-title {
+    font-weight: bold;
+}
+
+.demo-caret {
+    position: absolute;
+    top: 5px;
+    left: 8px;
+    font-weight: bolder;
+}
+
+#demo-code {
+    border: none;
+    height: 70%;
+    min-height: 450px;
+    width: 80%;
+    min-width: 400px;
+    max-width: 25vw;
+    margin: 45px;
+    padding: 4px 17px 50px 17px;
+    background-color: #e4f1fe;
+    border-radius: 5px;
+    font-family: 'Source Code Pro', monospace;
+}
+
+#demo-input {
+    height: 35px;
+}
+
+#demo-button-run {
+    width: 170px;
+    height: 35px;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-weight: 500;
+    color: #fff;
+    background-color: #013243;
+    border: none;
+    border-radius: 25px;
+    outline: none;
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    position: absolute;
+    top: 120px;
+}
+
+.shift-enter {
+    font-size: 0.8em;
+}
+
+#demo-output-parent {
+    position: relative;
+}
+
+#demo-output {
+    position: absolute;
+    top: 135px;
+}
+
+.cta-button {
+    width: 175px;
+    height: 45px;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-weight: 500;
+    color:#fff;
+    background-color: #013243;
+    border: none;
+    border-radius: 25px;
+    outline: none;
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
 }
 
 .code-sample {
     margin: 0 0 0 30px;
 }
 
+.background {
+    background: url('images/backgrounds/cool-background.png');
+    width: 100vw;
+    height: 100px;
+    object-fit: cover;
+}
+
 #navbar-item {
     color: #2e3131;
 }
@@ -59,4 +186,75 @@ h2 {
 
 p {
     padding: 5px;
+}
+
+@media only screen and (max-width: 1087px) {
+    .hero-content {
+        flex-direction: column;
+        padding: 0;
+        align-items: center;
+    }
+
+    .hero-demo {
+        margin-top: 30px;
+        min-width: 100vw;
+        align-items: center;
+        border-radius: 0;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .flex-column {
+        margin: 0 30px;
+    }
+
+    .hero-title {
+        font-size: 80px;
+    }
+
+    .hero-logo {
+        max-height: 60px;
+    }
+
+    .hero-subtitle {
+        font-size: 16px;
+    }
+
+    .hero-demo {
+        padding: 15px;
+        box-shadow: 15px rgba(0, 0, 0, 0.1);
+    }
+
+    .hero-demo {
+        width: 100vw;
+    }
+
+    #demo-code {
+        margin: 30px;
+        min-width: 95%;
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    .hero-title {
+        font-size: 70px;
+    }
+
+    .hero-logo {
+        max-height: 50px;
+    }
+
+    .hero-subtitle {
+        font-size: 14px;
+    }
+}
+
+@media only screen and (max-width: 320px) {
+    .hero-title {
+        font-size: 60px;
+    }
+
+    .hero-logo {
+        max-height: 40px;
+    }
 }

static/js/app.js

@@ -0,0 +1,24 @@
+$(function () {
+  if ($) {
+    let interval = setInterval(() => {
+      const exists = $('.thebelab-cell').length;
+      if (exists) {
+        $('.thebelab-cell').attr('id', 'demo-code');
+        $('#demo-code').css('position', 'relative');
+        $('#demo-code').prepend('<div class="demo-caret">&gt;</div>');
+        $('.thebelab-input').attr('id', 'demo-input');
+        $('.thebelab-button').each(function(idx) {
+          if (idx == 0) {
+            $(this).attr('id', 'demo-button-run');
+            $(this).html('Run <span class="shift-enter">(Shift + Enter)</span>');
+          } else {
+            $(this).remove();
+          }
+        });
+        $('.jp-OutputArea').parent().closest('div').attr('id', 'demo-output-parent');
+        $('.jp-OutputArea').attr('id', 'demo-output');
+        clearInterval(interval);
+      }
+    }, 250);
+  }
+});