Re-theme site

2020-12-13 03:11:29 +00:00
parent 9faeb8ce9f
commit d73d3caf7f
122 changed files with 14452 additions and 4504 deletions
--- a/_site/assets/css/font-awesome.min.css
+++ b/_site/assets/css/font-awesome.min.css
--- a/_site/assets/css/main.css
+++ b/_site/assets/css/main.css
--- a/_site/assets/fonts/FontAwesome.otf
+++ b/_site/assets/fonts/FontAwesome.otf
--- a/_site/assets/fonts/fontawesome-webfont.eot
+++ b/_site/assets/fonts/fontawesome-webfont.eot
--- a/_site/assets/fonts/fontawesome-webfont.svg
+++ b/_site/assets/fonts/fontawesome-webfont.svg
--- a/_site/assets/fonts/fontawesome-webfont.ttf
+++ b/_site/assets/fonts/fontawesome-webfont.ttf
--- a/_site/assets/fonts/fontawesome-webfont.woff
+++ b/_site/assets/fonts/fontawesome-webfont.woff
--- a/_site/assets/fonts/fontawesome-webfont.woff2
+++ b/_site/assets/fonts/fontawesome-webfont.woff2
--- a/_site/assets/js/cookies.js
+++ b/_site/assets/js/cookies.js
--- a/_site/assets/js/jquery.min.js
+++ b/_site/assets/js/jquery.min.js
--- a/_site/assets/js/main.js
+++ b/_site/assets/js/main.js
@@ -0,0 +1,39 @@
+(function($) {
+
+	var	$window = $(window),
+		$banner = $('#banner'),
+		$body = $('body');
+
+	// Play initial animations on page load.
+		$window.on('load', function() {
+			window.setTimeout(function() {
+				$body.removeClass('is-preload');
+			}, 100);
+		});
+
+	// Menu.
+		$('#menu')
+			.append('<a href="#menu" class="close"></a>')
+			.appendTo($body)
+			.panel({
+				target: $body,
+				visibleClass: 'is-menu-visible',
+				delay: 500,
+				hideOnClick: true,
+				hideOnSwipe: true,
+				resetScroll: true,
+				resetForms: true,
+				side: 'right'
+			});
+
+})(jQuery);
+
+if (Cookies.get("demo.mgrove.uk-cookies-accepted") != "true") {
+	$("#cookies").show();
+	$("#cookies").animate({ bottom: "0px" }, 1000);
+	$("#close-cookies").click(function () {
+		$("#cookies").animate({ bottom: "-100px" }, 1000);
+		setTimeout(function () { $("#cookies").hide() }, 1000);
+		Cookies.set("demo.mgrove.uk-cookies-accepted", "true", { expires: 30 });
+	});
+}
--- a/_site/assets/js/util.js
+++ b/_site/assets/js/util.js
@@ -0,0 +1,587 @@
+(function($) {
+
+	/**
+	 * Generate an indented list of links from a nav. Meant for use with panel().
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.navList = function() {
+
+		var	$this = $(this);
+			$a = $this.find('a'),
+			b = [];
+
+		$a.each(function() {
+
+			var	$this = $(this),
+				indent = Math.max(0, $this.parents('li').length - 1),
+				href = $this.attr('href'),
+				target = $this.attr('target');
+
+			b.push(
+				'<a ' +
+					'class="link depth-' + indent + '"' +
+					( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
+					( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
+				'>' +
+					'<span class="indent-' + indent + '"></span>' +
+					$this.text() +
+				'</a>'
+			);
+
+		});
+
+		return b.join('');
+
+	};
+
+	/**
+	 * Panel-ify an element.
+	 * @param {object} userConfig User config.
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.panel = function(userConfig) {
+
+		// No elements?
+			if (this.length == 0)
+				return $this;
+
+		// Multiple elements?
+			if (this.length > 1) {
+
+				for (var i=0; i < this.length; i++)
+					$(this[i]).panel(userConfig);
+
+				return $this;
+
+			}
+
+		// Vars.
+			var	$this = $(this),
+				$body = $('body'),
+				$window = $(window),
+				id = $this.attr('id'),
+				config;
+
+		// Config.
+			config = $.extend({
+
+				// Delay.
+					delay: 0,
+
+				// Hide panel on link click.
+					hideOnClick: false,
+
+				// Hide panel on escape keypress.
+					hideOnEscape: false,
+
+				// Hide panel on swipe.
+					hideOnSwipe: false,
+
+				// Reset scroll position on hide.
+					resetScroll: false,
+
+				// Reset forms on hide.
+					resetForms: false,
+
+				// Side of viewport the panel will appear.
+					side: null,
+
+				// Target element for "class".
+					target: $this,
+
+				// Class to toggle.
+					visibleClass: 'visible'
+
+			}, userConfig);
+
+			// Expand "target" if it's not a jQuery object already.
+				if (typeof config.target != 'jQuery')
+					config.target = $(config.target);
+
+		// Panel.
+
+			// Methods.
+				$this._hide = function(event) {
+
+					// Already hidden? Bail.
+						if (!config.target.hasClass(config.visibleClass))
+							return;
+
+					// If an event was provided, cancel it.
+						if (event) {
+
+							event.preventDefault();
+							event.stopPropagation();
+
+						}
+
+					// Hide.
+						config.target.removeClass(config.visibleClass);
+
+					// Post-hide stuff.
+						window.setTimeout(function() {
+
+							// Reset scroll position.
+								if (config.resetScroll)
+									$this.scrollTop(0);
+
+							// Reset forms.
+								if (config.resetForms)
+									$this.find('form').each(function() {
+										this.reset();
+									});
+
+						}, config.delay);
+
+				};
+
+			// Vendor fixes.
+				$this
+					.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
+					.css('-webkit-overflow-scrolling', 'touch');
+
+			// Hide on click.
+				if (config.hideOnClick) {
+
+					$this.find('a')
+						.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
+
+					$this
+						.on('click', 'a', function(event) {
+
+							var $a = $(this),
+								href = $a.attr('href'),
+								target = $a.attr('target');
+
+							if (!href || href == '#' || href == '' || href == '#' + id)
+								return;
+
+							// Cancel original event.
+								event.preventDefault();
+								event.stopPropagation();
+
+							// Hide panel.
+								$this._hide();
+
+							// Redirect to href.
+								window.setTimeout(function() {
+
+									if (target == '_blank')
+										window.open(href);
+									else
+										window.location.href = href;
+
+								}, config.delay + 10);
+
+						});
+
+				}
+
+			// Event: Touch stuff.
+				$this.on('touchstart', function(event) {
+
+					$this.touchPosX = event.originalEvent.touches[0].pageX;
+					$this.touchPosY = event.originalEvent.touches[0].pageY;
+
+				})
+
+				$this.on('touchmove', function(event) {
+
+					if ($this.touchPosX === null
+					||	$this.touchPosY === null)
+						return;
+
+					var	diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
+						diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
+						th = $this.outerHeight(),
+						ts = ($this.get(0).scrollHeight - $this.scrollTop());
+
+					// Hide on swipe?
+						if (config.hideOnSwipe) {
+
+							var result = false,
+								boundary = 20,
+								delta = 50;
+
+							switch (config.side) {
+
+								case 'left':
+									result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
+									break;
+
+								case 'right':
+									result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
+									break;
+
+								case 'top':
+									result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
+									break;
+
+								case 'bottom':
+									result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
+									break;
+
+								default:
+									break;
+
+							}
+
+							if (result) {
+
+								$this.touchPosX = null;
+								$this.touchPosY = null;
+								$this._hide();
+
+								return false;
+
+							}
+
+						}
+
+					// Prevent vertical scrolling past the top or bottom.
+						if (($this.scrollTop() < 0 && diffY < 0)
+						|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
+
+							event.preventDefault();
+							event.stopPropagation();
+
+						}
+
+				});
+
+			// Event: Prevent certain events inside the panel from bubbling.
+				$this.on('click touchend touchstart touchmove', function(event) {
+					event.stopPropagation();
+				});
+
+			// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
+				$this.on('click', 'a[href="#' + id + '"]', function(event) {
+
+					event.preventDefault();
+					event.stopPropagation();
+
+					config.target.removeClass(config.visibleClass);
+
+				});
+
+		// Body.
+
+			// Event: Hide panel on body click/tap.
+				$body.on('click touchend', function(event) {
+					$this._hide(event);
+				});
+
+			// Event: Toggle.
+				$body.on('click', 'a[href="#' + id + '"]', function(event) {
+
+					event.preventDefault();
+					event.stopPropagation();
+
+					config.target.toggleClass(config.visibleClass);
+
+				});
+
+		// Window.
+
+			// Event: Hide on ESC.
+				if (config.hideOnEscape)
+					$window.on('keydown', function(event) {
+
+						if (event.keyCode == 27)
+							$this._hide(event);
+
+					});
+
+		return $this;
+
+	};
+
+	/**
+	 * Apply "placeholder" attribute polyfill to one or more forms.
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.placeholder = function() {
+
+		// Browser natively supports placeholders? Bail.
+			if (typeof (document.createElement('input')).placeholder != 'undefined')
+				return $(this);
+
+		// No elements?
+			if (this.length == 0)
+				return $this;
+
+		// Multiple elements?
+			if (this.length > 1) {
+
+				for (var i=0; i < this.length; i++)
+					$(this[i]).placeholder();
+
+				return $this;
+
+			}
+
+		// Vars.
+			var $this = $(this);
+
+		// Text, TextArea.
+			$this.find('input[type=text],textarea')
+				.each(function() {
+
+					var i = $(this);
+
+					if (i.val() == ''
+					||  i.val() == i.attr('placeholder'))
+						i
+							.addClass('polyfill-placeholder')
+							.val(i.attr('placeholder'));
+
+				})
+				.on('blur', function() {
+
+					var i = $(this);
+
+					if (i.attr('name').match(/-polyfill-field$/))
+						return;
+
+					if (i.val() == '')
+						i
+							.addClass('polyfill-placeholder')
+							.val(i.attr('placeholder'));
+
+				})
+				.on('focus', function() {
+
+					var i = $(this);
+
+					if (i.attr('name').match(/-polyfill-field$/))
+						return;
+
+					if (i.val() == i.attr('placeholder'))
+						i
+							.removeClass('polyfill-placeholder')
+							.val('');
+
+				});
+
+		// Password.
+			$this.find('input[type=password]')
+				.each(function() {
+
+					var i = $(this);
+					var x = $(
+								$('<div>')
+									.append(i.clone())
+									.remove()
+									.html()
+									.replace(/type="password"/i, 'type="text"')
+									.replace(/type=password/i, 'type=text')
+					);
+
+					if (i.attr('id') != '')
+						x.attr('id', i.attr('id') + '-polyfill-field');
+
+					if (i.attr('name') != '')
+						x.attr('name', i.attr('name') + '-polyfill-field');
+
+					x.addClass('polyfill-placeholder')
+						.val(x.attr('placeholder')).insertAfter(i);
+
+					if (i.val() == '')
+						i.hide();
+					else
+						x.hide();
+
+					i
+						.on('blur', function(event) {
+
+							event.preventDefault();
+
+							var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
+
+							if (i.val() == '') {
+
+								i.hide();
+								x.show();
+
+							}
+
+						});
+
+					x
+						.on('focus', function(event) {
+
+							event.preventDefault();
+
+							var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
+
+							x.hide();
+
+							i
+								.show()
+								.focus();
+
+						})
+						.on('keypress', function(event) {
+
+							event.preventDefault();
+							x.val('');
+
+						});
+
+				});
+
+		// Events.
+			$this
+				.on('submit', function() {
+
+					$this.find('input[type=text],input[type=password],textarea')
+						.each(function(event) {
+
+							var i = $(this);
+
+							if (i.attr('name').match(/-polyfill-field$/))
+								i.attr('name', '');
+
+							if (i.val() == i.attr('placeholder')) {
+
+								i.removeClass('polyfill-placeholder');
+								i.val('');
+
+							}
+
+						});
+
+				})
+				.on('reset', function(event) {
+
+					event.preventDefault();
+
+					$this.find('select')
+						.val($('option:first').val());
+
+					$this.find('input,textarea')
+						.each(function() {
+
+							var i = $(this),
+								x;
+
+							i.removeClass('polyfill-placeholder');
+
+							switch (this.type) {
+
+								case 'submit':
+								case 'reset':
+									break;
+
+								case 'password':
+									i.val(i.attr('defaultValue'));
+
+									x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
+
+									if (i.val() == '') {
+										i.hide();
+										x.show();
+									}
+									else {
+										i.show();
+										x.hide();
+									}
+
+									break;
+
+								case 'checkbox':
+								case 'radio':
+									i.attr('checked', i.attr('defaultValue'));
+									break;
+
+								case 'text':
+								case 'textarea':
+									i.val(i.attr('defaultValue'));
+
+									if (i.val() == '') {
+										i.addClass('polyfill-placeholder');
+										i.val(i.attr('placeholder'));
+									}
+
+									break;
+
+								default:
+									i.val(i.attr('defaultValue'));
+									break;
+
+							}
+						});
+
+				});
+
+		return $this;
+
+	};
+
+	/**
+	 * Moves elements to/from the first positions of their respective parents.
+	 * @param {jQuery} $elements Elements (or selector) to move.
+	 * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
+	 */
+	$.prioritize = function($elements, condition) {
+
+		var key = '__prioritize';
+
+		// Expand $elements if it's not already a jQuery object.
+			if (typeof $elements != 'jQuery')
+				$elements = $($elements);
+
+		// Step through elements.
+			$elements.each(function() {
+
+				var	$e = $(this), $p,
+					$parent = $e.parent();
+
+				// No parent? Bail.
+					if ($parent.length == 0)
+						return;
+
+				// Not moved? Move it.
+					if (!$e.data(key)) {
+
+						// Condition is false? Bail.
+							if (!condition)
+								return;
+
+						// Get placeholder (which will serve as our point of reference for when this element needs to move back).
+							$p = $e.prev();
+
+							// Couldn't find anything? Means this element's already at the top, so bail.
+								if ($p.length == 0)
+									return;
+
+						// Move element to top of parent.
+							$e.prependTo($parent);
+
+						// Mark element as moved.
+							$e.data(key, $p);
+
+					}
+
+				// Moved already?
+					else {
+
+						// Condition is true? Bail.
+							if (condition)
+								return;
+
+						$p = $e.data(key);
+
+						// Move element back to its original location (using our placeholder).
+							$e.insertAfter($p);
+
+						// Unmark element as moved.
+							$e.removeData(key);
+
+					}
+
+			});
+
+	};
+
+})(jQuery);
--- a/_site/computer-science-blog/css/main.css
+++ b/_site/computer-science-blog/css/main.css
@@ -1,76 +0,0 @@
-/* Reading School 2018, CSS */
-.carousel-inner {
-	height: 250px;
-	border-radius: 4px;
-    overflow: hidden auto;
-    margin-bottom: 15px;
-    background: rgba(10,10,10,0.2);
-}
-
-/* place carousel indicators between the two buttons (next & previous) */
-.presentation-flexbox {
-  	display: -webkit-box;
-  	display: -moz-box;
-  	display: -ms-flexbox;
-  	display: -webkit-flex;
-  	display: flex;
-  	margin-bottom: 15px;
-
-  	-webkit-flex-flow: row wrap;
-  	flex-flow: row wrap;
-	justify-content: space-between;
-}
-.carousel-indicators {
-	order: 1;
-}
-.presentation-button-left {
-	order: 0;
-}
-.presentation-button-right {
-	order: 2;
-}
-
-.carousel-inner .item {
-	height: 100%;
-	width: 100%;
-	border: none;
-	padding: 15px;
-	overflow: auto;
-}
-
-.carousel-indicators li {
-	border: 1px solid var(--mdc-theme-secondary);
-	margin-top: 12px;
-}
-.carousel-indicators .active {
-	background-color: var(--mdc-theme-secondary);
-}
-
-/* revert changes made by Bootstrap */
-.carousel-indicators {
-	margin: 0;
-	position: initial;
-	width: auto;
-	z-index: inherit;
-}
-
-/* add side margins depending on screen size */
-#main-content {
-	text-align: left;
-	margin: 20px 15%;
-}
-@media screen and (max-width: 1000px) {
-	#main-content {
-		margin: 20px 10%;
-	}
-}
-@media screen and (max-width: 800px) {
-	#main-content {
-		margin: 20px 5%;
-	}
-}
-@media screen and (max-width: 600px) {
-	#main-content {
-		margin: 20px;
-	}
-}
--- a/_site/computer-science-blog/css/presentation-imports.css
+++ b/_site/computer-science-blog/css/presentation-imports.css
@@ -1,43 +0,0 @@
-html, body {
-    font-family: 'Roboto';
-    background: transparent;
-}
-.carousel-inner img {
-	width: 50%;
-	box-shadow: 3px 3px 6px 2px rgba(10,10,10,0.5);
-	margin: 10px 0;
-	border-radius: 6px;
-}
-@media screen and (max-width: 1000px) {
-	img {
-		width: 60%;
-	}
-}
-@media screen and (max-width: 900px) {
-	img {
-		width: 70%;
-	}
-}
-@media screen and (max-width: 800px) {
-	img {
-		width: 80%;
-	}
-}
-@media screen and (max-width: 700px) {
-	img {
-		width: 90%;
-	}
-}
-@media screen and (max-width: 600px) {
-	img {
-		width: calc(100% - 20px);
-	}
-}
-
-/* revert changes made by Bootstrap */
-p {
-	margin: 0;
-}
-h1, h2, h3, .h1, .h2, .h3 {
-	margin-top: 0;
-}
--- a/_site/computer-science-blog/images/with_css.jpg
+++ b/_site/computer-science-blog/images/with_css.jpg
--- a/_site/computer-science-blog/images/without_css.jpg
+++ b/_site/computer-science-blog/images/without_css.jpg
--- a/_site/computer-science-blog/index.html
+++ b/_site/computer-science-blog/index.html
@@ -1,212 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-    <meta name="HandheldFriendly" content="True">
-    <link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
-
-    <!-- add to homescreen for Chrome on Android -->
-    <meta name="mobile-web-app-capable" content="yes">
-    <link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
-
-    <!-- add to homescreen for Safari on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="GCSE Computer Science Blog | Matthew Grove">
-    <link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
-
-    <!-- tile icon & colour for Windows 8 -->
-    <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
-    <meta name="msapplication-TileColor" content="#d84315">
-
-    <title>GCSE Computer Science Blog | Matthew Grove</title>
-    <meta name="description" content="Research about HTTP, HTTPS, SSL and more, made in collaboration with Daniel Dunbar - by Matthew Grove">
-
-    <!-- import Roboto (font) -->
-    <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-    <!-- import jQuery -->
-    <script src="/js/jquery.min.js" type="text/javascript"></script>
-
-    <!-- import cookie JavaScript -->
-    <script src="/js/cookies.js" type="text/javascript"></script>
-
-    <!-- import Material Design components & icons -->
-    <link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
-    <link href="/css/material_icons.css" rel="stylesheet" type="text/css">
-    <script src="/js/material-components-web.min.js" type="text/javascript"></script>
-
-    <!-- import local styling & scripts -->
-    <script src="/js/global.js" type="text/javascript"></script>
-    <link href="/css/global.css" rel="stylesheet" type="text/css">
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
-    <script type="text/javascript">
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'UA-124505000-1');
-    </script>
-</head>
-
-    <body>
-        <!-- cookie notice is included automatically -->
-        <div id="cookies">
-    <p>Just to let you know, I use cookies on my site.</p>
-    <p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
-</div>
-
-
-        <!-- content of navbar is included automatically -->
-        <aside class="navbar-insert mdc-drawer mdc-drawer--modal">
-    <div class="mdc-drawer__content">
-        <div style="margin: 15px;text-align:center;">
-            <img src="https://mgrove.uk/logo.png" style="width: 90%;"/>
-        </div>
-        <div class="mdc-list">
-            <a class="mdc-list-item" href="https://blog.mgrove.uk">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
-                <span class="mdc-list-item__text">My Blog</span>
-            </a>
-            <a class="mdc-list-item" href="/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
-                <span class="mdc-list-item__text">Home Page</span>
-            </a>
-            
-            
-            <a class="mdc-list-item" href="/comsci/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">computer</i>
-                <span class="mdc-list-item__text">ComSci</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/luhn-algorithm/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
-                <span class="mdc-list-item__text">Luhn Algorithm</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/young-reporter/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">article</i>
-                <span class="mdc-list-item__text">BBC Young Reporter Article Creator</span>
-            </a>
-            
-            
-            
-            
-            
-            <a class="mdc-list-item" href="/computer-science-blog/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
-                <span class="mdc-list-item__text">GCSE Computer Science Blog</span>
-            </a>
-            
-            
-            
-            
-        </div>
-    </div>
-</aside>
-
-<div class="mdc-drawer-scrim"></div>
-
-
-        <div class="mdc-drawer-app-content">
-            <header class="mdc-top-app-bar app-bar" id="app-bar">
-                <div class="mdc-top-app-bar__row">
-                    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
-                        <span class="mdc-top-app-bar__title">GCSE Computer Science Blog | Matthew Grove</span>
-                    </section>
-                </div>
-            </header>
-
-            <main class="main-content" id="main-content">
-                <div class="mdc-top-app-bar--fixed-adjust">
-                    <!-- import Bootstrap - must be before extra styling so that carousel indicators' default styling is overwritten -->
-<script src="/js/bootstrap.min.js" type="text/javascript"></script>
-
-<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-
-<!-- import extra styling and scripts -->
-<link href="css/main.css" rel="stylesheet" type="text/css" />
-
-<link href="css/presentation-imports.css" rel="stylesheet" type="text/css" />
-
-<script src="js/css-presentation-slide.js" type="text/javascript"></script>
-
-<script src="js/scripts.js" type="text/javascript"></script>
-
-<p>The current date is <span id="current_date">unknown</span>.</p>
-<h1 id="http-introduction">HTTP Introduction</h1>
-<div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
-   <!-- Wrapper for presentation slides -->
-   <div class="carousel-inner">
-   </div>
-   <div class="presentation-flexbox">
-      <!-- Indicators -->
-      <ol class="carousel-indicators">
-      </ol>
-      <!-- button to go to previous slide -->
-      <button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
-          <!-- navigation icon -->
-          <i class="material-icons mdc-button__icon">navigate_before</i>
-          Previous
-      </button>
-      <!-- button to go to next slide -->
-      <button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
-          Next
-          <!-- navigation icon -->
-          <i class="material-icons mdc-button__icon">navigate_next</i>
-       </button>
-    </div>
-</div>
-
-<!-- HTML presentation -->
-<h1>HTML, CSS &amp; JS Introduction</h1>
-
-<div id="html_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
-    <!-- Wrapper for presentation slides -->
-    <div class="carousel-inner">
-    </div>
-    <div class="presentation-flexbox">
-       <!-- Indicators -->
-       <ol class="carousel-indicators">
-       </ol>
-       <!-- button to go to previous slide -->
-       <button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
-           <!-- navigation icon -->
-           <i class="material-icons mdc-button__icon">navigate_before</i>
-           Previous
-       </button>
-       <!-- button to go to next slide -->
-       <button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
-           Next
-           <!-- navigation icon -->
-           <i class="material-icons mdc-button__icon">navigate_next</i>
-       </button>
-    </div>
-</div>
-<!-- HTML basics info is inserted via jQuery -->
-<div id="blog-insert"></div>
-<p><br /></p>
-<center>Made in association with Daniel Dunbar</center>
-
-                    <!-- link to source code on GitHub -->
-                    <a href="https://github.com/mgrove36/demo-code/tree/master/computer-science-blog/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
-                        <span class="material-icons mdc-fab__icon">rate_review</span>
-                        <span class="mdc-fab__label">View on GitHub</span>
-                    </a>
-                </div>
-            </main>
-            <footer>
-    &copy; Matthew Grove 2020
-</footer>
-
-        </div>
-    </body>
-</html>
--- a/_site/computer-science-blog/js/css-presentation-slide.js
+++ b/_site/computer-science-blog/js/css-presentation-slide.js
@@ -1,4 +0,0 @@
-window.onload = function() {
-    var year = new Date().getFullYear();
-    document.getElementById("css_attribute_list_link").innerHTML = 'All of the CSS style attributes are listed <a href="https://www.w3.org/TR/css-' + year + '/#properties" target="_blank">here</a>.';
-}
--- a/_site/computer-science-blog/js/scripts.js
+++ b/_site/computer-science-blog/js/scripts.js
@@ -1,42 +0,0 @@
-window.onload = function() {
-	// set the current date
-    var date = new Date();
-
-    // ternary operator: if the date < 10 then add 0 to the start of it, else display the date
-    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-
-	// set current date
-    var current_date = day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
-
-	// display date
-    $("#current_date").html(current_date);
-
-	// display first blog page
-	$("#blog-insert").load("pages/blog.html");
-
-	// define variables for HTTP presentation pages
-	var http_pages = ["hyperlinks", "http", "https", "cookies"];
-	// displays HTTP presentation pages
-	http_pages.forEach(function(item, index) {
-		if (index == 0) {
-			$("#http_presentation .carousel-inner").append('<iframe class="item active" src="pages/' + item + '.html"></iframe>');
-			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
-		} else {
-			$("#http_presentation .carousel-inner").append('<iframe class="item" src="pages/' + item + '.html"></iframe>');
-			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' +  index + '"></li>')
-		}
-	});
-
-   	// define variables for HTML presentation pages
-   	var html_pages = ["html", "css", "js"];
-   	// displays HTML presentation pages
-   	html_pages.forEach(function(item, index) {
-        if (index == 0) {
-			$("#html_presentation .carousel-inner").append('<iframe class="item active" src="pages/' + item + '.html"></iframe>');
-			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
-		} else {
-			$("#html_presentation .carousel-inner").append('<iframe class="item" src="pages/' + item + '.html"></iframe>');
-			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' +  index + '"></li>')
-		}
-   	});
-}
--- a/_site/computer-science-blog/pages/blog.html
+++ b/_site/computer-science-blog/pages/blog.html
@@ -1,35 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<h1>HTML Basics</h1>
-<p>I know that:
-	<ul>
-		<li>inline styles override all others.</li>
-		<li>index.html is one of the industry standard default file names, as well as index.htm, index.php, index.asp, index.aspx and more.</li>
-		<li>iframes are used to embed documents within other documents.</p>
-		<li>
-			CSS files are linked by using the following code:
-			<br>
-			<code>&lt;link rel="stylesheet" type="text/css" href="../css/main.css"&gt;</code>
-		</li>
-		<li>
-			JS files are linked by using the following code:
-			<br>
-			<code>&lt;script type="text/javascript" src="scripts/scripts.js"&gt;&lt;/script&gt;</code>
-		</li>
-		<li>
-			Adding the date when the window loads:
-			<br>
-			<code>
-				// onload of window
-				<br>
-				window.onload = dateInsert;
-			</code>
-		</li>
-		<li>
-			Ternary operators work by using:
-			<br>
-			<code>[condition] ? [value if true] : [value if false]</code>
-		</li>
-		<li>The later a CSS file is imported, the more power it has over the document - i.e. the last stylesheet imported will overwrite the styling in all of the other stylesheets.</li>
-		<li>To add another page, one can use an <code>&lt;iframe&gt;</code> or the jQuery <code>.load()</code> method.</li>
-	</ul>
-</p>
--- a/_site/computer-science-blog/pages/cookies.html
+++ b/_site/computer-science-blog/pages/cookies.html
@@ -1,32 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-        <meta name="HandheldFriendly" content="True">
-
-        <!-- import Roboto (font) -->
-        <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-        <!-- import Bootstrap -->
-        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
-
-        <!-- import local styling & scripts -->
-        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
-    </head>
-	<body>
-		<h2>Cookies</h2>
-		<p>
-			Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, stored in binary, usually one-line long, which store relevant
-			information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use
-			cookies to store passwords that are set to ‘remember’. Thus, cookies need strong security and the ID of each one must be unfathomably
-			difficult to find without permission, to reduce the risk of hacking. Cookies are stored on the computer, as opposed to the website.
-			Because both HTTP and HTTPS don't transmit user data, none of the websites you visit know who you are. Therefore, whenever you
-			visit a webpage, it reads the cookies it stored on your computer last time you visited it, in order to find out information like your email address.
-			Many people are against cookies, due to privacy concerns; under new GDPR regulations, all end users in Europe must now be notified of
-			cookie use on each website they visit (if the website uses cookies). Many sites also give an option to refuse cookies.
-		</p>
-	</body>
-</html>
--- a/_site/computer-science-blog/pages/css.html
+++ b/_site/computer-science-blog/pages/css.html
@@ -1,64 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-        <meta name="HandheldFriendly" content="True">
-
-        <!-- import Roboto (font) -->
-        <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-        <!-- import Bootstrap -->
-        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
-
-        <!-- import local styling & scripts -->
-        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
-        <script src="../js/css-presentation-slide.js"></script>
-    </head>
-    <body>
-        <h2>CSS</h2>
-        <p>
-            CSS, Cascading Style Sheets, are web documents that allow stylisation of HTML documents. CSS allows you to change the size, style, font, and colour of text; margins and padding; background colours and border styles. To change the appearance of something in CSS, there must be the following format:
-            h1 {
-            Background-color: red;
-            }
-            which would make the background colour of heading 1 tags (big headings) red. The spellings in CSS are American, for example color, and semicolons are extremely important. The following hyperlink has a list of all the CSS commands and what they do when you click on them.
-
-
-            Cascading Stylesheets (CSS) allow the size, style, font & colour of text; background colours & border styles and more to be changed in HTML pages.
-            A page without CSS can be very bland and boring:
-            <br>
-            <img class="presentation-image" src="../images/without_css.jpg">
-            <br>
-            But one with CSS looks a lot more presentable:
-            <br>
-            <img class="presentation-image" src="../images/with_css.jpg">
-            <br>
-            CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of
-            the elements on the page in order to style them. IDs are written with a preceding hashtag,
-            classes are written with a preceding full stop and tag names are written without any preceding characters.
-            The styles themselves (like <code>height</code>) should all end in semicolons. A comment in CSS is started
-            with <code>/*</code> and ended with <code>*/</code>.
-            Here are some example declarations:
-            <br>
-            <code>
-                p {<br>
-                    /* this changes the font size of all p elements */<br>
-                    &nbsp;&nbsp;&nbsp;&nbsp;font-size: 3rem;<br>
-                }<br>
-                .class_name {<br>
-                    /* this changes the height of all elements with the class name 'class_name' */<br>
-                    &nbsp;&nbsp;&nbsp;&nbsp;height: 200px;<br>
-                }<br>
-                #id_name {<br>
-                    /* this changes the font of all elements with the ID 'id_name' */<br>
-                    &nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto'<br>
-                }<br>
-            </code>
-            <br>
-            <span id="css_attribute_list_link"></span>
-        </p>
-	</body>
-</html>
--- a/_site/computer-science-blog/pages/html.html
+++ b/_site/computer-science-blog/pages/html.html
@@ -1,36 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-        <meta name="HandheldFriendly" content="True">
-
-        <!-- import Roboto (font) -->
-        <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-        <!-- import Bootstrap -->
-        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
-
-        <!-- import local styling & scripts -->
-        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
-    </head>
-    <body>
-        <h2>HTML</h2>
-        <p>
-            Hypertext Markup Language is the standard language used by browsers to display webpages.
-            HTML was invented by Tim Berners-Lee in 1990, and uses tags. This means that in order to define
-            an element (something like a heading or paragraph), you use a <i>tag</i> - such as <code>&lt;p&gt;</code>,
-            which displays a simple paragraph. Most tags must be closed with closing tags - like <code>&lt;/p&gt;</code>,
-            however some elements, like those for images (<code>&lt;img&gt;</code>) and linking external resources
-            (<code>&lt;link&gt;</code>) are auto closing: they don’t need a closing tag. For example, an image is defined as follows:
-            <br>
-            <code>&lt;img src="image_source_url"&gt;</code>
-            <br>
-            A comment in HTML is started with <code>&lt;!--</code> and ended with <code>--&gt;</code>.
-            <br>
-            HTML is closely linked with CSS and JavaScript.
-        </p>
-	</body>
-</html>
--- a/_site/computer-science-blog/pages/http.html
+++ b/_site/computer-science-blog/pages/http.html
@@ -1,25 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-        <meta name="HandheldFriendly" content="True">
-
-        <!-- import Roboto (font) -->
-        <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-        <!-- import Bootstrap -->
-        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
-
-        <!-- import local styling & scripts -->
-        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
-    </head>
-	<body>
-		<h2>HTTP</h2>
-		<p>
-			HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web. It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests, the server and request must both follow this protocol.
-		</p>
-	</body>
-</html>
--- a/_site/computer-science-blog/pages/https.html
+++ b/_site/computer-science-blog/pages/https.html
@@ -1,28 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-        <meta name="HandheldFriendly" content="True">
-
-        <!-- import Roboto (font) -->
-        <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-        <!-- import Bootstrap -->
-        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
-
-        <!-- import local styling & scripts -->
-        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
-    </head>
-	<body>
-		<h2>HTTPS</h2>
-		<p>
-			HTTPS is the 'Hypertext Transfer Protocol Secure', which means that it is a variation on the HTTP protocol - except it uses transport layer security
-			(TLS) - an encryption protocol invoked by an HTTPS request, that enables authentication and encryption on the webpage being visited. SSL is
-			essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or
-			‘miscommunicated' data, because this increases security.
-		</p>
-	</body>
-</html>
--- a/_site/computer-science-blog/pages/hyperlinks.html
+++ b/_site/computer-science-blog/pages/hyperlinks.html
@@ -1,32 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-        <meta name="HandheldFriendly" content="True">
-
-        <!-- import Roboto (font) -->
-        <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-        <!-- import Bootstrap -->
-        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
-
-        <!-- import local styling & scripts -->
-        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
-    </head>
-	<body>
-		<h2>Hyperlinks</h2>
-		<p>
-			A hyperlink is simply a link on the web to another resource. It uses a special kind of command that jumps you to different content in your web browser - usually to another page. 
-			<br>
-			Hyperlinks are often denoted by blue underlined text or content which turns the cursor into a pointing hand when hovered over; however, they can be styled however the web designer wishes; their appearances do not change their function.
-			<br>
-			Website owners reserve the right not to be hyperlinked without permission.
-			<br>
-			Hyperlinks are defined in HTML as follows:
-			<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
-		</p>
-	</body>
-</html>
--- a/_site/computer-science-blog/pages/js.html
+++ b/_site/computer-science-blog/pages/js.html
@@ -1,36 +0,0 @@
-<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-        <meta name="HandheldFriendly" content="True">
-
-        <!-- import Roboto (font) -->
-        <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-        <!-- import Bootstrap -->
-        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
-
-        <!-- import local styling & scripts -->
-        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
-    </head>
-    <body>
-        <h2>JavaScript</h2>
-        <p>
-            JavaScript (JS) is a high-level, client-side language, meaning that it is like a human language
-            (rather than, for example, binary) and runs on the end user's computer. It is used for many purposes,
-            including editing content on a webpage, performing mathematical operations and storing variables.
-            Each line of JavaScript should end in a semicolon, for example:
-            <br>
-            <code>
-                // this code sets the content of the element with the ID "id_name" to "Hello World!"<br>
-                document.getElementById("id_name").innerHTML = "Hello World!";
-            </code>
-            <br>
-            A single line comment in JS is denoted by a double forward slash (<code>//</code>); a multi line comment
-            is started with <code>/*</code> and ended with <code>*/</code>.
-        </p>
-	</body>
-</html>
--- a/_site/comsci/index.html
+++ b/_site/comsci/index.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
 <html>
-    <head>
+
+<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="HandheldFriendly" content="True">
    <link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">

@@ -14,134 +15,140 @@
    <!-- add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="ComSci | Matthew Grove">
+    <meta name="apple-mobile-web-app-title" content="ComSci">
    <link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">

    <!-- tile icon & colour for Windows 8 -->
    <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
-    <meta name="msapplication-TileColor" content="#d84315">
+    <meta name="msapplication-TileColor" content="#26174e">

+    <!-- page info -->
    <title>ComSci | Matthew Grove</title>
-    <meta name="description" content="Some Computer Science info - by Matthew Grove">
+    <meta name="description" content="Some Computer Science info | by Matthew Grove">
+    <meta name="keywords" content="" />

-    <!-- import Roboto (font) -->
-    <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-    <!-- import jQuery -->
-    <script src="/js/jquery.min.js" type="text/javascript"></script>
-
-    <!-- import cookie JavaScript -->
-    <script src="/js/cookies.js" type="text/javascript"></script>
-
-    <!-- import Material Design components & icons -->
-    <link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
-    <link href="/css/material_icons.css" rel="stylesheet" type="text/css">
-    <script src="/js/material-components-web.min.js" type="text/javascript"></script>
-
-    <!-- import local styling & scripts -->
-    <script src="/js/global.js" type="text/javascript"></script>
-    <link href="/css/global.css" rel="stylesheet" type="text/css">
+    <!-- stylesheets -->
+    <link rel="stylesheet" href="/assets/css/main.css" />

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
    <script type="text/javascript">
        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
+        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-124505000-1');
    </script>
 </head>

-    <body>
-        <!-- cookie notice is included automatically -->
-        <div id="cookies">
+<script src="/assets/js/jquery.min.js"></script>
+
+<body class="is-preload">
+	
+	<!-- Header -->
+<header id="header">
+	<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
+	<a class="logo" href="/">Matthew Grove</a>
+	<nav>
+		<a href="#menu">Menu</a>
+	</nav>
+</header>
+
+<!-- Nav -->
+<nav id="menu">
+	<ul class="links">
+		<li><a href="/" >Home</a></li>
+
+		
+		
+		
+		
+		
+		<li><a href="/young-reporter/" >BBC Young Reporter Article Creator</a></li>
+		
+		
+		
+		<li><a href="/comsci/"  class="current-page-link"
+				>ComSci</a></li>
+		
+		
+		
+		
+		
+		<li><a href="/luhn-algorithm/" >Luhn Algorithm</a></li>
+		
+		
+		
+		<li><a href="/site-theme/" >Site Theme</a></li>
+		
+		
+	</ul>
+</nav>
+
+	<div id="cookies">
    <p>Just to let you know, I use cookies on my site.</p>
    <p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
 </div>

+	<!-- Heading -->
+	<div id="heading">
+		<h1>ComSci</h1>
+	</div>

-        <!-- content of navbar is included automatically -->
-        <aside class="navbar-insert mdc-drawer mdc-drawer--modal">
-    <div class="mdc-drawer__content">
-        <div style="margin: 15px;text-align:center;">
-            <img src="https://mgrove.uk/logo.png" style="width: 90%;"/>
-        </div>
-        <div class="mdc-list">
-            <a class="mdc-list-item" href="https://blog.mgrove.uk">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
-                <span class="mdc-list-item__text">My Blog</span>
-            </a>
-            <a class="mdc-list-item" href="/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
-                <span class="mdc-list-item__text">Home Page</span>
-            </a>
-            
-            
-            <a class="mdc-list-item" href="/comsci/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">computer</i>
-                <span class="mdc-list-item__text">ComSci</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/luhn-algorithm/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
-                <span class="mdc-list-item__text">Luhn Algorithm</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/young-reporter/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">article</i>
-                <span class="mdc-list-item__text">BBC Young Reporter Article Creator</span>
-            </a>
-            
-            
-            
-            
-            
-            <a class="mdc-list-item" href="/computer-science-blog/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
-                <span class="mdc-list-item__text">GCSE Computer Science Blog</span>
-            </a>
-            
-            
-            
-            
-        </div>
-    </div>
-</aside>
-
-<div class="mdc-drawer-scrim"></div>
-
-
-        <div class="mdc-drawer-app-content">
-            <header class="mdc-top-app-bar app-bar" id="app-bar">
-                <div class="mdc-top-app-bar__row">
-                    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
-                        <span class="mdc-top-app-bar__title">ComSci | Matthew Grove</span>
-                    </section>
-                </div>
-            </header>
-
-            <main class="main-content" id="main-content">
-                <div class="mdc-top-app-bar--fixed-adjust">
-                    <meta http-equiv="refresh" content="0;URL='https://www.youtube.com/watch?v=oHg5SJYRHA0'" />
+	<!-- Main -->
+	<section id="main" class="wrapper">
+		<div class="inner">
+			<div class="content">
+				<meta http-equiv="refresh" content="0;URL='https://www.youtube.com/watch?v=oHg5SJYRHA0'" />

 <p>This page is loading. If it doesn’t load within five seconds, please click <a href="https://www.youtube.com/watch?v=oHg5SJYRHA0">here</a></p>

-                    <!-- link to source code on GitHub -->
-                    <a href="https://github.com/mgrove36/demo-code/tree/master/comsci/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
-                        <span class="material-icons mdc-fab__icon">rate_review</span>
-                        <span class="mdc-fab__label">View on GitHub</span>
-                    </a>
-                </div>
-            </main>
-            <footer>
-    &copy; Matthew Grove 2020
-</footer>
+			</div>
+		</div>
+	</section>

-        </div>
-    </body>
-</html>
+	<!-- Footer -->
+	<footer id="footer">
+		<div class="inner">
+			<div class="content">
+    <section>
+        <h3>Matthew Grove</h3>
+        <p>Software engineer & amateur photographer from Surrey, UK.</p>
+        <br>
+        <a href="https://github.com/mgrove36/demo-code/tree/master/comsci/">View this page on
+            GitHub.</a>
+
+    </section>
+    <section>
+        <h4>Other Links</h4>
+        <ul class="plain">
+            <li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i
+                        class="icon fa-camera">&nbsp;</i>Photography</a></li>
+            <li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i
+                        class="icon fa-paw">&nbsp;</i>Dogs</a></li>
+            <li><a href="mailto:me@mgrove.uk"><i class="icon fa-envelope">&nbsp;</i>Email me</a></li>
+        </ul>
+    </section>
+    <section>
+        <h4>Social Media</h4>
+        <ul class="plain">
+            <li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github">&nbsp;</i>Github</a></li>
+            <li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter">&nbsp;</i>Twitter</a></li>
+            <li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram">&nbsp;</i>Instagram</a></li>
+            <li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook">&nbsp;</i>Facebook</a></li>
+        </ul>
+    </section>
+</div>
+<div class="copyright">
+    &copy; Matthew Grove 2020.
+</div>
+		</div>
+	</footer>
+	
+	<!-- Scripts -->
+<script src="/assets/js/cookies.js"></script>
+<script src="/assets/js/util.js"></script>
+<script src="/assets/js/main.js"></script>
+
+</body>
+
+</html>
--- a/_site/css/bootstrap.min.css
+++ b/_site/css/bootstrap.min.css
--- a/_site/css/global.css
+++ b/_site/css/global.css
@@ -1,99 +0,0 @@
-:root {
-    /* change theme */
-    --mdc-theme-primary: #0092a1;
-    --mdc-theme-secondary: #546875;
-    /* ensure Bootstrap doesn't alter any font sizes set in rem */
-    font-size: initial;
-}
-
-/* implement colour theme on elements that don't have it applied by default */
-.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
-   color: var(--mdc-theme-primary);
-}
-
-/* hide unwanted overflow from mdc-text-field :before & :after */
-.mdc-text-field-container {
-   overflow: hidden;
-}
-/* give space for mdc-text-field label to show properly when field is selected */
-.mdc-text-field {
-   margin-top: 5px;
-}
-
-body {
-   font-family: 'Roboto', sans-serif;
-   text-align: center;
-}
-.mdc-text-field-helper-text {
-   margin-bottom: 10px;
-}
-.source-code-link {
-   position: fixed;
-   bottom: 15px;
-   right: 25px;
-}
-a {
-    color: var(--mdc-theme-secondary);
-}
-
-/* for MDC navbar */
-body {
-    display: flex;
-    height: 100vh;
-    margin: 0;
-}
-
-.mdc-drawer-app-content {
-    flex: auto;
-    overflow: auto;
-}
-
-.main-content {
-    overflow: auto;
-}
-
-.app-bar {
-    position: absolute;
-}
-
-.main-content, footer {
-    margin: 20px;
-}
-
-/* ensure that buttons' colours don't change on hover and background colour changes are animated */
-.mdc-button:hover, .mdc-fab:hover, .material-icons:hover, .mdc-button:focus, .mdc-fab:focus, .material-icons:focus {
-    text-decoration: none;
-    transition: background-color 0.75s;
-}
-.mdc-button:hover {
-    color: var(--mdc-theme-primary);
-}
-.mdc-fab:hover {
-    color: #fff;
-}
-.mdc-fab::before, .mdc-top-app-bar__action-item::before, .mdc-top-app-bar__navigation-icon::before {
-    transition-duration: 0.15s;
-}
-
-/* for cookie notice */
-#cookies {
-    display: none;
-    width: 100%;
-    position: fixed;
-    background: var(--mdc-theme-secondary);
-    color: var(--mdc-theme-background);
-    text-align: center;
-    bottom: -100px;
-    left: 0;
-    z-index: 9999;
-}
-
-#cookies p {
-    margin: 10px;
-}
-
-#cookies p a {
-    color: white;
-    font-weight: bold;
-    text-decoration: none;
-}
--- a/_site/css/material-components-web.min.css
+++ b/_site/css/material-components-web.min.css
--- a/_site/css/material_icons.css
+++ b/_site/css/material_icons.css
@@ -1,23 +0,0 @@
-/* fallback */
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
--- a/_site/css/roboto.css
+++ b/_site/css/roboto.css
@@ -1,56 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
--- a/_site/images/banner-old.jpg
+++ b/_site/images/banner-old.jpg
--- a/_site/images/banner.jpg
+++ b/_site/images/banner.jpg
--- a/_site/images/banner.mp4
+++ b/_site/images/banner.mp4
--- a/_site/images/bg-old.jpg
+++ b/_site/images/bg-old.jpg
--- a/_site/images/cta01-old.jpg
+++ b/_site/images/cta01-old.jpg
--- a/_site/images/cta01.jpg
+++ b/_site/images/cta01.jpg
--- a/_site/images/pic01.jpg
+++ b/_site/images/pic01.jpg
--- a/_site/images/pic02.jpg
+++ b/_site/images/pic02.jpg
--- a/_site/images/pic03.jpg
+++ b/_site/images/pic03.jpg
--- a/_site/index.html
+++ b/_site/index.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
 <html>
-    <head>
+
+<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="HandheldFriendly" content="True">
    <link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">

@@ -14,135 +15,203 @@
    <!-- add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="Demo Site | Matthew Grove">
+    <meta name="apple-mobile-web-app-title" content="Demo Site">
    <link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">

    <!-- tile icon & colour for Windows 8 -->
    <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
-    <meta name="msapplication-TileColor" content="#d84315">
+    <meta name="msapplication-TileColor" content="#26174e">

+    <!-- page info -->
    <title>Demo Site | Matthew Grove</title>
-    <meta name="description" content="Small coding projects - by Matthew Grove">
+    <meta name="description" content="My demo site - where I host small coding projects and demonstrations. | by Matthew Grove">
+    <meta name="keywords" content="" />

-    <!-- import Roboto (font) -->
-    <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-    <!-- import jQuery -->
-    <script src="/js/jquery.min.js" type="text/javascript"></script>
-
-    <!-- import cookie JavaScript -->
-    <script src="/js/cookies.js" type="text/javascript"></script>
-
-    <!-- import Material Design components & icons -->
-    <link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
-    <link href="/css/material_icons.css" rel="stylesheet" type="text/css">
-    <script src="/js/material-components-web.min.js" type="text/javascript"></script>
-
-    <!-- import local styling & scripts -->
-    <script src="/js/global.js" type="text/javascript"></script>
-    <link href="/css/global.css" rel="stylesheet" type="text/css">
+    <!-- stylesheets -->
+    <link rel="stylesheet" href="/assets/css/main.css" />

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
    <script type="text/javascript">
        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
+        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-124505000-1');
    </script>
 </head>

-    <body>
-        <!-- cookie notice is included automatically -->
-        <div id="cookies">
+<script src="/assets/js/jquery.min.js"></script>
+	
+<body class="is-preload">
+
+	<!-- Header -->
+<header id="header">
+	<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
+	<a class="logo" href="/">Matthew Grove</a>
+	<nav>
+		<a href="#menu">Menu</a>
+	</nav>
+</header>
+
+<!-- Nav -->
+<nav id="menu">
+	<ul class="links">
+		<li><a href="/"  class="current-page-link"
+				>Home</a></li>
+
+		
+		
+		
+		
+		
+		<li><a href="/young-reporter/" >BBC Young Reporter Article Creator</a></li>
+		
+		
+		
+		<li><a href="/comsci/" >ComSci</a></li>
+		
+		
+		
+		
+		
+		<li><a href="/luhn-algorithm/" >Luhn Algorithm</a></li>
+		
+		
+		
+		<li><a href="/site-theme/" >Site Theme</a></li>
+		
+		
+	</ul>
+</nav>
+
+	<div id="cookies">
    <p>Just to let you know, I use cookies on my site.</p>
    <p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
 </div>

+	<!-- Banner -->
+	<section id="banner">
+		<div class="inner">
+			<img src="https://mgrove.uk/logo-clear-square.png" class="banner-logo" />
+			<h1>Matthew Grove</h1>
+			<p>My demo site - where I host small coding projects and demonstrations.</p>
+		</div>
+	</section>

-        <!-- content of navbar is included automatically -->
-        <aside class="navbar-insert mdc-drawer mdc-drawer--modal">
-    <div class="mdc-drawer__content">
-        <div style="margin: 15px;text-align:center;">
-            <img src="https://mgrove.uk/logo.png" style="width: 90%;"/>
-        </div>
-        <div class="mdc-list">
-            <a class="mdc-list-item" href="https://blog.mgrove.uk">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
-                <span class="mdc-list-item__text">My Blog</span>
-            </a>
-            <a class="mdc-list-item" href="/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
-                <span class="mdc-list-item__text">Home Page</span>
-            </a>
-            
-            
-            <a class="mdc-list-item" href="/comsci/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">computer</i>
-                <span class="mdc-list-item__text">ComSci</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/luhn-algorithm/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
-                <span class="mdc-list-item__text">Luhn Algorithm</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/young-reporter/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">article</i>
-                <span class="mdc-list-item__text">BBC Young Reporter Article Creator</span>
-            </a>
-            
-            
-            
-            
-            
-            <a class="mdc-list-item" href="/computer-science-blog/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
-                <span class="mdc-list-item__text">GCSE Computer Science Blog</span>
-            </a>
-            
-            
-            
-            
-        </div>
-    </div>
-</aside>
+	<!-- Highlights -->
+	<section class="wrapper">
+		<div class="inner">
+			<header class="special">
+				<h2>Projects</h2>
+				<p><p>Got some ideas for me? <a href="https://goo.gl/forms/qXO1cwSbE4FoQHdq2">Leave them here.</a></p>
+</a></p>
+			</header>
+			<div class="highlights">

-<div class="mdc-drawer-scrim"></div>
+				
+				
+				
+				
+				<section>
+					<div class="content">
+						<header>
+							<a href="/young-reporter/" class="icon fa-comment"><span class="label"></span></a>
+							<h3>BBC Young Reporter Article Creator</h3>
+						</header>
+						<p>A simple tool to create markdown files from news articles, for uploading to the Reading School BBC Young Reporter website</p>
+						<a href="/young-reporter/" class="button small">See more</a>
+					</div>
+				</section>
+				
+				
+				
+				<section>
+					<div class="content">
+						<header>
+							<a href="/comsci/" class="icon fa-laptop"><span class="label"></span></a>
+							<h3>ComSci</h3>
+						</header>
+						<p>Some Computer Science info</p>
+						<a href="/comsci/" class="button small">See more</a>
+					</div>
+				</section>
+				
+				
+				
+				
+				
+				<section>
+					<div class="content">
+						<header>
+							<a href="/luhn-algorithm/" class="icon fa-credit-card"><span class="label"></span></a>
+							<h3>Luhn Algorithm</h3>
+						</header>
+						<p>Replication of the Luhn algorithm</p>
+						<a href="/luhn-algorithm/" class="button small">See more</a>
+					</div>
+				</section>
+				
+				
+				
+				<section>
+					<div class="content">
+						<header>
+							<a href="/site-theme/" class="icon fa-pencil-square-o"><span class="label"></span></a>
+							<h3>Site Theme</h3>
+						</header>
+						<p>A list of all templated elements available in this site's theme.</p>
+						<a href="/site-theme/" class="button small">See more</a>
+					</div>
+				</section>
+				
+				
+			</div>
+		</div>
+	</section>

+	<!-- Footer -->
+	<footer id="footer">
+		<div class="inner">
+			<div class="content">
+    <section>
+        <h3>Matthew Grove</h3>
+        <p>Software engineer & amateur photographer from Surrey, UK.</p>
+        <br>
+        <a href="https://github.com/mgrove36/demo-code/tree/master/">View this page on
+            GitHub.</a>

-        <div class="mdc-drawer-app-content">
-            <header class="mdc-top-app-bar app-bar" id="app-bar">
-                <div class="mdc-top-app-bar__row">
-                    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
-                        <span class="mdc-top-app-bar__title">Demo Site | Matthew Grove</span>
-                    </section>
-                </div>
-            </header>
+    </section>
+    <section>
+        <h4>Other Links</h4>
+        <ul class="plain">
+            <li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i
+                        class="icon fa-camera">&nbsp;</i>Photography</a></li>
+            <li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i
+                        class="icon fa-paw">&nbsp;</i>Dogs</a></li>
+            <li><a href="mailto:me@mgrove.uk"><i class="icon fa-envelope">&nbsp;</i>Email me</a></li>
+        </ul>
+    </section>
+    <section>
+        <h4>Social Media</h4>
+        <ul class="plain">
+            <li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github">&nbsp;</i>Github</a></li>
+            <li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter">&nbsp;</i>Twitter</a></li>
+            <li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram">&nbsp;</i>Instagram</a></li>
+            <li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook">&nbsp;</i>Facebook</a></li>
+        </ul>
+    </section>
+</div>
+<div class="copyright">
+    &copy; Matthew Grove 2020.
+</div>
+		</div>
+	</footer>
+	
+	<!-- Scripts -->
+<script src="/assets/js/cookies.js"></script>
+<script src="/assets/js/util.js"></script>
+<script src="/assets/js/main.js"></script>

-            <main class="main-content" id="main-content">
-                <div class="mdc-top-app-bar--fixed-adjust">
-                    <h1 id="my-demo-site">My Demo Site</h1>
-<p>This site contains code for small projects that I am doing; each project can be accessed via the navigation drawer.</p>
+</body>

-<p>If you have any ideas for projects I could do, please leave them <a href="https://goo.gl/forms/qXO1cwSbE4FoQHdq2">here</a>.</p>
-
-                    <!-- link to source code on GitHub -->
-                    <a href="https://github.com/mgrove36/demo-code/tree/master/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
-                        <span class="material-icons mdc-fab__icon">rate_review</span>
-                        <span class="mdc-fab__label">View on GitHub</span>
-                    </a>
-                </div>
-            </main>
-            <footer>
-    &copy; Matthew Grove 2020
-</footer>
-
-        </div>
-    </body>
-</html>
+</html>
--- a/_site/js/bootstrap.min.js
+++ b/_site/js/bootstrap.min.js
--- a/_site/js/global.js
+++ b/_site/js/global.js
@@ -1,42 +0,0 @@
-$(document).ready(function() {
-    // initiate MDC drawer
-    const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
-
-    // initiate MDC top app bar
-    const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
-    // mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
-    mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
-        drawer.open = !drawer.open;
-    });
-
-    // initiate MDC items
-    mdc.autoInit();
-
-    // get current URL with no forward slash at the end and no domain
-    var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.location.pathname;
-    if (drawer_item_link_query_selector.substring(drawer_item_link_query_selector.length - 1) == "/") {
-        drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
-    }
-
-    // give 'selected' styling to correct item on navbar
-    $(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
-    $(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
-    $(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
-    $(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
-    $(drawer_item_link_query_selector + "/index.html']").addClass("mdc-list-item--activated");
-    $(drawer_item_link_query_selector + "/index.html']").attr("aria-selected", "true");
-    
-    // include cookie notice
-    if(Cookies.get("demo.mgrove.uk-cookies-accepted") != "true") {
-        $("#cookies").show();
-        $("#cookies").animate({bottom: "0px"}, 1000);
-        $(".source-code-link").animate({bottom: "100px"}, 1000);
-        $("#close-cookies").click(function(){
-            event.preventDefault();
-            $("#cookies").animate({bottom: "-100px"}, 1000);
-            setTimeout(function(){$("#cookies").hide()},1000);
-            $(".source-code-link").animate({bottom: "15px"}, 1000);
-            Cookies.set("demo.mgrove.uk-cookies-accepted", "true", {expires: 30});
-        });
-    }
-});
--- a/_site/js/jquery.min.js
+++ b/_site/js/jquery.min.js
--- a/_site/js/material-components-web.min.js
+++ b/_site/js/material-components-web.min.js
--- a/_site/luhn-algorithm/index.html
+++ b/_site/luhn-algorithm/index.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
 <html>
-    <head>
+
+<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="HandheldFriendly" content="True">
    <link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">

@@ -14,161 +15,158 @@
    <!-- add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="Luhn Algorithm | Matthew Grove">
+    <meta name="apple-mobile-web-app-title" content="Luhn Algorithm">
    <link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">

    <!-- tile icon & colour for Windows 8 -->
    <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
-    <meta name="msapplication-TileColor" content="#d84315">
+    <meta name="msapplication-TileColor" content="#26174e">

+    <!-- page info -->
    <title>Luhn Algorithm | Matthew Grove</title>
-    <meta name="description" content="Replication of the Luhn algorithm - by Matthew Grove">
+    <meta name="description" content="Replication of the Luhn algorithm | by Matthew Grove">
+    <meta name="keywords" content="" />

-    <!-- import Roboto (font) -->
-    <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-    <!-- import jQuery -->
-    <script src="/js/jquery.min.js" type="text/javascript"></script>
-
-    <!-- import cookie JavaScript -->
-    <script src="/js/cookies.js" type="text/javascript"></script>
-
-    <!-- import Material Design components & icons -->
-    <link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
-    <link href="/css/material_icons.css" rel="stylesheet" type="text/css">
-    <script src="/js/material-components-web.min.js" type="text/javascript"></script>
-
-    <!-- import local styling & scripts -->
-    <script src="/js/global.js" type="text/javascript"></script>
-    <link href="/css/global.css" rel="stylesheet" type="text/css">
+    <!-- stylesheets -->
+    <link rel="stylesheet" href="/assets/css/main.css" />

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
    <script type="text/javascript">
        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
+        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-124505000-1');
    </script>
 </head>

-    <body>
-        <!-- cookie notice is included automatically -->
-        <div id="cookies">
+<script src="/assets/js/jquery.min.js"></script>
+
+<body class="is-preload">
+	
+	<!-- Header -->
+<header id="header">
+	<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
+	<a class="logo" href="/">Matthew Grove</a>
+	<nav>
+		<a href="#menu">Menu</a>
+	</nav>
+</header>
+
+<!-- Nav -->
+<nav id="menu">
+	<ul class="links">
+		<li><a href="/" >Home</a></li>
+
+		
+		
+		
+		
+		
+		<li><a href="/young-reporter/" >BBC Young Reporter Article Creator</a></li>
+		
+		
+		
+		<li><a href="/comsci/" >ComSci</a></li>
+		
+		
+		
+		
+		
+		<li><a href="/luhn-algorithm/"  class="current-page-link"
+				>Luhn Algorithm</a></li>
+		
+		
+		
+		<li><a href="/site-theme/" >Site Theme</a></li>
+		
+		
+	</ul>
+</nav>
+
+	<div id="cookies">
    <p>Just to let you know, I use cookies on my site.</p>
    <p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
 </div>

+	<!-- Heading -->
+	<div id="heading">
+		<h1>Luhn Algorithm</h1>
+	</div>

-        <!-- content of navbar is included automatically -->
-        <aside class="navbar-insert mdc-drawer mdc-drawer--modal">
-    <div class="mdc-drawer__content">
-        <div style="margin: 15px;text-align:center;">
-            <img src="https://mgrove.uk/logo.png" style="width: 90%;"/>
-        </div>
-        <div class="mdc-list">
-            <a class="mdc-list-item" href="https://blog.mgrove.uk">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
-                <span class="mdc-list-item__text">My Blog</span>
-            </a>
-            <a class="mdc-list-item" href="/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
-                <span class="mdc-list-item__text">Home Page</span>
-            </a>
-            
-            
-            <a class="mdc-list-item" href="/comsci/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">computer</i>
-                <span class="mdc-list-item__text">ComSci</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/luhn-algorithm/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
-                <span class="mdc-list-item__text">Luhn Algorithm</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/young-reporter/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">article</i>
-                <span class="mdc-list-item__text">BBC Young Reporter Article Creator</span>
-            </a>
-            
-            
-            
-            
-            
-            <a class="mdc-list-item" href="/computer-science-blog/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
-                <span class="mdc-list-item__text">GCSE Computer Science Blog</span>
-            </a>
-            
-            
-            
-            
-        </div>
-    </div>
-</aside>
-
-<div class="mdc-drawer-scrim"></div>
-
-
-        <div class="mdc-drawer-app-content">
-            <header class="mdc-top-app-bar app-bar" id="app-bar">
-                <div class="mdc-top-app-bar__row">
-                    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
-                        <span class="mdc-top-app-bar__title">Luhn Algorithm | Matthew Grove</span>
-                    </section>
-                </div>
-            </header>
-
-            <main class="main-content" id="main-content">
-                <div class="mdc-top-app-bar--fixed-adjust">
-                    <link href="style.css" rel="stylesheet" type="text/css" />
+	<!-- Main -->
+	<section id="main" class="wrapper">
+		<div class="inner">
+			<div class="content">
+				<link href="style.css" rel="stylesheet" type="text/css" />

 <script src="script.js" type="text/javascript"></script>

 <h1 id="validate-your-number">Validate Your Number</h1>
-<!-- input field (in a container so that unwanted overflow from :before & :after is hidden) -->
-<div class="mdc-text-field-container">
-    <div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
-        <input type="number" id="number-input-field" class="mdc-text-field__input" />
-        <label for="number-input-field" class="mdc-floating-label ">Number</label>
-        <div class="mdc-notched-outline">
-            <svg>
-                <path class="mdc-notched-outline__path" />
-            </svg>
+
+<form onreset="$('#validation_message').html(null);">
+    <div class="row gtr-uniform">
+        <div class="col-6 col-12-xsmall">
+            <input type="number" id="number-input-field" placeholder="Number" />
+        </div>
+        <div class="col-12">
+            <ul class="actions">
+                <li><a href="javascript:checkNumber();" class="button primary icon fa-check-circle">Check</a></li>
+                <li><input type="reset" value="Reset" /></li>
+            </ul>
        </div>
-        <div class="mdc-notched-outline__idle"></div>
    </div>
-    <!-- input field helper text -->
-    <p class="mdc-text-field-helper-text" aria-hidden="true">
-        Validate with the Luhn Algorithm
-    </p>
-</div>
-<!-- button to submit & check number with Luhn algorithm -->
-<p><button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()" data-mdc-auto-init="MDCRipple">
-    <i class="material-icons mdc-button__icon">check_circle_outline</i>
-    Check
-</button>
-<!-- displays evaluation of number by Luhn algorithm --></p>
+</form>
+
 <p id="validation_message"></p>

+			</div>
+		</div>
+	</section>

-                    <!-- link to source code on GitHub -->
-                    <a href="https://github.com/mgrove36/demo-code/tree/master/luhn-algorithm/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
-                        <span class="material-icons mdc-fab__icon">rate_review</span>
-                        <span class="mdc-fab__label">View on GitHub</span>
-                    </a>
-                </div>
-            </main>
-            <footer>
-    &copy; Matthew Grove 2020
-</footer>
+	<!-- Footer -->
+	<footer id="footer">
+		<div class="inner">
+			<div class="content">
+    <section>
+        <h3>Matthew Grove</h3>
+        <p>Software engineer & amateur photographer from Surrey, UK.</p>
+        <br>
+        <a href="https://github.com/mgrove36/demo-code/tree/master/luhn-algorithm/">View this page on
+            GitHub.</a>

-        </div>
-    </body>
-</html>
+    </section>
+    <section>
+        <h4>Other Links</h4>
+        <ul class="plain">
+            <li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i
+                        class="icon fa-camera">&nbsp;</i>Photography</a></li>
+            <li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i
+                        class="icon fa-paw">&nbsp;</i>Dogs</a></li>
+            <li><a href="mailto:me@mgrove.uk"><i class="icon fa-envelope">&nbsp;</i>Email me</a></li>
+        </ul>
+    </section>
+    <section>
+        <h4>Social Media</h4>
+        <ul class="plain">
+            <li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github">&nbsp;</i>Github</a></li>
+            <li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter">&nbsp;</i>Twitter</a></li>
+            <li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram">&nbsp;</i>Instagram</a></li>
+            <li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook">&nbsp;</i>Facebook</a></li>
+        </ul>
+    </section>
+</div>
+<div class="copyright">
+    &copy; Matthew Grove 2020.
+</div>
+		</div>
+	</footer>
+	
+	<!-- Scripts -->
+<script src="/assets/js/cookies.js"></script>
+<script src="/assets/js/util.js"></script>
+<script src="/assets/js/main.js"></script>
+
+</body>
+
+</html>
--- a/_site/luhn-algorithm/script.js
+++ b/_site/luhn-algorithm/script.js
@@ -1,13 +1,25 @@
-document.addEventListener("keyup", function(event) {
-    // stop any code that may normally run when enter key pressed
-    event.preventDefault();
-    // if enter key is pressed, run Luhn algorithm
-    if (event.keyCode === 13) {
+document.addEventListener("keydown", function(event) {
+    if (event.defaultPrevented) {
+        return;
+    }
+
+    var handled = false;
+    if (event.key === "Enter") {
        checkNumber();
+        handled = true;
    } else {
        // if number in input field is being edited, remove previous number evaluation message
        $("#validation_message").html(null);
    }
+
+    if (handled) {
+        // Suppress "double action" if event handled
+        event.preventDefault();
+    }
+});
+
+$("input[type='reset']").addEventListener("keydown", function(event) {
+    $("#validation_message").html(null);
 });

 // function for validating number entered with Luhn algorithm
--- a/_site/page-inserts/cookie-notice.html
+++ b/_site/page-inserts/cookie-notice.html
@@ -1,2 +0,0 @@
-<p>Just to let you know, I use cookies on my site.</p>
-<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
--- a/_site/page-inserts/navbar.html
+++ b/_site/page-inserts/navbar.html
@@ -1,23 +0,0 @@
-<div class="mdc-drawer__content">
-    <div style="margin: 15px;text-align:center;">
-        <img src="https://matthew-grove.ml/logo.png" style="width: 90%;"/>
-    </div>
-    <div class="mdc-list">
-        <a class="mdc-list-item" href="https://blog.matthew-grove.ml">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
-            <span class="mdc-list-item__text">Blog</span>
-        </a>
-        <a class="mdc-list-item" href="/">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
-            <span class="mdc-list-item__text">Home Page</span>
-        </a>
-        <a class="mdc-list-item" href="/luhn-algorithm/">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
-            <span class="mdc-list-item__text">Luhn Algorithm</span>
-        </a>
-        <a class="mdc-list-item" href="/computer-science-blog/">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
-            <span class="mdc-list-item__text">GCSE Computer Science Blog</span>
-        </a>
-    </div>
-</div>
--- a/_site/page-inserts/source-code-link.html
+++ b/_site/page-inserts/source-code-link.html
@@ -1,2 +0,0 @@
-<span class="material-icons mdc-fab__icon">rate_review</span>
-<span class="mdc-fab__label">View on GitHub</span>
--- a/_site/page-inserts/top-app-bar.html
+++ b/_site/page-inserts/top-app-bar.html
@@ -1,6 +0,0 @@
-<div class="mdc-top-app-bar__row">
-    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
-        <span class="mdc-top-app-bar__title">Demo Site | Matthew Grove</span>
-    </section>
-</div>
--- a/_site/remove.html
+++ b/_site/remove.html
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <script src="/js/cookies.js"></script>
-        <script>
-            Cookies.remove("demo.matthew-grove.ml-cookies-accepted");
-        </script>
-    </head>
-    <body>
-        My cookie has been removed.
-    </body>
-</html>
--- a/_site/site-theme/index.html
+++ b/_site/site-theme/index.html
@@ -0,0 +1,634 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="HandheldFriendly" content="True">
+    <link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
+
+    <!-- add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
+
+    <!-- add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Site Theme">
+    <link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
+
+    <!-- tile icon & colour for Windows 8 -->
+    <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
+    <meta name="msapplication-TileColor" content="#26174e">
+
+    <!-- page info -->
+    <title>Site Theme | Matthew Grove</title>
+    <meta name="description" content="A list of all templated elements available in this site's theme. | by Matthew Grove">
+    <meta name="keywords" content="" />
+
+    <!-- stylesheets -->
+    <link rel="stylesheet" href="/assets/css/main.css" />
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
+    <script type="text/javascript">
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+        gtag('config', 'UA-124505000-1');
+    </script>
+</head>
+
+<script src="/assets/js/jquery.min.js"></script>
+
+<body class="is-preload">
+	
+	<!-- Header -->
+<header id="header">
+	<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
+	<a class="logo" href="/">Matthew Grove</a>
+	<nav>
+		<a href="#menu">Menu</a>
+	</nav>
+</header>
+
+<!-- Nav -->
+<nav id="menu">
+	<ul class="links">
+		<li><a href="/" >Home</a></li>
+
+		
+		
+		
+		
+		
+		<li><a href="/young-reporter/" >BBC Young Reporter Article Creator</a></li>
+		
+		
+		
+		<li><a href="/comsci/" >ComSci</a></li>
+		
+		
+		
+		
+		
+		<li><a href="/luhn-algorithm/" >Luhn Algorithm</a></li>
+		
+		
+		
+		<li><a href="/site-theme/"  class="current-page-link"
+				>Site Theme</a></li>
+		
+		
+	</ul>
+</nav>
+
+	<div id="cookies">
+    <p>Just to let you know, I use cookies on my site.</p>
+    <p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
+</div>
+
+	<!-- Heading -->
+	<div id="heading">
+		<h1>Site Theme</h1>
+	</div>
+
+	<!-- Main -->
+	<section id="main" class="wrapper">
+		<div class="inner">
+			<div class="content">
+				<div class="row">
+	<div class="col-6 col-12-medium">
+
+		<!-- Text -->
+			<h3>Text</h3>
+			<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this
+			is <em>emphasized</em>.
+			This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
+			This is <u>underlined</u>, this is <code>code</code>, and this is a <a href="#">link</a>.</p>
+			<h2>Heading Level 2</h2>
+			<h3>Heading Level 3</h3>
+			<h4>Heading Level 4</h4>
+			<h5>Heading Level 5</h5>
+			<h6>Heading Level 6</h6>
+			<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem
+			non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed
+			ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing.</p>
+
+		<!-- Lists -->
+			<h3>Lists</h3>
+			<div class="row">
+				<div class="col-6 col-12-small">
+					<h4>Unordered</h4>
+					<ul>
+						<li>Dolor pulvinar amet etiam.</li>
+						<li>Sagittis adipiscing lorem eleifend.</li>
+						<li>Felis enim feugiat viverra.</li>
+					</ul>
+					<h4>Alternate</h4>
+					<ul class="alt">
+						<li>Dolor pulvinar amet etiam.</li>
+						<li>Sagittis adipiscing lorem eleifend.</li>
+						<li>Felis enim feugiat viverra.</li>
+					</ul>
+				</div>
+				<div class="col-6 col-12-small">
+					<h4>Ordered</h4>
+					<ol>
+						<li>Dolor pulvinar sed etiam.</li>
+						<li>Etiam vel lorem sed amet.</li>
+						<li>Felis enim feugiat viverra.</li>
+						<li>Dolor pulvinar magna etiam.</li>
+						<li>Etiam vel felis at sed viverra.</li>
+						<li>Felis enim feugiat amet dolore.</li>
+						<li>Dolor pulvinar lorem etiam.</li>
+						<li>Etiam vel felis at lorem amet.</li>
+						<li>Felis enim feugiat viverra.</li>
+						<li>Dolor pulvinar magna etiam.</li>
+						<li>Etiam vel felis sed viverra.</li>
+					</ol>
+				</div>
+			</div>
+			<h4>Definition</h4>
+			<dl>
+				<dt>Alpha</dt>
+				<dd>
+					<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum.
+					Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
+					Integer ac pellentesque praesent.</p>
+				</dd>
+				<dt>Beta</dt>
+				<dd>
+					<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum.
+					Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
+					Integer ac pellentesque praesent.</p>
+				</dd>
+				<dt>Gamma</dt>
+				<dd>
+					<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum.
+					Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
+					Integer ac pellentesque praesent.</p>
+				</dd>
+			</dl>
+
+		<!-- Icons -->
+			<h3>Icons</h3>
+			<ul class="icons">
+				<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
+				<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
+				<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
+				<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
+				<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
+				<li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
+				<li><a href="#" class="icon fa-apple"><span class="label">Apple</span></a></li>
+				<li><a href="#" class="icon fa-windows"><span class="label">Windows</span></a></li>
+				<li><a href="#" class="icon fa-500px"><span class="label">500px</span></a></li>
+			</ul>
+
+		<!-- Actions -->
+			<h3>Actions</h3>
+			<ul class="actions">
+				<li><a href="#" class="button primary">Default</a></li>
+				<li><a href="#" class="button">Default</a></li>
+			</ul>
+			<ul class="actions">
+				<li><a href="#" class="button primary small">Small</a></li>
+				<li><a href="#" class="button small">Small</a></li>
+			</ul>
+			<div class="row">
+				<div class="col-3 col-12-small">
+					<ul class="actions stacked">
+						<li><a href="#" class="button primary">Default</a></li>
+						<li><a href="#" class="button">Default</a></li>
+					</ul>
+				</div>
+				<div class="col-3 col-12-small">
+					<ul class="actions stacked">
+						<li><a href="#" class="button primary small">Small</a></li>
+						<li><a href="#" class="button small">Small</a></li>
+					</ul>
+				</div>
+				<div class="col-3 col-12-small">
+					<ul class="actions stacked">
+						<li><a href="#" class="button primary fit">Default</a></li>
+						<li><a href="#" class="button fit">Default</a></li>
+					</ul>
+				</div>
+				<div class="col-3 col-12-small">
+					<ul class="actions stacked">
+						<li><a href="#" class="button primary small fit">Small</a></li>
+						<li><a href="#" class="button small fit">Small</a></li>
+					</ul>
+				</div>
+			</div>
+
+		<!-- Blockquote -->
+			<h3>Blockquote</h3>
+			<blockquote>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio
+			porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet.
+			Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra. Lorem ipsum
+			dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis
+			iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac sed amet praesent. Nunc
+			lacinia ante nunc ac gravida.</blockquote>
+
+		<!-- Table -->
+			<h3>Table</h3>
+			<h4>Default</h4>
+			<div class="table-wrapper">
+				<table>
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Description</th>
+							<th>Price</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>Alpha</td>
+							<td>Ante turpis integer aliquet porttitor.</td>
+							<td>10.00</td>
+						</tr>
+						<tr>
+							<td>Beta</td>
+							<td>Vis ac commodo adipiscing arcu aliquet.</td>
+							<td>20.00</td>
+						</tr>
+						<tr>
+							<td>Gamma</td>
+							<td>Morbi faucibus arcu accumsan lorem.</td>
+							<td>30.00</td>
+						</tr>
+						<tr>
+							<td>Delta</td>
+							<td>Vitae integer tempus condimentum.</td>
+							<td>40.00</td>
+						</tr>
+						<tr>
+							<td>Epsilon</td>
+							<td>Ante turpis integer aliquet porttitor.</td>
+							<td>50.00</td>
+						</tr>
+						<tr>
+							<td>Zeta</td>
+							<td>Vis ac commodo adipiscing arcu aliquet.</td>
+							<td>60.00</td>
+						</tr>
+						<tr>
+							<td>Eta</td>
+							<td>Morbi faucibus arcu accumsan lorem.</td>
+							<td>70.00</td>
+						</tr>
+						<tr>
+							<td>Theta</td>
+							<td>Vitae integer tempus condimentum.</td>
+							<td>80.00</td>
+						</tr>
+					</tbody>
+					<tfoot>
+						<tr>
+							<td colspan="2"></td>
+							<td>360.00</td>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<h4>Alternate</h4>
+			<div class="table-wrapper">
+				<table class="alt">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Description</th>
+							<th>Price</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>Alpha</td>
+							<td>Ante turpis integer aliquet porttitor.</td>
+							<td>10.00</td>
+						</tr>
+						<tr>
+							<td>Beta</td>
+							<td>Vis ac commodo adipiscing arcu aliquet.</td>
+							<td>20.00</td>
+						</tr>
+						<tr>
+							<td>Gamma</td>
+							<td>Morbi faucibus arcu accumsan lorem.</td>
+							<td>30.00</td>
+						</tr>
+						<tr>
+							<td>Delta</td>
+							<td>Vitae integer tempus condimentum.</td>
+							<td>40.00</td>
+						</tr>
+						<tr>
+							<td>Epsilon</td>
+							<td>Ante turpis integer aliquet porttitor.</td>
+							<td>50.00</td>
+						</tr>
+						<tr>
+							<td>Zeta</td>
+							<td>Vis ac commodo adipiscing arcu aliquet.</td>
+							<td>60.00</td>
+						</tr>
+						<tr>
+							<td>Eta</td>
+							<td>Morbi faucibus arcu accumsan lorem.</td>
+							<td>70.00</td>
+						</tr>
+						<tr>
+							<td>Theta</td>
+							<td>Vitae integer tempus condimentum.</td>
+							<td>80.00</td>
+						</tr>
+					</tbody>
+					<tfoot>
+						<tr>
+							<td colspan="2"></td>
+							<td>360.00</td>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+
+	</div>
+	<div class="col-6 col-12-medium">
+
+		<!-- Buttons -->
+			<h3>Buttons</h3>
+			<ul class="actions">
+				<li><a href="#" class="button primary">Primary</a></li>
+				<li><a href="#" class="button">Default</a></li>
+			</ul>
+			<ul class="actions">
+				<li><a href="#" class="button primary large">Large</a></li>
+				<li><a href="#" class="button">Default</a></li>
+			</ul>
+			<ul class="actions">
+				<li><a href="#" class="button small">Small</a></li>
+				<li><a href="#" class="button wide">Wide</a></li>
+			</ul>
+			<ul class="actions fit">
+				<li><a href="#" class="button primary fit">Fit</a></li>
+				<li><a href="#" class="button fit">Fit</a></li>
+			</ul>
+			<ul class="actions fit">
+				<li><a href="#" class="button primary fit small">Fit + Small</a></li>
+				<li><a href="#" class="button fit small">Fit + Small</a></li>
+			</ul>
+			<ul class="actions">
+				<li><a href="#" class="button primary icon fa-search">Icon</a></li>
+				<li><a href="#" class="button icon fa-download">Icon</a></li>
+			</ul>
+			<ul class="actions">
+				<li><span class="button primary disabled">Primary</span></li>
+				<li><span class="button disabled">Default</span></li>
+			</ul>
+
+		<!-- Form -->
+			<h3>Form</h3>
+			<form method="post" action="#">
+				<div class="row gtr-uniform">
+					<div class="col-6 col-12-xsmall">
+						<input type="text" name="name" id="name" value="" placeholder="Name" />
+					</div>
+					<div class="col-6 col-12-xsmall">
+						<input type="email" name="email" id="email" value="" placeholder="Email" />
+					</div>
+					<!-- Break -->
+					<div class="col-12">
+						<select name="category" id="category">
+							<option value="">- Select -</option>
+							<option value="alpha">Option alpha</option>
+							<option value="beta">Option beta</option>
+							<option value="gamma">Option gamma</option>
+							<option value="delta">Option delta</option>
+							<option value="epsilon">Option epsilon</option>
+							<option value="zeta">Option zeta</option>
+							<option value="eta">Option eta</option>
+							<option value="theta">Option theta</option>
+						</select>
+					</div>
+					<!-- Break -->
+					<div class="col-4 col-12-small">
+						<input type="radio" id="radio-alpha" name="radio" checked="" />
+						<label for="radio-alpha">Radio alpha</label>
+					</div>
+					<div class="col-4 col-12-small">
+						<input type="radio" id="radio-beta" name="radio" />
+						<label for="radio-beta">Radio beta</label>
+					</div>
+					<div class="col-4 col-12-small">
+						<input type="radio" id="radio-gamma" name="radio" />
+						<label for="radio-gamma">Radio gamma</label>
+					</div>
+					<!-- Break -->
+					<div class="col-6 col-12-small">
+						<input type="checkbox" id="checkbox-alpha" name="checkbox" />
+						<label for="checkbox-alpha">Checkbox alpha</label>
+					</div>
+					<div class="col-6 col-12-small">
+						<input type="checkbox" id="checkbox-beta" name="checkbox" checked="" />
+						<label for="checkbox-beta">Checkbox beta</label>
+					</div>
+					<!-- Break -->
+					<div class="col-12">
+						<textarea name="textarea" id="textarea" placeholder="Alpha beta gamma delta" rows="6"></textarea>
+					</div>
+					<!-- Break -->
+					<div class="col-12">
+						<ul class="actions">
+							<li><input type="submit" value="Submit Form" class="primary" /></li>
+							<li><input type="reset" value="Reset" /></li>
+						</ul>
+					</div>
+				</div>
+			</form>
+
+		<!-- Image -->
+			<h3>Image</h3>
+			<h4>Fit</h4>
+			<span class="image fit"><img src="/images/pic01.jpg" alt="" /></span>
+			<div class="box alt">
+				<div class="row gtr-50 gtr-uniform">
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+					<!-- Break -->
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+					<!-- Break -->
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+					<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
+				</div>
+			</div>
+			<h4>Left &amp; Right</h4>
+			<p>
+				<span class="image left"><img src="/images/pic02.jpg" alt="" /></span>
+				Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget.
+				tempus euismod. Magna et cursus lorem faucibus vestibulum. Blandit adipiscing eu
+				felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque
+				praesent tincidunt felis sagittis eget. tempus euismod tempus. Vestibulum ante ipsum
+				primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac
+				adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis
+				sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.
+				Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
+				Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida lorem ipsum dolor
+				sit amet dolor feugiat consequat.
+			</p>
+			<p>
+				<span class="image right"><img src="/images/pic02.jpg" alt="" /></span>
+				Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget.
+				tempus euismod. Magna et cursus lorem faucibus vestibulum. Blandit adipiscing eu
+				felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque
+				praesent tincidunt felis sagittis eget. tempus euismod tempus. Vestibulum ante ipsum
+				primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac
+				adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis
+				sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.
+				Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
+				Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida lorem ipsum dolor
+				sit amet dolor feugiat consequat.
+			</p>
+
+		<!-- Box -->
+			<h3>Box</h3>
+			<div class="box">
+				<p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu
+				felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque
+				praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum
+				primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus
+				vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu
+				faucibus lorem ipsum dolor sit amet nullam.</p>
+			</div>
+
+		<!-- Preformatted Code -->
+			<h3>Preformatted</h3>
+			<pre><code>i = 0;
+
+while (!deck.isInOrder()) {
+	print 'Iteration ' + i;
+	deck.shuffle();
+	i++;
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';
+</code></pre>
+
+	</div>
+</div>
+
+<!-- CTA -->
+<section id="cta" class="wrapper">
+	<div class="inner">
+		<h2>Example Fancy Header</h2>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	</div>
+</section>
+
+<!-- Testimonials -->
+<section class="wrapper">
+	<div class="inner">
+		<header class="special">
+			<h2>Example Header</h2>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</header>
+		<div class="testimonials">
+			<section>
+				<div class="content">
+					<blockquote>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+					</blockquote>
+					<div class="author">
+						<div class="image">
+							<img src="/images/pic01.jpg" alt="" />
+						</div>
+						<p class="credit">- <strong>Jane Doe</strong> <span>A director of something</span></p>
+					</div>
+				</div>
+			</section>
+			<section>
+				<div class="content">
+					<blockquote>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+					</blockquote>
+					<div class="author">
+						<div class="image">
+							<img src="/images/pic03.jpg" alt="" />
+						</div>
+						<p class="credit">- <strong>John Doe</strong> <span>A person</span></p>
+					</div>
+				</div>
+			</section>
+			<section>
+				<div class="content">
+					<blockquote>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+					</blockquote>
+					<div class="author">
+						<div class="image">
+							<img src="/images/pic02.jpg" alt="" />
+						</div>
+						<p class="credit">- <strong>Janet Smith</strong> <span>Someone important</span></p>
+					</div>
+				</div>
+			</section>
+		</div>
+	</div>
+</section>
+
+			</div>
+		</div>
+	</section>
+
+	<!-- Footer -->
+	<footer id="footer">
+		<div class="inner">
+			<div class="content">
+    <section>
+        <h3>Matthew Grove</h3>
+        <p>Software engineer & amateur photographer from Surrey, UK.</p>
+        <br>
+        <a href="https://github.com/mgrove36/demo-code/tree/master/site-theme/">View this page on
+            GitHub.</a>
+
+    </section>
+    <section>
+        <h4>Other Links</h4>
+        <ul class="plain">
+            <li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i
+                        class="icon fa-camera">&nbsp;</i>Photography</a></li>
+            <li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i
+                        class="icon fa-paw">&nbsp;</i>Dogs</a></li>
+            <li><a href="mailto:me@mgrove.uk"><i class="icon fa-envelope">&nbsp;</i>Email me</a></li>
+        </ul>
+    </section>
+    <section>
+        <h4>Social Media</h4>
+        <ul class="plain">
+            <li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github">&nbsp;</i>Github</a></li>
+            <li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter">&nbsp;</i>Twitter</a></li>
+            <li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram">&nbsp;</i>Instagram</a></li>
+            <li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook">&nbsp;</i>Facebook</a></li>
+        </ul>
+    </section>
+</div>
+<div class="copyright">
+    &copy; Matthew Grove 2020.
+</div>
+		</div>
+	</footer>
+	
+	<!-- Scripts -->
+<script src="/assets/js/cookies.js"></script>
+<script src="/assets/js/util.js"></script>
+<script src="/assets/js/main.js"></script>
+
+</body>
+
+</html>
--- a/_site/sitemap.xml
+++ b/_site/sitemap.xml
@@ -2,43 +2,43 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    
    <url>
-        <loc>/comsci/</loc>
-        <lastmod>2020-11-02</lastmod>
+        <loc>/luhn-algorithm/</loc>
+        <lastmod>2020-12-13</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
    
    <url>
-        <loc>/luhn-algorithm/</loc>
-        <lastmod>2020-11-02</lastmod>
+        <loc>/site-theme/</loc>
+        <lastmod>2020-12-13</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
    
    <url>
        <loc>/young-reporter/</loc>
-        <lastmod>2020-11-02</lastmod>
+        <lastmod>2020-12-13</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
    
    <url>
        <loc>/</loc>
-        <lastmod>2020-11-02</lastmod>
+        <lastmod>2020-12-13</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
    
    <url>
-        <loc>/computer-science-blog/</loc>
-        <lastmod>2020-11-02</lastmod>
+        <loc>/comsci/</loc>
+        <lastmod>2020-12-13</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
    
    <url>
        <loc>/sitemap.xml</loc>
-        <lastmod>2020-11-02</lastmod>
+        <lastmod>2020-12-13</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
--- a/_site/young-reporter/index.html
+++ b/_site/young-reporter/index.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
 <html>
-    <head>
+
+<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="HandheldFriendly" content="True">
    <link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">

@@ -14,323 +15,285 @@
    <!-- add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="BBC Young Reporter Article Creator | Matthew Grove">
+    <meta name="apple-mobile-web-app-title" content="BBC Young Reporter Article Creator">
    <link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">

    <!-- tile icon & colour for Windows 8 -->
    <meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
-    <meta name="msapplication-TileColor" content="#d84315">
+    <meta name="msapplication-TileColor" content="#26174e">

+    <!-- page info -->
    <title>BBC Young Reporter Article Creator | Matthew Grove</title>
-    <meta name="description" content="A simple tool to create markdown files from news articles, for uploading to the Reading School BBC Young Reporter website - by Matthew Grove">
+    <meta name="description" content="A simple tool to create markdown files from news articles, for uploading to the Reading School BBC Young Reporter website | by Matthew Grove">
+    <meta name="keywords" content="" />

-    <!-- import Roboto (font) -->
-    <link href="/css/roboto.css" rel="stylesheet" type="text/css">
-
-    <!-- import jQuery -->
-    <script src="/js/jquery.min.js" type="text/javascript"></script>
-
-    <!-- import cookie JavaScript -->
-    <script src="/js/cookies.js" type="text/javascript"></script>
-
-    <!-- import Material Design components & icons -->
-    <link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
-    <link href="/css/material_icons.css" rel="stylesheet" type="text/css">
-    <script src="/js/material-components-web.min.js" type="text/javascript"></script>
-
-    <!-- import local styling & scripts -->
-    <script src="/js/global.js" type="text/javascript"></script>
-    <link href="/css/global.css" rel="stylesheet" type="text/css">
+    <!-- stylesheets -->
+    <link rel="stylesheet" href="/assets/css/main.css" />

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
    <script type="text/javascript">
        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
+        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-124505000-1');
    </script>
 </head>

-    <body>
-        <!-- cookie notice is included automatically -->
-        <div id="cookies">
+<script src="/assets/js/jquery.min.js"></script>
+
+<body class="is-preload">
+	
+	<!-- Header -->
+<header id="header">
+	<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
+	<a class="logo" href="/">Matthew Grove</a>
+	<nav>
+		<a href="#menu">Menu</a>
+	</nav>
+</header>
+
+<!-- Nav -->
+<nav id="menu">
+	<ul class="links">
+		<li><a href="/" >Home</a></li>
+
+		
+		
+		
+		
+		
+		<li><a href="/young-reporter/"  class="current-page-link"
+				>BBC Young Reporter Article Creator</a></li>
+		
+		
+		
+		<li><a href="/comsci/" >ComSci</a></li>
+		
+		
+		
+		
+		
+		<li><a href="/luhn-algorithm/" >Luhn Algorithm</a></li>
+		
+		
+		
+		<li><a href="/site-theme/" >Site Theme</a></li>
+		
+		
+	</ul>
+</nav>
+
+	<div id="cookies">
    <p>Just to let you know, I use cookies on my site.</p>
    <p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
 </div>

+	<!-- Heading -->
+	<div id="heading">
+		<h1>BBC Young Reporter Article Creator</h1>
+	</div>

-        <!-- content of navbar is included automatically -->
-        <aside class="navbar-insert mdc-drawer mdc-drawer--modal">
-    <div class="mdc-drawer__content">
-        <div style="margin: 15px;text-align:center;">
-            <img src="https://mgrove.uk/logo.png" style="width: 90%;"/>
-        </div>
-        <div class="mdc-list">
-            <a class="mdc-list-item" href="https://blog.mgrove.uk">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
-                <span class="mdc-list-item__text">My Blog</span>
-            </a>
-            <a class="mdc-list-item" href="/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
-                <span class="mdc-list-item__text">Home Page</span>
-            </a>
-            
-            
-            <a class="mdc-list-item" href="/comsci/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">computer</i>
-                <span class="mdc-list-item__text">ComSci</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/luhn-algorithm/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
-                <span class="mdc-list-item__text">Luhn Algorithm</span>
-            </a>
-            
-            
-            
-            <a class="mdc-list-item" href="/young-reporter/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">article</i>
-                <span class="mdc-list-item__text">BBC Young Reporter Article Creator</span>
-            </a>
-            
-            
-            
-            
-            
-            <a class="mdc-list-item" href="/computer-science-blog/">
-                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
-                <span class="mdc-list-item__text">GCSE Computer Science Blog</span>
-            </a>
-            
-            
-            
-            
-        </div>
-    </div>
-</aside>
+	<!-- Main -->
+	<section id="main" class="wrapper">
+		<div class="inner">
+			<div class="content">
+				<p>Fill in the fields below, and then click the <em>download</em> button to create a file to be uploaded to Reading School’s BBC Young Reporter website.</p>

-<div class="mdc-drawer-scrim"></div>
-
-
-        <div class="mdc-drawer-app-content">
-            <header class="mdc-top-app-bar app-bar" id="app-bar">
-                <div class="mdc-top-app-bar__row">
-                    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
-                        <span class="mdc-top-app-bar__title">BBC Young Reporter Article Creator | Matthew Grove</span>
-                    </section>
-                </div>
-            </header>
-
-            <main class="main-content" id="main-content">
-                <div class="mdc-top-app-bar--fixed-adjust">
-                    <h1 id="reading-school-bbc-young-reporter-article-compiler">Reading School BBC Young Reporter Article Compiler</h1>
-
-<p>Fill in the fields below, and then click the <em>download</em> button to create a file to be uploaded to Reading School’s BBC Young Reporter website.</p>
-
-<p>Give the authors’ names in the format <code class="highlighter-rouge">First_Name Last_Initial</code>, and separate multiple authors with a comma - e.g. <code class="highlighter-rouge">John D, Emma S</code></p>
+<p>Give the authors’ names in the format <code class="language-plaintext highlighter-rouge">First_Name Last_Initial</code>, and separate multiple authors with a comma - e.g. <code class="language-plaintext highlighter-rouge">John D, Emma S</code></p>

 <ul>
-  <li>If there are any headings inside your article, please place <code class="highlighter-rouge"># </code> in front of them</li>
-  <li>For subtitles, use <code class="highlighter-rouge">## </code>, as so on for smaller headings, up to and including <code class="highlighter-rouge">###### </code></li>
-  <li>For bullet points, use <code class="highlighter-rouge">* </code>, and for indented bullets, increase the indent using tab</li>
-  <li>For numbered lists, use the numbers/letters: e.g. <code class="highlighter-rouge">1. </code></li>
+  <li>If there are any headings inside your article, please place <code class="language-plaintext highlighter-rouge"># </code> in front of them.</li>
+  <li>For subtitles, use <code class="language-plaintext highlighter-rouge">## </code>, as so on for smaller headings, up to and including <code class="language-plaintext highlighter-rouge">###### </code>.</li>
+  <li>For bullet points, use <code class="language-plaintext highlighter-rouge">* </code>, and for indented bullets, increase the indent using the tab button on your keyboard.</li>
+  <li>For numbered lists, use the numbers/letters: e.g. <code class="language-plaintext highlighter-rouge">1. </code>.</li>
 </ul>

 <p>Note the requirement for spaces after each of the above items - for example:</p>

-<p><code class="highlighter-rouge">### My Heading</code></p>
+<pre><code>### My Heading

-<p><code class="highlighter-rouge">* Numbered item</code></p>
+* Numbered item</code></pre>

 <p>will produce:</p>

-<h3 id="my-heading">My Heading</h3>
+<blockquote>
+<h3>My Heading</h3>

 <ol>
-  <li>Numbered item</li>
+    <li>Numbered item</li>
 </ol>

-<p>However, the below don’t need spaces:</p>
+</blockquote>
+
+<p>Other formatting can be done with the following:</p>

 <ul>
-  <li>For italics, use <code class="highlighter-rouge">*my italic text*</code></li>
-  <li>For bold, use <code class="highlighter-rouge">**my bold text**</code></li>
-  <li>For bold and italics, use <code class="highlighter-rouge">***my bold, italic text***</code></li>
-  <li>For links, use <code class="highlighter-rouge">[text to show in article](URL)</code></li>
-  <li>To include an extra image (besides the cover image), use:</li>
+  <li>For italics, use <code class="language-plaintext highlighter-rouge">*my italic text*</code></li>
+  <li>For bold, use <code class="language-plaintext highlighter-rouge">**my bold text**</code></li>
+  <li>For bold and italics, use <code class="language-plaintext highlighter-rouge">***my bold, italic text***</code></li>
+  <li>For links, use <code class="language-plaintext highlighter-rouge">[text to show in article](URL)</code></li>
+  <li>To include an extra image (besides the cover image), use</li>
 </ul>
+<pre><code>{% include image.html id=ID_OF_IMAGE caption="IMAGE_CAPTION" copyright="IMAGE_COPYRIGHT" %}</code></pre>
+<p>replacing <code class="language-plaintext highlighter-rouge">ID_OF_IMAGE</code> with a unique ID for the image in your article - start at 1 for the first image (excluding the cover image).</p>

-<p><code class="highlighter-rouge">{% include image.html id=ID_OF_IMAGE caption="IMAGE_CAPTION" copyright="IMAGE_COPYRIGHT" %}</code></p>
+<p>The cover image for your article must be a JPEG image, and have the <code class="language-plaintext highlighter-rouge">jpg</code> file extension. If your image is a PNG, you can <a href="https://png2jpg.com/">convert it using an online tool</a>. The file name must also be the same as your article’s file name. This will be provided to you when you download the file from this page. E.g. if the file you download from this page is <code class="language-plaintext highlighter-rouge">news-article.md</code> then your cover image must be <code class="language-plaintext highlighter-rouge">news-article.jpg</code> (capital letters <strong>DO</strong> matter).</p>

-<p>replacing <code class="highlighter-rouge">ID_OF_IMAGE</code> with a unique ID for the image in your article - start at 1 for the first image (excluding the cover image).</p>
+<p>Any extra images for your article must be in the format: <code class="language-plaintext highlighter-rouge">ARTICLE_FILE_NAME--extra-IMAGE_ID.jpg</code>, where you replace <code class="language-plaintext highlighter-rouge">ARTICLE_FILE_NAME</code> with the file name you used for the cover image, and <code class="language-plaintext highlighter-rouge">IMAGE_ID</code> with the ID you gave the image when you inserted it into your article’s body, as seen above. E.g.: <code class="language-plaintext highlighter-rouge">news-article--extra-1.jpg</code> .</p>

-<p>The cover image for your article must be a JPEG image, and have the <code class="highlighter-rouge">jpg</code> file extension. If your image is a PNG, you can convert it using an online tool. The file name must also be the same as your article’s file name. This will be provided to you when you download the file from this page. E.g. if the file you download from this page is <code class="highlighter-rouge">news-article.md</code> then your cover image must be <code class="highlighter-rouge">news-article.jpg</code> (capital letters <strong>DO</strong> matter).</p>
-
-<p>Any extra images for your article must be in the format:</p>
-
-<p><code class="highlighter-rouge">ARTICLE_FILE_NAME--extra-IMAGE_ID.jpg</code>, e.g. <code class="highlighter-rouge">news-article--extra-1.jpg</code></p>
-
-<p>where you replace <code class="highlighter-rouge">ARTICLE_FILE_NAME</code> with the file name you used for the cover image, and <code class="highlighter-rouge">IMAGE_ID</code> with the ID you gave the image when you inserted it into your article’s body, as seen above.</p>
-
-<div class="mdc-text-field-container">
-    <div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
-        <input type="text" class="mdc-text-field__input" id="article-title" />
-        <label class="mdc-floating-label">Article title</label>
-        <div class="mdc-notched-outline">
-            <svg><path class="mdc-notched-outline__path" /></svg>
+<form onreset="if (!($('form a.submit').hasClass('disabled'))) $('form a.submit').addClass('disabled');">
+    <div class="row gtr-uniform">
+        <div class="col-6 col-12-xsmall">
+            <input type="text" id="headline" placeholder="Headline" />
        </div>
-        <div class="mdc-notched-outline__idle"></div>
-    </div>
-    <div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
-        <input type="text" class="mdc-text-field__input" id="authors" />
-        <label class="mdc-floating-label">Authors</label>
-        <div class="mdc-notched-outline">
-            <svg><path class="mdc-notched-outline__path" /></svg>
+        <div class="col-6 col-12-xsmall">
+            <input type="text" id="authors" placeholder="Authors" />
        </div>
-        <div class="mdc-notched-outline__idle"></div>
-    </div>
-    <div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
-        <input type="text" class="mdc-text-field__input" id="image-caption" />
-        <label class="mdc-floating-label">Image caption</label>
-        <div class="mdc-notched-outline">
-            <svg><path class="mdc-notched-outline__path" /></svg>
+        <div class="col-6 col-12-xsmall">
+            <input type="text" id="image-caption" placeholder="Image caption" />
        </div>
-        <div class="mdc-notched-outline__idle"></div>
-    </div>
-    <div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
-        <input type="text" class="mdc-text-field__input" id="image-copyright" />
-        <label class="mdc-floating-label">Image copyright</label>
-        <div class="mdc-notched-outline">
-            <svg><path class="mdc-notched-outline__path" /></svg>
+        <div class="col-6 col-12-xsmall">
+            <input type="text" id="image-copyright" placeholder="Image copyright" />
        </div>
-        <div class="mdc-notched-outline__idle"></div>
-    </div>
-    <div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
-        <input type="text" class="mdc-text-field__input" id="article-description" />
-        <label class="mdc-floating-label">Article description</label>
-        <div class="mdc-notched-outline">
-            <svg><path class="mdc-notched-outline__path" /></svg>
+        <!-- Break -->
+        <div class="col-12">
+            <textarea id="article-description" placeholder="Article description" rows="2"></textarea>
        </div>
-        <div class="mdc-notched-outline__idle"></div>
-    </div>
-	<br />
-	<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label" data-mdc-auto-init="MDCTextField">
-        <textarea class="mdc-text-field__input" rows="8" aria-label="Label" id="article-content" placeholder="Article content"></textarea>
-        <div class="mdc-notched-outline">
-            <svg><path class="mdc-notched-outline__path" /></svg>
+        <div class="col-12">
+            <textarea id="article-content" placeholder="Article content" rows="20"></textarea>
+        </div>
+        <!-- Break -->
+        <div class="col-12">
+            <ul class="actions">
+                <li><a href="javascript:downloadFile();" class="submit button primary icon fa-download">Download</a></li>
+                <li><input type="reset" value="Reset" /></li>
+            </ul>
        </div>
-        <div class="mdc-notched-outline__idle"></div>
    </div>
-</div>
-
-<p><button class="download_button mdc-button mdc-button--outlined" onclick="downloadFile();" data-mdc-auto-init="MDCRipple">
-    <i class="material-icons mdc-button__icon">cloud_download</i>
-    Download article
-</button></p>
-
-<style>
-body {
-	text-align: left;
-}
-
-.mdc-text-field--textarea .mdc-text-field__input {
-	padding-top: 16px;
-}
-.mdc-text-field--textarea:not(.mdc-text-field--disabled) {
-	border-color: rgba(0,0,0,0.12);
-}
-
-#article-content::placeholder {
-	color: rgba(0,0,0,0.63);
-}
-
-.mdc-text-field {
-	min-width: 500px;
-}
-
-.mdc-text-field--textarea.mdc-text-field--focussed .mdc-text-field__input {
-	color: black;
-}
-
-.mdc-text-field--textarea .mdc-text-field__input {
-	content: "Article content";
-}
-
-.mdc-text-field--textarea .mdc-text-field__input:focus {
-	content: "";
-}
-
-.mdc-text-field-container {
-	max-width: 1508px;
-}
-
-@media screen and (max-width: 1550px) {
-	.mdc-text-field-container {
-		max-width: 1004px;
-	}
-}
-
-@media screen and (max-width: 1045px) {
-	.mdc-text-field-container {
-		max-width: 502px;
-	}
-}
-
-</style>
+</form>

 <script>
-function downloadFile() {
-	if (document.getElementById("article-title").value != "" && document.getElementById("article-title").value != "" && document.getElementById("authors").value != "" && document.getElementById("image-caption").value != "" && document.getElementById("image-copyright").value != "" && document.getElementById("article-description").value != "") {
-		var today = new Date();
-		var dd = String(today.getDate()).padStart(2, '0');
-		var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
-		var yyyy = today.getFullYear();
-		var hours = today.getHours();
-		var minutes = today.getMinutes();
-		var date = yyyy + "-" + mm + "-" + dd + " " + hours + ":" + minutes
+function checkFieldStatuses() {
+    var input_elements = $("form input[type='text']");
+    var textarea_elements = $("form textarea");
+    var elements = $.merge($("form input[type='text']"), $("form textarea"));
+    any_empty = false;
+    for (var i = 0, element; element = elements[i++];) {
+        if (element.value === "") {
+            any_empty = true;
+            break;
+        }
+    }
+    if (!any_empty && $("form a.submit").hasClass("disabled")) {
+        $("form a.submit").removeClass("disabled");
+        return "removed class";
+    } else if (any_empty && !($("form a.submit").hasClass("disabled"))) {
+        $("form a.submit").addClass("disabled");
+        return "added class";
+    }
+}

-		var file_name = document.getElementById("article-title").value.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s{2,}/g," ").replace(/\s+/g,"-").toLowerCase() + ".md";
-		var text = `---
-title: '` + document.getElementById("article-title").value + `'
+checkFieldStatuses();
+document.addEventListener("mouseup", function(event){
+    checkFieldStatuses();
+}, true);
+$("form").keyup(function(event){
+    checkFieldStatuses();
+});
+
+function downloadFile(){
+    var today = new Date();
+    var dd = String(today.getDate()).padStart(2, '0');
+    var mm = String(today.getMonth() + 1).padStart(2, '0');
+    var yyyy = today.getFullYear();
+    var hours = today.getHours();
+    var minutes = today.getMinutes();
+    var date = yyyy + "-" + mm + "-" + dd + " " + hours + ":" + minutes
+
+    var file_name = $("#headline")[0].value.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s{2,}/g," ").replace(/\s+/g,"-").toLowerCase() + ".md";
+    var text = `---
+title: '` + $("#headline")[0].value + `'
 date: ` + date + `
-authors: ` + document.getElementById("authors").value + `
-image-caption: ` + document.getElementById("image-caption").value + `
-copyright: ` + document.getElementById("image-copyright").value + `
-description: ` + document.getElementById("article-description").value + `
+authors: ` + $("#authors")[0].value + `
+image-caption: ` + $("#image-caption")[0].value + `
+copyright: ` + $("#image-copyright")[0].value + `
+description: ` + $("#article-description")[0].value + `
 ---

-` + document.getElementById("article-content").value;
-	
-		var element = document.createElement("a");
-		element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
-		element.setAttribute("download", file_name);
+` + $("#article-content")[0].value;

-		element.style.display = "none";
-		document.body.appendChild(element);
+    var element = document.createElement("a");
+    element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
+    element.setAttribute("download", file_name);

-		element.click();
+    element.style.display = "none";
+    document.body.appendChild(element);

-		document.body.removeChild(element);
-	}
+    element.click();
+
+    document.body.removeChild(element);
 }
+
+$("form input[type='text']").keypress(function(event) {
+    if (event.defaultPrevented) {
+        return;
+    }
+
+    if (event.key === "Enter") {
+        event.preventDefault();
+    }
+});
 </script>


-                    <!-- link to source code on GitHub -->
-                    <a href="https://github.com/mgrove36/demo-code/tree/master/young-reporter/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
-                        <span class="material-icons mdc-fab__icon">rate_review</span>
-                        <span class="mdc-fab__label">View on GitHub</span>
-                    </a>
-                </div>
-            </main>
-            <footer>
-    &copy; Matthew Grove 2020
-</footer>
+			</div>
+		</div>
+	</section>

-        </div>
-    </body>
-</html>
+	<!-- Footer -->
+	<footer id="footer">
+		<div class="inner">
+			<div class="content">
+    <section>
+        <h3>Matthew Grove</h3>
+        <p>Software engineer & amateur photographer from Surrey, UK.</p>
+        <br>
+        <a href="https://github.com/mgrove36/demo-code/tree/master/young-reporter/">View this page on
+            GitHub.</a>
+
+    </section>
+    <section>
+        <h4>Other Links</h4>
+        <ul class="plain">
+            <li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i
+                        class="icon fa-camera">&nbsp;</i>Photography</a></li>
+            <li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i
+                        class="icon fa-paw">&nbsp;</i>Dogs</a></li>
+            <li><a href="mailto:me@mgrove.uk"><i class="icon fa-envelope">&nbsp;</i>Email me</a></li>
+        </ul>
+    </section>
+    <section>
+        <h4>Social Media</h4>
+        <ul class="plain">
+            <li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github">&nbsp;</i>Github</a></li>
+            <li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter">&nbsp;</i>Twitter</a></li>
+            <li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram">&nbsp;</i>Instagram</a></li>
+            <li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook">&nbsp;</i>Facebook</a></li>
+        </ul>
+    </section>
+</div>
+<div class="copyright">
+    &copy; Matthew Grove 2020.
+</div>
+		</div>
+	</footer>
+	
+	<!-- Scripts -->
+<script src="/assets/js/cookies.js"></script>
+<script src="/assets/js/util.js"></script>
+<script src="/assets/js/main.js"></script>
+
+</body>
+
+</html>