Als v2 (#57)

* Rebuild

* Revert "Rebuild"

This reverts commit 09c8ee6.

* Redesign banner, text and cards

* With image, added 2up for tablet

src/assets/css/home.css

@@ -1,3 +1,15 @@
+.open-banner {
+  background: url("../img/open-source-hero-1.jpg") center center no-repeat #212121;
+  background-size: covers;
+}
+.panel-border-bottom {
+  border: none;
+  border-bottom: 1px #eee solid;
+}
+.panel-gray {
+  background-color: #eee;
+}
+
 .logo-large {
   min-width: 180px;
   min-height: 77px;

src/data/projects.yml

@@ -2,6 +2,8 @@ categories:
   - title: Web development
     url: //github.com/search?q=topic%3Aweb-development+org%3AEsri+fork%3Atrue
     text: Explore more web projects
+    anchor: webdevelopment
+    color: blue
     projects:
       - title: City of Raleigh, North Carolina
         description: The City of Raleigh uses Esri Leaflet to help citizens quickly find nearby electric vehicle charging stations, green roofs, and solar trash compactors.
@@ -45,6 +47,8 @@ categories:
   - title: Data management
     url: //github.com/search?q=topic%3Adata-management+org%3AEsri+fork%3Atrue
     text: Explore more data management projects
+    anchor: datamanagement
+    color: orange
     projects:
       - title: U.S. Census Bureau
         description: The U.S. Census measures and shares national statistic data about every single household in the United States. To make the information accessible to application developers they developed CitySDK which uses the Terraformer library to convert between Esri JSON and GeoJSON.
@@ -85,9 +89,11 @@ categories:
         searchLang: c%23
         stars: 123
         text: Learn more about StoryMaps
-  - title: Analysis
+  - title: Spatial Analysis
     url: //github.com/search?q=topic%3Aanalysis+org%3AEsri+fork%3Atrue
     text: Explore more analysis projects
+    anchor: spatialanalysis
+    color: green
     projects:
       - title: Gibbs Seed Company
         description: Gibbs Seed Company constantly monitors current agricultural conditions and appropriate seed hybrids for farmers to plant throughout their fields. Using Spark-Geo and PySAL they can analyze over 300 million planting options in under 10 minutes.
@@ -132,6 +138,8 @@ categories:
   - title: Publishing and sharing
     url: //github.com/search?q=topic%3Apublishing-sharing+org%3AEsri+fork%3Atrue
     text: Explore more publishing and sharing projects
+    anchor: publishingsharing
+    color: purple
     projects:
       - title: The Smithsonian
         description: The Smithsonian maintains vast archives of cultural heritage.  They use Story Maps to provide the rich history and spatial context of our world.

src/index.html

@@ -7,49 +7,36 @@
 {% from "layouts/_macros.html" import projectsSection %}
 {% from "layouts/_macros.html" import languageOptions %}
 
-<div class="panel panel-dark-blue">
-  <main class="grid-container">
-    <div class="column-18 first-column pre-3 post-3">
-      <div class="text-center">
-        <span class="esri-logo-reverse logo-large"></span>
+<div class="panel open-banner panel-black panel-no-border padding-leader-1 padding-trailer-2">
+  <div class="grid-container">
+      <div class="column-11 pre-1 padding-leader-2 padding-trailer-2">
+        <h1 class="font-size-6 text-white">Esri Open Source</h1>
+        <p class="text-white font-size-1">Thinking spatially, solving problems, together.</p>
+        <a href="https://github.com/esri" class="btn btn-clear-white">Explore 400+ projects on GitHub</a>
       </div>
-      <h1 id="about" class="trailer-half">Esri <a class="link-white" href="http://www.esri.com/software/open/open-source">Open Source</a></h1>
-      <p class="font-size-1">
-        At Esri we believe that spatial thinking can address the world's most difficult problems and enable communities to work together. Central to our mission is the development of advanced technology that enables you to be innovative by providing a stable data management and analysis platform that is built and extended through open&#8209;source code.
-      </p>
-      <p class="font-size-1">
-        These projects cover the entire ArcGIS platform, from user applications to data analysis and visualization. Learn more about our many open-source products and tools that you are free to use, modify and contribute to. We look forward to working together.
-      </p>
-      <p class="home-subscription-text">
-        Need an <a href="//developers.esri.com/sign-up/" class="link-light-blue">ArcGIS subscription</a>? Start developing today for <a href="//developers.arcgis.com/plans/" class="link-light-blue">free</a>.
-      </p>
-    </div>
-  </main>
+  </div>
 </div>
-<div id="wrapper">
-  <!--div id="explore" class="grid-container">
-    <div class="filter-container column-18 pre-3 post-3 leader-0 trailer-1">
-      <div class="label">
-        <em class="lable-it">Find projects by language or keyword:</em>
+
+<div class="panel panel-white panel-border-bottom">
+  <div class="column-16 pre-4 post-4">
+    <div class="block-group block-group-4-up phone-block-group-1-up tablet-block-group-2-up text-center">
+      <div class="block phone-trailer-1">
+        <h5 class="trailer-0"><a href="#webdevelopment" class="btn btn-large btn-white">Web Development</a></h5>
       </div>
-      <div class="search-select">
-        <select data-placeholder="Search/Select" class="chzn-select" multiple tabindex="6">
-          <optgroup label="Language">
-          {{ languageOptions(data.searchTags.languages) }}
-          </optgroup>
-          <optgroup label="Tags">
-          {{ languageOptions(data.searchTags.tags) }}
-          </optgroup>
-        </select>
+      <div class="block phone-trailer-1">
+        <h5 class="trailer-0"><a href="#datamanagement" class="btn btn-large btn-white">Data Management</a></h5>
+      </div>
+      <div class="block phone-trailer-1">
+        <h5 class="trailer-0"><a href="#spatialanalysis" class="btn btn-large btn-white">Spatial Analysis</a></h5>
+      </div>
+      <div class="block phone-trailer-1">
+        <h5 class="trailer-0"><a href="#publishingsharing" class="btn btn-large btn-white">Publishing and Sharing</a></h5>
       </div>
-    </div>
-  </div-->
-  <div class="grid-container">
-    <div id="content" class="column-18 pre-3 post-3">
     </div>
   </div>
 </div>
-<div id="featured" class="panel panel-no-padding panel-no-border padding-leader-2 padding-trailer-2">
+
+<div id="featured" class="panel panel-white panel-no-padding panel-no-border padding-leader-0 padding-trailer-2">
   <div class="grid-container">
     <div class="column-24">
       <!--h2 class="trailer-3">Featured projects</h2-->

src/layouts/_macros.html

@@ -1,8 +1,8 @@
 {% macro projectsSection(projectInfo) %}
-<div>
-  <h3 class="text-rule">{{ projectInfo.title }}</h3>
+<div class="padding-leader-1">
+  <h1 class="" id="{{ projectInfo.anchor }}">{{ projectInfo.title }}</h1>
   {% set project = projectInfo.projects[0] %}
-  <div class="grid-container panel panel-white">
+  <div class="grid-container panel panel-gray">
     <div class="column-8">
       <img src="{{ project.image }}" />
     </div>
@@ -16,7 +16,7 @@ <h4>{{ project.title }}</h4>
     {% for project in projectInfo.projects %}
     {% if loop.index > 1 %}
     <div class="card block leader-1">
-      <div class="card-content card-bar-green">
+      <div class="card-content card-bar-{{ projectInfo.color }}">
         <h4>{{ project.title }}</h4>
         <p class="card-last">{{ project.description }}</p>
         <p><a href="{{ project.url }}" alt="{{ project.text }}">{{ project.text }}<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="svg-icon leader-2"><path d="M7 4h5l12 12-12 12H7l12-12L7 4z"/></svg></a></p>