Initial commit

_sass/base/_reset.scss

@@ -0,0 +1,175 @@
+/* ==========================================================================
+   Reset
+   ========================================================================== */
+
+/* Reset Modified from Normalize.css */
+
+/* Base Reset */
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+*, *:before, *:after { box-sizing: inherit; }
+
+
+html {
+    min-height: 100%;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    font-size: 62.5%; // Make it easy to calculate rems to px
+}
+
+body {
+    @include ff--sans-serif(400);
+    -webkit-font-smoothing: antialiased;
+}
+
+article,
+aside,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+    display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 400;
+    color: $c-base__02;
+}
+
+
+/* Media */
+audio, canvas, progress, video {
+    display: inline-block;
+    vertical-align: baseline;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/* Images */
+
+[hidden], template { display: none; }
+
+img {
+    max-width: 100%;
+    font-style: italic;
+    vertical-align: middle;
+    border: 0;
+}
+
+svg:not(:root) { overflow: hidden; }
+
+svg {
+    pointer-events: none;
+    max-height: 100%
+}
+
+.center {
+  text-align: center; 
+}
+
+/* Links */
+
+a {
+    color: $c-accent__blue;
+    background-color: transparent;
+    text-decoration: none;
+
+    position: relative;
+    display: inline-block;
+    padding: 5px 1px;
+    transition: color ease 0.3s;
+    
+    /* Hover animation effect for all buttons */
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 0%;
+      left: 0;
+      bottom: 0;
+      background-color: $c-accent__blue;
+      transition: all ease 0.3s;
+    }
+
+    &:hover {
+      color: white;
+      &::after {
+        height: 100%;
+      }
+    }
+
+}
+
+/* Override hover animation with no-hov class */
+a.no-hov {
+	&:after {
+		content: none
+	}
+	
+	&:hover {
+		color: $c-accent__darkblue
+	}
+}
+
+a.nav {
+  padding: 10px 35px;  
+  overflow:hidden;
+}
+a.nav:before {
+    font-family: FontAwesome;
+    content:"\f07a";
+    position: absolute;
+    top: 11px;
+    left: -30px;
+    transition: all 200ms ease;
+}
+
+abbr[title] { border-bottom: 1px dotted; }
+b, strong   { font-weight: bold; }
+i, em       { font-weight: italic; }
+
+/* Content */
+
+figure {
+    margin: 0;
+}
+
+
+hr {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+    width: 100%;
+    height: 1px;
+    border: 0;
+    background: #EFF1F3;
+}
+
+/* Code Blocks */
+
+pre { overflow: auto; }
+
+code, pre {
+
+}
+small {
+        color: gray;
+}
+

_sass/components/_archives.scss

@@ -0,0 +1,50 @@
+/* ==========================================================================
+   Archives
+   ========================================================================== */
+
+.c-archives {
+    margin-bottom: 10rem;
+}
+
+.c-archives__year {
+    margin-bottom: 2.5rem;
+    @include fs--heading-1;
+}
+
+.c-archives__list {
+    margin-bottom: 2.5rem;
+    list-style: none;
+}
+
+.c-archives__item {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+    border-top: 1px solid #EFF1F3;
+    @media screen and (min-width: $bp__sm) {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-wrap: wrap;
+            -ms-flex-wrap: wrap;
+                flex-wrap: wrap;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+            -ms-flex-pack: justify;
+                justify-content: space-between;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+            -ms-flex-align: center;
+                align-items: center;
+    }
+
+    h3 {
+        @include fs--body;
+    }
+
+    p {
+        @include fs--body;
+        color: #515862;
+    }
+}
+

_sass/components/_article.scss

@@ -0,0 +1,136 @@
+/* ==========================================================================
+   Article
+   ========================================================================== */
+
+.c-article {
+    margin-bottom: 10rem; // 100px
+}
+
+.c-article__header {
+    margin-bottom: 2rem; // 50px
+    @media screen and (min-width: $bp__sm) {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-wrap: wrap;
+            -ms-flex-wrap: wrap;
+                flex-wrap: wrap;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+            -ms-flex-pack: justify;
+                justify-content: space-between;
+        -webkit-box-align: baseline;
+        -webkit-align-items: baseline;
+            -ms-flex-align: baseline;
+                align-items: baseline;
+    }
+}
+
+.c-article__title {
+    @include fs--heading-1;
+    color: $c-base__02;
+}
+
+.c-article__time {
+    @include fs--body;
+    color: $c-base__01;
+}
+
+.c-article__main {
+    margin-bottom: 5rem; // 50px
+    @include fs--body;
+    color: $c-base__01;
+
+    > * {
+        margin-bottom: 1.8rem; // 18px
+    }
+
+    h2 {
+        @include fs--heading-2;
+    }
+
+    h3 {
+        @include fs--heading-3;
+    }
+
+    h4 {
+        @include fs--heading-4;
+    }
+
+    h5 {
+        @include fs--body;
+    }
+
+    strong {
+        color: $c-base__02;
+        font-weight: 700;
+    }
+
+    blockquote {
+        margin-left: 0;
+        margin-right: 0;
+        padding-left: 1.8rem; // 18px
+        border-left: 5px solid #ccc;
+    }
+
+    ul,
+    ol {
+        margin-left: 2.1rem;
+    }
+
+		.web-container {
+			position: relative;
+			width: 100%;
+			max-width: 100%;
+			height: 0;
+			padding-bottom: 62.5%;
+			border: 1px solid #cacaca;
+			overflow: hidden;
+		}
+
+		.web-container iframe {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			max-width: 100%;
+			height: 100%;
+		}
+}
+
+.c-article__footer {
+}
+
+.pagenav {
+  width: 100%;
+  text-align: center;
+  border: 1px solid LightGrey;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  font-size: 18px;
+  overflow: hidden;
+  margin-bottom: 8rem;
+}
+
+.pagenav div {
+  border-color: transparent;
+}
+
+.wrapper {
+  padding: 10px;
+  border: 1px solid LightGrey;
+  display: inline-block;
+  margin: 0 auto;
+}
+
+#left {
+  float: left;
+  text-align: left;
+}
+
+#right {
+  float: right;
+  text-align: right;
+}
+

_sass/components/_page.scss

@@ -0,0 +1,45 @@
+/* ==========================================================================
+   Page
+   ========================================================================== */
+
+.c-page {
+
+}
+
+.c-page__header {
+    margin-bottom: 10rem; // 100px
+
+    h1 {
+        margin-bottom: 2.5rem; // 25px
+        @include fs--heading-2;
+        color: $c-base__02;
+    }
+
+    p {
+        @include fs--meta;
+    }
+}
+
+.c-page__footer {
+    margin-bottom: 10rem;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    p {
+        @include fs--body;
+        color: $c-base__01;
+    }
+}
+

_sass/components/_tag.scss

@@ -0,0 +1,72 @@
+/* ==========================================================================
+   Tip
+   ========================================================================== */
+
+.c-tags {
+  list-style: none;
+  margin: 0;
+  overflow: hidden; 
+  padding: 0;
+}
+
+.c-tags li {
+  float: left; 
+}
+
+.c-tag {
+  background: #eee;
+  border-radius: 3px 0 0 3px;
+  color: #999;
+  display: inline-block;
+  height: 26px;
+  line-height: 26px;
+  padding: 0 20px 0 23px;
+  position: relative;
+  margin: 0 10px 50px 0;
+  text-decoration: none;
+  -webkit-transition: color 0.2s;
+}
+
+.c-tag::before {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
+  content: '';
+  height: 6px;
+  left: 10px;
+  position: absolute;
+  width: 6px;
+  top: 10px;
+}
+
+.c-tag::after {
+  background: #fff;
+  border-bottom: 13px solid transparent;
+  border-left: 10px solid #eee;
+  border-top: 13px solid transparent;
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.c-tag:hover {
+  background-color: $c-accent__blue;
+  color: white;
+}
+
+.c-tag:hover::after {
+   border-left-color: $c-accent__blue;
+}
+
+.c-c-tag {
+    margin-right: 1rem;
+    position: relative;
+    white-space: nowrap;
+    @include fs--body;
+    &:before {
+        color: $c-base__0;
+        content: '#\2009';
+    }
+}
+

_sass/helpers/_mixins.scss

@@ -0,0 +1,84 @@
+/* ==========================================================================
+   Mixins
+   ========================================================================== */
+
+// Clearfix
+@mixin clearfix {
+    &:before,
+    &:after {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+// Font families
+@mixin ff--sans-serif($font-weight: normal) {
+    font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
+    font-weight: $font-weight;
+}
+
+@mixin ff--code {
+    font-family: 'Roboto Mono', monospace;
+}
+
+// Font sizing
+@mixin fs--title {
+    line-height: 1.5;
+    font-size: 4.8rem; // 48px
+}
+
+@mixin fs--heading-1 {
+    line-height: 1.5;
+    font-size: 3.2rem; // 32px
+}
+
+@mixin fs--heading-2 {
+    line-height: 1.5;
+    font-size: 2.4rem; // 24px
+}
+
+@mixin fs--heading-3 {
+    line-height: 1.5;
+    font-size: 2rem; // 20px
+}
+
+@mixin fs--heading-4 {
+    line-height: 1.6;
+    font-size: 1.8rem; // 18px
+}
+
+@mixin fs--body {
+    line-height: 1.5;
+    font-size: 1.8rem; // 18px
+}
+
+@mixin fs--meta {
+    line-height: 1;
+    font-size: 1.8rem; // 18px
+}
+
+@mixin fs--caption {
+    line-height: 1;
+    font-size: 1.6rem; // 16px
+}
+
+@mixin fs--code {
+    font-size: 1.4rem;
+    line-height: 1.5;
+}
+
+// Visually hide content
+@mixin visually-hidden {
+    position: absolute;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+}
+

_sass/helpers/_variables.scss

@@ -0,0 +1,22 @@
+/* ==========================================================================
+   Variabeles
+   ========================================================================== */
+
+$c-base__03: #0D2B35;
+$c-base__02: #163541;
+$c-base__01: #5C6E74;
+$c-base__00: #697B82;
+$c-base__0: #869395;
+$c-base__1: #96A0A0;
+$c-base__2: #EDE7D6;
+$c-base__3: #FCF5E4;
+
+$c-accent__blue: #0067FB;
+$c-accent__darkblue: #0029F9;
+$c-accent__green: #8BE367;
+
+// Breakpoints
+$bp__sm: 45rem; // 450px
+
+// Misc
+$m-border: 1px solid $c-base__2;

_sass/utilities/_layout.scss

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   Layout
+   ========================================================================== */
+
+.u-container {
+    max-width: 72rem; // 620px
+    margin-right: auto;
+    margin-left: auto;
+    padding-top: 10rem; // 100px
+    padding-right: 1rem; // 10px
+    padding-left: 1rem; // 10px
+}
+

_sass/utilities/_separator.scss

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   Separator
+   ========================================================================== */
+
+.u-separate {
+    margin-right: .45rem;
+    margin-left: .25rem;
+    color: $c-base__01;
+    &:after {
+        content: '\00a0/';
+    }
+}
+

_sass/vendor/_highlight.scss

@@ -0,0 +1,111 @@
+/* Solarized Dark
+
+For use with Jekyll and Pygments
+
+http://ethanschoonover.com/solarized
+
+SOLARIZED HEX      ROLE
+--------- -------- ------------------------------------------
+base03    #002b36  background
+base01    #586e75  comments / secondary content
+base1     #93a1a1  body text / default code / primary content
+orange    #cb4b16  constants
+red       #dc322f  regex, special keywords
+blue      #268bd2  reserved keywords
+cyan      #2aa198  strings, numbers
+green     #859900  operators, other keywords
+*/
+
+pre, code {
+    @include ff--code;
+    @include fs--code;
+}
+
+.highlight {
+    border-radius: 4px;
+    background: #FDFDFD;
+    border: 1px solid #E8E8EB;
+    color: #93a1a1;
+
+    .gutter {
+        padding: 1.2rem;
+        border-right: 1px solid #E8E8EB;
+    }
+
+    .code {
+        padding: 1.2rem;
+    }
+}
+span.lineno {
+    padding: 1rem;
+    border-right: 1px solid #E8E8EB;
+}
+.highlight .c { color: #586e75 } /* Comment */
+.highlight .err { color: #93a1a1 } /* Error */
+.highlight .g { color: #93a1a1 } /* Generic */
+.highlight .k { color: #859900 } /* Keyword */
+.highlight .l { color: #93a1a1 } /* Literal */
+.highlight .n { color: #93a1a1 } /* Name */
+.highlight .o { color: #859900 } /* Operator */
+.highlight .x { color: #cb4b16 } /* Other */
+.highlight .p { color: #93a1a1 } /* Punctuation */
+.highlight .cm { color: #586e75 } /* Comment.Multiline */
+.highlight .cp { color: #859900 } /* Comment.Preproc */
+.highlight .c1 { color: #586e75 } /* Comment.Single */
+.highlight .cs { color: #859900 } /* Comment.Special */
+.highlight .gd { color: #2aa198 } /* Generic.Deleted */
+.highlight .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #dc322f } /* Generic.Error */
+.highlight .gh { color: #cb4b16 } /* Generic.Heading */
+.highlight .gi { color: #859900 } /* Generic.Inserted */
+.highlight .go { color: #93a1a1 } /* Generic.Output */
+.highlight .gp { color: #93a1a1 } /* Generic.Prompt */
+.highlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #cb4b16 } /* Generic.Subheading */
+.highlight .gt { color: #93a1a1 } /* Generic.Traceback */
+.highlight .kc { color: #cb4b16 } /* Keyword.Constant */
+.highlight .kd { color: #268bd2 } /* Keyword.Declaration */
+.highlight .kn { color: #859900 } /* Keyword.Namespace */
+.highlight .kp { color: #859900 } /* Keyword.Pseudo */
+.highlight .kr { color: #268bd2 } /* Keyword.Reserved */
+.highlight .kt { color: #dc322f } /* Keyword.Type */
+.highlight .ld { color: #93a1a1 } /* Literal.Date */
+.highlight .m { color: #2aa198 } /* Literal.Number */
+.highlight .s { color: #2aa198 } /* Literal.String */
+.highlight .na { color: #93a1a1 } /* Name.Attribute */
+.highlight .nb { color: #B58900 } /* Name.Builtin */
+.highlight .nc { color: #268bd2 } /* Name.Class */
+.highlight .no { color: #cb4b16 } /* Name.Constant */
+.highlight .nd { color: #268bd2 } /* Name.Decorator */
+.highlight .ni { color: #cb4b16 } /* Name.Entity */
+.highlight .ne { color: #cb4b16 } /* Name.Exception */
+.highlight .nf { color: #268bd2 } /* Name.Function */
+.highlight .nl { color: #93a1a1 } /* Name.Label */
+.highlight .nn { color: #93a1a1 } /* Name.Namespace */
+.highlight .nx { color: #93a1a1 } /* Name.Other */
+.highlight .py { color: #93a1a1 } /* Name.Property */
+.highlight .nt { color: #268bd2 } /* Name.Tag */
+.highlight .nv { color: #268bd2 } /* Name.Variable */
+.highlight .ow { color: #859900 } /* Operator.Word */
+.highlight .w { color: #93a1a1 } /* Text.Whitespace */
+.highlight .mf { color: #2aa198 } /* Literal.Number.Float */
+.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
+.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
+.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
+.highlight .sb { color: #586e75 } /* Literal.String.Backtick */
+.highlight .sc { color: #2aa198 } /* Literal.String.Char */
+.highlight .sd { color: #93a1a1 } /* Literal.String.Doc */
+.highlight .s2 { color: #2aa198 } /* Literal.String.Double */
+.highlight .se { color: #cb4b16 } /* Literal.String.Escape */
+.highlight .sh { color: #93a1a1 } /* Literal.String.Heredoc */
+.highlight .si { color: #2aa198 } /* Literal.String.Interpol */
+.highlight .sx { color: #2aa198 } /* Literal.String.Other */
+.highlight .sr { color: #dc322f } /* Literal.String.Regex */
+.highlight .s1 { color: #2aa198 } /* Literal.String.Single */
+.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
+.highlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #268bd2 } /* Name.Variable.Class */
+.highlight .vg { color: #268bd2 } /* Name.Variable.Global */
+.highlight .vi { color: #268bd2 } /* Name.Variable.Instance */
+.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
+