Index and About page complete

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.insertSpaces": false
+}

404.html

@@ -1,25 +1,8 @@
 ---
-permalink: /404.html
-layout: default
+permalink: /404
+layout: master
 ---
 
-<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 class="container" style="text-align: center;margin:40px auto">
+	<h1>Four, oh four!</h1>
 </div>

README.md

@@ -2,6 +2,8 @@
 
 [![Build Status](https://travis-ci.org/coderdojorise/coderdojorise.github.io.svg?branch=master)](https://travis-ci.org/coderdojorise/coderdojorise.github.io)
 
-## TODO
+## Checklist
 
-The website will slowly be migrated to Jekyll, there are a few things that have to be produced in order to achieve this.
+TODO: Email forwarding for hi@coderdojorise.com and dev@coderdojorise.com
+TODO: Set-up way to sign-up for email newsletters from Mailchimp.
+TODO: Fix the breadcrumbs element for each page.

_config.yml

@@ -1,61 +1,18 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-#
-# If you need help with YAML syntax, here are some quick references for you:
-# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
-# https://learnxinyminutes.com/docs/yaml/
-#
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# 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: CoderDojo RISE
 email: dev@coderdojorise.com
-description: >- # this means to ignore newlines until "baseurl:"
+description: >-
   This is the official website for CoderDojo RISE.
-baseurl: "" # the subpath of your site, e.g. /blog
-url: "" # the base hostname & protocol for your site, e.g. http://example.com
+baseurl: ""
+url: "https://coderdojorise.com"
 twitter_username: CDShoredtich
 github_username:  coderdojorise
 
 # Build settings
-theme: minima
 plugins:
   - jekyll-feed
-
 host: 0.0.0.0
 port: 4400
 livereload: true
-
 destination: public
 
-# Exclude from processing.
-# The following items will not be processed, by default.
-# Any item listed under the `exclude:` key here will be automatically added to
-# the internal "default list".
-#
-# Excluded items can be processed by explicitly listing the directories or
-# their entries' file path in the `include:` list.
-#
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
-
 exclude: [vendor]

_data/navbar.yml

@@ -1,27 +1,33 @@
-logo: /assets/images/logo_150px.png
+logo: assets/images/logo_150px.png
 
 links:
 
 - title: About Us
   tooltip: Learn more about the team behind CoderDojo RISE.
   url: /about-us
+  css: about-us
 
 - title: Attend A Dojo
   tooltip: Check our next events.
   url: /attend-a-dojo
+  css: attend
 
 - title: Volunteer
   tooltip: Come volunteer at CoderDojo RISE in London.
   url: /volunteer
+  css: volunteer
 
 - title: Resources
   tooltip: Learn to code using CoderDojo RISE's resources for free!
   url: /resources
+  css: resources
 
 - title: Supporters
   tooltip: Find out more about our amazing supporters.
   url: /supporters
+  css: supporters
 
 - title: Community
   tooltip: Come join our awesome community!
   url: /community
+  css: community

_includes/breadcrumbs.html

@@ -0,0 +1,9 @@
+<div class="container breadcrumbs-element">
+    <ol class="breadcrumb">
+        <li class="active">
+            <a href="/" title="Home">
+                Home
+            </a>
+        </li>
+    </ol>
+</div>

_includes/eu-cookie-message.html

@@ -0,0 +1,11 @@
+<div id="cookie-law-container" style="display: none;">
+	<div class="container">
+		<div class="alert alert-info alert-dismissible fade in" role="alert" id="cookie-law-alert">
+			<button type="button" class="close" style="font-size: 24px;" data-dismiss="alert" aria-label="Close">
+				<span aria-hidden="true"><i class="fa fa-times"></i></span>
+			</button>
+			<p style="font-size:1.4em"><strong>We like cookies! Nom nom nom</strong></p>
+			<p>Cookies are great, especially on the internet. They help us provide you with a better, more delicious experience. You can find out <a href="/legal/cookies">more on how we use cookies</a> and you may also dismiss this message by clicking the close button. <small>*No cookies were harmed in the making of this website, however some were eaten.</small></p>
+		</div>
+	</div>
+</div>

_includes/footer.html

@@ -0,0 +1,57 @@
+<div class="cd-footer">
+	<div class="footer-strip">
+		<span class="strip"></span>
+		<span class="strip"></span>
+		<span class="strip"></span>
+		<span class="strip"></span>
+		<span class="strip"></span>
+		<span class="strip"></span>
+	</div>
+	<div class="footer-body container">
+		<div class="row">
+			<div class="col-sm-4 hidden-xs footer-logo">
+				<a href="/">
+					<img src="{{ 'assets/images/logo_290px.png' | relative_url }}" alt="CoderDojo RISE Logo"/>
+				</a>
+			</div>
+			<div class="col-sm-8 col-xs-10 footer-links">
+				<div class="row">
+					<div class="col-sm-3 col-xs-4">
+						<a href="/about-us" title="Find out more about CoderDojo RISE">About Us</a>
+						<a href="/attend-a-dojo" title="Get the dates for CoderDojo in London">Attend a Dojo</a>
+						<a href="/volunteer" title="Learn how to volunteer for CoderDojo RISE">Volunteer</a>
+					</div>
+					<div class="col-sm-3 col-xs-4">
+						<a href="/resources" title="Get a lot of free resources to learn how to code">Resources</a>
+						<a href="/supporters" title="See the companies that help CoderDojo RISE grow">Supporters</a>
+						<a href="/community" title="Join our ever growing CoderDojo RISE community">Community</a>
+					</div>
+					<div class="col-sm-3 col-xs-4">
+						<a href="/legal/cookies">Cookie Policy</a>
+						<a href="/community">Join our Community</a>
+					</div>
+					<div class="col-sm-3 hidden-xs">
+						<a href="mailto:hi@coderdojorise.com" title="Send an email to CoderDojo RISE">
+							<i class="fa fa-envelope"></i> hi@coderdojorise.com
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="footer-bottom">
+		<div class="container-fluid">
+			<div class="col-xs-6">
+				CoderDojo RISE &copy; {{ 'now' | date: "%Y" }}
+			</div>
+			<div class="col-xs-6 footer-social">
+				<a href="https://github.com/coderdojorise" title="Check out our GitHub repositories, including this website" target="_blank">
+					<i class="fa fa-github"></i>
+				</a>
+				<a href="https://twitter.com/CDShoredtich" title="Follow us on Twitter for the latest updates" target="_blank">
+					<i class="fa fa-twitter"></i>
+				</a>
+			</div>
+		</div>
+	</div>
+</div>

_includes/header.html

@@ -0,0 +1,3 @@
+<div class="header-container">
+    {% include navbar.html %}
+</div>

_includes/navbar.html

@@ -1,25 +1,24 @@
 <nav class="navbar navbar-default navbar-fixed-top">
-    <div class="container">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#cd-london-navbar-collapse" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="/">
-                <img class="logo" alt="CoderDojo RISE Logo" src="{{ site.data.navbar.logo }}"/>
-            </a>
-        </div>
-
-        <div class="collapse navbar-collapse" id="cd-london-navbar-collapse">
-            <ul class="nav navbar-nav navbar-right">
-                {% for item in site.data.navbar.links %}
-                <!-- <li class="about-us" title="{{ item.tooltip }}">
-                    <a href="{{ item.url | relative_url }}">{{ item.title }}</a>
-                </li> -->
-                {% endfor %}
-            </ul>
-        </div>
-    </div>
+	<div class="container">
+		<div class="navbar-header">
+			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#cd-london-navbar-collapse" aria-expanded="false">
+				<span class="sr-only">Toggle navigation</span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+			</button>
+			<a class="navbar-brand" href="/">
+				<img class="logo" alt="CoderDojo RISE Logo" src="{{ site.data.navbar.logo }}"/>
+			</a>
+		</div>
+		<div class="collapse navbar-collapse" id="cd-london-navbar-collapse">
+			<ul class="nav navbar-nav navbar-right">
+				{% for item in site.data.navbar.links %}
+				<li class="{{ item.css }}" title="{{ item.tooltip }}">
+					<a href="{{ item.url | relative_url }}">{{ item.title }}</a>
+				</li>
+				{% endfor %}
+			</ul>
+		</div>
+	</div>
 </nav>

_layouts/master.html

@@ -1,35 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <title>{{ page.title }}</title>
+        <title>{{ page.title|default: "CoderDojo RISE" }} | CoderDojo RISE</title>
+
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="/assets/favicon.png" />
-
+        <link rel="icon" type="image/png" href="{{ 'assets/favicon.png' | relative_url }}" />
         <!-- Stylesheets -->
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css" />
-        <link rel="stylesheet" href="{{ '/assets/css/master.css' | relative_url }}" />
+        <link rel="stylesheet" href="{{ 'assets/css/master.css' | relative_url }}" />
     </head>
     <body>
-        <div class="header-container">
-            {% include navbar.html %}
-        </div>
-        <div class="container breadcrumbs-element">
-            <ol class="breadcrumb">
-                <li class="active">
-                    <a href="/" title="Home">
-                        Home
-                    </a>
-                </li>
-            </ol>
-        </div>
-        <div class="container">
-            {{ content }}
-        </div>
+        {% include header.html %}
+        {% include breadcrumbs.html %}
+        {{ content }}
+        {% include footer.html %}
+        {% include eu-cookie-message.html %}
         <!-- Scripts -->
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <script type="text/javascript" src="{{ '/assets/js/scripts.js' | relative_url }}"></script>
+        <script type="text/javascript" src="{{ 'assets/js/utils.js' | relative_url }}"></script>
+        <script type="text/javascript" src="{{ 'assets/js/scripts.js' | relative_url }}"></script>
     </body>
 </html>