First pass design (#91)

* First pass design * SEO edits and add email to config * Text updates on Documentation page * Text edits to project pages * Design changes to carousel for visibility of controls and mobile optimization * Design polish post-crossbrowser check
geotrellis · Aug 1, 2019 · 00cd9f0 · 00cd9f0
1 parent 07a2a16
commit 00cd9f0
Show file tree

Hide file tree

Showing 142 changed files with 30,917 additions and 78 deletions.
diff --git a/404.html b/404.html
@@ -1,24 +1,17 @@
 ---
 layout: default
+title: "404 page not found"
+page_class: page-404
+no_hero: true
+hide-c2a: true
+hide-footer: true
+permalink: /404.html
 ---
-
-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
-
-<div class="container">
-  <h1>404</h1>
-
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
-</div>
+  <div class="container text-center">
+      <h1 class="text-404">404</h1>
+      <div class="block-404">
+        <h2>Sorry about that</h2>
+        <p>The page you’re looking for doesn’t seem to exist.</p>
+        <a href="/" class="btn btn-ghost-primary">Back to home</a>
+      </div>
+  </div>
diff --git a/_config.yml b/_config.yml
@@ -13,28 +13,38 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
-title: Your awesome title
-email: your-email@example.com
+title: GeoTrellis
+email: info@azavea.com
 description: >- # this means to ignore newlines until "baseurl:"
-  Write an awesome description for your new site here. You can edit this
-  line in _config.yml. It will appear in your document head meta (for
-  Google search results) and in your feed.xml site description.
+  GeoTrellis is an open source, geographic data processing library 
+  designed to work with large geospatial raster data sets. It is written 
+  in Scala and maintained by Azavea.
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
-twitter_username: jekyllrb
-github_username:  jekyll
+twitter_username: geotrellis
+github_username:  geotrellis
 
 # Build settings
 markdown: kramdown
-theme: minima
 plugins:
   - jekyll-feed
+permalink: pretty
 
 sass:
   sass_dir: _sass
   style: compressed
 
+include:
+  - _pages
+
+collections:
+  projects:
+    output: true
+    permalink: /:collection/:slug
+
 exclude:
+  - .gitignore
+  - .vagrant/
   - deployment
   - scripts
   - .ruby-version
@@ -46,4 +56,5 @@ exclude:
   - LICENSE
   - netlify.toml
   - README.md
+  - node_modules
 
diff --git a/_data/demos.yml b/_data/demos.yml
@@ -0,0 +1,12 @@
+- title: "Supporting Sustainable Development Goals"
+  blurb: "This map shows the proportion of a country’s population that is within 2km of an all-season road in support of SDG Indicator 9.1.1."
+  image: "./assets/images/demo_sdg.jpg"
+  image-alt: "Crop of Sustainable Development Goals demo with hospitals and population highlighted."
+  demo-url: https://azavea-sdg-prototype.netlify.com
+  source-code-url: 
+- title: "Visualizing building footprint elevations"
+  blurb: "Hover on a building footprint to see its min elevation, max elevation, and the delta between them. The larger a building's elevation delta compared to all other buildings within the current viewport, the more saturated its fill."
+  image: "./assets/images/demo_building-footprint.jpg"
+  image-alt: "Screenshot of the Elected Officials and Districts tool in a laptop."
+  demo-url: https://demos.azavea.com/cooling-towers
+  source-code-url: 
diff --git a/_includes/.gitkeep b/_includes/.gitkeep
diff --git a/_includes/_home/_demos.html b/_includes/_home/_demos.html
@@ -0,0 +1,31 @@
+<section class="section section--dark">
+    <div class="section__inner">
+        <header class="section__header">
+            <h2 class="section__title">
+                {{ page.demos.title }}
+            </h2>
+            <p class="section__blurb" markdown="1">{{ page.demos.blurb }}</p>
+        </header>
+
+        <div class="card-container card-container--large">
+            {% for demo in site.data.demos %}
+                <div class="card">
+                    <div class="card__image-container">
+                        <img class="card__image" src="{{ demo.image }}" alt="{{ demo.image-alt }}">
+                    </div>
+                    <div class="card__content">
+                        <h4 class="card__title">
+                            {{ demo.title }}
+                        </h4>
+                        <p class="card__description">
+                            {{ demo.blurb || markdownify }}
+                        </p>
+                        <a href="{{ demo.demo-url }}">
+                            See demo
+                        </a>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
diff --git a/_includes/_home/_developing.html b/_includes/_home/_developing.html
@@ -0,0 +1,16 @@
+<section class="section section--developing section--dark">
+    <div class="section__inner">
+        <header class="section__header">
+            <h2 class="section__title">
+                {{ page.developing.title }}
+            </h2>
+            <p class="section__blurb" markdown="1">{{ page.developing.blurb }}</p>
+            <a href="{{ page.developing.url }}" class="button button--primary">
+                Join
+            </a>
+        </header>
+        <div class="image-container">
+            <img src="{{ page.developing.image }}" alt="{{ page.developing.image-alt }}" class="image">
+        </div>
+    </div>
+</section>
diff --git a/_includes/_home/_intro.html b/_includes/_home/_intro.html
@@ -0,0 +1,22 @@
+<section class="section section--intro">
+    <div class="section__inner">
+        <h1 class="section__callout" markdown="1">
+            {{ page.intro.blurb }}
+        </h1>
+
+        <div class="card-container">
+            {% for feature in page.intro.features %}
+                <div class="card">
+                    <div class="card__content">
+                        <h3 class="card__title">
+                            {{ feature.title }}
+                        </h3>
+                        <p class="card__description">
+                            {{ feature.blurb }}
+                        </p>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
diff --git a/_includes/_home/_projects.html b/_includes/_home/_projects.html
@@ -0,0 +1,25 @@
+<section class="section">
+    <div class="section__inner">
+        <header class="section__header">
+            <h2 class="section__title">
+                {{ page.projects.title }}
+            </h2>
+            <p class="section__blurb" markdown="1">
+                {{ page.projects.blurb }}
+            </p>
+        </header>
+
+        <div class="card-container">
+            {% for project in site.projects %}
+                <div class="card card--fancy">
+                    <figure class="card__image-container">
+                        <img src="{{ project.featured-image }}" alt="{{ project.featured-image-alt }}">
+                        <figcaption class="card__title">
+                            <a class="card__link" href="{{ project.url }}">{{ project.title }}</a>
+                        </figcaption>
+                    </figure>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
diff --git a/_includes/_home/home.html b/_includes/_home/home.html
@@ -0,0 +1,15 @@
+<!-- Intro -->
+{% include {{ page.partials_location }}_intro.html %}
+<!-- Intro -->
+
+<!-- Demos -->
+{% include {{ page.partials_location }}_demos.html %}
+<!-- Demos -->
+
+<!-- Projects -->
+{% include {{ page.partials_location }}_projects.html %}
+<!-- Projects -->
+
+<!-- Developing with GeoTrellis -->
+{% include {{ page.partials_location }}_developing.html %}
+<!-- Developing with GeoTrellis -->
diff --git a/_includes/call-to-action.html b/_includes/call-to-action.html
@@ -0,0 +1,10 @@
+<div class="call-to-action" style="background-image: url(./assets/images/cta-background.jpg);">
+    <div class="call-to-action__inner">
+        <p class="call-to-action__blurb">
+            {{ include.cta-blurb }}
+        </p>
+        <a href="mailto:{{ site.email }}" class="call-to-action__button button button--secondary">
+            <i class="fas fa-envelope button__icon"></i> Contact us
+        </a>
+    </div>
+</div>
diff --git a/_includes/call-to-action_secondary.html b/_includes/call-to-action_secondary.html
@@ -0,0 +1,27 @@
+<div class="call-to-action call-to-action--secondary">
+    <div class="call-to-action__inner">
+        <div class="call-to-action__column">
+            <h3 class="call-to-action__title">
+                Need help getting started?
+            </h3>
+            <p class="call-to-action__blurb">
+                Join us in our Gitter channel.
+            </p>
+            <a href="https://gitter.im/geotrellis/geotrellis" class="call-to-action__button button button--outline">
+                Join
+            </a>
+        </div>
+
+        <div class="call-to-action__column">
+            <h3 class="call-to-action__title">
+                Looking for a custom solution?
+            </h3>
+            <p class="call-to-action__blurb">
+                We have nearly ten years of experience helping organizations accomplish their goals.
+            </p>
+            <a href="mailto:{{ site.email }}" class="call-to-action__button button button--outline">
+                Contact us
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,28 @@
+<footer class="footer">
+    <div class="footer__inner">
+        <a href="/"><img class="footer__brand" src="{{ site.baseurl }}/assets/images/geotrellis-logo-darkbg.svg" alt="Geotrellis logo"></a>
+        <nav>
+            <a role="menuitem" href="{{ site.url }}/documentation">
+                Documentation
+            </a>
+            <a role="menuitem" href="https://github.com/geotrellis/geotrellis">
+                Github
+            </a>
+        </nav>
+        <small class="footer__copyright">
+                © 2016 - {{ 'now' | date: "%Y" }} <a href="www.azavea.com">Azavea</a> Inc., using technology to inform research for civic and social impact. All rights reserved.
+        </small>
+        <ul class="footer__bottom">
+            <li>
+                <a href="https://azavea.com/terms-of-use/">
+                    Terms of Use
+                </a>
+            </li>
+            <li>
+                <a href="https://azavea.com/privacy-policy/">
+                    Privacy Policy
+                </a>
+            </li>
+        </ul>
+    </div>
+</footer>
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-WVKTSL4');</script>
+    <!-- End Google Tag Manager -->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- SEO -->
+    <title>{{ site.title }}{% if page.title %} - {{ page.title }}{% endif %}</title>
+    <meta name="description" content="{% if page.seo_description %}{{ page.seo_description }}{% endif %}">
+    <meta name="Copyright" content="Copyright © 2016 - {{ 'now' | date: '%Y' }} Azavea. All Rights Reserved.">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/assets/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/assets/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/favicon/favicon-16x16.png">
+    <link rel="manifest" href="{{ site.baseurl }}/assets/favicon/site.webmanifest">
+    <link rel="mask-icon" href="{{ site.baseurl }}/assets/favicon/safari-pinned-tab.svg" color="#3174a3">
+    <meta name="theme-color" content="#ffffff">
+
+    <!-- FontAwesome -->
+    <script src="https://kit.fontawesome.com/fc9b38bfed.js"></script>
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,600,600i,700,700i">
+    <link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.css' rel='stylesheet' />
+    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
+</head>