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 */ + +/** + * + */ + +.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: + * + * + * + * + * + * + *
cell1cell2cell3
+*/ + +.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) */