Revamp website with new home page

Merges #7
Closes #4 (permalinks to headers)
Closes #5 (creates new favicon)
Closes #6 (centers landing page)

Revamps or creates homepage /about /explore /studies /software /media /hnep.
Adopt Jekyll for templating pages
/repurpose and /disease-genes imported verbatim from previous version

.gitignore

@@ -1,2 +1,6 @@
+_site
+.sass-cache
+.jekyll-metadata
+
 ### Linux ###
 *~

Gemfile

@@ -0,0 +1,30 @@
+source "https://rubygems.org"
+
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 3.8.5"
+
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.0"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.6"
+end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.0" if Gem.win_platform?
+

Gemfile.lock

@@ -0,0 +1,74 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.6.0)
+      public_suffix (>= 2.0.2, < 4.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.11.1)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.5)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-feed (0.12.1)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.3)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    minima (2.5.0)
+      jekyll (~> 3.5)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.1.0)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    rouge (3.4.1)
+    ruby_dep (1.5.0)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 3.8.5)
+  jekyll-feed (~> 0.6)
+  minima (~> 2.0)
+  tzinfo-data
+
+BUNDLED WITH
+   2.0.2

_includes/footer.html

@@ -0,0 +1,9 @@
+<footer>
+  <a href="../about#acknowledgements">Greene Lab, Baranzini Lab, et al</a><br />
+  <a
+    href="https://creativecommons.org/licenses/by/4.0/"
+    title="Creative Commons Attribution 4.0 International"
+    ><i class="fab fa-creative-commons-by" style="margin-right: 5px"></i>CC BY
+    4.0</a
+  >
+</footer>

_includes/header.html

@@ -0,0 +1,6 @@
+<header data-deep>
+  <a href=".." class="logo_button">
+    <img src="../logo.svg" />
+  </a>
+  {% include nav.html %}
+</header>

_includes/nav.html

@@ -0,0 +1,42 @@
+<nav>
+  <a
+    href="{% if page.topLevel != true %}../{% endif %}about"
+    class="nav_button"
+    title="Learn more about the network"
+    data-active="{% if page.category == 'about' %}true{% endif %}"
+    >About{% if page.icons %}<i class="fas fa-book-open fa-sm" data-right></i>{%
+    endif %}</a
+  >
+  <a
+    href="{% if page.topLevel != true %}../{% endif %}explore"
+    class="nav_button"
+    title="View, search, and play with the network"
+    data-active="{% if page.category == 'explore' %}true{% endif %}"
+    >Explore{% if page.icons %}<i class="fas fa-search fa-sm" data-right></i>{%
+    endif %}</a
+  >
+  <a
+    href="{% if page.topLevel != true %}../{% endif %}studies"
+    class="nav_button"
+    title="Analyses and papers related to the network"
+    data-active="{% if page.category == 'studies' %}true{% endif %}"
+    >Studies{% if page.icons %}<i class="fas fa-microscope fa-sm" data-right></i
+    >{% endif %}</a
+  >
+  <a
+    href="{% if page.topLevel != true %}../{% endif %}software"
+    class="nav_button"
+    title="Tools used to make the network"
+    data-active="{% if page.category == 'software' %}true{% endif %}"
+    >Software{% if page.icons %}<i class="fas fa-code fa-sm" data-right></i>{%
+    endif %}</a
+  >
+  <a
+    href="{% if page.topLevel != true %}../{% endif %}media"
+    class="nav_button"
+    title="Publications, articles, and other related media"
+    data-active="{% if page.category == 'media' %}true{% endif %}"
+    >Media{% if page.icons %}<i class="fas fa-feather-alt fa-sm" data-right></i
+    >{% endif %}</a
+  >
+</nav>

_layouts/default.html

@@ -0,0 +1,67 @@
+<html>
+  <head>
+    <!-- metatags - https://metatags.io/ -->
+    <title>Hetionet - {{ page.title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="title"
+      property="og:title"
+      content="Hetionet - {{ page.title }}"
+    />
+    <meta property="og:type" content="website" />
+
+    <!-- global styles -->
+    <link href="../global.css" rel="stylesheet" />
+
+    <!-- page styles -->
+    <link href="page.css" rel="stylesheet" />
+
+    <!-- scripts -->
+    <script src="../scripts.js"></script>
+  </head>
+  <body>
+    {% include header.html %}
+    <main>
+      <section class="title_section">
+        <div class="section">
+          <h2>
+            {{ page.title }}<i class="{{ page.icon }} fa-sm" data-right></i>
+          </h2>
+        </div>
+      </section>
+      {{ content }}
+    </main>
+    {% include footer.html %}
+
+    <!-- Matomo -->
+    <script type="text/javascript">
+      var _paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['setCookieDomain', '*.het.io']);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u = 'https://piwik.dhimmel.com/';
+        _paq.push(['setTrackerUrl', u + 'matomo.php']);
+        _paq.push(['setSiteId', '3']);
+        var d = document,
+          g = d.createElement('script'),
+          s = d.getElementsByTagName('script')[0];
+        g.type = 'text/javascript';
+        g.async = true;
+        g.defer = true;
+        g.src = u + 'matomo.js';
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
+    <noscript
+      ><p>
+        <img
+          src="https://piwik.dhimmel.com/matomo.php?idsite=3&amp;rec=1"
+          style="border:0;"
+          alt=""
+        /></p
+    ></noscript>
+    <!-- End Matomo Code -->
+  </body>
+</html>

_layouts/landing.html

@@ -0,0 +1,44 @@
+<html>
+  <head>
+    <!-- metatags - https://metatags.io/ -->
+    <title>{{ page.title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="title" property="og:title" content="{{ page.title }}" />
+    <meta
+      name="description"
+      property="og:description"
+      content="{{ page.description }}"
+    />
+    <meta name="keywords" content="{{ page.keywords }}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://het.io/" />
+
+    <!-- global styles -->
+    <link href="global.css" rel="stylesheet" />
+
+    <!-- page styles -->
+    <link href="page.css" rel="stylesheet" />
+
+    <!-- scripts -->
+    <script src="scripts.js"></script>
+
+    <!-- favicons - https://realfavicongenerator.net/ -->
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="favicon-192x192.png"
+    />
+    <link rel="manifest" href="site.webmanifest" />
+    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#02b3e4" />
+    <meta name="msapplication-TileColor" content="#02b3e4" />
+    <meta name="theme-color" content="#02b3e4" />
+    <meta property="og:image" content="share-thumbnail.png" />
+  </head>
+  <body>
+    <canvas></canvas>
+    {{ content }}
+    <script src="deep-field.js"></script>
+  </body>
+</html>