Bootstrap 4 refresh

.gitignore

@@ -2,3 +2,4 @@ _site
 Gemfile.lock
 .bundle
 .ruby-version
+.sass-cache

404.html

@@ -0,0 +1,24 @@
+---
+layout: default
+---
+
+<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>

README.md

@@ -1,6 +1,6 @@
 # GafferHQ.org #
 
-This repository contains the website for http://gafferhq.org. It is published to the web via [GitHub Pages](https://pages.github.com/). Any changes pushed to the upstream master branch go live immediately.
+This repository contains the website for https://gafferhq.org. It is published to the web via [GitHub Pages](https://pages.github.com/). Any changes pushed to the upstream master branch go live immediately.
 
 ## Local Testing ##
 

_config.yml

@@ -1,13 +1,29 @@
-paginate: 1
-permalink: /news/:title/
+title: Gaffer
+description: >-
+  Gaffer is an open-source, node-based 3D and 2D processing and
+  automation tool for use in VFX. It supports the Alembic, USD, and SCC
+  scene formats, and all image formats supported by OpenImageIO,
+  including EXR. Its scenes are compatible with VDBs and the Arnold, 
+  Appleseed, and 3Delight renderers.
+encoding: utf-8
 baseurl:
-future: false
-google_analytics: UA-125947352-1
-gems:
-   - jekyll-paginate
+url: "https://gafferhq.org"
+permalink: /news/:title/ # Base URL for all posts
+paginate: 10 # How many posts to show on each news page
+paginate_path: "/news/archive:num/" # Base URL for post archives
+
+plugins:
+  - jekyll-feed
+  - jekyll-paginate
+  - jekyll-sitemap
+
+# Site variables
+google-analytics: UA-125947352-1
+images: /content/images
+examples: /content/examples
+latest-release: 0.53.4.0
+arnold-version: 5.3
+delight-version: 1.1.12
+tractor-version: 2.2
+appleseed-version: 1.9.0
 
-latestGafferVersion: 0.54.1.0
-copyrightYear: 2019
-images: "/resources/images"
-demos: "/resources/demos"
-docs: "https://www.gafferhq.org/documentation"

_includes/analytics.html

@@ -4,6 +4,5 @@
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
-
   gtag('config', '{{ site.google_analytics }}');
 </script>

_includes/embed-media.html

@@ -0,0 +1,3 @@
+<div class="embed-responsive embed-responsive-16by9">
+    <iframe class="embed-responsive-item" src="{{ include.media }}" scrolling="no" allowfullscreen></iframe>
+</div>

_includes/footer.html

@@ -1,100 +1,26 @@
-        </div>
-
-        <footer class="footer mt-60">
-            <section id="social-media" class="container pt-60">
-                <div class="row">
-                    <div class="col-xs-12 text-center">
-                        <ul class="social white">
-                            <li class="link mr-0" style="padding: 0 10px">
-                                <a class="white" href="https://groups.google.com/forum/#!forum/gaffer-dev"><i class="fa fa-google-plus-square" style="font-size: 36px"></i></a>
-                            </li>
-                            <li class="link mr-0" style="padding: 0 10px">
-                                <a class="white" href="https://github.com/gafferHQ/gaffer" style="font-size: 36px"><i class="fa fa-github-square"></i></a>
-                            </li>
-                            <li class="link mr-0" style="padding: 0 10px">
-                                <a class="white" href="https://vimeo.com/cortex" style="font-size: 36px"><i class="fa fa-vimeo-square"></i></a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </section>
-            <section id="copyright" class="container copyright ptb-60">
-                <div class="row">
-                    <div class="col-xs-12">
-                        <p class="text-uppercase lead white"><a href="{{ site.baseurl }}" class="white">Gaffer</a></p>
-                        <p class="white">© {{ site.copyrightYear }} Image Engine Design Inc. All rights reserved.<br></p>
-                        <p class="white">© {{ site.copyrightYear }} John Haddon. All rights reserved.</p>
-                    </div>
-                </div>
+<footer class="mt-5 pt-4 pb-2 bg-dark gaff-text-gray-400 small" id="footer">
+    <div class="container">
+        <div class="row text-center text-md-left">
+            <section class="col-12 col-md-6 mb-3 mb-md-0" id="sitemap">
+                <ul class="list-unstyled">
+                    <li class="mb-1"><a href="#top">Top</a></li>
+                    <li class="mb-1"><a href="/download">Home</a></li>
+                    <li class="mb-1"><a href="/download">Download</a></li>
+                    <li class="mb-1"><a href="/news">News</a></li>
+                    <li class="mb-1"><a href="https://www.gafferhq.org/documentation/{{ site.latest-release }}">Docs</a></li>
+                </ul>
             </section>
-        </footer>
-
-	<script src="http://code.jquery.com/jquery-latest.js"></script>
-	<script src="{{ site.baseurl }}/js/plugin/jquery.easing.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/jquery-ui.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/bootstrap.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/jquery.flexslider.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/jquery.fitvids.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/jquery.viewportchecker.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/jquery.stellar.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/wow.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/jquery.colorbox-min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/owl.carousel.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/isotope.pkgd.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/masonry.pkgd.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/imagesloaded.pkgd.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/sidebar-menu.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/jquery.fs.tipper.min.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/plugin/mediaelement-and-player.min.js"></script>
-	<script src="{{ site.baseurl }}/js/theme.js" type="text/javascript"></script>
-	<script src="{{ site.baseurl }}/js/navigation.js" type="text/javascript"></script>
-
-	<script>
-
-	$( document ).ready(function() {
-
-		// find animated gifs and add nice features like click-to-play
-		//////////////////////////////////////////////////////////////
-
-		function toggleAnimation( image ) {
-
-			if( image.src.endsWith( ".png" ) )
-			{
-				image.src = image.src.replace( ".png", "Animation.gif" );
-				image.parentNode.setAttribute( "class", "" );
-			}
-			else
-			{
-				image.src = image.src.replace( "Animation.gif", ".png" );
-				image.parentNode.setAttribute( "class", "titleFrame" );
-			}
-
-		}
-
-		// it'd be nice to use an attribute to say which images
-		// get this treatment, but we use the filename instead,
-		// since we can't set arbitrary attributes using the
-		// markdown in our blog posts.
-
-		var animations = $( "img[src$='Animation.gif']" );
-
-		// wrap in a figure so we can add an overlay with the play icon.
-		// this is done via the css.
-
-		animations.wrap( "<figure></figure>" );
-
-		// turn off the animation to start with
-
-		animations.each( function() { toggleAnimation( this ); } );
-
-		// and arrange to turn it on when clicked
-
-		animations.on( "click", function() { toggleAnimation( this ); } );
-
-	});
-
- 	</script>
-
-	</body>
-</html>
 
+            <section class="col-12 col-md-6 order-md-first" id="about">
+                <p class="mb-1 text-uppercase font-weight-bold gaff-letter-spacing">Gaffer</p>
+                <p class="mb-1 h1">
+                    <a href="https://groups.google.com/forum/#!forum/gaffer-dev"><i class="fab fa-google-plus-square"></i></a>
+                    <a href="https://github.com/gafferHQ/gaffer"><i class="fab fa-github-square"></i></a>
+                    <a href="https://vimeo.com/cortex"><i class="fab fa-vimeo-square"></i></a>
+                </p>
+                <p class="mb-1">© 2011-<span class="copyright-year"></span><noscript>2019</noscript> Image Engine Design Inc. All rights reserved.</p>
+                <p class="mb-1">© 2011-<span class="copyright-year"></span><noscript>2019</noscript> John Haddon. All rights reserved.</p>
+            </section>
+        </div>
+    </div>
+</footer>

_includes/image-carousel.html

@@ -0,0 +1,6 @@
+<div class="carousel-item {% if include.active %}active{% endif %}">
+    <img class="gaff-img-carousel" src="{{ include.img }}" alt="{{ include.alt }}">
+    <div class="carousel-caption d-none d-md-block">
+        <p class="carousel-caption font-weight-lighter small">{{ include.caption }}</p>
+    </div>
+</div>

_includes/image-lightbox.html

@@ -0,0 +1,3 @@
+<a href="{{ include.img }}" class="lightbox" data-title="{{ include.title }}">
+    {% include image.html img=include.img height=include.height width=include.width title=include.title alt=include.alt %}
+</a>

_includes/image.html

@@ -0,0 +1 @@
+<img class="gaff-img w-100" style="width: {{ include.width | default: initial }}; height: {{ include.height | default:initial }}" src="{{ include.img }}" title="{{ include.title }}" alt="{{ include.alt }}">

_includes/nav-link.html

@@ -0,0 +1,3 @@
+<li class="nav-item {% if page.url == include.link %}active{% endif %}">
+    <a class="nav-link" href="{{ include.link }}{% if include.link contains '/documentation/' %}{{ site.latest-release }}{% endif %}">{{ include.text }} {% if include.icon %}<span class="small"><i class="{{ include.icon }}"></i></span>{% endif %} {% if page.url == include.link %}<span class="sr-only">(current)</span>{% endif %}</a>
+</li>

_includes/nav.html

@@ -0,0 +1,24 @@
+<!-- Navbar -->
+<nav class="navbar navbar-expand-lg flex-shrink-0 navbar-dark bg-black">
+    <div class="container">
+        <!-- Logo and home -->
+        <a class="navbar-brand" style="height: 50px" href="/"><img class="d-block h-100" src="{{ site.images }}/brand/gaffer-logo-nav.svg" alt="Gaffer logo"></a>
+
+        <!-- Mobile hamburger -->
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navigation" aria-controls="main-navigation"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Navbar items -->
+        <div class="collapse navbar-collapse" id="main-navigation">
+            <ul class="navbar-nav mr-auto">
+                {% include nav-link.html link='/download/' text='Download' %}
+                {% include nav-link.html link='/news/' text='News' %}
+                {% include nav-link.html link='https://www.gafferhq.org/documentation/' text='Docs' %}
+                {% include nav-link.html link='https://groups.google.com/forum/#!forum/gaffer-dev/' text='Community' icon='fa fa-external-link-alt' %}
+                {% include nav-link.html link='https://github.com/gafferhq/gaffer/' text='GitHub' icon='fa fa-external-link-alt' %}
+            </ul>
+        </div>
+    </div>
+</nav>

_includes/tags-sidebar.html

@@ -0,0 +1,14 @@
+<aside class="col-md-3 d-none d-md-block" id="tags">
+    <h1 class="h5 text-primary"><a href="/news/tags/"><i class="fas fa-tags"></i> Tags</a></h1>
+    {% capture tags %}
+        {% for tag in site.tags %}
+            {{ tag[0] }}
+        {% endfor %}
+    {% endcapture %}
+    {% assign sortedtags = tags | split:' ' | sort %}
+    <ul class="list-unstyled">
+        {% for tag in sortedtags %}
+            <li><a class="text-muted" href="/news/tags/#{{ tag }}">{{ tag }}</a></li>
+        {% endfor %}
+    </ul>
+</aside>

_includes/vimeo.html

@@ -0,0 +1,4 @@
+<div class="embed-responsive embed-responsive-16by9">
+    <iframe class="embed-responsive-item" src="{{ include.media }}?byline=0" scrolling="no" allowfullscreen frameborder="0" allow="autoplay; fullscreen"></iframe>
+</div>
+<script src="https://player.vimeo.com/api/player.js"></script>