First pass 2.0 design

assets/css/components/global.css

@@ -0,0 +1,474 @@
+/* Variables
+/* ---------------------------------------------------------- */
+
+:root {
+    /* Colours */
+    --blue: #3eb0ef;
+    --green: #a4d037;
+    --purple: #ad26b4;
+    --yellow: #fecd35;
+    --red: #f05230;
+    --darkgrey: #343f44;
+    --midgrey: #738a94;
+    --lightgrey: #c5d2d9;
+    --whitegrey: #e5eff5;
+    --pink: #fa3a57;
+    --brown: #a3821a;
+}
+
+/* Reset
+/* ---------------------------------------------------------- */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+body {
+    line-height: 1;
+}
+ol,
+ul {
+    list-style: none;
+}
+blockquote,
+q {
+    quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: "";
+    content: none;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+img {
+    max-width: 100%;
+}
+html {
+    box-sizing: border-box;
+    font-family: sans-serif;
+
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+a {
+    background-color: transparent;
+}
+a:active,
+a:hover {
+    outline: 0;
+}
+b,
+strong {
+    font-weight: bold;
+}
+dfn {
+    font-style: italic;
+}
+h1 {
+    margin: 0.67em 0;
+    font-size: 2em;
+}
+small {
+    font-size: 80%;
+}
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+sup {
+    top: -0.5em;
+}
+sub {
+    bottom: -0.25em;
+}
+img {
+    border: 0;
+}
+svg:not(:root) {
+    overflow: hidden;
+}
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+    margin: 0; /* 3 */
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+}
+button {
+    overflow: visible;
+    border: none;
+}
+button,
+select {
+    text-transform: none;
+}
+button,
+html input[type="button"],
+/* 1 */
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer; /* 3 */
+
+    -webkit-appearance: button; /* 2 */
+}
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+input {
+    line-height: normal;
+}
+input:focus {
+    outline: none;
+}
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+input[type="search"] {
+    box-sizing: content-box; /* 2 */
+
+    -webkit-appearance: textfield; /* 1 */
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+legend {
+    padding: 0; /* 2 */
+    border: 0; /* 1 */
+}
+textarea {
+    overflow: auto;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+td,
+th {
+    padding: 0;
+}
+
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    font-size: 62.5%;
+
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+    overflow-x: hidden;
+    color: color(var(--midgrey) l(-25%));
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    font-size: 1.5rem;
+    line-height: 1.6em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: 0;
+    text-rendering: optimizeLegibility;
+    background: #fff;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: "liga" on;
+}
+
+::selection {
+    text-shadow: none;
+    background: color(var(--blue) lightness(+30%));
+}
+
+hr {
+    display: block;
+    margin: 2em 0;
+    padding: 0;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid var(--whitegrey);
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+    vertical-align: middle;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote {
+    margin: 0 0 1.5em 0;
+}
+
+ol,
+ul {
+    padding-left: 2.5em;
+}
+
+ol ol,
+ul ul,
+ul ol,
+ol ul {
+    margin: 0.5em 0 1em;
+    padding-left: 2em;
+}
+
+ul {
+    list-style: disc;
+}
+
+ol {
+    list-style: decimal;
+}
+
+li {
+    margin: 0.5em 0;
+    line-height: 1.6em;
+}
+
+dt {
+    float: left;
+    margin: 0 20px 0 0;
+    width: 120px;
+    color: var(--darkgrey);
+    font-weight: 500;
+    text-align: right;
+}
+
+dd {
+    margin: 0 0 5px 0;
+    text-align: left;
+}
+
+blockquote {
+    margin: 1.6em 0;
+    padding: 0 1.6em 0 1.6em;
+    border-left: var(--whitegrey) 0.5em solid;;
+}
+
+blockquote p {
+    margin: 0.8em 0;
+    font-size: 1.2em;
+    font-weight: 300;
+}
+
+blockquote small {
+    display: inline-block;
+    margin: 0.8em 0 0.8em 1.5em;
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+/* Quotation marks */
+blockquote small:before {
+    content: "\2014 \00A0";
+}
+
+blockquote cite {
+    font-weight: bold;
+}
+blockquote cite a {
+    font-weight: normal;
+}
+
+a {
+    color: color(var(--blue) l(-5%));
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    line-height: 1.15;
+    font-weight: 700;
+    text-rendering: optimizeLegibility;
+}
+
+h1 {
+    margin: 0 0 0.5em 0;
+    font-size: 5rem;
+    font-weight: 700;
+}
+@media (max-width: 500px) {
+    h1 {
+        font-size: 2.2rem;
+    }
+}
+
+h2 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.8rem;
+}
+@media (max-width: 500px) {
+    h2 {
+        font-size: 1.8rem;
+    }
+}
+
+h3 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.8rem;
+    font-weight: 500;
+}
+@media (max-width: 500px) {
+    h3 {
+        font-size: 1.7rem;
+    }
+}
+
+h4 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.6rem;
+    font-weight: 500;
+}
+
+h5 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.4rem;
+    font-weight: 500;
+}
+
+h6 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.4rem;
+    font-weight: 500;
+}

assets/fonts/casper-icons.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="512">
-<font-face units-per-em="512" ascent="480" descent="-32" />
-<missing-glyph horiz-adv-x="512" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
-<glyph unicode="&#xf600;" d="M0 480v-102.4h307.2v102.4h-307.2zM0 275.2v-102.4h512v102.4h-512zM0 70.4v-102.4h204.8v102.4h-204.8zM307.2 70.4v-102.4h204.8v102.4h-204.8zM409.6 480v-102.4h102.4v102.4h-102.4z" />
-<glyph unicode="&#xf601;" d="M421.344-32c-0.4 229.616-200.752 417.264-421.344 417.696v94.304c270.656 0 512-230.304 512-512h-90.656zM343.6-31.968h-90.608c0.304 56.384-28.336 119.488-73.664 166.736-45.072 47.632-124.96 77.648-179.104 77.36v94.272c169.040-3.648 339.936-163.312 343.376-338.368zM64.256 96.048c35.312 0 63.936-28.656 63.936-64 0-35.328-28.624-63.984-63.936-63.984s-63.936 28.656-63.936 63.984c0 35.344 28.624 64 63.936 64z" />
-<glyph unicode="&#xf602;" d="M512 382.791c-18.838-8.354-39.082-14.001-60.33-16.54 21.686 13 38.343 33.585 46.186 58.115-20.298-12.039-42.778-20.78-66.705-25.49-19.16 20.415-46.461 33.17-76.673 33.17-58.011 0-105.044-47.029-105.044-105.039 0-8.233 0.929-16.25 2.72-23.939-87.3 4.382-164.701 46.2-216.509 109.753-9.042-15.514-14.223-33.558-14.223-52.809 0-36.444 18.544-68.596 46.73-87.433-17.219 0.546-33.416 5.271-47.577 13.139-0.010-0.438-0.010-0.878-0.010-1.321 0-50.894 36.209-93.348 84.261-103-8.813-2.4-18.094-3.686-27.674-3.686-6.769 0-13.349 0.66-19.764 1.886 13.368-41.73 52.16-72.103 98.126-72.948-35.95-28.175-81.243-44.967-130.458-44.967-8.479 0-16.84 0.497-25.058 1.47 46.486-29.805 101.701-47.197 161.021-47.197 193.211 0 298.868 160.062 298.868 298.872 0 4.554-0.103 9.084-0.305 13.59 20.528 14.81 38.336 33.31 52.418 54.374z" />
-<glyph unicode="&#xf603;" d="M0.403 45.168c-0.122 1.266-0.226 2.535-0.292 3.815 0.065-1.28 0.17-2.549 0.292-3.815zM117.954 197.426c46.005-1.369 76.867 46.349 68.931 106.599-7.947 60.24-51.698 108.584-97.704 109.961-46.013 1.365-76.87-44.741-68.926-105 7.941-60.234 51.676-110.187 97.699-111.56zM512 352v42.655c0 46.94-38.391 85.345-85.329 85.345h-341.328c-46.138 0-84.006-37.116-85.282-82.963 29.181 25.693 69.662 47.158 111.437 47.158 44.652 0 178.622 0 178.622 0l-39.974-33.809h-56.634c37.565-14.402 57.578-58.062 57.578-102.861 0-37.624-20.905-69.977-50.444-92.984-28.822-22.451-34.286-31.854-34.286-50.939 0-16.289 30.873-44 47.016-55.394 47.191-33.269 62.458-64.156 62.458-115.728 0-8.214-1.021-16.415-3.033-24.48h153.871c46.937 0 85.328 38.375 85.328 85.345v266.654h-96v-95.999h-32v96h-95.999v32h95.999v96h32v-96h96zM92.943 97.032c10.807 0 20.711 0.295 30.968 0.295-13.573 13.167-24.313 29.3-24.313 49.19 0 11.804 3.782 23.168 9.067 33.26-5.391-0.385-10.895-0.497-16.563-0.497-37.178 0-68.753 12.038-92.102 31.927v-33.621l0.003-100.865c26.72 12.687 58.444 20.311 92.94 20.311zM1.71 36.371c-0.556 2.729-0.983 5.503-1.271 8.317 0.287-2.814 0.715-5.588 1.271-8.317zM227.725 3.577c-7.529 29.403-34.227 43.982-71.444 69.784-13.536 4.366-28.447 6.937-44.447 7.104-44.809 0.482-86.554-17.471-110.108-44.186 7.96-38.853 42.517-68.279 83.617-68.279h143.222c0.908 5.564 1.348 11.316 1.348 17.216 0 6.267-0.767 12.396-2.188 18.361z" />
-<glyph unicode="&#xf604;" d="M426.672 480h-341.33c-46.936 0-85.342-38.407-85.342-85.344v-341.313c0-46.969 38.406-85.343 85.342-85.343l341.33 0.001c46.938 0 85.328 38.373 85.328 85.344v341.311c0 46.937-38.391 85.344-85.328 85.344zM435.296 224h-83.296v-224h-96v224h-46.263v73.282h46.263v47.593c0 64.671 27.896 103.125 103.935 103.125h87.622v-79.285h-71.565c-21.241 0.035-23.876-11.076-23.876-31.756l-0.116-39.677h96l-12.704-73.282z" />
-<glyph unicode="&#xf605;" d="M368.615 34.099c6.861-6.938 6.861-18.125 0-25.063s-17.945-6.938-24.807 0l-200.448 202.419c-6.861 6.938-6.861 18.15 0 25.063l200.448 202.445c6.861 6.938 17.945 6.938 24.807 0s6.861-18.125 0-25.063l-182.784-189.901 182.784-189.901z" />
-<glyph unicode="&#xf606;" d="M435.2 454.4h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-435.2h102.4v435.2c0 14.131-11.443 25.6-25.6 25.6zM281.6 300.8h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-281.6h102.4v281.6c0 14.131-11.443 25.6-25.6 25.6zM128 147.2h-56.32c-14.131 0-20.48-11.443-20.48-25.6v-128h102.4v128c0 14.157-11.469 25.6-25.6 25.6z" />
-<glyph unicode="&#xf607;" d="M256 428.8c-70.707 0-128-57.319-128-128 0-122.214 128-281.6 128-281.6s128 159.386 128 281.6c0 70.681-57.293 128-128 128zM256 230.144c-38.169 0-69.12 30.951-69.12 69.12s30.951 69.12 69.12 69.12 69.12-30.951 69.12-69.12-30.95-69.12-69.12-69.12z" />
-<glyph unicode="&#xf608;" d="M201.19 103.834l-20.736-20.582c-17.971-17.792-47.181-17.817-65.126 0-8.627 8.576-13.363 19.917-13.363 32.026s4.761 23.475 13.363 32.051l76.288 75.699c15.795 15.693 45.542 38.759 67.226 17.255 9.959-9.881 26.035-9.805 35.891 0.128 9.882 9.933 9.83 26.010-0.128 35.891-36.839 36.557-91.315 29.798-138.752-17.255l-76.288-75.699c-18.279-18.176-28.365-42.343-28.365-68.070 0-25.702 10.087-49.869 28.391-68.045 18.841-18.714 43.571-28.032 68.301-28.032s49.511 9.318 68.352 28.032l20.736 20.608c9.958 9.882 10.010 25.959 0.128 35.865-9.881 9.933-25.958 9.984-35.917 0.128zM432.409 397.85c-39.577 39.27-94.899 41.395-131.558 5.043l-25.831-25.626c-9.959-9.882-10.035-25.933-0.154-35.891 9.907-9.958 25.959-10.010 35.891-0.128l25.83 25.625c18.969 18.841 43.827 11.034 60.058-5.043 8.627-8.55 13.363-19.942 13.363-32.026 0-12.109-4.762-23.475-13.363-32.026l-81.408-80.742c-37.197-36.915-54.682-19.61-62.131-12.211-9.958 9.882-26.010 9.805-35.865-0.128-9.881-9.959-9.831-26.035 0.128-35.891 17.075-16.947 36.608-25.344 57.037-25.344 25.037 0 51.481 12.595 76.621 37.555l81.382 80.743c18.304 18.151 28.39 42.317 28.39 68.019s-10.087 49.894-28.39 68.070z" />
-<glyph unicode="&#xf609;" d="M64 362.667h384q8.834 0 15.084-6.25t6.25-15.083-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.083 15.084 6.25zM64 106.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25zM64 234.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25z" />
-</font></defs></svg>

assets/js/index.js

@@ -1,56 +0,0 @@
-/**
- * Main JS file for Casper behaviours
- */
-
-/* globals jQuery, document */
-(function ($, undefined) {
-    "use strict";
-
-    var $document = $(document);
-
-    $document.ready(function () {
-
-        var $postContent = $(".post-content");
-        $postContent.fitVids();
-
-        $(".scroll-down").arctic_scroll();
-
-        $(".menu-button, .nav-cover, .nav-close").on("click", function(e){
-            e.preventDefault();
-            $("body").toggleClass("nav-opened nav-closed");
-        });
-
-    });
-
-    // Arctic Scroll by Paul Adam Davis
-    // https://github.com/PaulAdamDavis/Arctic-Scroll
-    $.fn.arctic_scroll = function (options) {
-
-        var defaults = {
-            elem: $(this),
-            speed: 500
-        },
-
-        allOptions = $.extend(defaults, options);
-
-        allOptions.elem.click(function (event) {
-            event.preventDefault();
-            var $this = $(this),
-                $htmlBody = $('html, body'),
-                offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false,
-                position = ($this.attr('data-position')) ? $this.attr('data-position') : false,
-                toMove;
-
-            if (offset) {
-                toMove = parseInt(offset);
-                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed);
-            } else if (position) {
-                toMove = parseInt(position);
-                $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed);
-            } else {
-                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed);
-            }
-        });
-
-    };
-})(jQuery);