Move .less files to dev/less

dev/less/flexbox-prefixes.less

@@ -0,0 +1,130 @@
+// Flexbox display
+// flex or inline-flex
+.flex-display(@display: flex) {
+    display: ~"-webkit-@{display}";
+    display: ~"-moz-@{display}";
+    display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+    display: ~"-ms-@{display}"; // IE11
+    display: @display;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+.flex(@columns: initial) {
+  -webkit-flex: @columns;
+     -moz-flex: @columns;
+      -ms-flex: @columns;
+          flex: @columns;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+.flex-direction(@direction: row) {
+  -webkit-flex-direction: @direction;
+     -moz-flex-direction: @direction;
+      -ms-flex-direction: @direction;
+          flex-direction: @direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+.flex-wrap(@wrap: nowrap) {
+  -webkit-flex-wrap: @wrap;
+     -moz-flex-wrap: @wrap;
+      -ms-flex-wrap: @wrap;
+          flex-wrap: @wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+.flex-flow(@flow) {
+  -webkit-flex-flow: @flow;
+     -moz-flex-flow: @flow;
+      -ms-flex-flow: @flow;
+          flex-flow: @flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+.flex-order(@order: 0) {
+  -webkit-order: @order;
+     -moz-order: @order;
+      -ms-order: @order;
+          order: @order;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+.flex-grow(@grow: 0) {
+  -webkit-flex-grow: @grow;
+     -moz-flex-grow: @grow;
+      -ms-flex-grow: @grow;
+          flex-grow: @grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number> 
+.flex-shrink(@shrink: 1) {
+  -webkit-flex-shrink: @shrink;
+     -moz-flex-shrink: @shrink;
+      -ms-flex-shrink: @shrink;
+          flex-shrink: @shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width> 
+.flex-basis(@width: auto) {
+  -webkit-flex-basis: @width;
+     -moz-flex-basis: @width;
+      -ms-flex-basis: @width;
+          flex-basis: @width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around 
+.justify-content(@justify: flex-start) {
+  -webkit-justify-content: @justify;
+     -moz-justify-content: @justify;
+      -ms-justify-content: @justify;
+          justify-content: @justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch 
+.align-content(@align: stretch) {
+  -webkit-align-content: @align;
+     -moz-align-content: @align;
+      -ms-align-content: @align;
+          align-content: @align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch 
+.align-items(@align: stretch) {
+  -webkit-align-items: @align;
+     -moz-align-items: @align;
+      -ms-align-items: @align;
+          align-items: @align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch 
+.align-self(@align: auto) {
+  -webkit-align-self: @align;
+     -moz-align-self: @align;
+      -ms-align-self: @align;
+          align-self: @align;
+}

dev/less/main.less

@@ -0,0 +1,588 @@
+// Font imports
+
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
+@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic);
+@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
+@import url(https://fonts.googleapis.com/css?family=Raleway:500);
+
+// Less variables
+
+@base-font-size: 16px;
+@vspacing: @base-font-size*2;
+
+@wide-1-breakpoint: 600px;
+
+@monospace-font-stack: ~"'Ubuntu Mono', 'Menlo', monospace";
+@body-font-stack: ~"'Open Sans', 'Helvetica Neue', 'Arial', sans-serif";
+@heading-font-stack: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif";
+@special-font-stack-1: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif";
+
+@black: #333;
+@black-content: #111;
+@gray: #666;
+// accent colors from hermanradtke.com
+@accent: #428bca; // alt: rgba(244,109,44,1);
+@link-hover: #2a6496; // alt: rgba(222,90,29,1);
+@complementary-accent: #1DA1DE;
+@background: #f7f7f7;
+@compensated-black: #555;
+@compensated-gray: #999;
+@compensated-black-hover: #111;
+@compensated-gray-hover: #b7b7b7;
+@white: #fefefe;
+@milk: #fefefe;
+
+@transition-speed-1: .1s;
+@transition-speed-2: .25s;
+@in-sine: cubic-bezier(0.47, 0, 0.75, 0.72);
+
+// Utils and prefixing
+
+@import 'flexbox-prefixes';
+
+.heading(@font-size: 18px) {
+    font-size: @font-size;
+    font-family: @heading-font-stack;
+    letter-spacing: -0.005rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    color: @black;
+}
+
+.transition (@transition) {
+    -webkit-transition: @transition;
+    -moz-transition:    @transition;
+    -ms-transition:     @transition;
+    -o-transition:      @transition;
+}
+
+.user-select(@user-select) {
+    -webkit-user-select: @user-select;
+    -moz-user-select: @user-select;
+    -ms-user-select: @user-select;
+    user-select: @user-select;
+}
+
+.meta() {
+    font-size: 14px;
+    color: @gray;
+}
+
+
+// Slap-on utils
+
+@import 'util';
+
+// General styles
+
+*, *:before, *:after {
+    box-sizing: border-box;
+}
+
+a, a:visited, a:focus, a:active {
+    text-decoration: none;
+}
+
+html {
+    height: 100%;
+    font-size: @base-font-size;
+}
+
+body {
+    .flex-display();
+    .flex-direction(column); // vertically stack sections
+    .align-items(center); // horizontally center all sections
+    .justify-content(flex-start); // start sections at the top
+    width: 100%;
+    min-height: 100%;
+    font-weight: 400;
+    font-family: @body-font-stack;
+    color: @black-content;
+    line-height: 1.6;
+    text-rendering: optimizeLegibility !important;
+}
+
+@media (min-width: @wide-1-breakpoint) {
+    body {
+        .justify-content(center); // vertically center all sections
+    }
+    
+    .non-narrow {
+        &.zero-top-spacing {
+            padding-top: 0 !important; 
+        }
+    }
+}
+
+// Ionicon classes
+
+.icon {
+    // INFO: Comment out if you see performance issues, especially on mobile
+    text-rendering: geometricPrecision !important;
+}
+
+// * Sections – the cornerstone of page elements
+// * Container – contains section contents
+//
+// Both classes are flex elements
+
+section {
+    .flex-display();
+    // Sections position their containers centrally, with spacing to the sides
+    // The containers can then move their children around as needed.
+    .justify-content(center);
+    .align-items(center);
+    width: 100%;
+}
+
+.container {
+    .flex-display();
+    width: 100%;
+}
+
+@media (min-width: @wide-1-breakpoint) {
+    section {
+        padding: 0 @vspacing/2;
+        margin-left: 100px;
+        margin-right: 100px;
+        max-width: 750px;
+    }
+}
+
+// Sections order
+
+section.header {
+    .flex-order(0);
+}
+section.icons {
+    .flex-order(1);
+}
+section.main {
+    .flex-order(2);
+}
+
+@media (min-width: @wide-1-breakpoint) {
+    section.header {
+        .flex-order(0);
+    }
+    section.icons {
+        .flex-order(2);
+    }
+    section.main {
+        .flex-order(1);
+    }
+}
+
+// Styles for sections and contents
+// Header section
+
+section.header {
+    background-color: @background;
+
+    .container {
+        .align-items(center);
+        .justify-content(center);
+    }
+
+    .content {
+        .flex-display();
+        .flex-direction(column);
+        .align-items(center);
+    }
+
+    .name {
+        .heading();
+        color: @compensated-black;
+    }
+
+    nav {
+        font-size: 14px;
+        margin-bottom: floor(@vspacing/2);
+        text-transform: uppercase;
+        font-family: @heading-font-stack;
+
+        ul {
+            list-style: none;
+            text-align: center;
+            .flex-display(inline-flex);
+        }
+
+        ul a {
+            margin-left: 6px;
+            margin-right: 6px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        ul li {
+            color: @compensated-black;
+            font-weight: 500;
+            .transition(~'color @{transition-speed-1} @{in-sine}');
+
+            &:hover {
+                color: @compensated-black-hover;
+            }
+        }
+    }
+}
+
+@media (min-width: @wide-1-breakpoint) {
+    section.header {
+        background-color: transparent;
+
+        .container {
+            .justify-content(flex-start);
+        }
+
+        .content {
+            .align-items(flex-start);
+        }
+
+        .name {
+            color: @black;
+        }
+
+        nav {
+            font-size: 14px;
+            margin-bottom: 0;
+
+            ul {
+                text-align: left;
+            }
+
+            ul li {
+                color: @gray;
+
+                &:hover {
+                    color: @black;
+                }
+            }
+        }
+    }
+}
+
+// Icons
+
+section.icons {
+    background-color: @background;
+
+    .container {
+        .align-items(center);
+        .justify-content(center);
+    }
+
+    .content {
+        a {
+            margin-left: 6px;
+            margin-right: 6px;
+            color: @compensated-black;
+            .transition(~'color @{transition-speed-1} @{in-sine}');
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            &:hover {
+                color: @compensated-black-hover;
+            }
+
+            .icon {
+                font-size: 20px;
+
+                &.larger {
+                    font-size: 22px;
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: @wide-1-breakpoint) {
+    section.icons {
+        background-color: transparent;
+
+        .container {
+            .justify-content(flex-start);
+        }
+
+        .content {
+            a {
+                margin-left: 3px;
+                margin-right: 3px;
+                color: @gray;
+
+                &:hover {
+                    color: @black;
+                }
+
+                .icon {
+                    font-size: 18px;
+
+                    &.larger {
+                        font-size: 20px;
+                    }
+                }
+            }
+
+        }
+    }
+}
+
+// Main section
+
+section.main {
+    .container {
+        .align-items(center);
+        .justify-content(flex-start);
+    }
+
+    .content {
+        color: @black-content;
+        font-size: @base-font-size;
+        
+        .title-container {
+            .flex-display();
+            .justify-content(space-between);
+
+            .initials {
+                display: none;
+                .heading();
+                color: @gray;
+
+                a {
+                    color: @gray;
+                    .transition(~'color @{transition-speed-1} @{in-sine}');
+
+                    &:hover {
+                        color: @black;
+                    }
+                }
+            }
+        }
+
+        .page-heading {
+            .heading();
+            margin-bottom: floor(@vspacing/2);
+        }
+
+        .front-matter {
+            .page-heading {
+                margin-bottom: 0;
+            }
+
+            .meta {
+                .meta();
+                .flex-display();
+                margin-bottom: @vspacing;
+            }
+
+            .date, .word-count, .reading-time .middot {
+                display: none;
+            }
+
+            .middot {
+                font-size: 6px;
+                margin: 0 6px;
+                display: inline;
+                vertical-align: middle;
+
+                &:before {
+                    content: "•";
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: @wide-1-breakpoint) {
+    section.main {
+        .content {
+            .front-matter {
+                .date, .word-count, .reading-time .middot {
+                    display: initial;
+                }
+            }
+
+            .title-container {
+                .initials {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+// 404 page
+
+section.main {
+    .container.f04 {
+        .justify-content(center);
+
+        .content {
+            .flex-display();
+            .flex-direction(column);
+            .align-items(center);
+
+            .num {
+                margin: 30px 0px 30px 0;
+                font-weight: 200;
+                font-family: @special-font-stack-1;
+                font-size: 50px;
+            }
+
+            .detail {
+                margin-bottom: 40px;
+            }
+        }
+    }
+}
+
+@media (min-width: @wide-1-breakpoint) {
+    section.main {
+        .container.f04 {
+            .justify-content(flex-start);
+
+            .content {
+                .align-items(flex-start);
+
+                .num {
+                    margin: 0 0 10px 0;
+                    font-size: 32px;
+                }
+
+                .detail {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+    }
+}
+
+// Post item
+
+section.main {
+    .container {
+        .content {
+            .post-item {
+                .flex-display();
+                .align-items(center);
+                display: list-item;
+                list-style: disc inside;
+                
+                .meta {
+                    .meta();
+                    display: none;
+
+                    min-width: 100px;
+                    text-align: right;
+                    margin-right: @vspacing/2;
+                }
+            }
+        }
+    }
+}
+
+// Spacing
+
+section {
+    padding: 0 @vspacing/2;
+}
+
+section.header {
+    padding-top: @vspacing;
+    padding-bottom: floor(@vspacing/2);
+}
+
+section.icons {
+    padding-top: 0;
+    padding-bottom: @vspacing;
+}
+
+section.main {
+    padding-top: @vspacing;
+    padding-bottom: @vspacing;
+}
+
+@media (min-width: @wide-1-breakpoint) {
+    @vspacing: 60px;
+
+    .container {
+        margin: 0 @vspacing/2;
+    }
+
+    section.header {
+        padding-top: @vspacing;
+        padding-bottom: @vspacing;
+    }
+
+    section.icons {
+        padding-top: @vspacing;
+        padding-bottom: @vspacing;
+    }
+
+    section.main {
+        padding-top: 0;
+        padding-bottom: 0;
+
+        .container {
+            .content {
+                .post-item {
+                    display: flex;
+                    list-style: none;
+
+                    .meta {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+
+    section.main.post {
+        padding-top: @vspacing;
+        padding-bottom: @vspacing;
+    }
+}
+
+a {
+    color: @accent;
+    .transition(~'color @{transition-speed-1} @{in-sine}');
+    
+    &:hover {
+        color: @link-hover;
+    }
+}
+
+img {
+    max-width: 100%;
+}
+
+img.profile {
+  min-width:100%;
+}
+
+@media (min-width: @wide-1-breakpoint) {
+  img.profile {
+    min-width: 300px;
+    max-width: 300px !important;
+  }
+}
+
+.page-heading a {
+    color: @black;
+}
+
+@import 'markdown';

dev/less/markdown.less

@@ -0,0 +1,196 @@
+section.main .content {
+.markdown {
+
+@background-gray: #f7f7f7;
+
+// 
+// Heading
+// 
+
+h1, h2, h3, h4, h5, h6 {
+    .heading();
+    text-transform: none;
+    margin-top: 1.75rem;
+}
+
+h1 {
+    font-size: 1.75rem;
+    margin-bottom: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+h3 {
+    font-size: 1em;
+    margin-bottom: 1rem;
+}
+
+h4, h5, h6 {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    letter-spacing: none;
+    text-transform: none;
+}
+
+// 
+// Code
+// 
+
+code, pre {
+    font-family: @monospace-font-stack;
+    font-size: 0.98rem;
+    background-color: @background-gray;
+}
+
+code {
+    /* enclosed by single backtick (`) */
+    padding: .15em .5em;
+    border-radius: 2px;
+}
+
+pre {
+    /* Hugo specific: consider using the 'highlight' shortcode */
+    display: block;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    padding: 1rem;
+    line-height: 1.5em;
+    white-space: pre;
+    white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+}
+
+pre code {
+    /* enclosed by 4 backticks (````) */
+    padding: 0;
+    font-size: 0.9rem;
+}
+
+a code {
+    color: @accent !important;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+// 
+// Body text
+// 
+
+
+p {
+    /* Invoked by line break */
+    font-size: 1rem;
+    margin-top: 0;
+    margin-bottom: 1em;
+}
+
+
+// TODO: Try out and adjust properties for selectors below
+
+// Lists
+
+ul, ol, dl {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+}
+
+dt {
+    font-weight: bold;
+}
+
+dd {
+    margin-bottom: .5rem;
+}
+
+ul {
+    margin-bottom: 1.25rem;
+}
+
+li {
+    list-style-type: disc;
+    list-style-position: inside;
+}
+
+// Miscenllaneous
+
+em {
+    font-style: italic;
+}
+
+strong {
+    font-weight: 700;
+}
+
+hr {
+    position: relative;
+    margin: 1.75rem 0;
+    border: 0;
+    border-top: 1px solid lighten(@gray, 10%);
+    border-top: 1px solid lighten(@gray, 20%);
+}
+
+abbr {
+    font-size: 0.85rem;
+    font-weight: bold;
+    color: lighten(@black, 20%);
+    text-transform: uppercase;
+}
+
+abbr[title] {
+    cursor: help;
+    border-bottom: 1px dotted lighten(@gray, 10%);
+}
+
+
+// Quotes
+
+blockquote {
+    padding: .5rem 1rem;
+    margin: .8rem 0;
+    color: #7a7a7a;
+    border-left: .25rem solid #e5e5e5;
+}
+
+blockquote p:last-child {
+    margin-bottom: 0;
+}
+
+@media (min-width: 550px) {
+    blockquote {
+        padding-right: 5rem;
+        padding-left: 1.25rem;
+    }
+}
+
+// Images and tables
+
+img {
+    margin: 1rem 0;
+    max-width: 100%;
+}
+
+table {
+    margin-bottom: 1rem;
+    width: 100%;
+    border: 1px solid #e5e5e5;
+    border-collapse: collapse;
+}
+
+td,
+th {
+    padding: .25rem .5rem;
+    border: 1px solid #e5e5e5;
+}
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+    background-color: @background-gray;
+}
+
+} // end .markdown
+} // end section.main .content

dev/less/util.less

@@ -0,0 +1,24 @@
+.dark {
+    color: @black !important;
+}
+
+.light {
+    color: @gray !important;
+}
+
+.accent {
+    color: @accent !important;
+}
+
+.small-screens-only {
+    @media (min-width: 550px) {
+        display: none;
+    }
+}
+
+.large-screens-only {
+    display: none;
+    @media (min-width: 550px) {
+        display: initial;
+    }
+}