diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..da0310f
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file
diff --git a/_sass/_elements.scss b/_sass/_animations.scss
similarity index 70%
rename from _sass/_elements.scss
rename to _sass/_animations.scss
index 9eb3d41..686a896 100644
--- a/_sass/_elements.scss
+++ b/_sass/_animations.scss
@@ -1,131 +1,33 @@
-hr {
- display: block;
- margin: 1em 0;
- padding: 0;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #fff;
-}
+/* ==========================================================================
+ Animations
+ ========================================================================== */
-// Figures and images
-// --------------------------------------------------
-figure {
- margin: 0;
- padding-top: 10px;
- padding-bottom: 10px;
- @include clearfix;
- img {
- margin-bottom: 10px;
- }
- a {
- img {
- @include transform(translateY(0));
- -webkit-transition-duration: 0.25s;
- -moz-transition-duration: 0.25s;
- -o-transition-duration: 0.25s;
- opacity: 0.7;
- &:hover {
- @include transform(translateY(-5px));
- @include box-shadow(0 0 10px rgba($black, .20));
- opacity: 1;
- }
- }
- }
- &.half {
- @include media($large) {
- img {
- width: 47.5%;
- float: left;
- margin-right: 2.5%;
- margin-bottom: 2.5%;
- }
- figcaption {
- clear: left;
- }
- }
- }
- &.third {
- @include media($large) {
- img {
- width: 30.8%;
- float: left;
- margin-right: 2.5%;
- margin-bottom: 2.5%;
- }
- figcaption {
- clear: left;
- }
- }
- }
-}
-svg:not(:root) {
- overflow: hidden;
-}
+/* add .animated class to elements you wish to animate
+ * along with the type of animation (eg:
)
+ */
-
-// Tables
-// --------------------------------------------------
-table {
- width: 100%;
-}
-
-// Buttons
-// --------------------------------------------------
-.btn {
- display: inline-block;
- margin-bottom: 20px;
- padding: 8px 20px;
- @include font-size(14);
- background-color: $black;
- color: $white;
- border: 2px solid $black !important;
- border-radius: $border-radius;
- &:visited {
- color: $white;
- }
- &:hover {
- background-color: $white;
- color: $black;
- }
-}
-
-.close-btn {
- position: absolute;
- top: 0;
- right: 0;
- z-index: 1;
- background-color: transparent;
- border: 0 solid transparent;
- color: $white;
-}
-
-// Well
-// --------------------------------------------------
-.well {
- padding: 20px;
- border: 1px solid $comp-color;
- @include rounded(4px);
-}
-
-// Animations
-// --------------------------------------------------
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {
0% {opacity: 0;} 100% {opacity: 1;}
}
+/*
+ Fade-in animation .fadeIn
+ ========================================================================== */
+
+@-webkit-keyframes fadeIn {
+ 0% {opacity: 0;}
+ 100% {opacity: 1;}
+}
@-moz-keyframes fadeIn {
- 0% {opacity: 0;}
+ 0% {opacity: 0;}
100% {opacity: 1;}
}
-
@-o-keyframes fadeIn {
- 0% {opacity: 0;}
+ 0% {opacity: 0;}
100% {opacity: 1;}
}
-
@keyframes fadeIn {
- 0% {opacity: 0;}
+ 0% {opacity: 0;}
100% {opacity: 1;}
}
@@ -135,48 +37,46 @@ table {
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
+
+/*
+ Fade-in down animation .fadeInDown
+ ========================================================================== */
+
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
-
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
-
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
-
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
-
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
-
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
-
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
-
100% {
opacity: 1;
transform: translateY(0);
@@ -189,48 +89,46 @@ table {
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
+
+/*
+ Fade-in down big animation .fadeInDownBig
+ ========================================================================== */
+
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
-
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
-
@-moz-keyframes fadeInDownBig {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
-
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
-
@-o-keyframes fadeInDownBig {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
-
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
-
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
-
100% {
opacity: 1;
transform: translateY(0);
@@ -243,81 +141,71 @@ table {
-o-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
+
+/*
+ Bounce-in animation .bounceIn
+ ========================================================================== */
+
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
-
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
-
70% {
-webkit-transform: scale(.9);
}
-
100% {
-webkit-transform: scale(1);
}
}
-
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
-
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
-
70% {
-moz-transform: scale(.9);
}
-
100% {
-moz-transform: scale(1);
}
}
-
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}
-
50% {
opacity: 1;
-o-transform: scale(1.05);
}
-
70% {
-o-transform: scale(.9);
}
-
100% {
-o-transform: scale(1);
}
}
-
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
-
50% {
opacity: 1;
transform: scale(1.05);
}
-
70% {
transform: scale(.9);
}
-
100% {
transform: scale(1);
}
@@ -329,81 +217,71 @@ table {
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
+
+/*
+ Bounce-in down animation .bounceInDown
+ ========================================================================== */
+
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
-
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
-
80% {
-webkit-transform: translateY(-10px);
}
-
100% {
-webkit-transform: translateY(0);
}
}
-
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
-
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
-
80% {
-moz-transform: translateY(-10px);
}
-
100% {
-moz-transform: translateY(0);
}
}
-
@-o-keyframes bounceInDown {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
-
60% {
opacity: 1;
-o-transform: translateY(30px);
}
-
80% {
-o-transform: translateY(-10px);
}
-
100% {
-o-transform: translateY(0);
}
}
-
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
-
60% {
opacity: 1;
transform: translateY(30px);
}
-
80% {
transform: translateY(-10px);
}
-
100% {
transform: translateY(0);
}
@@ -416,10 +294,14 @@ table {
animation-name: bounceInDown;
}
+/*
+ Drop animation .drop
+ ========================================================================== */
+
@-webkit-keyframes drop {
0% {
-webkit-transform: translateY(-500px);
- }
+ }
100% {
-webkit-transform: translateY(0);
}
@@ -427,7 +309,7 @@ table {
@-moz-keyframes drop {
0% {
-moz-transform: translateY(-500px);
- }
+ }
100% {
-moz-transform: translateY(0);
}
@@ -435,7 +317,7 @@ table {
@-o-keyframes drop {
0% {
-o-transform: translateY(-500px);
- }
+ }
100% {
-o-transform: translateY(0);
}
@@ -443,7 +325,7 @@ table {
@keyframes drop {
0% {
transform: translateY(-500px);
- }
+ }
100% {
transform: translateY(0);
}
@@ -453,4 +335,4 @@ table {
-moz-animation-name: drop;
-o-animation-name: drop;
animation-name: drop;
-}
\ No newline at end of file
+}
diff --git a/_sass/_archives.scss b/_sass/_archives.scss
new file mode 100644
index 0000000..7ee5a91
--- /dev/null
+++ b/_sass/_archives.scss
@@ -0,0 +1,77 @@
+/* ==========================================================================
+ Archive pages
+ ========================================================================== */
+
+
+
+
+/*
+ Post archive
+ ========================================================================== */
+
+.post-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ li {
+ padding: 8px 0;
+ border-bottom: 1px solid lighten($black,80);
+ border-bottom: 1px solid rgba($black,.10);
+ @include font-size(18,no);
+ @include clearfix;
+ > a {
+ border-bottom-width: 0; /* remove underlines from items in post indexes */
+ }
+ }
+ a > span {
+ float: right;
+ }
+ .entry-date {
+ @include font-size(14,no);
+ text-transform: uppercase;
+ display: none;
+ @include media($medium) {
+ display: inline;
+ }
+ }
+ /* post excerpt */
+ .excerpt {
+ display: block;
+ float: none;
+ @include font-size(14, no, 16);
+ @include media($medium) {
+ width: 70%;
+ }
+ @include media($large) {
+ width: 60%;
+ }
+ }
+}
+
+/*
+ Tag archive
+ ========================================================================== */
+
+.tag-box {
+ list-style: none;
+ margin: 0;
+ padding: 4px 0;
+ overflow: hidden;
+ @include clearfix;
+ &.inline li {
+ float: left;
+ @include font-size(14);
+ line-height: 2.5;
+ }
+ a {
+ padding: 4px 6px;
+ margin: 2px;
+ background-color: lighten($black, 90);
+ @include rounded(4px);
+ text-decoration: none;
+ span {
+ vertical-align: super;
+ @include font-size(10);
+ }
+ }
+}
\ No newline at end of file
diff --git a/_sass/_base.scss b/_sass/_base.scss
new file mode 100644
index 0000000..6751da4
--- /dev/null
+++ b/_sass/_base.scss
@@ -0,0 +1,221 @@
+/* ==========================================================================
+ Base elements
+ ========================================================================== */
+
+/*
+ Selections
+ ========================================================================== */
+
+::-moz-selection {
+ background-color: lighten($base-color, 65%);
+ color: $base-color;
+ text-shadow: none;
+}
+::selection {
+ background-color: lighten($base-color, 65%);
+ color: $base-color;
+ text-shadow: none;
+}
+
+
+/*
+ Body
+ ========================================================================== */
+
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ font-family: $base-font;
+ color: $text-color;
+ background-color: $body-color;
+ border-top: 5px solid $black;
+}
+
+/*
+ Typography
+ ========================================================================== */
+
+body {
+ font-family: $base-font;
+ color: $text-color;
+ @include font-size(16);
+}
+
+p {
+ @include font-size(18,yes,28);
+}
+
+li {
+ @include font-size(16,12,24);
+}
+
+/* headings */
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: $heading-font;
+ text-rendering: optimizeLegibility; // Fix the character spacing for headings
+}
+h1 {
+ @include font-size(36);
+}
+h2 {
+ @include font-size(32);
+}
+h3 {
+ @include font-size(28);
+}
+h4 {
+ @include font-size(24);
+}
+h5 {
+ @include font-size(20);
+}
+h6 {
+ @include font-size(18);
+}
+
+/* underlined text */
+
+u,
+ins {
+ text-decoration: none;
+ border-bottom: 1px solid $text-color;
+}
+
+/*
+ Links
+ ========================================================================== */
+
+a {
+ text-decoration: none;
+ color: $link-color;
+ &:visited {
+ color: lighten($link-color, 20);
+ }
+ &:hover {
+ color: darken($link-color, 20);
+ }
+ &:focus {
+ outline: thin dotted;
+ color: darken($link-color, 20);
+ }
+ &:hover,
+ &:active {
+ outline: 0;
+ }
+}
+
+/*
+ Horizontal rules
+ ========================================================================== */
+
+hr {
+ display: block;
+ margin: 1em 0;
+ padding: 0;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #fff;
+}
+
+/*
+ Figures and Images
+ ========================================================================== */
+
+figure {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ @include clearfix;
+ img {
+ margin-bottom: 10px;
+ }
+ a {
+ img {
+ @include transform(translateY(0));
+ -webkit-transition-duration: 0.25s;
+ -moz-transition-duration: 0.25s;
+ -o-transition-duration: 0.25s;
+ opacity: 0.7;
+ &:hover {
+ @include transform(translateY(-5px));
+ @include box-shadow(0 0 10px rgba($black, .20));
+ opacity: 1;
+ }
+ }
+ }
+}
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+// Figure captions
+
+figcaption {
+ padding-top: 10px;
+ @include font-size(14);
+ line-height: 1.3;
+ color: lighten($text-color, 10);
+}
+
+
+
+// Tables
+// --------------------------------------------------
+table {
+ width: 100%;
+}
+
+
+// Blockquotes
+// --------------------------------------------------
+
+blockquote {
+ font-family: $alt-font;
+ font-style: italic;
+ @include font-size(16);
+ padding-left: 20px;
+ border-left: 8px solid $black;
+}
+
+
+
+
+
+// Code
+// --------------------------------------------------
+
+tt, code, kbd, samp, pre {
+ font-family: $code-font;
+}
+p,
+li {
+ code {
+ @include font-size(14);
+ font-family: $code-font;
+ white-space: nowrap;
+ margin: 0 2px;
+ padding: 0 5px;
+ border: 1px solid lighten($black, 90);
+ background-color: lighten($black, 95);
+ @include rounded(3px);
+ }
+}
+pre {
+ @include font-size(14);
+ overflow-x: auto;
+}
+
+
+
+
+
+// Global Transition
+// ---------------------------------------------------
+
+b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
+ @include transition(all .2s ease);
+}
diff --git a/_sass/_buttons.scss b/_sass/_buttons.scss
new file mode 100644
index 0000000..3ab88ea
--- /dev/null
+++ b/_sass/_buttons.scss
@@ -0,0 +1,39 @@
+/* ==========================================================================
+ Buttons
+ ========================================================================== */
+
+/*
+ Default button
+ ========================================================================== */
+
+.btn {
+ display: inline-block;
+ margin-bottom: 20px;
+ padding: 8px 20px;
+ @include font-size(14);
+ background-color: $black;
+ color: $white;
+ border: 2px solid $black !important;
+ border-radius: $border-radius;
+ &:visited {
+ color: $white;
+ }
+ &:hover {
+ background-color: $white;
+ color: $black;
+ }
+}
+
+/*
+ Close button
+ ========================================================================== */
+
+.close-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ background-color: transparent;
+ border: 0 solid transparent;
+ color: $white;
+}
diff --git a/_sass/_coderay.scss b/_sass/_coderay.scss
deleted file mode 100644
index fd30bb2..0000000
--- a/_sass/_coderay.scss
+++ /dev/null
@@ -1,133 +0,0 @@
-.CodeRay {
- background-color: #efefef;
- font-family: $code-font;
- @include font-size(12);
- color: #333332;
- margin-bottom: 1.5em;
- @include rounded(4px);
- pre {
- margin: 0px;
- padding: 1em;
- }
-}
-
-div.CodeRay { }
-span.CodeRay { white-space: pre; border: 0px; padding: 2px }
-
-table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
-table.CodeRay td {
- padding: 1em 0.5em;
- vertical-align: top;
-}
-
-.CodeRay .line-numbers, .CodeRay .no {
- background-color: #ECECEC;
- color: #AAA;
- text-align: right;
-}
-
-.CodeRay .line-numbers a {
- color: #AAA;
-}
-
-.CodeRay .line-numbers tt { font-weight: bold }
-.CodeRay .line-numbers .highlighted { color: red }
-.CodeRay .line { display: block; float: left; width: 100%; }
-.CodeRay span.line-numbers { padding: 0 24px 0 4px }
-.CodeRay .code { width: 100% }
-
-ol.CodeRay { font-size: 10pt }
-ol.CodeRay li { white-space: pre }
-
-.CodeRay .code pre { overflow: auto }
-.CodeRay .debug { color:white ! important; background:blue ! important; }
-
-.CodeRay .annotation { color:#007 }
-.CodeRay .attribute-name { color:#f08 }
-.CodeRay .attribute-value { color:#700 }
-.CodeRay .binary { color:#509; font-weight:bold }
-.CodeRay .comment { color:#998; font-style: italic;}
-.CodeRay .char { color:#04D }
-.CodeRay .char .content { color:#04D }
-.CodeRay .char .delimiter { color:#039 }
-.CodeRay .class { color:#458; font-weight:bold }
-.CodeRay .complex { color:#A08; font-weight:bold }
-.CodeRay .constant { color:teal; }
-.CodeRay .color { color:#0A0 }
-.CodeRay .class-variable { color:#369 }
-.CodeRay .decorator { color:#B0B; }
-.CodeRay .definition { color:#099; font-weight:bold }
-.CodeRay .directive { color:#088; font-weight:bold }
-.CodeRay .delimiter { color:black }
-.CodeRay .doc { color:#970 }
-.CodeRay .doctype { color:#34b }
-.CodeRay .doc-string { color:#D42; font-weight:bold }
-.CodeRay .escape { color:#666; font-weight:bold }
-.CodeRay .entity { color:#800; font-weight:bold }
-.CodeRay .error { color:#F00; background-color:#FAA }
-.CodeRay .exception { color:#C00; font-weight:bold }
-.CodeRay .filename { color:#099; }
-.CodeRay .function { color:#900; font-weight:bold }
-.CodeRay .global-variable { color:teal; font-weight:bold }
-.CodeRay .hex { color:#058; font-weight:bold }
-.CodeRay .integer { color:#099; }
-.CodeRay .include { color:#B44; font-weight:bold }
-.CodeRay .inline { color: black }
-.CodeRay .inline .inline { background: #ccc }
-.CodeRay .inline .inline .inline { background: #bbb }
-.CodeRay .inline .inline-delimiter { color: #D14; }
-.CodeRay .inline-delimiter { color: #D14; }
-.CodeRay .important { color:#f00; }
-.CodeRay .interpreted { color:#B2B; font-weight:bold }
-.CodeRay .instance-variable { color:teal }
-.CodeRay .label { color:#970; font-weight:bold }
-.CodeRay .local-variable { color:#963 }
-.CodeRay .octal { color:#40E; font-weight:bold }
-.CodeRay .operator { }
-.CodeRay .predefined-constant { font-weight:bold }
-.CodeRay .predefined { color:#369; font-weight:bold }
-.CodeRay .preprocessor { color:#579; }
-.CodeRay .pseudo-class { color:#00C; font-weight:bold }
-.CodeRay .predefined-type { color:#074; font-weight:bold }
-.CodeRay .reserved, .keyword { color:#000; font-weight:bold }
-
-.CodeRay .key { color: #808; }
-.CodeRay .key .delimiter { color: #606; }
-.CodeRay .key .char { color: #80f; }
-.CodeRay .value { color: #088; }
-
-.CodeRay .regexp { background-color:#fff0ff }
-.CodeRay .regexp .content { color:#808 }
-.CodeRay .regexp .delimiter { color:#404 }
-.CodeRay .regexp .modifier { color:#C2C }
-.CodeRay .regexp .function { color:#404; font-weight: bold }
-
-.CodeRay .string { color: #D20; }
-.CodeRay .string .string { }
-.CodeRay .string .string .string { background-color:#ffd0d0 }
-.CodeRay .string .content { color: #D14; }
-.CodeRay .string .char { color: #D14; }
-.CodeRay .string .delimiter { color: #D14; }
-
-.CodeRay .shell { color:#D14 }
-.CodeRay .shell .content { }
-.CodeRay .shell .delimiter { color:#D14 }
-
-.CodeRay .symbol { color:#990073 }
-.CodeRay .symbol .content { color:#A60 }
-.CodeRay .symbol .delimiter { color:#630 }
-
-.CodeRay .tag { color:#070 }
-.CodeRay .tag-special { color:#D70; font-weight:bold }
-.CodeRay .type { color:#339; font-weight:bold }
-.CodeRay .variable { color:#036 }
-
-.CodeRay .insert { background: #afa; }
-.CodeRay .delete { background: #faa; }
-.CodeRay .change { color: #aaf; background: #007; }
-.CodeRay .head { color: #f8f; background: #505 }
-
-.CodeRay .insert .insert { color: #080; font-weight:bold }
-.CodeRay .delete .delete { color: #800; font-weight:bold }
-.CodeRay .change .change { color: #66f; }
-.CodeRay .head .head { color: #f4f; }
\ No newline at end of file
diff --git a/_sass/_footer.scss b/_sass/_footer.scss
new file mode 100644
index 0000000..002fd80
--- /dev/null
+++ b/_sass/_footer.scss
@@ -0,0 +1,30 @@
+/* ==========================================================================
+ Site footer
+ ========================================================================== */
+
+.footer-wrapper {
+ @include clearfix;
+ margin: 2em auto;
+ text-align: center;
+ font-family: $alt-font;
+ @include font-size(14);
+ font-style: italic;
+ color: lighten($text-color,20);
+ a {
+ color: lighten($text-color,20);
+ }
+}
+
+/*
+ Social media icons
+ ========================================================================== */
+
+.social-icons {
+ margin: 1em 0 2em;
+ a {
+ padding: 4px 8px;
+ &:hover {
+ color: $black;
+ }
+ }
+}
diff --git a/_sass/_footnotes.scss b/_sass/_footnotes.scss
new file mode 100644
index 0000000..37266f3
--- /dev/null
+++ b/_sass/_footnotes.scss
@@ -0,0 +1,8 @@
+/* ==========================================================================
+ Footnotes (class generated by Kramdown)
+ ========================================================================== */
+
+.footnotes {
+ @include font-size(14);
+ font-family: $base-font;
+}
\ No newline at end of file
diff --git a/_sass/_helpers.scss b/_sass/_helpers.scss
new file mode 100644
index 0000000..b178a1e
--- /dev/null
+++ b/_sass/_helpers.scss
@@ -0,0 +1,116 @@
+/* ==========================================================================
+ Helpers and Utility Classes
+ ========================================================================== */
+
+.wrap {
+ margin: 0 auto;
+}
+
+/*
+ Typography
+ ========================================================================== */
+
+/* capitalize all letters */
+
+.all-caps {
+ text-transform: uppercase;
+}
+
+/* center text */
+
+.center {
+ text-align: center;
+}
+
+/* remove bullets from list items */
+
+/**
+ *
+ * - Item 1
+ * - Item 2
+ *
+ */
+
+.unstyled-list {
+ list-style: none;
+ margin-left: 0;
+ padding-left: 0;
+ li {
+ list-style-type: none;
+ }
+}
+
+/*
+ Image alignment
+ ========================================================================== */
+
+/* float left */
+
+.pull-left {
+ float: left;
+ padding-right: $gutter;
+}
+
+/* float right */
+
+.pull-right {
+ float: right;
+ padding-left: $gutter;
+}
+
+/*
+ Image layout in
+ ========================================================================== */
+
+figure {
+
+ /* 2 images in a row. should be of equal height/width to maintain layout */
+
+ &.half {
+ @include media($large) {
+ img {
+ width: 47.5%;
+ float: left;
+ margin-right: 2.5%;
+ margin-bottom: 2.5%;
+ }
+ figcaption {
+ clear: left;
+ }
+ }
+ }
+
+ /* 3 images in a row. should be of equal height/width to maintain layout */
+
+ &.third {
+ @include media($large) {
+ img {
+ width: 30.8%;
+ float: left;
+ margin-right: 2.5%;
+ margin-bottom: 2.5%;
+ }
+ figcaption {
+ clear: left;
+ }
+ }
+ }
+}
+
+/*
+ No scrollbars
+ ========================================================================== */
+
+.no-scroll {
+ overflow: hidden;
+}
+
+/*
+ Link arrow (used in link post titles)
+ ========================================================================== */
+
+.link-arrow {
+ font-weight: 100;
+ text-decoration: underline;
+ font-style: normal;
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
deleted file mode 100644
index 5f63c38..0000000
--- a/_sass/_layout.scss
+++ /dev/null
@@ -1,529 +0,0 @@
-body {
- margin: 0;
- padding: 0;
- width: 100%;
- background-color: $body-color;
- border-top: 5px solid $black;
-}
-
-
-// Top Navigation
-// --------------------------------------------------
-
-.navigation-wrapper {
- text-align: center;
- @include clearfix;
- ul {
- display: inline-block;
- width: 100%;
- vertical-align: top;
- margin: 0 0 50px;
- padding: 4px 20px;
- background-color: $black;
- @include media($medium) {
- width: auto;
- @include rounded(0 0 10px 10px);
- }
- @include clearfix;
- }
- li {
- display: block;
- float: left;
- list-style: none;
- text-align: center;
- @include font-size(24,no);
- text-transform: uppercase;
- color: $white;
- @include media($medium) {
- @include font-size(14,no);
- }
- a:hover {
- @include box-shadow($shadow: inset 0 0 1px $white);
- }
- }
- a {
- display: block;
- margin-bottom: 10px;
- padding: 12px 20px;
- @include media($medium) {
- margin-bottom: 0;
- padding: 6px 10px;
- }
- color: $white;
- @include rounded(4px);
- &:hover {
- background-color: lighten($black, 10);
- }
- }
-}
-// Responsive nav toggle stuff
-#site-nav {
- display: none;
- z-index: 5;
- @include media($medium) {
- -webkit-animation-duration: 1s;
- -moz-animation-duration: 1s;
- -o-animation-duration: 1s;
- animation-duration: 1s;
- }
- &.closed {
- @include media($medium) {
- display: block;
- }
- }
- &.opened {
- display: block;
- max-height: 100%;
- li {
- float: none;
- @include media($medium) {
- float: left;
- }
- }
- }
-}
-.no-js #site-nav {
- display: block;
-}
-#nav-toggle {
- z-index: 20;
- display: block;
- vertical-align: top;
- margin: 0;
- padding: 6px 20px;
- background-color: $black;
- height: 44px;
- @include rounded(0);
- @include media($medium) {
- display: none;
- }
-}
-// menu overlay
-.menu-screen {
- @include position(fixed, 0px 0px 0px 0px);
- @include transition;
- background: $black;
- opacity: 0;
- visibility: hidden;
- z-index: 10;
- &.is-visible {
- opacity: 1;
- visibility: visible;
- &:hover {
- cursor: pointer;
- }
- }
-}
-
-
-// Masthead
-// --------------------------------------------------
-
-.masthead {
- margin-top: 40px;
- @include clearfix;
- @include media($medium) {
- margin-top: 0;
- }
- .wrap {
- text-align: center;
- max-width: em(440);
- padding-right: 20px;
- padding-left: 20px;
- @include media($medium) {
- max-width: em(728);
- padding-right: 60px;
- padding-left: 60px;
- }
- @include media($large) {
- max-width: em(960);
- }
- }
-}
-.site-logo {
- img {
- width: 100px;
- height: 100px;
- @include animation-duration(1s);
- @include animation-delay(.05s);
- border: 4px solid $white;
- @include rounded(100px);
- @include media($medium) {
- width: 150px;
- height: 150px;
- @include rounded(150px);
- }
- @include media($large) {
- width: 200px;
- height: 200px;
- @include rounded(200px);
- }
- }
-}
-.site-title {
- margin-bottom: 0;
- @include animation-duration(1s);
- @include animation-delay(.75s);
- a {
- color: $black;
- }
-}
-.site-description {
- margin-top: 0;
- font-family: $alt-font;
- @include font-size(16);
- font-weight: 400;
- font-style: italic;
- @include animation-duration(1s);
- @include animation-delay(1s);
- @include media($medium) {
- @include font-size(20);
- }
-}
-
-
-// Main
-// --------------------------------------------------
-
-#main {
- @include clearfix;
-}
-.entry,
-.hentry {
- @include clearfix;
- border-bottom: 1px solid lighten($black,80);
- border-bottom: 1px solid rgba($black,.10);
-}
-.entry-feature-image {
- margin: 20px 0 0;
- width: 100%;
- @include media($medium) {
- margin-top: -75px;
- }
- @include media($large) {
- margin-top: -145px;
- }
-}
-.entry-header {
- @include fill-parent;
-}
-.entry-tags {
- display: block;
- margin-top: 2em;
- text-transform: uppercase;
- @include font-size(16);
- font-weight: 600;
- a {
- color: $text-color;
- }
-}
-span + .entry-title {
- margin-top: 0;
-}
-.entry-title {
- font-family: $alt-font;
- font-style: italic;
- @include font-size(36,yes,36);
- font-weight: 400;
- line-height: 1;
- letter-spacing: -3px;
- a {
- color: $black;
- text-decoration: underline;
- }
- @include media($medium) {
- @include font-size(52,yes,54);
- }
- @include media($large) {
- @include font-size(68,yes,72);
- }
-}
-.entry-wrapper {
- @include outer-container;
- margin-top: 0;
- margin-bottom: 3em;
- padding-right: $gutter;
- padding-left: $gutter;
-}
-.entry-meta {
- @include span-columns(12);
- text-transform: uppercase;
- @include font-size(14);
- a {
- color: $text-color;
- }
- @include media($large) {
- @include span-columns(2.5);
- }
- & > span {
- padding: 0 20px 10px 0;
- display: inline-block;
- @include media($large) {
- display: block;
- padding: 8px 0;
- border-bottom: 1px solid lighten($black,80);
- border-bottom: 1px solid rgba($black,.10);
- }
- }
-}
-.bio-photo {
- display: none;
- @include media($large) {
- display: block;
- width: 150px;
- height: 150px;
- margin-bottom: 10px;
- @include rounded(150px);
- @include clearfix;
- }
-}
-.entry-content {
- @include span-columns(12);
- p:first-child {
- margin-top: 0;
- }
- @include media($large) {
- @include span-columns(9.5);
- }
- p > a,
- li > a {
- border-bottom: 1px dotted lighten($link-color, 50);
- &:hover {
- border-bottom-style: solid;
- }
- }
-}
-.post-list {
- li > a {
- border-bottom-width: 0;
- }
-}
-// Disqus Comments
-#disqus_thread {
- margin-top: 2em;
-}
-// Pagination
-.pagination {
- margin-top: 2em;
- text-align: center;
-}
-// Page layout
-#home,
-#page {
- .entry-wrapper {
- max-width: em(760);
- }
- .entry-title {
- text-align: center;
- max-width: 100%;
- }
- .entry-content {
- @include span-columns(12);
- }
-}
-// Post index layout
-.post-list {
- margin: 0;
- padding: 0;
- list-style-type: none;
- li {
- padding: 8px 0;
- border-bottom: 1px solid lighten($black,80);
- border-bottom: 1px solid rgba($black,.10);
- @include font-size(18,no);
- @include clearfix;
- }
- a > span {
- float: right;
- }
- .entry-date {
- @include font-size(14,no);
- text-transform: uppercase;
- display: none;
- @include media($medium) {
- display: inline;
- }
- }
- /* post excerpt */
- .excerpt {
- display: block;
- float: none;
- @include font-size(14, no, 16);
- @include media($medium) {
- width: 70%;
- }
- @include media($large) {
- width: 60%;
- }
- }
-}
-// Tag index
-.tag-box {
- list-style: none;
- margin: 0;
- padding: 4px 0;
- overflow: hidden;
- @include clearfix;
- &.inline li {
- float: left;
- @include font-size(14);
- line-height: 2.5;
- }
- a {
- padding: 4px 6px;
- margin: 2px;
- background-color: lighten($black, 90);
- @include rounded(4px);
- text-decoration: none;
- span {
- vertical-align: super;
- @include font-size(10);
- }
- }
-}
-// Table of Contents
-#markdown-toc {
- font-family: $alt-font;
- margin-top: $gutter;
- margin-bottom: $gutter;
- padding-left: 0;
- border: 1px solid $border-color;
- border-radius: $border-radius;
- ul {
- list-style-type: none;
- padding-left: 0;
- }
- li {
- @include font-size(16,no,18);
- border-bottom: 1px solid $border-color;
- list-style-type: none;
- }
- h6 {
- margin: 0;
- padding: (.25 * $gutter) (.5 * $gutter);
- background: $table-stripe-color;
- }
- a {
- display: block;
- padding: (.25 * $gutter) (.5 * $gutter);
- border-left: 2px solid transparent;
- border-bottom: 0 solid transparent;
- &:hover,
- &:focus {
- background: lighten($border-color,5);
- }
- }
-}
-
-// Tables
-.table {
- border-collapse: collapse;
- margin: ((0px + $doc-line-height) / 2) 0;
- margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
- width: 100%;
- tbody {
- tr:hover > td, tr:hover > th {
- background-color: $table-hover-color;
- }
- }
- thead {
- tr:first-child td {
- border-bottom: 2px solid $table-border-color;
- }
- }
- th {
- padding: (0px + $doc-line-height) / 2;
- padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
- font-family: $alt-font;
- font-weight: bold;
- text-align: left;
- background-color: $table-header-color;
- border-bottom: 1px solid darken($border-color, 15%);
- }
- td {
- border-bottom: 1px solid $border-color;
- padding: (0px + $doc-line-height) / 2;
- padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
- @include font-size(18);
- }
- tr, td, th {
- vertical-align: middle;
- }
-}
-
-// Footer
-// --------------------------------------------------
-
-.footer-wrapper {
- @include clearfix;
- margin: 2em auto;
- text-align: center;
- font-family: $alt-font;
- @include font-size(14);
- font-style: italic;
- color: lighten($text-color,20);
- a {
- color: lighten($text-color,20);
- }
-}
-
-
-// Search Overlay
-// --------------------------------------------------
-
-.search-wrapper {
- @include outer-container;
- margin-top: 0;
- padding-right: $gutter;
- padding-left: $gutter;
- height: 1px;
-}
-
-
-// Social Icons
-// --------------------------------------------------
-
-.social-icons {
- margin: 1em 0 2em;
- a {
- padding: 4px 8px;
- &:hover {
- color: $black;
- }
- }
-}
-
-
-// Browser Upgrade
-// --------------------------------------------------
-
-.upgrade {
- padding: 10px;
- text-align: center;
-}
-
-
-// Google Search Form
-// --------------------------------------------------
-
-#goog-fixurl {
- ul {
- list-style: none;
- margin-left: 0;
- padding-left: 0;
- li {
- list-style-type: none;
- }
- }
-}
-#goog-wm-qt {
- width: auto;
- margin-right: 10px;
- padding: 8px 10px;
- @include font-size(14);
- border-width: 2px;
- border-radius: $border-radius;
-}
-#goog-wm-sb {
- @extend .btn;
-}
diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss
new file mode 100644
index 0000000..f048d8f
--- /dev/null
+++ b/_sass/_masthead.scss
@@ -0,0 +1,80 @@
+/* ==========================================================================
+ Masthead
+ ========================================================================== */
+
+.masthead {
+ margin-top: 40px;
+ @include clearfix;
+ @include media($medium) {
+ margin-top: 0;
+ }
+ .wrap {
+ text-align: center;
+ max-width: em(440);
+ padding-right: 20px;
+ padding-left: 20px;
+ @include media($medium) {
+ max-width: em(728);
+ padding-right: 60px;
+ padding-left: 60px;
+ }
+ @include media($large) {
+ max-width: em(960);
+ }
+ }
+}
+
+/*
+ Site logo
+ ========================================================================== */
+
+.site-logo {
+ img {
+ width: 100px;
+ height: 100px;
+ @include animation-duration(1s);
+ @include animation-delay(.05s);
+ border: 4px solid $white;
+ @include rounded(100px); /* crops in a circle */
+ @include media($medium) {
+ width: 150px;
+ height: 150px;
+ @include rounded(150px); /* crops in a circle */
+ }
+ @include media($large) {
+ width: 200px;
+ height: 200px;
+ @include rounded(200px); /* crops in a circle */
+ }
+ }
+}
+
+/*
+ Site title/name
+ ========================================================================== */
+
+.site-title {
+ margin-bottom: 0;
+ @include animation-duration(1s);
+ @include animation-delay(.75s);
+ a {
+ color: $black;
+ }
+}
+
+/*
+ Site description text
+ ========================================================================== */
+
+.site-description {
+ margin-top: 0;
+ font-family: $alt-font;
+ @include font-size(16);
+ font-weight: 400;
+ font-style: italic;
+ @include animation-duration(1s);
+ @include animation-delay(1s);
+ @include media($medium) {
+ @include font-size(20);
+ }
+}
diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
new file mode 100644
index 0000000..a88fa16
--- /dev/null
+++ b/_sass/_navigation.scss
@@ -0,0 +1,99 @@
+/* ==========================================================================
+ Top navigation
+ ========================================================================== */
+
+.navigation-wrapper {
+ text-align: center;
+ @include clearfix;
+ ul {
+ display: inline-block;
+ width: 100%;
+ vertical-align: top;
+ margin: 0 0 50px;
+ padding: 4px 20px;
+ background-color: $black;
+ @include media($medium) {
+ width: auto;
+ @include rounded(0 0 10px 10px);
+ }
+ @include clearfix;
+ }
+ li {
+ display: block;
+ float: left;
+ list-style: none;
+ text-align: center;
+ @include font-size(24,no);
+ text-transform: uppercase;
+ color: $white;
+ @include media($medium) {
+ @include font-size(14,no);
+ }
+ a:hover {
+ @include box-shadow($shadow: inset 0 0 1px $white);
+ }
+ }
+ a {
+ display: block;
+ margin-bottom: 10px;
+ padding: 12px 20px;
+ @include media($medium) {
+ margin-bottom: 0;
+ padding: 6px 10px;
+ }
+ color: $white;
+ @include rounded(4px);
+ &:hover {
+ background-color: lighten($black, 10);
+ }
+ }
+}
+
+/*
+ Responsive navigation toggle
+ ========================================================================== */
+
+#site-nav {
+ display: none;
+ z-index: 5;
+ @include media($medium) {
+ -webkit-animation-duration: 1s;
+ -moz-animation-duration: 1s;
+ -o-animation-duration: 1s;
+ animation-duration: 1s;
+ }
+ &.closed {
+ @include media($medium) {
+ display: block;
+ }
+ }
+ &.opened {
+ display: block;
+ max-height: 100%;
+ li {
+ float: none;
+ @include media($medium) {
+ float: left;
+ }
+ }
+ }
+}
+
+/* display when JavaScript is disabled */
+.no-js #site-nav {
+ display: block;
+}
+
+#nav-toggle {
+ z-index: 20;
+ display: block;
+ vertical-align: top;
+ margin: 0;
+ padding: 6px 20px;
+ background-color: $black;
+ height: 44px;
+ @include rounded(0);
+ @include media($medium) {
+ display: none;
+ }
+}
diff --git a/_sass/_notices.scss b/_sass/_notices.scss
new file mode 100644
index 0000000..8b0ddc5
--- /dev/null
+++ b/_sass/_notices.scss
@@ -0,0 +1,26 @@
+/* ==========================================================================
+ Notices
+ ========================================================================== */
+
+/*
+ Default notice
+ ========================================================================== */
+
+.notice {
+ margin-top: 1.5em;
+ padding: .5em 1em;
+ text-indent: 0;
+ @include font-size(16);
+ background-color: lighten($black, 95);
+ border: 1px solid lighten($black, 90);
+ @include rounded(4px);
+}
+
+/*
+ Browser upgrade notice
+ ========================================================================== */
+
+.upgrade {
+ padding: 10px;
+ text-align: center;
+}
diff --git a/_sass/_page.scss b/_sass/_page.scss
new file mode 100644
index 0000000..b5ccdd0
--- /dev/null
+++ b/_sass/_page.scss
@@ -0,0 +1,295 @@
+/* ==========================================================================
+ Page/post layout and styling
+ ========================================================================== */
+
+/*
+ Main content
+ ========================================================================== */
+
+#main {
+ @include clearfix;
+}
+
+.entry,
+.hentry {
+ @include clearfix;
+ border-bottom: 1px solid lighten($black,80);
+ border-bottom: 1px solid rgba($black,.10);
+}
+
+/* feature image */
+
+.entry-feature-image {
+ margin: 20px 0 0;
+ width: 100%;
+ @include media($medium) {
+ margin-top: -75px; /* move up to be overlapped by site logo */
+ }
+ @include media($large) {
+ margin-top: -145px; /* move up further to be overlapped by site logo */
+ }
+}
+
+/* page header */
+
+.entry-header {
+ @include fill-parent;
+}
+
+/* tag listing in page header */
+
+.entry-tags {
+ display: block;
+ margin-top: 2em;
+ text-transform: uppercase;
+ @include font-size(16);
+ font-weight: 600;
+ a {
+ color: $text-color;
+ }
+}
+
+/* page title */
+
+span + .entry-title {
+ margin-top: 0;
+}
+
+.entry-title {
+ font-family: $alt-font;
+ font-style: italic;
+ @include font-size(36,yes,36);
+ font-weight: 400;
+ line-height: 1;
+ letter-spacing: -3px;
+ a {
+ color: $black;
+ text-decoration: underline;
+ }
+ @include media($medium) {
+ @include font-size(52,yes,54);
+ }
+ @include media($large) {
+ @include font-size(68,yes,72);
+ }
+}
+
+/* page/post wrapper */
+
+.entry-wrapper {
+ @include outer-container;
+ margin-top: 0;
+ margin-bottom: 3em;
+ padding-right: $gutter;
+ padding-left: $gutter;
+}
+
+/* page/post meta content (date, author, etc) */
+
+.entry-meta {
+ @include span-columns(12);
+ text-transform: uppercase;
+ @include font-size(14);
+ a {
+ color: $text-color;
+ }
+ @include media($large) {
+ @include span-columns(2.5);
+ }
+ & > span {
+ padding: 0 20px 10px 0;
+ display: inline-block;
+ @include media($large) {
+ display: block;
+ padding: 8px 0;
+ border-bottom: 1px solid lighten($black,80);
+ border-bottom: 1px solid rgba($black,.10);
+ }
+ }
+}
+
+/* author avatar (circular) */
+
+.bio-photo {
+ display: none;
+ @include media($large) {
+ display: block;
+ width: 150px;
+ height: 150px;
+ margin-bottom: 10px;
+ @include rounded(150px);
+ @include clearfix;
+ }
+}
+
+
+/* feature image credit */
+
+.image-credit {
+ margin: 0 auto;
+ max-width: 440px;
+ padding-top: 5px;
+ padding-right: 20px;
+ padding-left: 20px;
+ text-align: right;
+ @include font-size(12, no);
+ line-height: 1.3;
+ color: lighten($text-color, 30);
+ @include clearfix();
+ @include media($medium) {
+ max-width: 760px;
+ padding-right: 60px;
+ padding-left: 60px;
+ @include font-size(14, no);
+ }
+ @include media($large) {
+ max-width: 960px;
+ }
+ a {
+ color: lighten($text-color, 30);
+ }
+}
+
+/* main content block */
+
+.entry-content {
+ @include span-columns(12);
+ p:first-child {
+ margin-top: 0;
+ }
+ @include media($large) {
+ @include span-columns(9.5);
+ }
+ /* nice link underlines */
+ p > a,
+ li > a {
+ border-bottom: 1px dotted lighten($link-color, 50);
+ &:hover {
+ border-bottom-style: solid;
+ }
+ }
+}
+
+/*
+ Disqus
+ ========================================================================== */
+
+#disqus_thread {
+ margin-top: 2em;
+}
+
+/*
+ Pagination
+ ========================================================================== */
+
+.pagination {
+ margin-top: 2em;
+ text-align: center;
+}
+
+/*
+ Overrides
+ ========================================================================== */
+
+/* adjust width for lack of meta/author column */
+
+#home,
+#page {
+ .entry-wrapper {
+ max-width: em(760);
+ }
+ .entry-title {
+ text-align: center;
+ max-width: 100%;
+ }
+ .entry-content {
+ @include span-columns(12);
+ }
+}
+
+/*
+ Kramdown generated table of contents
+ ========================================================================== */
+
+#markdown-toc {
+ font-family: $alt-font;
+ margin-top: $gutter;
+ margin-bottom: $gutter;
+ padding-left: 0;
+ border: 1px solid $border-color;
+ border-radius: $border-radius;
+ ul {
+ list-style-type: none;
+ padding-left: 0;
+ }
+ li {
+ @include font-size(16,no,18);
+ border-bottom: 1px solid $border-color;
+ list-style-type: none;
+ }
+ h6 {
+ margin: 0;
+ padding: (.25 * $gutter) (.5 * $gutter);
+ background: $table-stripe-color;
+ }
+ a {
+ display: block;
+ padding: (.25 * $gutter) (.5 * $gutter);
+ border-left: 2px solid transparent;
+ border-bottom: 0 solid transparent;
+ &:hover,
+ &:focus {
+ background: lighten($border-color,5);
+ }
+ }
+}
+
+/*
+ Tables
+ ========================================================================== */
+
+/** For nicer looking tables apply the .table class
+ * Example:
+ *
+ *
+ * cell1 |
+ * cell2 |
+ * cell3 |
+ *
+ *
+*/
+
+.table {
+ border-collapse: collapse;
+ margin: ((0px + $doc-line-height) / 2) 0;
+ margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
+ width: 100%;
+ tbody {
+ tr:hover > td, tr:hover > th {
+ background-color: $table-hover-color;
+ }
+ }
+ thead {
+ tr:first-child td {
+ border-bottom: 2px solid $table-border-color;
+ }
+ }
+ th {
+ padding: (0px + $doc-line-height) / 2;
+ padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
+ font-family: $alt-font;
+ font-weight: bold;
+ text-align: left;
+ background-color: $table-header-color;
+ border-bottom: 1px solid darken($border-color, 15%);
+ }
+ td {
+ border-bottom: 1px solid $border-color;
+ padding: (0px + $doc-line-height) / 2;
+ padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
+ @include font-size(18);
+ }
+ tr, td, th {
+ vertical-align: middle;
+ }
+}
diff --git a/_sass/_search.scss b/_sass/_search.scss
new file mode 100644
index 0000000..0afcc2b
--- /dev/null
+++ b/_sass/_search.scss
@@ -0,0 +1,40 @@
+/* ==========================================================================
+ Search
+ ========================================================================== */
+
+.search-wrapper {
+ @include outer-container;
+ margin-top: 0;
+ padding-right: $gutter;
+ padding-left: $gutter;
+ height: 1px;
+}
+
+/*
+ Google search form
+ ========================================================================== */
+
+#goog-fixurl {
+ ul {
+ list-style: none;
+ margin-left: 0;
+ padding-left: 0;
+ li {
+ list-style-type: none;
+ }
+ }
+}
+
+#goog-wm-qt {
+ width: auto;
+ margin-right: 10px;
+ padding: 8px 10px;
+ @include font-size(14);
+ border-width: 2px;
+ border-radius: $border-radius;
+}
+
+/* button */
+#goog-wm-sb {
+ @extend .btn;
+}
diff --git a/_sass/_site.scss b/_sass/_site.scss
deleted file mode 100644
index d2d40dd..0000000
--- a/_sass/_site.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-// Selection
-// --------------------------------------------------
-
-::-moz-selection {
- background-color: lighten($base-color, 65%);
- color: $base-color;
- text-shadow: none;
-}
-::selection {
- background-color: lighten($base-color, 65%);
- color: $base-color;
- text-shadow: none;
-}
-
-
-// Body
-// --------------------------------------------------
-
-body {
- font-family: $base-font;
- color: $text-color;
-}
-
-
-// TYPOGRAPHY
-// --------------------------------------------------
-
-body {
- font-family: $base-font;
- color: $text-color;
- @include font-size(16);
-}
-
-p {
- @include font-size(18,yes,28);
-}
-
-li {
- @include font-size(16,12,24);
-}
-
-// Headings
-h1, h2, h3, h4, h5, h6 {
- font-family: $heading-font;
- text-rendering: optimizeLegibility; // Fix the character spacing for headings
-}
-h1 {
- @include font-size(36);
-}
-h2 {
- @include font-size(32);
-}
-h3 {
- @include font-size(28);
-}
-h4 {
- @include font-size(24);
-}
-h5 {
- @include font-size(20);
-}
-h6 {
- @include font-size(18);
-}
-
-u,
-ins {
- text-decoration: none;
- border-bottom: 1px solid $text-color;
-}
-
-
-// Links
-// --------------------------------------------------
-
-a {
- text-decoration: none;
- color: $link-color;
- &:visited {
- color: lighten($link-color, 20);
- }
- &:hover {
- color: darken($link-color, 20);
- }
- &:focus {
- outline: thin dotted;
- color: darken($link-color, 20);
- }
- &:hover,
- &:active {
- outline: 0;
- }
-}
-
-.link-arrow {
- font-weight: 100;
- text-decoration: underline;
- font-style: normal;
-}
-
-
-// Figures
-// --------------------------------------------------
-
-figcaption {
- padding-top: 10px;
- @include font-size(14);
- line-height: 1.3;
- color: lighten($text-color, 10);
-}
-
-
-// Feature Image Caption
-// --------------------------------------------------
-
-.image-credit {
- margin: 0 auto;
- max-width: 440px;
- padding-top: 5px;
- padding-right: 20px;
- padding-left: 20px;
- text-align: right;
- @include font-size(14,no);
- line-height: 1.3;
- color: lighten($text-color, 30);
- @include clearfix();
- @include media($medium) {
- max-width: 760px;
- padding-right: 60px;
- padding-left: 60px;
- }
- @include media($large) {
- max-width: 960px;
- }
- a {
- color: lighten($text-color, 30);
- }
-}
-
-
-// Note text
-// --------------------------------------------------
-
-.notice {
- margin-top: 1.5em;
- padding: .5em 1em;
- text-indent: 0;
- @include font-size(16);
- background-color: lighten($black, 95);
- border: 1px solid lighten($black, 90);
- @include rounded(4px);
-}
-
-
-// Blockquotes
-// --------------------------------------------------
-
-blockquote {
- font-family: $alt-font;
- font-style: italic;
- @include font-size(16);
- padding-left: 20px;
- border-left: 8px solid $black;
-}
-
-
-// Footnotes
-// --------------------------------------------------
-
-.footnotes {
- @include font-size(14);
- font-family: $base-font;
-}
-
-
-// Code
-// --------------------------------------------------
-
-tt, code, kbd, samp, pre {
- font-family: $code-font;
-}
-p,
-li {
- code {
- @include font-size(14);
- font-family: $code-font;
- white-space: nowrap;
- margin: 0 2px;
- padding: 0 5px;
- border: 1px solid lighten($black, 90);
- background-color: lighten($black, 95);
- @include rounded(3px);
- }
-}
-pre {
- @include font-size(14);
- overflow-x: auto;
-}
-
-
-// Utility Classes
-// --------------------------------------------------
-
-.wrap {
- margin: 0 auto;
-}
-.all-caps {
- text-transform: uppercase;
-}
-.pull-left {
- float: left;
- padding-right: $gutter;
-}
-.pull-right {
- float: right;
- padding-left: $gutter;
-}
-.unstyled-list {
- list-style: none;
- margin-left: 0;
- padding-left: 0;
- li {
- list-style-type: none;
- }
-}
-.no-scroll {
- overflow: hidden;
-}
-.center{
- text-align: center;
-}
-
-
-// Global Transition
-// ---------------------------------------------------
-
-b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
- @include transition(all .2s ease);
-}
diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss
index 936df99..9b66642 100644
--- a/_sass/_syntax.scss
+++ b/_sass/_syntax.scss
@@ -1,3 +1,11 @@
+/* ==========================================================================
+ Syntax highlighting and formatting
+ ========================================================================== */
+
+/*
+ Pygments.rb and Rouge
+ ========================================================================== */
+
.highlight {
background-color: #efefef;
font-family: $code-font;
@@ -71,4 +79,146 @@
.vg { color: #008080 } /* Name.Variable.Global */
.vi { color: #008080 } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */
-}
\ No newline at end of file
+}
+
+/*
+ Coderay
+ ========================================================================== */
+
+.CodeRay {
+ background-color: #efefef;
+ font-family: $code-font;
+ @include font-size(12);
+ color: #333332;
+ margin-bottom: 1.5em;
+ @include rounded(4px);
+ pre {
+ margin: 0px;
+ padding: 1em;
+ }
+}
+
+div.CodeRay { }
+span.CodeRay { white-space: pre; border: 0px; padding: 2px }
+
+table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
+table.CodeRay td {
+ padding: 1em 0.5em;
+ vertical-align: top;
+}
+
+ol.CodeRay { font-size: 10pt }
+ol.CodeRay li { white-space: pre }
+
+.CodeRay {
+
+ .line-numbers,
+ .no {
+ background-color: #ececec;
+ color: #aaa;
+ text-align: right;
+ }
+
+ .line-numbers a {
+ color: #aaa;
+ }
+
+ .line-numbers tt { font-weight: bold }
+ .line-numbers .highlighted { color: red }
+ .line { display: block; float: left; width: 100%; }
+ span.line-numbers { padding: 0 24px 0 4px }
+ .code { width: 100% }
+
+ .code pre { overflow: auto }
+ .debug { color: white !important; background: blue !important; }
+ .annotation { color: #007 }
+ .attribute-name { color: #f08 }
+ .attribute-value { color: #700 }
+ .binary { color: #509; font-weight: bold }
+ .comment { color: #998; font-style: italic;}
+ .char { color: #04d }
+ .char .content { color: #04d }
+ .char .delimiter { color: #039 }
+ .class { color: #458; font-weight: bold }
+ .complex { color: #a08; font-weight: bold }
+ .constant { color: teal; }
+ .color { color: #0a0 }
+ .class-variable { color: #369 }
+ .decorator { color: #b0b; }
+ .definition { color: #099; font-weight: bold }
+ .directive { color: #088; font-weight: bold }
+ .delimiter { color: black }
+ .doc { color: #970 }
+ .doctype { color: #34b }
+ .doc-string { color: #d42; font-weight: bold }
+ .escape { color: #666; font-weight: bold }
+ .entity { color: #800; font-weight: bold }
+ .error { color: #f00; background-color: #faa }
+ .exception { color: #c00; font-weight: bold }
+ .filename { color: #099; }
+ .function { color: #900; font-weight: bold }
+ .global-variable { color: teal; font-weight: bold }
+ .hex { color: #058; font-weight: bold }
+ .integer { color: #099; }
+ .include { color: #b44; font-weight: bold }
+ .inline { color: black }
+ .inline .inline { background: #ccc }
+ .inline .inline .inline { background: #bbb }
+ .inline .inline-delimiter { color: #d14; }
+ .inline-delimiter { color: #d14; }
+ .important { color: #f00; }
+ .interpreted { color: #b2b; font-weight: bold }
+ .instance-variable { color: teal }
+ .label { color: #970; font-weight: bold }
+ .local-variable { color: #963 }
+ .octal { color: #40e; font-weight: bold }
+ .operator { }
+ .predefined-constant { font-weight: bold }
+ .predefined { color: #369; font-weight: bold }
+ .preprocessor { color: #579; }
+ .pseudo-class { color: #00c; font-weight: bold }
+ .predefined-type { color: #074; font-weight: bold }
+ .reserved,
+ .keyword { color: #000; font-weight: bold }
+
+ .key { color: #808; }
+ .key .delimiter { color: #606; }
+ .key .char { color: #80f; }
+ .value { color: #088; }
+
+ .regexp { background-color: #fff0ff }
+ .regexp .content { color: #808 }
+ .regexp .delimiter { color: #404 }
+ .regexp .modifier { color: #c2c }
+ .regexp .function { color: #404; font-weight: bold }
+
+ .string { color: #d20; }
+ .string .string { }
+ .string .string .string { background-color: #ffd0d0 }
+ .string .content { color: #d14; }
+ .string .char { color: #d14; }
+ .string .delimiter { color: #d14; }
+
+ .shell { color: #d14 }
+ .shell .content { }
+ .shell .delimiter { color: #d14 }
+
+ .symbol { color: #990073 }
+ .symbol .content { color: #a60 }
+ .symbol .delimiter { color: #630 }
+
+ .tag { color: #070 }
+ .tag-special { color: #d70; font-weight: bold }
+ .type { color: #339; font-weight: bold }
+ .variable { color: #036 }
+
+ .insert { background: #afa; }
+ .delete { background: #faa; }
+ .change { color: #aaf; background: #007; }
+ .head { color: #f8f; background: #505 }
+
+ .insert .insert { color: #080; font-weight: bold }
+ .delete .delete { color: #800; font-weight: bold }
+ .change .change { color: #66f; }
+ .head .head { color: #f4f; }
+}
diff --git a/_sass/_wells.scss b/_sass/_wells.scss
new file mode 100644
index 0000000..9d35050
--- /dev/null
+++ b/_sass/_wells.scss
@@ -0,0 +1,11 @@
+/* ==========================================================================
+ Wells
+ ========================================================================== */
+
+/* Used to call out text in a subtle manner */
+
+.well {
+ padding: 20px;
+ border: 1px solid $comp-color;
+ @include rounded(4px);
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index ccb048f..17f2c39 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -11,18 +11,45 @@ sitemap: false
*
*/
-// Partials
@import "variables";
-@import "vendor/bourbon/bourbon";
-@import "grid-settings";
-@import "vendor/neat/neat";
+
+/*
+ Vendor
+ ========================================================================== */
+
+@import "vendor/bourbon/bourbon"; /* Bourbon mixins (bourbon.io) */
+@import "grid-settings"; /* Bourbon Neat settings */
+@import "vendor/neat/neat"; /* Bourbon Neat grid mixins (neat.bourbon.io) */
+@import "vendor/font-awesome/font-awesome"; /* Font Awesome icons */
+@import "vendor/magnific-popup/magnific-popup"; /* Magnific Popup lightbox */
+
+/*
+ Global
+ ========================================================================== */
+
@import "mixins";
@import "reset";
-@import "site";
+@import "base";
+
+/*
+ Components
+ ========================================================================== */
+
+@import "helpers";
+@import "buttons";
+@import "wells";
@import "syntax";
-@import "coderay";
-@import "elements";
@import "forms";
-@import "layout";
-@import "vendor/font-awesome/font-awesome";
-@import "vendor/magnific-popup/magnific-popup";
+@import "notices"; /* notices and alerts */
+@import "animations";
+@import "masthead";
+@import "navigation";
+@import "search";
+@import "footer";
+
+/*
+ Page specific
+ ========================================================================== */
+
+@import "page"; /* layout and styles that apply to posts and pages */
+@import "archives"; /* archive pages (post/tag lists, etc) */