From 050d690113b75dfbcc4532b380a5ddddbf252162 Mon Sep 17 00:00:00 2001 From: Kennon Kwok Date: Mon, 12 Jan 2015 09:56:39 -0800 Subject: [PATCH 01/20] add Flickr social button to author-bio.html --- _config.yml | 1 + _includes/_author-bio.html | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 7a5772161454..7b6fbd502259 100644 --- a/_config.yml +++ b/_config.yml @@ -53,6 +53,7 @@ owner: youtube: #username soundcloud: #username weibo: #username + flickr: #username include: [".htaccess"] exclude: ["lib", "config.rb", "Capfile", "config", "log", "Rakefile", "Rakefile.rb", "tmp", "less", "*.sublime-project", "*.sublime-workspace", "test", "spec", "Gruntfile.js", "package.json", "node_modules", "Gemfile", "Gemfile.lock", "LICENSE", "README.md"] diff --git a/_includes/_author-bio.html b/_includes/_author-bio.html index 08a387dd509d..47ec1b5a5191 100644 --- a/_includes/_author-bio.html +++ b/_includes/_author-bio.html @@ -25,4 +25,5 @@

{{ author.name }}

{% if author.steam %} Steam{% endif %} {% if author.youtube %} Youtube{% endif %} {% if author.soundcloud %} Soundcloud{% endif %} -{% if author.weibo %} Weibo{% endif %} \ No newline at end of file +{% if author.weibo %} Weibo{% endif %} +{% if author.flickr %} Flickr{% endif %} From 35761b2e8d165ee1eb5023b34dd2b10a2cd1de6e Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 20 Jan 2015 12:42:37 -0500 Subject: [PATCH 02/20] Remove Google Authorship - Fixes #120 - Add person microdata in author sidebar --- _includes/_author-bio.html | 44 +++++++++++++++++++++----------------- _includes/_head.html | 1 - 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/_includes/_author-bio.html b/_includes/_author-bio.html index 47ec1b5a5191..9ee74d2b614b 100644 --- a/_includes/_author-bio.html +++ b/_includes/_author-bio.html @@ -2,28 +2,32 @@ {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %} {% endif %} +
+ {% if author.avatar contains 'http' %} {{ author.name }} bio photo {% else %} {{ author.name }} bio photo {% endif %} -

{{ author.name }}

-

{{ author.bio }}

-{% if author.email %} Email{% endif %} -{% if author.twitter %} Twitter{% endif %} -{% if author.facebook %} Facebook{% endif %} -{% if author.google.plus %} Google+{% endif %} -{% if author.linkedin %} LinkedIn{% endif %} -{% if author.instagram %} Instagram{% endif %} -{% if author.tumblr %} Tumblr{% endif %} -{% if author.github %} Github{% endif %} -{% if author.stackoverflow %} Stackoverflow{% endif %} -{% if author.lastfm %} Last.fm{% endif %} -{% if author.dribbble %} Dribbble{% endif %} -{% if author.pinterest %} Pinterest{% endif %} -{% if author.foursquare %} Foursquare{% endif %} -{% if author.steam %} Steam{% endif %} -{% if author.youtube %} Youtube{% endif %} -{% if author.soundcloud %} Soundcloud{% endif %} -{% if author.weibo %} Weibo{% endif %} -{% if author.flickr %} Flickr{% endif %} + +

{{ author.name }}

+

{{ author.bio }}

+ {% if author.email %}Email{% endif %} + {% if author.twitter %} Twitter{% endif %} + {% if author.facebook %} Facebook{% endif %} + {% if author.google.plus %} Google+{% endif %} + {% if author.linkedin %} LinkedIn{% endif %} + {% if author.instagram %} Instagram{% endif %} + {% if author.tumblr %} Tumblr{% endif %} + {% if author.github %} Github{% endif %} + {% if author.stackoverflow %} Stackoverflow{% endif %} + {% if author.lastfm %} Last.fm{% endif %} + {% if author.dribbble %} Dribbble{% endif %} + {% if author.pinterest %} Pinterest{% endif %} + {% if author.foursquare %} Foursquare{% endif %} + {% if author.steam %} Steam{% endif %} + {% if author.youtube %} Youtube{% endif %} + {% if author.soundcloud %} Soundcloud{% endif %} + {% if author.weibo %} Weibo{% endif %} + {% if author.flickr %} Flickr{% endif %} +
\ No newline at end of file diff --git a/_includes/_head.html b/_includes/_head.html index ee9acd0b79cf..d8d07542e1d2 100644 --- a/_includes/_head.html +++ b/_includes/_head.html @@ -15,7 +15,6 @@ {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %} -{% if site.owner.google.plus %}{% endif %} From a41af6b53ba96a0c9aa6bfa52ef3bcd1c27d9e3c Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 20 Jan 2015 12:43:53 -0500 Subject: [PATCH 03/20] Remove duplicate author content --- _layouts/post.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/_layouts/post.html b/_layouts/post.html index 76ac6ece3044..84427b39312f 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -44,9 +44,6 @@

-
- {% include _author-bio.html %} -

{{ page.title }} was published on {% if page.modified %} and last modified on {% endif %}.

From 1a538f15acbfde0bd7407d00bcbb21921c13d869 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 20 Jan 2015 14:28:03 -0500 Subject: [PATCH 04/20] Fix typo --- theme-setup/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme-setup/index.md b/theme-setup/index.md index bb5aee5ad606..23eb731ca789 100644 --- a/theme-setup/index.md +++ b/theme-setup/index.md @@ -289,7 +289,7 @@ Any post or page that you want a *table of contents* to render insert the follow ### Paragraph Indentation -By default the margin below paragraphs has been removed and indent added to each. This is an intiatial design decision to mimic the look of type set in a printed book or manuscript. +By default the margin below paragraphs has been removed and indent added to each. This is an intentional design decision to mimic the look of type set in a printed book or manuscript.
screen shot of paragraphs with default indent style set From 422c0a467d72769eeb2996cc9f607413f5b49356 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 20 Jan 2015 15:20:01 -0500 Subject: [PATCH 05/20] Remove print styles --- _sass/print.scss | 56 ------------------------------------------------ 1 file changed, 56 deletions(-) delete mode 100644 _sass/print.scss diff --git a/_sass/print.scss b/_sass/print.scss deleted file mode 100644 index 44a37330f5da..000000000000 --- a/_sass/print.scss +++ /dev/null @@ -1,56 +0,0 @@ -// ROOT ===================================================== -* { -background : transparent !important; -color : black !important; -box-shadow : none !important; -text-shadow : none !important; -filter : none !important; --ms-filter : none !important; -position: static !important; } - -@page { -margin : 0.5cm; } - -// TYPOGRAPHY =============================================== -h2, h3 { -orphans : 3; -widows : 3; -page-break-after : avoid; } - -p { -orphans : 3; -widows : 3; } - -pre, blockquote { -border : 1px solid #333; -page-break-inside : avoid; -padding: 1em; } - -abbr[title]:after { -content: " (" attr(title) ")"; } - -a, a:visited { -text-decoration : underline; } - -a[href]:after { -content : " (" attr(href) ")"; } - -a[href^="javascript:"]:after, -a[href^="#"]:after { -content : ""; } - -// TEXTURE =============================================== -img { -max-width : 100% !important; -page-break-inside : avoid; } - -thead { -display : table-header-group; } - -tr { -page-break-inside : avoid; } - -// ELEMENTS ============================================== -// LAYOUT ================================================ -// VENDOR-SPECIFIC ======================================= -// MODERNIZR ============================================= From e916231560d2b7bbf809e654fccc1403b3a4a2f4 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 20 Jan 2015 15:25:57 -0500 Subject: [PATCH 06/20] Clean up comments in Sass partials --- _sass/coderay.scss | 6 +- _sass/elements.scss | 44 ++++- _sass/forms.scss | 36 +++- _sass/grid.scss | 61 ++++-- _sass/mixins.scss | 429 ++++++++++++++++++++++++++---------------- _sass/pygments.scss | 6 +- _sass/site.scss | 28 ++- _sass/typography.scss | 58 ++++-- _sass/variables.scss | 23 ++- 9 files changed, 480 insertions(+), 211 deletions(-) diff --git a/_sass/coderay.scss b/_sass/coderay.scss index 200fd8ca5b61..55dd71bc1fef 100644 --- a/_sass/coderay.scss +++ b/_sass/coderay.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Coderay syntax highlighting + ========================================================================== */ + .CodeRay { background-color: #efefef; font-family: $code-font; @@ -130,4 +134,4 @@ ol.CodeRay li { white-space: pre } .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 +.CodeRay .head .head { color: #f4f; } diff --git a/_sass/elements.scss b/_sass/elements.scss index 18b8c152e2b8..689ad6334ec2 100644 --- a/_sass/elements.scss +++ b/_sass/elements.scss @@ -1,3 +1,7 @@ +/* + Rules + ========================================================================== */ + hr { display: block; margin: 1em 0; @@ -7,10 +11,15 @@ hr { border-top: 1px solid #ccc; border-bottom: 1px solid #fff; } -/* Figures and images ==================================== */ + +/* + Figures and images + ========================================================================== */ + figure { margin-bottom: $indent-var; } + article img { max-width: 100%; height: auto; @@ -18,9 +27,13 @@ article img { vertical-align: middle; -ms-interpolation-mode: bicubic; } + svg:not(:root) { overflow: hidden; } + +/* 2 images of equal dimensions in a row */ + .half { @include container; @include clearfix; @@ -33,6 +46,9 @@ svg:not(:root) { } } } + +/* 3 images of equal dimensions in a row */ + .third { @include container; @include clearfix; @@ -45,7 +61,13 @@ svg:not(:root) { } } } -/* Buttons ============================================== */ + +/* + Buttons + ========================================================================== */ + +/* Default button */ + .btn { display: inline-block; margin-bottom: 20px; @@ -68,6 +90,9 @@ svg:not(:root) { color: $primary; } } + +/* Success button */ + .btn-success { background-color: $success; color: $white; @@ -80,6 +105,9 @@ svg:not(:root) { color: $success; } } + +/* Warning button */ + .btn-warning { background-color: $warning; color: $white; @@ -92,6 +120,9 @@ svg:not(:root) { color: $warning; } } + +/* Danger button */ + .btn-danger { background-color: $danger; color: $white; @@ -104,6 +135,9 @@ svg:not(:root) { color: $danger; } } + +/* Information button */ + .btn-info { background-color: $info; color: $white; @@ -116,7 +150,11 @@ svg:not(:root) { color: $info; } } -/* Well ================================================= */ + +/* + Wells + ========================================================================== */ + .well { min-height: 20px; padding: 19px; diff --git a/_sass/forms.scss b/_sass/forms.scss index 19c1b3b0d298..8ce8c67af2e1 100644 --- a/_sass/forms.scss +++ b/_sass/forms.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Forms + ========================================================================== */ + btnform { margin: 0 0 5px 0; fieldset { @@ -158,7 +162,11 @@ input[type="hidden"] { .checkbox.inline + .checkbox.inline { margin-left : 10px; } -/* disabled ==================================== */ + +/* + Disabled state + ========================================================================== */ + input[disabled], select[disabled], textarea[disabled], @@ -168,7 +176,11 @@ textarea[readonly] { @include opacity(.5); cursor : not-allowed; } -/* focus and active ============================ */ + +/* + Focus & active state + ========================================================================== */ + input:focus, textarea:focus { border-color : $accentcolor; @@ -181,7 +193,11 @@ input[type="checkbox"]:focus, select:focus { @include box-shadow(none); } -/* help text ==================================== */ + +/* + Help text + ========================================================================== */ + .help-block, .help-inline { color : lighten($black, 50); @@ -196,7 +212,11 @@ select:focus { vertical-align : middle; padding-left : 5px; } -/* .form-inline ================================= */ + +/* + .form-inline + ========================================================================== */ + .form-inline input, .form-inline textarea, .form-inline select { @@ -218,7 +238,11 @@ select:focus { float : left; margin-left : 0; margin-right : 3px; } -/* .form-search ================================= */ + +/* + .form-search + ========================================================================== */ + .form-search input, .form-search textarea, .form-search select { @@ -246,4 +270,4 @@ select:focus { float : left; margin-left : 0; margin-right : 3px; -} \ No newline at end of file +} diff --git a/_sass/grid.scss b/_sass/grid.scss index ffb89e7ad26b..4f8d466603f3 100644 --- a/_sass/grid.scss +++ b/_sass/grid.scss @@ -1,5 +1,12 @@ -// Defining number of columns in the grid. -// Common Values would be 12, 16 or 24 +/* ========================================================================== + Grid mixins + ========================================================================== */ + +/* + Define number of columns in the grid + Common values would be 12, 16 or 24 + ========================================================================== */ + $width: 100%; $def_grid: 12; $margin: 0; @@ -8,40 +15,70 @@ $margin: 0; margin:0 auto; width:$width; } - -// Works out the width of elements based -// on total number of columns and width -// number of columns being displayed. -// Removes 20px for margins + +/* + Works out the width of elements based on total number of columns and width + number of columns being displayed. Removes 20px for margins. + ========================================================================== */ + @mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){ display:$display; float:$float; width:(100%/$grid * $cols) - ($margin * 2); } -// Allows for padding before element +/* + Add x amount of column padding before an element + Example: @include prefix(1,12); + ========================================================================== */ + @mixin prefix($grid:$def_grid,$cols:''){ margin-left:(100%/$grid * $cols); } -// Allows for padding after element + +/* + Add x amount of column padding after an element + Example: @include suffix(2,12); + ========================================================================== */ + @mixin suffix($grid:$def_grid,$cols:''){ margin-right:(100%/$grid * $cols); } -// Removes left margin + +/* + Remove left margin + Example: @include first; + ========================================================================== */ + @mixin first(){ margin-left:0; } -// Removes right margin + +/* + Remove right margin + Example: @include last; + ========================================================================== */ + @mixin last(){ margin-right:0; } +/* + Push an element x amount of column(s) to the right + Example: @include push(2,12); + ========================================================================== */ + @mixin push($grid:$def_grid,$move:'') { position:relative; left:(100%/$grid * $move); } +/* + Pull an element x amount of column(s) to the left + Example: @include pull(1,12); + ========================================================================== */ + @mixin pull($grid:$def_grid,$move:''){ position:relative; left:(100%/$grid * $move) * -1; -} \ No newline at end of file +} diff --git a/_sass/mixins.scss b/_sass/mixins.scss index ac952d987cb9..1d244115592b 100644 --- a/_sass/mixins.scss +++ b/_sass/mixins.scss @@ -1,17 +1,20 @@ -// UTILITY MIXINS -// -------------------------------------------------- +/* ========================================================================== + Utility mixins + ========================================================================== */ + +/* + Clearfix + For clearing floats like a boss h5bp.com/q + ========================================================================== */ -// Clearfix -// -------------------- -// For clearing floats like a boss h5bp.com/q @mixin clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + /* Fixes Opera/contenteditable bug: */ + /* http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 */ line-height: 0; } &:after { @@ -19,29 +22,38 @@ } } -// Webkit-style focus -// -------------------- +/* + Webkit-style focus + ========================================================================== */ + @mixin tab-focus() { - // Default + /* Default */ outline: thin dotted #333; - // Webkit + /* Webkit */ outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } -// Center-align a block level element -// ---------------------------------- +/* + Center-align a block level element + ========================================================================== */ + @mixin center-block() { display: block; margin-left: auto; margin-right: auto; } -// TYPOGRAPHY -// -------------------------------------------------- +/* ========================================================================== + Typography related mixins + ========================================================================== */ + +/* + Maintains vertical rhythm by setting a font-sizes proportional to + line-height and bottom margin + example: @font-size(16); + ========================================================================== */ -// Full-fat vertical rhythm -// ------------------------ @mixin font-size($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; @@ -50,153 +62,225 @@ margin-bottom: 0rem + ($doc-line-height / $doc-font-size); } -// Just the REMs -// ------------- +/* + Just font-size (REMs + pixel fallback) + example: @include font-rem(16); + ========================================================================== */ + @mixin font-rem($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; } -// Just font-size and line-height -// ------------------------------ +/* + Just font-size (REMs + pixel fallback) and line-height + @include font(16); + ========================================================================== */ + @mixin font($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; line-height: 0 + round($doc-line-height / $size*10000) / 10000; } +/* + Hide text overflow and end with ... + ========================================================================== */ + @mixin text-overflow() { -overflow: hidden; -text-overflow: ellipsis; -white-space: nowrap; } + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Indentation variable */ $indent-var: 0rem + ($doc-line-height / $doc-font-size); -// GRADIENTS -// -------------------------------------------------- +/* ========================================================================== + Gradient mixins + ========================================================================== */ @mixin horizontal($startColor : $white, $endColor : $lightergrey) { -background-color: $endColor; -background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ -background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ -background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ -background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10 -background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 -background-image : linear-gradient(left, $startColor, $endColor); // W3C -background-repeat : repeat-x; } + background-color: $endColor; + background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ + background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ + background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10 + background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 + background-image : linear-gradient(left, $startColor, $endColor); // W3C + background-repeat : repeat-x; + } @mixin vertical($startColor : $white, $endColor: $lightergrey) { -background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ -background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ -background-color : $endColor; -background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ -background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10 -background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 -background-image : linear-gradient(top, $startColor, $endColor); // W3C -background-repeat : repeat-x; } + background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ + background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-color : $endColor; + background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ + background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10 + background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 + background-image : linear-gradient(top, $startColor, $endColor); // W3C + background-repeat : repeat-x; +} @mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) { -background-color : $endColor; -background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ -background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 -background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ -background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 -background-image : linear-gradient($deg, $startColor, $endColor); // W3C -background-repeat : repeat-x; } + background-color : $endColor; + background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ + background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 + background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 + background-image : linear-gradient($deg, $startColor, $endColor); // W3C + background-repeat : repeat-x; +} // .bordered(COLOR, COLOR, COLOR, COLOR); @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { -border-top : solid 1px $top-color; -border-left : solid 1px $left-color; -border-right : solid 1px $right-color; -border-bottom : solid 1px $bottom-color; } + border-top : solid 1px $top-color; + border-left : solid 1px $left-color; + border-right : solid 1px $right-color; + border-bottom : solid 1px $bottom-color; +} + +/* ========================================================================== + Rounded corners + ========================================================================== */ -// ROUND CORNERS -// -------------------------------------------------- -// .rounded(VALUE); + +/* + Round all corners + example: @include rounded(4px); + ========================================================================== */ + @mixin rounded($radius:4px) { -border-radius : $radius; } + border-radius : $radius; +} + +/* + Round individual corners (top right, bottom right, bottom left, top left) + example: @include border-radius(4px, 0, 0, 4px); + ========================================================================== */ -// .border-radius(VALUE,VALUE,VALUE,VALUE); @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) { -border-top-right-radius : $topright; -border-bottom-right-radius : $bottomright; -border-bottom-left-radius : $bottomleft; -border-top-left-radius : $topleft; --webkit-background-clip : padding-box; --moz-background-clip : padding; -background-clip : padding-box; } - -// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) + border-top-right-radius: $topright; + border-bottom-right-radius: $bottomright; + border-bottom-left-radius: $bottomleft; + border-top-left-radius: $topleft; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +/* + Box shadow + example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR)); + ========================================================================== */ + @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { --webkit-box-shadow : $shadow; --moz-box-shadow : $shadow; -box-shadow : $shadow; } + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + +/* + Drop shadow + example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); + ========================================================================== */ -// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { --webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); --moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); -box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); } + -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); + -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); + box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); +} + +/* + Text shadow + example: @include text-shadow(0 2px 3px rgba(0,0,0,.25)); + ========================================================================== */ -// .text-shadow(); @mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) { -text-shadow : $shadow; } +text-shadow: $shadow; } + +/* + Opacity + example: @include opacity(0.5); // 50% opacity + ========================================================================== */ + +@mixin opacity($opacity: 0.5) { + opacity: $opacity; +} -// .opacity(VALUE); -@mixin opacity($opacity : .5) { -opacity : $opacity; } +/* ========================================================================== + Transformations + ========================================================================== */ -// TRANSFORMATIONS -// -------------------------------------------------- +/* + @include rotate(VALUEdeg); + ========================================================================== */ -// .rotate(VALUEdeg); @mixin rotate($deg) { --webkit-transform : rotate($deg); --moz-transform : rotate($deg); --ms-transform : rotate($deg); --o-transform : rotate($deg); -transform : rotate($deg); } + -webkit-transform: rotate($deg); + -moz-transform: rotate($deg); + -ms-transform: rotate($deg); + -o-transform: rotate($deg); + transform: rotate($deg); +} + +/* + @include scale(VALUE); + ========================================================================== */ -// .scale(VALUE); @mixin scale($ratio) { --webkit-transform : scale($ratio); --moz-transform : scale($ratio); --ms-transform : scale($ratio); --o-transform : scale($ratio); -transform : scale($ratio); } + -webkit-transform: scale($ratio); + -moz-transform: scale($ratio); + -ms-transform: scale($ratio); + -o-transform: scale($ratio); + transform: scale($ratio); +} + +/* + @include skew(VALUE, VALUE); + ========================================================================== */ -// .skew(VALUE, VALUE); @mixin skew($x: 0, $y: 0) { --webkit-transform : skew($x, $y); --moz-transform : skew($x, $y); --ms-transform : skew($x, $y); --o-transform : skew($x, $y); -transform : skew($x, $y); } + -webkit-transform: skew($x, $y); + -moz-transform: skew($x, $y); + -ms-transform: skew($x, $y); + -o-transform: skew($x, $y); + transform: skew($x, $y); +} + +/* + @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); + ========================================================================== */ -// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); @mixin transition($transition) { --webkit-transition : $transition; --moz-transition : $transition; --ms-transition : $transition; --o-transition : $transition; -transition : $transition; } + -webkit-transition: $transition; + -moz-transition: $transition; + -ms-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +/* + @include translate(VALUE, VALUE); + ========================================================================== */ -// .translate(VALUE, VALUE) @mixin translate($x: 0, $y: 0) { --webkit-transform : translate($x, $y); --moz-transform : translate($x, $y); --ms-transform : translate($x, $y); --o-transform : translate($x, $y); -transform : translate($x, $y); } + -webkit-transform: translate($x, $y); + -moz-transform: translate($x, $y); + -ms-transform: translate($x, $y); + -o-transform: translate($x, $y); + transform: translate($x, $y); +} @mixin translate3d($x: 0, $y: 0, $z: 0) { --webkit-transform : translate($x, $y, $z); --moz-transform : translate($x, $y, $z); --ms-transform : translate($x, $y, $z); --o-transform : translate($x, $y, $z); -transform : translate($x, $y, $z); } + -webkit-transform: translate($x, $y, $z); + -moz-transform: translate($x, $y, $z); + -ms-transform: translate($x, $y, $z); + -o-transform: translate($x, $y, $z); + transform: translate($x, $y, $z); +} @mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) { -webkit-animation: $name $duration $delay $ease; @@ -204,68 +288,89 @@ transform : translate($x, $y, $z); } -ms-animation: $name $duration $delay $ease; } -// BACKGROUND -// -------------------------------------------------- +/* ========================================================================== + Background + ========================================================================== */ + +/* + @include background-alpha(VALUE VALUE); + ========================================================================== */ -// .background-alpha(VALUE VALUE); @mixin background-alpha($color: $white, $alpha: 1) { -background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); } + background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); +} + +/* + @include background-size(VALUE VALUE); + ========================================================================== */ -// .background-size(VALUE VALUE); @mixin background-size($size){ --webkit-background-size : $size; --moz-background-size : $size; --o-background-size : $size; -background-size : $size; } - -// .background-clip(VALUE); (border-box, padding-box, content-box) -@mixin background-clip($clip) { --webkit-background-clip : $clip; --moz-background-clip : $clip; -background-clip : $clip; } - -// .box-sizing(VALUE); (border-box, padding-box, content-box) + -webkit-background-size: $size; + -moz-background-size: $size; + -o-background-size: $size; + background-size: $size; +} + +/* + Box-sizing + example: @include box-sizing(VALUE); //(border-box, padding-box, content-box) + ========================================================================== */ + @mixin box-sizing($boxsize: border-box) { --webkit-box-sizing : $boxsize; --moz-box-sizing : $boxsize; --ms-box-sizing : $boxsize; -box-sizing : $boxsize; } + -webkit-box-sizing: $boxsize; + -moz-box-sizing: $boxsize; + -ms-box-sizing: $boxsize; + box-sizing: $boxsize; +} + +/* ========================================================================== + Image replacement + ========================================================================== */ -// For image replacement @mixin hide-text() { -text-indent : 100%; -white-space : nowrap; -overflow : hidden; } + text-indent: 100%; + white-space: nowrap; + overflow: hidden; +} + +/* + Hide from visual and speaking browsers + ========================================================================== */ -// Hide from visual and speaking browsers @mixin hidden { display: none; visibility: hidden; } -// Hide but maintain layout +/* + Hide but maintain layout + ========================================================================== */ + @mixin invisible() { -visibility : hidden; } + visibility: hidden; +} + +/* + Resize + example: @include resize(VALUE); //(none, both, horizontal, vertical, inherit) + + ========================================================================== */ -// .resize(VALUE) (none, both, horizontal, vertical, inherit) @mixin resize($direction: both) { -resize : $direction; -overflow : auto; } + resize: $direction; + overflow: auto; +} -// .userselect(VALUE) (all, element, none, text) -@mixin user-select($select) { --webkit-user-select : $select; --moz-user-select : $select; --o-user-select : $select; -user-select : $select; } +/* + Hidden but available to speaking browsers + ========================================================================== */ -// Hidden but available to speaking browsers @mixin visuallyhidden() { -overflow : hidden; -position : absolute; -clip : rect(0 0 0 0); -height : 1px; -width : 1px; -margin : -1px; -padding : 0; -border : 0; } \ No newline at end of file +overflow: hidden; +position: absolute; +clip: rect(0 0 0 0); +height: 1px; +width: 1px; +margin: -1px; +padding: 0; +border: 0; } \ No newline at end of file diff --git a/_sass/pygments.scss b/_sass/pygments.scss index 0cec2fc4635a..ae684f64abf4 100644 --- a/_sass/pygments.scss +++ b/_sass/pygments.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Pygments.rb syntax highlighting + ========================================================================== */ + .highlight { background-color: #efefef; font-family: $code-font; @@ -72,4 +76,4 @@ .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 +} diff --git a/_sass/site.scss b/_sass/site.scss index 0ddfa3c1d38b..7ba3eff081a1 100644 --- a/_sass/site.scss +++ b/_sass/site.scss @@ -1,4 +1,11 @@ -/* Selection ============================================= */ +/* ========================================================================== + Site wide styles + ========================================================================== */ + +/* + Selection + ========================================================================== */ + ::-moz-selection { background-color: lighten($basecolor, 65%); color: $basecolor; @@ -10,13 +17,21 @@ text-shadow: none; } -/* Global Classes ======================================== */ +/* + Global classes + ========================================================================== */ + +/* Capitalize */ .all-caps { text-transform: uppercase; } + +/* Float left */ .pull-left { float: left; } + +/* Float right */ .pull-right { float: right; } @@ -24,6 +39,8 @@ float: right; margin-top: 0; } + +/* Clearfix */ .clearfix { *zoom: 1; &:before, @@ -35,6 +52,8 @@ clear: both; } } + +/* Remove bullets and indentation from list */ .unstyled-list { list-style: none; margin-left: 0; @@ -44,7 +63,10 @@ } } -/* Global Transition ==================================== */ +/* + Global transition + ========================================================================== */ + b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { @include transition(all .2s ease); } \ No newline at end of file diff --git a/_sass/typography.scss b/_sass/typography.scss index 17da453dff66..75f863b38ed5 100644 --- a/_sass/typography.scss +++ b/_sass/typography.scss @@ -1,5 +1,11 @@ -// Headings -// -------------------------------------------------- +/* ========================================================================== + Typography + ========================================================================== */ + +/* + Headings + ========================================================================== */ + h1, h2, h3, h4, h5, h6 { font-family: $heading-font; } @@ -22,8 +28,10 @@ h6 { @include font-size(14); } -// Links -// -------------------------------------------------- +/* + Links + ========================================================================== */ + a { text-decoration: none; color: $link-color; @@ -43,8 +51,10 @@ a { } } -// Figures -// -------------------------------------------------- +/* + Figure captions + ========================================================================== */ + figcaption { padding-top: 10px; @include font(14); @@ -52,8 +62,10 @@ figcaption { color: lighten($text-color, 10); } -// Feature Image Caption -// -------------------------------------------------- +/* + Feature image captions + ========================================================================== */ + .image-credit { @include grid(12,10); @include prefix(12,1); @@ -77,8 +89,10 @@ figcaption { } } -// Note text -// -------------------------------------------------- +/* + Notices + ========================================================================== */ + .notice { margin-top: 1.5em; padding: .5em 1em; @@ -89,8 +103,10 @@ figcaption { @include rounded(3px); } -// Blockquotes -// -------------------------------------------------- +/* + Blockquotes + ========================================================================== */ + blockquote { margin-left: -28px; padding-left: 20px; @@ -99,8 +115,10 @@ blockquote { font-style: italic; } -// Footnotes -// -------------------------------------------------- +/* + Footnotes + ========================================================================== */ + .footnotes { ol, li, p { margin-bottom: 0; @@ -108,8 +126,10 @@ blockquote { } } -// Paragraphs -// -------------------------------------------------- +/* + Paragraphs + ========================================================================== */ + p { margin: 0 0 $indent-var; // sibling indentation @@ -121,8 +141,10 @@ p { } } -// Code -// -------------------------------------------------- +/* + Code snippets + ========================================================================== */ + tt, code, kbd, samp, pre { font-family: $code-font; } diff --git a/_sass/variables.scss b/_sass/variables.scss index 440ad8f0766a..a0d832c97295 100644 --- a/_sass/variables.scss +++ b/_sass/variables.scss @@ -1,4 +1,11 @@ -// TYPOGRAPHY ================================================ +/* ========================================================================== + Sass variables + ========================================================================== */ + +/* + Typography + ========================================================================== */ + $doc-font-size: 16; $doc-line-height: 26; $paragraph-indent: true !default; @@ -7,7 +14,10 @@ $heading-font: 'PT Sans Narrow', sans-serif; $code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; $alt-font: $base-font; -// COLOR ====================================================== +/* + Colors + ========================================================================== */ + $bodycolor : #fff; $body-color : $bodycolor; $textcolor : #333332; @@ -20,21 +30,24 @@ $white : #fff; $black : #111; $accentcolor : $black; -// Buttons +/* buttons */ $primary : $black; $success : #5cb85c; $warning : #dd8338; $danger : #C64537; $info : #308cbc; -// Links +/* links */ $linkcolor : #343434; $link-color : $linkcolor; $linkcolorhover : darken($linkcolor, 10); $linkcolorvisited : lighten($linkcolorhover, 20); $linkcolorfocus : darken($linkcolorvisited, 10); -// Media Queries +/* + Breakpoints + ========================================================================== */ + $micro : "only screen and (min-width: 30em)"; $small : "only screen and (min-width: 37.5em)"; $medium : "only screen and (min-width: 48em)"; From 3688b97b3cf4a4f17a0e24de7db89620c97e730e Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Wed, 21 Jan 2015 09:32:22 -0500 Subject: [PATCH 07/20] Clean up comments --- _sass/page.scss | 123 ++++++++++++++++++++---------------------------- 1 file changed, 50 insertions(+), 73 deletions(-) diff --git a/_sass/page.scss b/_sass/page.scss index 854bd115844d..4475bb56889e 100644 --- a/_sass/page.scss +++ b/_sass/page.scss @@ -1,8 +1,17 @@ +/* ========================================================================== + Page layout + ========================================================================== */ + body { background-color: $bodycolor; font-family: $base-font; color: $text-color; } + +/* + Header + ========================================================================== */ + .navigation-wrapper { @include container; padding: 2em 0 1em; @@ -11,6 +20,8 @@ body { text-transform: uppercase; @include clearfix; } + +/* Site name */ .site-name { @include grid(12,10); @include prefix(12,1); @@ -30,6 +41,8 @@ body { @include prefix(12,2); } } + +/* Top navigation links */ .top-navigation { @include grid(12,10); @include prefix(12,1); @@ -79,7 +92,8 @@ body { } } } -// Navicon lines + +/* Animated lines for mobile nav button */ $button-size: 1.5rem; @mixin navicon-line() { display: inline-block; @@ -201,6 +215,8 @@ $button-size: 1.5rem; -ms-transition: max-height .4s; transition: max-height .4s; } + +/* Main content */ #main { counter-reset: captions; @include container; @@ -227,6 +243,8 @@ $button-size: 1.5rem; } } } + +/* Index listing specific styling */ #index { @include container; @include grid(12,10); @@ -264,6 +282,8 @@ $button-size: 1.5rem; } } } + +/* Large feature header image */ .image-wrap { position: relative; margin-bottom: 2em; @@ -310,6 +330,8 @@ $button-size: 1.5rem; } } } + +/* Post byline */ .byline { clear: both; font-size: 80%; @@ -327,6 +349,8 @@ $button-size: 1.5rem; border-bottom: 0 solid transparent; } } + +/* Default social media links in author sidebar */ .author-social { display: block; margin-bottom: 5px; @@ -345,6 +369,8 @@ $button-size: 1.5rem; margin-right: 5px; } } + +/* Author sidebar */ .article-author-side { display: none; .bio-photo { @@ -386,6 +412,8 @@ $button-size: 1.5rem; @include prefix(12,2); } } + +/* Author module - mobile only */ .article-author-bottom { margin-bottom: 1em; @media #{$small} { @@ -410,6 +438,8 @@ $button-size: 1.5rem; } } } + +/* Post content wrapper */ .article-wrap { // Dotted line underlines for links p > a, @@ -417,6 +447,8 @@ $button-size: 1.5rem; text-decoration: underline; } } + +/* Table of contents */ .toc { display: none; font-size: 95%; @@ -474,6 +506,8 @@ $button-size: 1.5rem; } } } + +/* TOC trigger for collapsing */ #drawer { height: 100%; overflow: hidden; @@ -481,6 +515,8 @@ $button-size: 1.5rem; max-height: 0; } } + +/* Image grid - not used */ .image-grid { @include clearfix; list-style: none; @@ -502,6 +538,8 @@ $button-size: 1.5rem; } } } + +/* Recent grid - not used */ .recent-grid { @include clearfix; list-style: none; @@ -520,37 +558,8 @@ $button-size: 1.5rem; margin-bottom: 1%; } } -.holder { - font-family: $heading-font; - a { - cursor: pointer; - margin: 0 5px; - } - a.jp-previous { - margin-left: 0; - margin-right: 15px; - } - a.jp-next { - margin-left: 15px; - margin-right: 0; - } - a.jp-current { - font-weight: bold; - } - a.jp-disabled, - a.jp-disabled:hover { - } - a.jp-current, - a.jp-current:hover, - a.jp-disabled, - a.jp-disabled:hover { - cursor: default; - background: none; - } - span { - margin: 0 5px; - } -} + +/* Footer wrapper */ .footer-wrap { @include container; @include clearfix; @@ -582,6 +591,8 @@ $button-size: 1.5rem; } } } + +/* Related articles list */ .related-articles { @include grid(12,10); @include prefix(12,1); @@ -606,46 +617,11 @@ $button-size: 1.5rem; margin-bottom: 0; } } -.footer-icons { - li { - display: inline-block; - padding-right: 5px; - a { - color: lighten($basecolor, 40%); - @include transition(.4s linear); - &:hover { - text-decoration: none; - border-bottom: none; - .icon-twitter, - .icon-twitter-sign { - color: #2aa9df; - } - .icon-facebook, - .icon-facebook-sign { - color: #3a5a98; - } - .icon-instagram, - .icon-instagram-sign { - color: #306088; - } - .icon-google-plus, - .icon-google-plus-sign { - color: #b63324; - } - .icon-lastfm, - .icon-lastfm-sign { - color: #d80049; - } - .icon-github { - color: #4183c4; - } - } - } - } -} -// Browser Upgrade -// -------------------------------------------------- +/* + Browser upgrade alert + ========================================================================== */ + .browser-upgrade { background: #000; text-align: center; @@ -662,9 +638,10 @@ $button-size: 1.5rem; } } } +/* + Google search form + ========================================================================== */ -// Google Search -// -------------------------------------------------- #goog-fixurl { ul { list-style: none; From 9a1c5ff3e63e1422e940e25bf80ba9484a3757bd Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Wed, 21 Jan 2015 10:16:48 -0500 Subject: [PATCH 08/20] Improve table of contents - Replace html snippet with _includes/toc.html - Add FA icon to table of contents header - Display table of contents on small screens - Add hierarchy to toc with indents --- _includes/_toc.html | 9 +++++++++ _sass/page.scss | 8 +++++--- theme-setup/index.md | 27 ++++----------------------- 3 files changed, 18 insertions(+), 26 deletions(-) create mode 100644 _includes/_toc.html diff --git a/_includes/_toc.html b/_includes/_toc.html new file mode 100644 index 000000000000..cca407ddffd4 --- /dev/null +++ b/_includes/_toc.html @@ -0,0 +1,9 @@ +
+
+

Overview

+
+
+* Auto generated table of contents +{:toc} +
+
\ No newline at end of file diff --git a/_sass/page.scss b/_sass/page.scss index 4475bb56889e..cdcb36abfd8c 100644 --- a/_sass/page.scss +++ b/_sass/page.scss @@ -450,9 +450,8 @@ $button-size: 1.5rem; /* Table of contents */ .toc { - display: none; font-size: 95%; - @media #{$small} { + @media #{$large} { display: block; @include grid(12,2); @include prefix(12,0.5); @@ -503,13 +502,16 @@ $button-size: 1.5rem; } ul { margin: 1px 0 0; + li a { + padding-left: 20px; + } } } } /* TOC trigger for collapsing */ #drawer { - height: 100%; + max-height: 100%; overflow: hidden; &.js-hidden { max-height: 0; diff --git a/theme-setup/index.md b/theme-setup/index.md index 23eb731ca789..11e8f04b6d72 100644 --- a/theme-setup/index.md +++ b/theme-setup/index.md @@ -9,15 +9,7 @@ image: creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/ --- -
-
-

Overview

-
-
-* Auto generated table of contents -{:toc} -
-
+{% include _toc.html %} ## Installation @@ -268,23 +260,12 @@ To assign Billy Rick as an author for our post. We'd add the following YAML fron author: billy_rick {% endhighlight %} -### Table of Contents +### Kramdown Table of Contents -Any post or page that you want a *table of contents* to render insert the following HTML in your post before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into a contents list. - -**PS:** The TOC is hidden on small devices because I haven't gotten around to optimizing it. For now it only appears on larger screens (tablet and desktop). -{: .notice} +To include an auto-generated **table of contents** for posts and pages, add the following `_include` before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into list of links. {% highlight html %} -
-
-

Overview

-
-
-* Auto generated table of contents -{:toc} -
-
+{% raw %}{% include _toc.html %}{% endraw %} {% endhighlight %} ### Paragraph Indentation From 87b8d0b12944c72040a36609845cd71cdd5b9019 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Wed, 21 Jan 2015 11:21:50 -0500 Subject: [PATCH 09/20] Add optional social sharing buttons - Social share buttons appear at the end of every post and page unless you add share: false to their YAML Front Matter - Fixes #42 --- _includes/_social-share.html | 14 ++++++++++ _layouts/page.html | 4 +++ _layouts/post.html | 1 + _sass/page.scss | 53 +++++++++++++++++++++++++++++++++++- _sass/variables.scss | 14 ++++++++++ theme-setup/index.md | 4 +++ 6 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 _includes/_social-share.html diff --git a/_includes/_social-share.html b/_includes/_social-share.html new file mode 100644 index 000000000000..d192e5cde008 --- /dev/null +++ b/_includes/_social-share.html @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/_layouts/page.html b/_layouts/page.html index 0a41223f7143..919947aabec6 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -36,6 +36,10 @@

{{ page.title }}

{{ content }} + {% if page.share != false %} +
+ {% include _social-share.html %} + {% endif %}
{% if site.owner.disqus-shortname and page.comments == true %}
diff --git a/_layouts/post.html b/_layouts/post.html index 84427b39312f..c789a9badab7 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -44,6 +44,7 @@

+ {% if page.share != false %}{% include _social-share.html %}{% endif %}

{{ page.title }} was published on {% if page.modified %} and last modified on {% endif %}.

diff --git a/_sass/page.scss b/_sass/page.scss index cdcb36abfd8c..528cd714c6f4 100644 --- a/_sass/page.scss +++ b/_sass/page.scss @@ -561,6 +561,58 @@ $button-size: 1.5rem; } } +/* Social sharing links */ +/* Social media brand buttons */ +.social-share { + margin-bottom: 0px + $doc-line-height; + margin-bottom: 0rem + ($doc-line-height / $doc-font-size); + ul, li { + margin: 0; + padding: 0; + list-style: none; + } + li { + display: inline-block; + } + $social: + (facebook, $facebook-color), + (flickr, $flickr-color), + (foursquare, $foursquare-color), + (google-plus, $google-plus-color), + (instagram, $instagram-color), + (linkedin, $linkedin-color), + (pinterest, $pinterest-color), + (rss, $rss-color), + (tumblr, $tumblr-color), + (twitter, $twitter-color), + (vimeo, $vimeo-color), + (youtube, $youtube-color); + @each $socialnetwork, $color in $social { + .#{$socialnetwork} { + background: $color; + } + } + a { + padding: 8px 20px; + text-decoration: none !important; + text-transform: uppercase; + @include font-rem(14); + font-family: $heading-font; + font-weight: 700; + color: $white; + opacity: 0.8; + &:hover { + opacity: 1; + } + } + h4 { + @include font-rem(14); + margin-bottom: 10px; + text-transform: uppercase; + } +} + + /* Footer wrapper */ .footer-wrap { @include container; @@ -611,7 +663,6 @@ $button-size: 1.5rem; @include suffix(12,3.5); } h4 { - text-transform: uppercase; margin-bottom: 0; } diff --git a/_sass/variables.scss b/_sass/variables.scss index a0d832c97295..1e9c496dff9c 100644 --- a/_sass/variables.scss +++ b/_sass/variables.scss @@ -37,6 +37,20 @@ $warning : #dd8338; $danger : #C64537; $info : #308cbc; +/* brands */ +$facebook-color : #3b5998; +$flickr-color : #ff0084; +$foursquare-color : #0cbadf; +$google-plus-color : #dd4b39; +$instagram-color : #4e433c; +$linkedin-color : #4875b4; +$pinterest-color : #cb2027; +$rss-color : #fa9b39; +$tumblr-color : #2c4762; +$twitter-color : #55acee; +$vimeo-color : #1ab7ea; +$youtube-color : #ff3333; + /* links */ $linkcolor : #343434; $link-color : $linkcolor; diff --git a/theme-setup/index.md b/theme-setup/index.md index 11e8f04b6d72..dceb5b4550d7 100644 --- a/theme-setup/index.md +++ b/theme-setup/index.md @@ -298,6 +298,10 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene {% endhighlight %} +### Social Sharing Links + +Social sharing links for Twitter, Facebook, and Google+ are included on posts/pages by default. To hide them on specific posts or pages add `share: false` to the YAML Front Matter. If you'd like to use different social networks modify `_includes/_social-share.html` to your liking. Icons are set using [Font Awesome](http://fontawesome.io). + --- ## Further Customization From 7811c598b0a37dd303956fad4909caec6daa572b Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Thu, 22 Jan 2015 12:18:35 -0500 Subject: [PATCH 10/20] Fix social share buttons overlapping on small screens --- _includes/_social-share.html | 6 +++--- _sass/page.scss | 8 ++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/_includes/_social-share.html b/_includes/_social-share.html index d192e5cde008..3c68277cd6fb 100644 --- a/_includes/_social-share.html +++ b/_includes/_social-share.html @@ -2,13 +2,13 @@

Share on

 \ No newline at end of file diff --git a/_sass/page.scss b/_sass/page.scss index 528cd714c6f4..3271142698f7 100644 --- a/_sass/page.scss +++ b/_sass/page.scss @@ -593,6 +593,7 @@ $button-size: 1.5rem; } } a { + display: block; padding: 8px 20px; text-decoration: none !important; text-transform: uppercase; @@ -605,6 +606,13 @@ $button-size: 1.5rem; opacity: 1; } } + span { + display: none; + @media #{$medium} { + display: inline; + padding-left: 5px; + } + } h4 { @include font-rem(14); margin-bottom: 10px; From 3b2e58c7d83f9f11728adb1259660ac3fa2e180a Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Fri, 30 Jan 2015 09:37:42 -0500 Subject: [PATCH 11/20] Move feed footer to an include --- _includes/_feed-footer.html | 1 + feed.xml | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 _includes/_feed-footer.html diff --git a/_includes/_feed-footer.html b/_includes/_feed-footer.html new file mode 100644 index 000000000000..02a94f6a8869 --- /dev/null +++ b/_includes/_feed-footer.html @@ -0,0 +1 @@ +<p><a href="{{ site.url }}{{ post.url }}">{{ post.title | xml_escape }}</a> was originally published by {{ site.owner.name }} at <a href="{{ site.url }}">{{ site.title }}</a> on {{ post.date | date: "%B %d, %Y" }}.</p> \ No newline at end of file diff --git a/feed.xml b/feed.xml index 92c5c01334ae..8a89e8c32f7c 100644 --- a/feed.xml +++ b/feed.xml @@ -34,8 +34,10 @@ sitemap: false {{ site.url }} {% if author.email %}{{ author.email }}{% endif %} - {{ post.content | xml_escape }} - <p><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a> was originally published by {{ author.name }} at <a href="{{ site.url }}">{{ site.title }}</a> on {{ post.date | date: "%B %d, %Y" }}.</p> + + {{ post.content | xml_escape }} + {% include _feed-footer.html %} + {% endfor %} From 96984395430c60a51d59cb3dffdde92a353ac601 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 24 Feb 2015 14:54:55 -0500 Subject: [PATCH 12/20] Display custom 404 page - Fixes #128 --- 404.md | 1 + 1 file changed, 1 insertion(+) diff --git a/404.md b/404.md index b55044b8d74a..bfb34521f3ef 100644 --- a/404.md +++ b/404.md @@ -7,6 +7,7 @@ image: credit: Texture Lovers creditlink: http://texturelovers.com sitemap: false +permalink: /404.html --- Sorry, but the page you were trying to view does not exist --- perhaps you can try searching for it below. From 8c78e2f7834ee3bb5486f5783d7b28244a3fa4fd Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 24 Feb 2015 14:56:10 -0500 Subject: [PATCH 13/20] Remove feature image --- 404.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/404.md b/404.md index bfb34521f3ef..9397a69c6033 100644 --- a/404.md +++ b/404.md @@ -2,10 +2,6 @@ layout: page title: "Page Not Found" excerpt: "Page not found. Your pixels are in another canvas." -image: - feature: texture-feature-01.jpg - credit: Texture Lovers - creditlink: http://texturelovers.com sitemap: false permalink: /404.html --- From 45c6d84133bebf7d37a0c412b5bedf189ef37a85 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 24 Feb 2015 14:57:16 -0500 Subject: [PATCH 14/20] Remove http protocol from Google search form --- 404.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/404.md b/404.md index 9397a69c6033..59218627165c 100644 --- a/404.md +++ b/404.md @@ -13,5 +13,5 @@ Sorry, but the page you were trying to view does not exist --- perhaps you can t var GOOG_FIXURL_SITE = '{{ site.url }}' \ No newline at end of file From f9d59eac806124d94d7ef36703b88460e8b93e18 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 3 Mar 2015 09:50:22 -0500 Subject: [PATCH 15/20] Update gems --- Gemfile | 2 +- Gemfile.lock | 52 ++++++++++++++++++++++++---------------------------- 2 files changed, 25 insertions(+), 29 deletions(-) diff --git a/Gemfile b/Gemfile index 804ef1cf94e6..f69582781c37 100644 --- a/Gemfile +++ b/Gemfile @@ -1,5 +1,5 @@ source 'https://rubygems.org' gem 'jekyll' -gem "jekyll-sitemap" +gem 'jekyll-sitemap' gem 'octopress', '~> 3.0.0.rc.12' \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index 65cbe81533f6..e9fe77456cfa 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -4,20 +4,21 @@ GEM blankslate (2.1.2.4) celluloid (0.16.0) timers (~> 4.0.0) - classifier-reborn (2.0.2) + classifier-reborn (2.0.3) fast-stemmer (~> 1.0) coffee-script (2.3.0) coffee-script-source execjs - coffee-script-source (1.8.0) + coffee-script-source (1.9.1) colorator (0.1) - execjs (2.2.2) + execjs (2.3.0) fast-stemmer (1.0.2) ffi (1.9.6) ffi (1.9.6-x64-mingw32) ffi (1.9.6-x86-mingw32) hitimes (1.2.2) - jekyll (2.5.1) + hitimes (1.2.2-x86-mingw32) + jekyll (2.5.3) classifier-reborn (~> 2.0) colorator (~> 0.1) jekyll-coffeescript (~> 1.0) @@ -36,54 +37,49 @@ GEM coffee-script (~> 2.2) jekyll-gist (1.1.0) jekyll-paginate (1.1.0) - jekyll-sass-converter (1.2.1) + jekyll-sass-converter (1.3.0) sass (~> 3.2) - jekyll-sitemap (0.6.2) - jekyll-watch (1.1.2) + jekyll-sitemap (0.8.0) + jekyll-watch (1.2.1) listen (~> 2.7) - kramdown (1.5.0) - liquid (2.6.1) - listen (2.7.11) + kramdown (1.6.0) + liquid (2.6.2) + listen (2.8.5) celluloid (>= 0.15.2) rb-fsevent (>= 0.9.3) rb-inotify (>= 0.9) - mercenary (0.3.4) - octopress (3.0.0.rc.15) + mercenary (0.3.5) + octopress (3.0.0.rc.34) jekyll (~> 2.0) mercenary (~> 0.3.2) octopress-deploy - octopress-docs + octopress-escape-code (~> 2.0) + octopress-hooks (~> 2.0) titlecase - octopress-deploy (1.0.0) + octopress-deploy (1.1.0) colorator - octopress-docs - octopress-docs (0.0.9) - jekyll (~> 2.0) - octopress-escape-code (~> 1.0) - octopress-hooks (~> 2.0) - octopress-escape-code (1.0.2) + octopress-escape-code (2.0.6) octopress-hooks (~> 2.0) - octopress-hooks (2.2.1) + octopress-hooks (2.6.0) jekyll (~> 2.0) parslet (1.5.0) blankslate (~> 2.0) - posix-spawn (0.3.9) - pygments.rb (0.6.0) + posix-spawn (0.3.10) + pygments.rb (0.6.2) posix-spawn (~> 0.3.6) - yajl-ruby (~> 1.1.0) + yajl-ruby (~> 1.2.0) rb-fsevent (0.9.4) rb-inotify (0.9.5) ffi (>= 0.5.0) - redcarpet (3.2.0) + redcarpet (3.2.2) safe_yaml (1.0.4) - sass (3.4.7) + sass (3.4.13) timers (4.0.1) hitimes titlecase (0.1.1) toml (0.1.2) parslet (~> 1.5.0) - yajl-ruby (1.1.0) - yajl-ruby (1.1.0-x86-mingw32) + yajl-ruby (1.2.1) PLATFORMS ruby From 4bd0345edaf1913da321f7c6bac41cde8b0a8a85 Mon Sep 17 00:00:00 2001 From: Thomas Freudenberg Date: Thu, 5 Mar 2015 23:42:51 +0100 Subject: [PATCH 16/20] added link to XING profile --- _config.yml | 1 + _includes/_author-bio.html | 1 + 2 files changed, 2 insertions(+) diff --git a/_config.yml b/_config.yml index 7b6fbd502259..2fa10c3a8b7d 100644 --- a/_config.yml +++ b/_config.yml @@ -43,6 +43,7 @@ owner: github: #username stackoverflow: #http://stackoverflow.com/users/123456/username linkedin: #username + xing: #username instagram: #username lastfm: #username tumblr: #username diff --git a/_includes/_author-bio.html b/_includes/_author-bio.html index 9ee74d2b614b..f2fb2601c969 100644 --- a/_includes/_author-bio.html +++ b/_includes/_author-bio.html @@ -17,6 +17,7 @@

{{ author.name }}

{% if author.facebook %} Facebook{% endif %} {% if author.google.plus %} Google+{% endif %} {% if author.linkedin %} LinkedIn{% endif %} + {% if author.xing %} XING{% endif %} {% if author.instagram %} Instagram{% endif %} {% if author.tumblr %} Tumblr{% endif %} {% if author.github %} Github{% endif %} From 89271dd67da3272a4e4c936328518db22f59d26f Mon Sep 17 00:00:00 2001 From: Thomas Freudenberg Date: Thu, 5 Mar 2015 23:43:59 +0100 Subject: [PATCH 17/20] mis-aligment of email address (all other items have an leading whitespace) --- _includes/_author-bio.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/_author-bio.html b/_includes/_author-bio.html index f2fb2601c969..288b967ff193 100644 --- a/_includes/_author-bio.html +++ b/_includes/_author-bio.html @@ -12,7 +12,7 @@

{{ author.name }}

{{ author.bio }}

- {% if author.email %}Email{% endif %} + {% if author.email %} Email{% endif %} {% if author.twitter %} Twitter{% endif %} {% if author.facebook %} Facebook{% endif %} {% if author.google.plus %} Google+{% endif %} From cd47e64b12ad52999156ee398db17720c08ad364 Mon Sep 17 00:00:00 2001 From: Thomas Freudenberg Date: Sun, 8 Mar 2015 19:57:59 +0100 Subject: [PATCH 18/20] Update _author-bio.html I'm sorry about the double slash :disappointed: --- _includes/_author-bio.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_includes/_author-bio.html b/_includes/_author-bio.html index 288b967ff193..81eaaffe50b1 100644 --- a/_includes/_author-bio.html +++ b/_includes/_author-bio.html @@ -17,7 +17,7 @@

{{ author.name }}

{% if author.facebook %} Facebook{% endif %} {% if author.google.plus %} Google+{% endif %} {% if author.linkedin %} LinkedIn{% endif %} - {% if author.xing %} XING{% endif %} + {% if author.xing %} XING{% endif %} {% if author.instagram %} Instagram{% endif %} {% if author.tumblr %} Tumblr{% endif %} {% if author.github %} Github{% endif %} @@ -31,4 +31,4 @@

{{ author.name }}

{% if author.soundcloud %} Soundcloud{% endif %} {% if author.weibo %} Weibo{% endif %} {% if author.flickr %} Flickr{% endif %} - \ No newline at end of file + From 3d685a192ffd0f154074369154505ce7d4367866 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Wed, 8 Apr 2015 14:49:47 -0400 Subject: [PATCH 19/20] Show related posts only when there are 1 or more --- _layouts/post.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_layouts/post.html b/_layouts/post.html index c789a9badab7..4900b6efca69 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -55,6 +55,7 @@

+ {% if site.related_posts.size > 0 %}

You might also enjoy (View all posts)