Initial commit

.gitignore

@@ -0,0 +1,4 @@
+build
+node_modules
+npm-debug.log
+.DS_store

app.js

@@ -0,0 +1,100 @@
+"use strict";
+const fs = require('fs');
+const https = require('https');
+const express = require('express');
+const app = express();
+const Metalsmith = require('metalsmith');
+const inplace = require('metalsmith-in-place');
+const layouts = require('metalsmith-layouts');
+const markdown = require('metalsmith-markdownit');
+const permalinks = require('metalsmith-permalinks');
+const collections = require('metalsmith-collections');
+const pagination = require('metalsmith-pagination');
+const define = require('metalsmith-define');
+const feed = require('metalsmith-feed');
+const sass = require('metalsmith-sass');
+const Handlebars = require('handlebars');
+const emoji = require('markdown-it-emoji');
+const moment = require('moment');
+
+const port = process.env.PORT || 8000;
+
+app.use(express.static(__dirname + '/build'));
+
+var md = markdown('commonmark', {html: true});
+md.parser.use(emoji);
+
+Handlebars.registerHelper('markdown', function(text) {
+  return md.parser.render(text);
+});
+Handlebars.registerHelper('moment', function(date, format) {
+  return new moment(date).format(format);
+});
+
+
+Metalsmith(__dirname)
+  .use(define({
+    site: {
+      title: 'Marcus Noble',
+      description: 'Awesomeness with a side of geek',
+      url: 'https://blog.marcusnoble.co.uk'
+    }
+  }))
+  .use(collections({
+    posts: {
+      pattern: 'posts/*',
+      sortBy: 'date',
+      reverse: true,
+    },
+    projects: {
+      pattern: 'projects/*'
+    },
+    pages: {
+      pattern: 'pages/*'
+    }
+  }))
+  .use(inplace({
+    engine: 'handlebars',
+    directory: 'templates',
+    partials: 'templates/partials'
+  }))
+  .use(md)
+  .use(permalinks({
+    pattern: ':date-:title',
+    date: 'YYYY-MM-DD',
+    linksets: [
+      {
+        match: { collection: 'pages' },
+        pattern: ':title'
+      }
+    ]
+  }))
+  .use(feed({
+    collection: 'posts',
+    destination: 'feed.xml'
+  }))
+  .use(pagination({
+    'collections.posts': {
+      perPage: 5,
+      layout: 'index.html',
+      first: 'index.html',
+      noPageOne: true,
+      path: 'page:num/index.html',
+      pageMetadata: {
+        title: 'Posts'
+      }
+    }
+  }))
+  .use(layouts({
+    engine: 'handlebars',
+    directory: 'templates',
+    partials: 'templates/partials'
+  }))
+  .use(sass())
+  .build(function(err) {
+    if (err) throw err;
+
+    app.listen(port, function () {
+      console.log(`App listening on port ${port}`);
+    });
+  });

package.json

@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "main": "app.js",
+  "scripts": {
+    "start": "node app.js"
+  },
+  "dependencies": {
+    "express": "^4.13.4",
+    "handlebars": "^4.0.5",
+    "markdown-it-emoji": "^1.1.1",
+    "metalsmith": "^2.1.0",
+    "metalsmith-collections": "^0.7.0",
+    "metalsmith-define": "^2.0.1",
+    "metalsmith-feed": "^0.2.0",
+    "metalsmith-in-place": "^1.4.4",
+    "metalsmith-layouts": "^1.6.5",
+    "metalsmith-markdownit": "^0.3.0",
+    "metalsmith-pagination": "^1.4.0",
+    "metalsmith-permalinks": "^0.5.0",
+    "metalsmith-sass": "^1.3.0",
+    "moment": "^2.13.0"
+  },
+  "engines": {
+    "node": "6.0.0"
+  }
+}

src/css/_underlines.scss

@@ -0,0 +1,64 @@
+@mixin textShadowToCropUnderline($color) {
+  text-shadow:
+    .01em 0 $color,
+    -.01em 0 $color,
+    0 .01em $color,
+    0 -.01em $color,
+
+    .06em 0 $color,
+    -.06em 0 $color,
+    .09em 0 $color,
+    -.09em 0 $color,
+
+    .12em 0 $color,
+    -.12em 0 $color,
+    .15em 0 $color,
+    -.15em 0 $color;
+}
+
+@mixin linkUnderlines($background, $color, $hoverColor) {
+  color: $color;
+  text-decoration: none;
+  @include textShadowToCropUnderline($background);
+
+  background-image:
+    linear-gradient($background, $background),
+    linear-gradient($background, $background),
+    linear-gradient($color, $color);
+  background-size:
+    .05em 2px,
+    .05em 2px,
+    2px 2px;
+  background-repeat:
+    no-repeat,
+    no-repeat,
+    repeat-x;
+  background-position: 0% 1.08em, 100% 1.08em, 0% 1.08em;
+
+  &::selection {
+    @include textShadowToCropUnderline($selectionColor);
+    background-color: $selectionColor;
+  }
+  &::-moz-selection {
+    @include textShadowToCropUnderline($selectionColor);
+    background-color: $selectionColor;
+  }
+  &:before,
+  &:after,
+  *,
+  *:before,
+  *:after {
+    text-shadow: none;
+  }
+  &:visited {
+    color: $color;
+  }
+
+  &:hover {
+    color: $hoverColor;
+    background-image:
+      linear-gradient($background, $background),
+      linear-gradient($background, $background),
+      linear-gradient($hoverColor, $hoverColor);
+  }
+}

src/css/main.scss

@@ -0,0 +1,299 @@
+$border-color: rgba(9, 39, 64, 0.72);
+$link-color: #AD4E4E;
+$nav-height: 40px;
+$selectionColor: #D2D2D2;
+$background-color: #F4F5F6;
+
+@import "_underlines.scss";
+
+body {
+  padding-top: $nav-height;
+  background: $background-color;
+}
+
+* {
+  &::selection {
+    background-color: $selectionColor;
+  }
+  &::-moz-selection {
+    background-color: $selectionColor;
+  }
+}
+
+a {
+  color: #4a4a4a;
+  transition: color ease .3s;
+  margin: 0 3px;
+
+  &:hover {
+    color: $link-color;
+    text-decoration: none;
+  }
+
+  &+img {
+    border-bottom: none;
+  }
+}
+
+pre code {
+  overflow: scroll;
+}
+
+figure p {
+  margin: 0;
+}
+
+iframe {
+  max-width: 100%;
+  border: 0;
+  overflow: scroll;
+}
+
+.emoji {
+  display: inline !important;
+  margin: 0 !important;
+}
+
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $nav-height;
+  display: block;
+  font-size: 1.2em;
+  background: $border-color;
+  border-bottom: 2px solid saturate($border-color, 60%);
+  z-index: 10;
+  text-align: center;
+
+  .github-icon {
+    position: fixed;
+    top: 0;
+    right: 10px;
+  }
+
+  .twitter-icon {
+    position: fixed;
+    top: 0;
+    right: 40px;
+  }
+
+  a {
+    line-height: $nav-height;
+    height: $nav-height;
+    padding: 0 5px;
+    color: #fff;
+    display: inline-block;
+    border: none;
+
+    svg {
+      height: $nav-height / 2;
+      vertical-align: text-bottom;
+      margin: 10px auto;
+    }
+  }
+
+  a:hover {
+    background: #fff;
+    color: $border-color;
+    border-bottom: 2px solid saturate($border-color, 60%);
+
+    svg path {
+      fill: $border-color;
+    }
+  }
+}
+
+#logo {
+  text-align: center;
+  img {
+    width: 200px;
+    border: 2px solid $border-color;
+    border-radius: 100px;
+    padding: 0;
+    margin: 0 auto;
+    box-shadow: 3px 3px 5px 3px #ccc;
+  }
+}
+
+.header, .post-list li article {
+  border-bottom: 1px solid rgba($border-color, .2);
+  position: relative;
+}
+
+.header::after, .post-list li article::after {
+  display: block;
+  content: "";
+  width: 7px;
+  height: 7px;
+  border: 1px solid $border-color;
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  margin-left: -5px;
+  background: #fff;
+  border-radius: 100%;
+  box-shadow: rgba(232,232,232,.5) 0 0 0 5px;
+}
+
+.right {
+  float: right !important;
+}
+
+.center {
+  text-align: center;
+}
+
+.post-list {
+  list-style: none;
+}
+
+.post, .page {
+  padding: 0 7px;
+
+  a {
+    @include linkUnderlines($background-color, #4a4a4a, $link-color);
+  }
+}
+
+
+
+.post-meta {
+    display: inline-block;
+    margin: 15px -7px 5px -7px;
+    font-size: 1.5rem;
+    color: #fff;
+    padding:4px 20px 4px 20px;
+    position: relative;
+    box-shadow: inset 0px 1px 0px rgba(255,255,255,.3),
+        inset 0px 0px 20px rgba(0,0,0,0.1),
+        0px 1px 1px rgba(0,0,0,0.4);
+    background: $border-color;
+    width: 100%;
+    text-align: left;
+
+    a {
+        color: #9EABB3;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    &::before {
+        content: "";
+        width: .2em;
+        bottom: -.45em;
+        position: absolute;
+        display: block;
+        border: .9em solid $border-color;
+        box-shadow: 0px 1px 0px rgba(0,0,0,0.4);
+        z-index: -2;
+        left: -1.2em;
+        border-right-width: .75em;
+        border-left-color: transparent;
+    }
+    &::after {
+        content: "";
+        width: .2em;
+        bottom: -.45em;
+        position: absolute;
+        display: block;
+        border: 0.9em solid rgba(9, 39, 64, 0.72);
+        box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
+        z-index: -2;
+        right: -1.2em;
+        border-left-width: .75em;
+        border-right-color: transparent;
+    }
+
+    span::before{
+        content:"";
+        bottom:-.5em;
+        position:absolute;
+        display:block;
+        border-style:solid;
+        border-color: #000 transparent transparent transparent;
+        z-index:-1;
+        left: 0;
+        border-width: .5em 0 0 .5em;
+    }
+    span::after{
+        content: "";
+        bottom: -.5em;
+        position: absolute;
+        display: block;
+        border-style: solid;
+        border-color: #000 transparent transparent transparent;
+        z-index: -1;
+        right: 0;
+        border-width: .5em .5em 0 0;
+    }
+}
+
+.post-body {
+  margin-bottom: 100px;
+
+  a {
+    font-size: 1.3em;
+  }
+
+  img{
+    display: block;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+}
+
+.pagination {
+  text-align: center;
+  margin: 30px;
+}
+
+
+
+
+
+@media (max-width: 768px) {
+  nav {
+    display: block;
+    height: auto;
+
+    .nav-right {
+      position: fixed;
+      top: 0;
+      right: 0;
+
+      span {
+        display: none;
+      }
+    }
+  }
+}
+
+
+.card {
+  display:block;
+  border: 1px solid $border-color;
+  border-radius: 0.3em;
+  padding: 10px;
+  box-shadow: 1px 1px 2px $border-color;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+}
+
+.experience-list {
+  h3 {
+    font-size: 2em;
+  }
+}
+
+.project-image {
+  width: 100%;
+  height: 100px;
+  background-size: cover;
+  background-position: center;
+}