Merge pull request #363 from jwcooper/new-design

Updated Design - header, mobile menu and landing page

_includes/head.html

@@ -11,4 +11,5 @@
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <script src="{{ "/assets/javascript/header_mobile.js" | relative_url }}"></script>
 </head>

_includes/header.html

@@ -1,4 +1,16 @@
 <header id="site-header">
+  {% assign current = page.url | downcase | split: '/' %}
+  <div class="top-navigation">
+    <div>
+      <div class="navigation">
+        <a {% if current[1] == 'contributing' %}class='active'{% endif %} href="{{ "/contributing" | relative_url  }}">Contributing</a>
+        <a href="https://blog.adafruit.com/category/circuitpython">News</a>
+        <a {% if current[1] == 'awesome' %}class='active'{% endif %} href="{{ "/awesome" | relative_url  }}">Awesome</a>
+        <a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a>
+        <a href="https://adafru.it/discord"><i class="fab fa-discord"></i></a>
+      </div>
+    </div>
+  </div>
   <div class="wrapper">
     <div class="content">
       <div class="site-brand">
@@ -12,17 +24,14 @@
                                          height="60" width="136">
           </a>
         </div>
-      </div>
+        <div class="site-navigation">
-
+          <a {% if current[1] == 'downloads' %}class='active'{% endif %} href="{{ "/downloads" | relative_url  }}">Downloads</a>
-      <div class="site-navigation">
+          <a {% if current[1] == 'libraries' %}class='active'{% endif %} href="{{ "/libraries" | relative_url  }}">Libraries</a>
-        <a href="{{ "/downloads" | relative_url  }}">DOWNLOADS</a>
+          <a {% if current[1] == 'blinka' %}class='active'{% endif %} href="{{ "/blinka" | relative_url  }}">Blinka</a>
-        <a href="{{ "/libraries" | relative_url  }}">LIBRARIES</a>
+        </div>
-        <a href="{{ "/contributing" | relative_url  }}">CONTRIBUTING</a>
+        <div class="get-started">
-        <a href="{{ "/blinka" | relative_url  }}">BLINKA</a>
+          <a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a>
-        <a href="https://blog.adafruit.com/category/circuitpython">NEWS</a>
+        </div>
-        <a href="https://adafru.it/discord">DISCORD</a>
-        <a href="{{ "/awesome" | relative_url  }}">AWESOME</a>
-        <a href="https://learn.adafruit.com/welcome-to-circuitpython">HELP</a>
       </div>
     </div>
   </div>

_includes/header_mobile.html

@@ -0,0 +1,44 @@
+<header id="mobile-header">
+  <div class="header-contents">
+    <div class="site-logo">
+      <a href="{{ "/" | relative_url  }}">
+        <img src="{{ "/assets/images/logo.png" | relative_url }}"
+              srcset="{{ "/assets/images/logo.png" | relative_url }} 1x,
+                      {{ "/assets/images/logo@2x.png" | relative_url }} 2x,
+                      {{ "/assets/images/logo@3x.png" | relative_url }} 3x"
+                                      alt="CircuitPython Logo"
+                                      height="60" width="136">
+      </a>
+    </div>
+    <div id="mobile-menu">
+      <div class="menu-toggle">
+        <a href="#" id="mobile-menu-button">
+          <span class="sr-only">Open Mobile Menu</span>
+          <i class="fa fa-bars" aria-hidden='true'></i>
+        </a>
+      </div>
+    </div>
+    <div class="clear"></div>
+    <nav id="mobile-menu-contents" role="navigation" class="hidden"
+      aria-expanded='false' aria-label='Mobile Menu'>
+      <ul>
+        <li><a {% if current[1] == 'downloads' %}class='active'{% endif %}
+                                  href="{{ "/downloads" | relative_url  }}">Downloads</a></li>
+        <li><a {% if current[1] == 'libraries' %}class='active'{% endif %}
+                                  href="{{ "/libraries" | relative_url  }}">Libraries</a></li>
+        <li><a {% if current[1] == 'blinka' %}class='active'{% endif %}
+                                  href="{{ "/blinka" | relative_url  }}">Blinka</a></li>
+        <li><a {% if current[1] == 'contributing' %}class='active'{% endif %}
+                                  href="{{ "/contributing" | relative_url  }}">Contributing</a></li>
+        <li><a href="https://blog.adafruit.com/category/circuitpython">News</a></li>
+        <li><a {% if current[1] == 'awesome' %}class='active'{% endif %}
+                                  href="{{ "/awesome" | relative_url  }}">Awesome</a></li>
+        <li><a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a></li>
+        <li><a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a></li>
+        <li><a href="https://adafru.it/discord">Discord</a></li>
+      </ul>
+    </nav>
+  </div>
+  <div class="bottom-bar"></div>
+</header>
+

_layouts/contributing.html

@@ -28,16 +28,16 @@ layout: default
     {% assign current = page.url | downcase | split: '/' %}
     <ul class='tabbed-navigation'>
       <li>
-        <a href="/contributing" {% if current[3] ==
+        <a href="/contributing" {% if current[2] ==
         nil %}class='active'{% endif %}>Pull Requests</a>
       </li>
       <li>
-        <a href="/contributing/open-issues" {% if current[3] ==
+        <a href="/contributing/open-issues" {% if current[2] ==
            'open-issues' %}class='active'{% endif %}>Open Issues</a>
       </li>
       <li>
         <a href="/contributing/library-infrastructure-issues" {% if
-           current[3] ==
+           current[2] ==
         'library-infrastructure-issues' %}class='active'{% endif %}>Library Infrastructure Issues</a>
       </li>
     </ul>

_layouts/default.html

@@ -5,6 +5,7 @@
 
   <body>
     {% include header.html %}
+    {% include header_mobile.html %}
     <div class="wrapper">
       {{ content }}
     </div>

assets/css/main.scss

@@ -7,9 +7,11 @@
 @import 'base/variables';
 @import 'base/typography';
 @import 'base/base';
+@import 'base/mixins';
 
 @import 'layout/grid';
 @import 'layout/header';
+@import 'layout/header_mobile';
 
 @import 'pages/home';
 @import 'pages/downloads';

assets/javascript/header_mobile.js

@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+  document.getElementById('mobile-menu-button').addEventListener('click', handleMobileToggle);
+});
+
+function handleMobileToggle(event) {
+  event.preventDefault();
+
+  var menuContainer = document.getElementById('mobile-menu-contents');
+
+  menuContainer.classList.toggle('hidden');
+
+  var menuIcon = document.querySelector('#mobile-menu-button > i');
+  if (menuContainer.classList.contains('hidden')) {
+    menuIcon.classList.replace('fa-times', 'fa-bars');
+  } else {
+    menuIcon.classList.replace('fa-bars', 'fa-times');
+  }
+}

assets/sass/base/_mixins.scss

@@ -0,0 +1,26 @@
+@mixin readable-content {
+  display: grid;
+  grid-template-columns:
+    [full-start] minmax(15px, 1fr)
+    [main-start] minmax(0, 1300px) [main-end]
+    minmax(15px, 1fr) [full-end];
+
+  &> * {
+    grid-column: main;
+  }
+}
+
+@mixin rounded-button {
+  display: inline-block;
+  font-size: 18px;
+  padding: 7px 50px 7px 50px;
+  color: #fff;
+  font-weight: 500;
+  border-radius: 50px;
+  border: 3px solid #fff;
+
+  &:hover {
+    color: #000;
+    background-color: #fff;
+  }
+}

assets/sass/layout/_header.scss

@@ -1,6 +1,6 @@
 #site-header {
   display: grid;
-  grid-template-rows: 1fr 3px;
+  grid-template-rows: 40px 1fr 3px;
   grid-column: full;
 
   &> * {
@@ -23,20 +23,43 @@
 
   .content {
     display: grid;
-    grid-template-columns: 2fr 1fr;
     padding-bottom: 20px;
   }
+
+  a.active {
+    color: #fff;
+  }
+}
+
+.top-navigation {
+  background-color: #151515;
+  padding-top: 10px;
+
+  .navigation {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+
+    a {
+      margin-left: 40px;
+      font-size: 16px;
+      color: #999999;
+
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
 }
 
 .site-brand {
+  width: 100%;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
 }
 
 .site-logo {
-  position: absolute;
-  top: 20px;
 }
 
 .site-banner {
@@ -48,38 +71,35 @@
   }
 }
 
-.site-navigation {
+.get-started {
-  display:flex;
+  margin-left: auto;
-  align-items: flex-end;
+  padding-bottom: 10px;
-  justify-content: flex-end;
 
   a {
-    color: #fff;
+    @include rounded-button;
-    margin-left: 10px;
+  }
+}
+
+.site-navigation {
+  padding: 0 0 10px 0;
+  font-size: 18px;
+
+  a {
+    margin-left: 40px;
+    color: #999999;
+
+    &:hover {
+      color: #fff;
+    }
   }
 }
 
 .bottom-bar {
-  background-color: #e90e8b;
+  background-color: #e71c8c;
 }
 
 @media (max-width: $screen-xs-max) {
   #site-header {
-    .wrapper {
+    display: none !important;
-      height: auto;
-    }
-
-    .content {
-      padding-bottom: 10px;
-    }
-  }
-
-  .site-navigation {
-    margin-top: 10px;
-    flex-wrap: wrap;
-
-    a {
-      padding: 2px;
-    }
   }
 }

assets/sass/layout/_header_mobile.scss

@@ -0,0 +1,68 @@
+#mobile-header {
+  background-color: #333;
+
+  .header-contents {
+    padding: 9px 5px 5px 8px;
+  }
+
+  /* screen reader only */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+  }
+
+  .site-logo {
+    float: left;
+  }
+
+  #mobile-menu {
+    float: right;
+
+    .menu-toggle {
+      font-size: 34px;
+      padding: 10px 20px 10px 0;
+
+      a {
+        color: #fff;
+        outline: none;
+      }
+    }
+  }
+
+  #mobile-menu-contents {
+    &.hidden {
+      display: none;
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 20px;
+      font-size: 20px;
+
+      li {
+        padding: 5px 0 5px 0;
+
+        a {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .bottom-bar {
+    height: 3px;
+  }
+}
+
+@media (min-width: $screen-xs-max) {
+  #mobile-header {
+    display: none !important;
+  }
+}
+

assets/sass/pages/_home.scss

@@ -1,15 +1,116 @@
 #home-page {
-  text-align: center;
+  @include readable-content;
+  grid-row-grap: 1em;
+  background-color: #fff;
 
-  hr {
+  .headline-banner {
-    width: 75%;
+    grid-column: full;
-    margin: 40px auto 40px auto;
+
-    background-color: #cecece;
+    background-color: #fff;
-    border: none;
+    position: relative;
-    height: 1px;
+    overflow: hidden;
+    width: 100%;
+    height: 800px;
+
+    @media (max-width: $screen-sm) {
+      margin-bottom: 30px;
+    }
+
+    .image-headline {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+
+    .text {
+      color: white;
+      font-weight: 400;
+
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+
+      @include readable-content;
+      grid-template-rows: 1fr 1fr 1fr 8fr;
+
+      &> * {
+        grid-column: main;
+      }
+
+      .title, .tagline {
+        span {
+          line-height: 1.40;
+          margin-left: 16px;
+          padding: 5px 0;
+          opacity: 0.9;
+
+          box-decoration-break: clone;
+          -webkit-box-decoration-break: clone;
+        }
+      }
+
+      .title {
+        width: 75%;
+        grid-column: 2;
+        grid-row: 2;
+        font-size: 64px;
+        font-weight: bold;
+        margin-bottom: 15px;
+      }
+
+      .tagline {
+        width: 40%;
+        grid-column: 2;
+        grid-row: 3;
+        font-size: 24px;
+      }
+    }
+
+    &.supported-section {
+      height: 680px;
+      text-align: center;
+
+      .text {
+        grid-template-rows: 4fr 1fr 1fr 4fr;
+
+        .title, .tagline {
+          width: 100%;
+        }
+
+      }
+    }
+  }
+
+  .banner {
+    grid-column: full;
+    text-align: center;
+    padding: 20px 55px 20px 55px;
+    margin-bottom: 5px;
+
+    h2 {
+      color: #fff;
+    }
+
+    &.purple {
+      background-color: #63338f;
+    }
+
+    p {
+      font-size: 28px;
+      color: #fff;
+    }
   }
 
   .content {
+    text-align: center;
+    margin: 100px 0 100px 0;
+
+    &.short {
+      margin: 50px 0 50px 0;
+    }
+
     h2 {
       width: 75%;
       margin: 20px auto;
@@ -17,7 +118,7 @@
     }
 
     p {
-      font-size: 20px;
+      font-size: 24px;
       width: 75%;
       margin: 0 auto;
       padding-bottom: 20px;
@@ -31,10 +132,24 @@
       margin-bottom: 20px;
 
       .item {
+        h3 {
+          font-size: 24px;
+        }
 
+        p {
+          font-size: 18px;
+        }
       }
     }
   }
+
+  a.action-link {
+    @include rounded-button;
+
+    &.include-gap {
+      margin-top: 50px;
+    }
+  }
 }
 
 @media only screen and (max-width: $screen-xs-max) {
@@ -44,11 +159,56 @@
         [full-start] minmax(0em, 1fr)
         [main-start] minmax(0, 80em) [main-end]
         minmax(0em, 1fr) [full-end];
+
+    .headline-banner {
+      height: 400px;
+      margin-bottom: 0;
+
+      .text {
+        .title {
+          text-align: center;
+          font-size: 26px;
+          width: 100%;
+
+          span {
+            margin-left: 0;
+          }
+        }
+
+        .tagline {
+          text-align: center;
+          width: 100%;
+
+          span {
+            margin-left: 0;
+          }
+        }
+
+      }
+
+      .img-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+      }
+
+      img.pinball {
+        object-fit: fill;
+      }
+
+      &.supported-section {
+        height: 400px;
+      }
+    }
+
     .content {
-      background-color: #fff;
       border: none;
       border-radius: 0;
       padding: 40px 10px 0 10px;
+      margin: 20px 0 20px 0 !important;
       .home-table {
         grid-template-columns: repeat(2, 1fr);
         grid-row-gap: 0em;

index.html

@@ -2,66 +2,48 @@
 layout: home
 ---
 
-<div id="home-page" class="common-layout">
+<div id="home-page">
+  <div class="headline-banner">
+    <div class="img-overlay"></div>
+      <img class="image-headline" alt="hero image"
+                                  src="{{ "assets/images/CircuitPython_Hero.jpg" |
+                                  relative_url }}"
+          />
+    <div class="text">
+      <div class="title"><span>The easiest way to program microcontrollers</span></div>
+      <div class="tagline">
+        <span>
+          CircuitPython is a programming language designed to simplify
+          experimenting and learning to code on low-cost microcontroller
+          boards.
+        </span>
+      </div>
+    </div>
+  </div>
+  <div class="purple banner">
+    <p>
+      With CircuitPython, there are no upfront desktop downloads needed. Once
+      you get your board set up, open any text editor, and start editing code.
+      It's that simple.
+    </p>
+  </div>
+
+  <div class="headline-banner supported-section">
+    <img class="image-headline" alt="hero image"
+                                src="{{ "assets/images/CircuitPython_Boards.jpg" |
+                                relative_url }}"
+         />
+    <div class="text">
+      <div class="title"><span>Supported by all of the best microcontrollers</span></div>
+      <div class="tagline">
+        <span>
+          <a href="/downloads" class="action-link">See them all</a>
+        </span>
+      </div>
+    </div>
+  </div>
+
   <div class="content">
-    <section>
-      <img class="responsive" src="{{ "/assets/images/blinka-computer.png" | relative_url }}" srcset="{{ "/assets/images/blinka-computer.png" | relative_url }} 1x,
-                                   {{ "/assets/images/blinka-computer@2x.png" | relative_url }} 2x,
-                                   {{ "/assets/images/blinka-computer@3x.png" | relative_url }} 3x" alt="Blinka at a computer">
-      <h2>The easiest way to program microcontrollers</h2>
-      <p>
-        CircuitPython is a programming language designed to simplify experimenting
-        and learning to code on low-cost microcontroller boards. It makes getting
-        started easier than ever with no upfront desktop downloads needed. Once you
-        get your board set up, open any text editor, and get started editing code.
-        It's that simple.
-      </p>
-      <p>
-        <a href="https://learn.adafruit.com/welcome-to-circuitpython">Get started with CircuitPython &gt;</a>
-      </p>
-    </section>
-    <hr />
-    <section>
-      <img class="responsive" src="{{ "/assets/images/python.png" | relative_url }}"
-           srcset="{{ "/assets/images/python.png" | relative_url }} 1x,
-                   {{ "/assets/images/python@2x.png" | relative_url }} 2x,
-                   {{ "/assets/images/python@3x.png" | relative_url }} 3x"  alt="Python Logo">
-      <h2>Learn Python with CircuitPython</h2>
-      <p>
-        <a href="https://www.python.org/">Python</a> is the fastest growing programming language.
-        It's taught in schools and universities. It's a high-level programming language which
-        means it's designed to be easier to read, write and maintain. It supports modules and
-        packages which means it's easy to reuse your code for other projects. It has
-        a built in interpreter which means there are no extra steps, like compiling,
-        to get your code to work. And of course, <a href="https://www.python.org/">Python</a>
-        is Open Source Software which means it's free for anyone to use, modify or improve upon.
-      </p>
-      <p>
-        CircuitPython adds hardware support to the core Python language. If you
-        already have Python knowledge, you can easily apply that to using
-        CircuitPython. If you have no previous experience, it's really simple to
-        get started! Learning CircuitPython is learning Python.
-      </p>
-    </section>
-    <hr />
-    <section>
-      <img class="responsive" src="{{ "/assets/images/microcontrollers.png" | relative_url }}"
-           srcset="{{ "/assets/images/microcontrollers.png" | relative_url }} 1x,
-                   {{ "/assets/images/microcontrollers@2x.png" | relative_url }} 2x,
-                   {{ "/assets/images/microcontrollers@3x.png" | relative_url }} 3x"  alt="Image of various microcontrollers">
-      <h2>Supported by your favorite microcontroller</h2>
-      <p>
-        CircuitPython is designed to run on microcontroller boards. A
-        microcontroller board is a circuit board with a microcontroller chip that's
-        essentially an itty-bitty all-in-one computer. CircuitPython is easy to
-        use because all you need is that little board, a USB cable, and a computer
-        with a USB connection.
-      </p>
-      <p>
-        <a href="/downloads">Search for a compatible board</a>
-      </p>
-    </section>
-    <hr />
     <section>
       <h2>More reasons to use CircuitPython</h2>
       <div class="home-table">
@@ -108,30 +90,77 @@ layout: home
         </div>
       </div>
     </section>
-    <hr />
+  </div>
+
+  <div class="headline-banner supported-section">
+    <img class="image-headline pinball" alt="hero image"
+                                src="{{ "assets/images/CircuitPython_Pinball.jpg" |
+                                relative_url }}"
+         />
+    <div class="text">
+      <div class="title"><span>The simple way to build something amazing</span></div>
+    </div>
+  </div>
+
+  <div class="content">
     <section>
-      <h2>Just the beginning...</h2>
+      <img class="responsive" src="{{ "/assets/images/python.png" | relative_url }}"
+           srcset="{{ "/assets/images/python.png" | relative_url }} 1x,
+                   {{ "/assets/images/python@2x.png" | relative_url }} 2x,
+                   {{ "/assets/images/python@3x.png" | relative_url }} 3x"  alt="Python Logo">
+      <h2>CircuitPython is based on Python</h2>
       <p>
-        CircuitPython continues to evolve, and is constantly being updated. We
+        Python is the fastest growing programming language. It's taught in schools
-        welcome and encourage feedback from the community, and we incorporate this
+        and universities. It's a high-level programming language which means it's
-        into how we are developing CircuitPython. That's the core of the open source
+        designed to be easier to read, write and maintain. It supports modules and
-        concept. This makes CircuitPython better for you and everyone who uses it!
+        packages which means it's easy to reuse your code for other projects. It
+        has a built in interpreter which means there are no extra steps, like
+        compiling, to get your code to work. And of course, Python is Open Source
+        Software which means it's free for anyone to use, modify or improve upon.
       </p>
       <p>
-        <a href="https://learn.adafruit.com/welcome-to-circuitpython">Get started with CircuitPython &gt;</a>
+        CircuitPython adds hardware support to all of these amazing features. If you
+        already have Python knowledge, you can easily apply that to using CircuitPython.
+        If you have no previous experience, it's really simple to get started!
       </p>
-      <hr />
+    </section>
+  </div>
+
+  <div class="purple banner">
+    <div class="content short">
+    <h2>Just the beginning...</h2>
+    <p>
+      CircuitPython continues to evolve, and is constantly being updated. We
+      welcome and encourage feedback from the community, and we incorporate this
+      into how we are developing CircuitPython. That's the core of the open source
+      concept. This makes CircuitPython better for you and everyone who uses it!
+    </p>
+    <p>
+      <a href="https://learn.adafruit.com/welcome-to-circuitpython"
+         class="action-link include-gap">Get Started</a>
+    </p>
+    </div>
+  </div>
+
+  <div class="content">
+    <section>
       <h2>Thanks</h2>
       <p>
-        CircuitPython wouldn't exist without the awesome work of <a href="https://micropython.org">Damien George and the MicroPython community</a>. They did the hard work to reimplement Python on microcontrollers and continue to push the boundaries of what is possible.
+         CircuitPython wouldn't exist without the awesome work of
+         <a href="https://micropython.org">Damien George and the MicroPython community</a>.
+         They did the hard work to reimplement Python on microcontrollers and
+         continue to push the boundaries of what is possible.
       </p>
       <p>
-        Thank you to <a href="https://adafruit.com">Adafruit</a> for continuing to support
+        Thank you to <a href="https://www.adafruit.com">Adafruit</a> for
-        CircuitPython's beginner-focused development.
+        continuing to support CircuitPython's beginner-focused development.
       </p>
       <p>
-        Lastly, thank you to the CircuitPython community members who have spent time testing, triaging, fixing and enhancing CircuitPython, its libraries and its documentation. Together we're all making something incredible.
+        Lastly, thank you to the CircuitPython community members who have spent
+        time testing, triaging, fixing and enhancing CircuitPython, its libraries
+        and its documentation. Together we're all making something incredible.
       </p>
     </section>
   </div>
 </div>
+