From 8374bf9672fe78049818d5cda8e97b210b9912ae Mon Sep 17 00:00:00 2001 From: owner Date: Sat, 22 Mar 2014 15:53:44 +0800 Subject: [PATCH] Installed the original theme and Disqus 1. Due to my poor knowledge in CSS, it took me long to discover `sass/custom/_styles.scss' caused the title of each post to be yellow. I actually installed the "classic" theme again and copied Zaadi's SCSS files for his Solarized theme for Octopress on GitHub from https://raw.githubusercontent.com/erikzaadi/solarized-octopress-theme/master/sass/custom/_colors.scss 2. Disqus has been embedded, after "resolving" some problems in the appearance of the resulting site. Simply following the description on https://github.com/erikzaadi/solarized-octopress-theme/issues/1 doesn't work for me. Finally, I tested `sass/custom/_colors.scss' bit by bit and found out a way: add a zero to `$text-color: $base0;'. --- _config.yml | 4 +- sass/base/_theme.scss | 7 +- sass/base/_typography.scss | 27 ++--- sass/custom/_colors.scss | 114 +++++++++++----------- sass/custom/_styles.scss | 9 -- sass/partials/_navigation.scss | 3 +- sass/partials/_sidebar.scss | 1 - sass/partials/_syntax.scss | 64 ++++++------ sass/screen.scss | 2 +- source/_includes/archive_post.html | 2 +- source/_includes/article.html | 3 +- source/_includes/asides/github.html | 2 +- source/_includes/asides/recent_posts.html | 2 +- source/_includes/custom/asides/about.html | 2 +- source/_includes/custom/category_feed.xml | 4 +- source/_includes/custom/head.html | 2 +- source/_includes/custom/navigation.html | 1 + source/_includes/disqus.html | 2 +- source/_includes/facebook_like.html | 2 +- source/_includes/head.html | 9 +- source/_includes/post/sharing.html | 2 +- source/_includes/twitter_sharing.html | 2 +- source/about/index.markdown | 9 +- source/atom.xml | 4 +- source/javascripts/github.js | 12 +-- source/javascripts/modernizr-2.0.js | 8 +- source/javascripts/octopress.js | 44 ++++----- source/javascripts/pinboard.js | 4 +- source/javascripts/twitter.js | 8 +- 29 files changed, 179 insertions(+), 176 deletions(-) diff --git a/_config.yml b/_config.yml index 5795e115e..93e484113 100644 --- a/_config.yml +++ b/_config.yml @@ -90,8 +90,8 @@ delicious_user: delicious_count: 3 # Disqus Comments -disqus_short_name: -disqus_show_comment_count: false +disqus_short_name: blogueun +disqus_show_comment_count: true # Google Analytics google_analytics_tracking_id: UA-46788371-2 diff --git a/sass/base/_theme.scss b/sass/base/_theme.scss index fc9dc37c8..c35136d5a 100644 --- a/sass/base/_theme.scss +++ b/sass/base/_theme.scss @@ -1,5 +1,5 @@ $noise-bg: image-url('noise.png') top left !default; -$img-border: inline-image('dotted-border.png'); +$img-border: inline-image('dotted-border.png') !default; // Main Link Colors $link-color: lighten(#165b94, 3) !default; @@ -36,7 +36,7 @@ $nav-border-right: lighten($nav-bg, 7) !default; /* Sidebar colors */ $sidebar-bg: #f2f2f2 !default; -$sidebar-link-color: $link-color !default; +$sidebar-link-color: $text-color !default; $sidebar-link-color-hover: $link-color-hover !default; $sidebar-link-color-active: $link-color-active !default; $sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; @@ -44,7 +44,6 @@ $sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; $sidebar-border-hover: darken($sidebar-bg, 7) !default; $sidebar-link-color-subdued: lighten($sidebar-color, 20) !default; $sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default; -$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default; $footer-color: #888 !default; $footer-bg: #ccc !default; @@ -75,7 +74,7 @@ html { background: $page-bg image-url('line-tile.png') top left; } body { - > div#main { + > div { background: $sidebar-bg $noise-bg; border-bottom: 1px solid $page-border-bottom; > div { diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss index 05d480a54..9a6bbacd2 100644 --- a/sass/base/_typography.scss +++ b/sass/base/_typography.scss @@ -1,10 +1,10 @@ $blockquote: $type-border !default; -$sans: "Dosis", "Helvetica Neue", Arial, sans-serif !default; -$serif: "Exo", Georgia, Times, "Times New Roman", serif !default; -$mono: "Inconsolata", Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; -$heading-font-family: $serif !default; -$header-title-font-family: $sans !default; -$header-subtitle-font-family: $mono !default; +$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default; +$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default; +$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; +$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default; +$header-title-font-family: $heading-font-family !default; +$header-subtitle-font-family: $heading-font-family !default; // Fonts .heading { @@ -18,7 +18,7 @@ body > header h1 { font-size: 2.2em; @extend .heading; font-family: $header-title-font-family; - font-weight: bold; + font-weight: normal; line-height: 1.2em; margin-bottom: 0.6667em; } @@ -62,7 +62,8 @@ h5, section h4, section section h3 { h6, section h5, section section h4, section section section h3 { font-size: .8em; } -p, blockquote, ul, ol { margin-bottom: 1.5em; } + +p, article blockquote, ul, ol { margin-bottom: 1.5em; } ul { list-style-type: disc; ul { list-style-type: circle; margin-bottom: 0px; @@ -73,15 +74,18 @@ ol { list-style-type: decimal; ol { list-style-type: lower-roman; margin-bottom: 0px; }}} ul, ol { &, ul, ol { margin-left: 1.3em; }} +ul, ol { ul, ol { margin-bottom: 0em; }} strong { font-weight: bold; } em { font-style: italic; } -sup, sub { font-size: 0.8em; position: relative; display: inline-block; } +sup, sub { font-size: 0.75em; position: relative; display: inline-block; padding: 0 .2em; line-height: .8em;} sup { top: -.5em; } sub { bottom: -.5em; } +a[rev='footnote']{ font-size: .75em; padding: 0 .3em; line-height: 1; } + q { font-style: italic; &:before { content: "\201C"; } &:after { content: "\201D"; } @@ -97,15 +101,13 @@ abbr, acronym { border-bottom: 1px dotted; cursor: help; } pre, code, tt { @extend .mono; } -sub, sup { line-height: 0; } - hr { margin-bottom: 0.2em; } small { font-size: .8em; } big { font-size: 1.2em; } -blockquote { +article blockquote { $bq-margin: 1.2em; font-style: italic; position: relative; @@ -159,3 +161,4 @@ blockquote { white-space: pre-wrap; word-wrap: break-word; } + diff --git a/sass/custom/_colors.scss b/sass/custom/_colors.scss index a5c48542a..10a9040a5 100644 --- a/sass/custom/_colors.scss +++ b/sass/custom/_colors.scss @@ -1,77 +1,79 @@ -//solarized base colors -$sol_base03: #002b36; -$sol_base02: #073642; -$sol_base01: #586e75; -$sol_base00: #657b83; -$sol_base0: #839496; -$sol_base1: #93a1a1; -$sol_base2: #eee8d5; -$sol_base3: #fdf6e3; +// Here you can easily change your sites's color scheme. +// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. +// If you need a handy color picker try http://hslpicker.com -$sol : light; // light or dark - Recommended: set $solarized to the opposite of this -$solarized : light; // code syntax highlighting theme +//$header-bg: #263347; +//$subtitle-color: lighten($header-bg, 58); +//$nav-bg: desaturate(lighten(#8fc17a, 18), 5); +//$nav-bg-front: image-url('noise.png'); +//$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)); +//$sidebar-bg: desaturate(#eceff5, 8); +//$sidebar-link-color: saturate(#526f9a, 10); +//$sidebar-link-color-hover: darken(#7ab662, 9); +//$footer-bg: #ccc !default; +//$footer-bg-front: image-url('noise.png'); +//$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)); -@if $sol == dark { - $_sol_base03: $sol_base03; - $_sol_base02: $sol_base02; - $_sol_base01: $sol_base01; - $_sol_base00: $sol_base00; - $_sol_base0: $sol_base0; - $_sol_base1: $sol_base1; - $_sol_base2: $sol_base2; - $_sol_base3: $sol_base3; +/* To use the light Solarized highlighting theme uncomment the following line */ +$solarized: light; - $sol_base03: $_sol_base3; - $sol_base02: $_sol_base2; - $sol_base01: $_sol_base1; - $sol_base00: $_sol_base0; - $sol_base0: $_sol_base00; - $sol_base1: $_sol_base01; - $sol_base2: $_sol_base02; - $sol_base3: $_sol_base03; -} +/* If you want to tweak the Solarized colors you can do that here */ +$base03: #002b36; //darkest blue +$base02: #073642; //dark blue +$base01: #586e75; //darkest gray +$base00: #657b83; //dark gray +$base0: #839496; //medium gray +$base1: #93a1a1; //medium light gray +$base2: #eee8d5; //cream +$base3: #fdf6e3; //white +$solar-yellow: #b58900; +$solar-orange: #cb4b16; +$solar-red: #dc322f; +$solar-magenta: #d33682; +$solar-violet: #6c71c4; +$solar-blue: #268bd2; +$solar-cyan: #2aa198; +$solar-green: #859900; + + +/* Non highlighted code colors */ +$pre-bg: $base03; +//$pre-border: darken($base02, 5); +$pre-color: $base1; -$sol_yellow: #b58900; -$sol_orange: #cb4b16; -$sol_red: #dc322f; -$sol_magenta: #d33682; -$sol_violet: #6c71c4; -$sol_blue: #268bd2; -$sol_cyan: #2aa198; -$sol_green: #859900; $noise-bg: none; $img-border: none; // Main Link Colors -$link-color: $sol_magenta; -$link-color-hover: $sol_base01; +$link-color: $solar-magenta; +$link-color-hover: $base01; $link-color-visited: $link-color; $link-color-active: $link-color-hover; // Main Section Colors -$main-bg: $sol_base3; -$page-bg: $sol_base3; +$main-bg: $base3; +$page-bg: $base3; $article-border: none; -$header-bg: $sol_base3; -$title-color: $sol_magenta; -$subtitle-color: $sol_base0; -$text-color: $sol_base0; -$text-color-light: $sol_base00; -///* Navigation */ -$nav-bg: $sol_base2; -$nav-bg-back: $sol_base2; -$nav-color: $sol_base01; -$nav-color-hover: $sol_base0; +$header-bg: $base3; +$title-color: $solar-magenta; +$subtitle-color: $base0; +$text-color: $base00; +$text-color-light: $base00; +/* Navigation */ +$nav-bg: $base2; +$nav-bg-back: $base2; +$nav-color: $base01; +$nav-color-hover: $base0; /* Sidebar colors */ -$sidebar-bg: darken($sol_base3, 1); -$sidebar-color: $sol_magenta; +$sidebar-bg: darken($base3, 1); +$sidebar-color: $solar-magenta; // Footer -$footer-bg: $sol_base2; -$footer-bg-front:$sol_base01; +$footer-bg: $base2; +$footer-bg-front:$base01; $footer-bg-back: none; -$footer-color: $sol_base01; +$footer-color: $base01; $footer-border-top: none; $footer-link-color: $link-color; $footer-link-color-hover: $link-color-hover; diff --git a/sass/custom/_styles.scss b/sass/custom/_styles.scss index c7a26534a..91ffcccf6 100644 --- a/sass/custom/_styles.scss +++ b/sass/custom/_styles.scss @@ -1,11 +1,2 @@ // This File is imported last, and will override other styles in the cascade // Add styles here to make changes without digging in too much -html { - background: $page-bg; -} -article { - h1, h2, h3, h4, h5, h6 - { - color : $sol_yellow; - } -} diff --git a/sass/partials/_navigation.scss b/sass/partials/_navigation.scss index 7fc912940..30fa011d1 100644 --- a/sass/partials/_navigation.scss +++ b/sass/partials/_navigation.scss @@ -115,7 +115,7 @@ body > nav { position: absolute; top: -1px; left: 0; background-color: lighten($nav-color, 25); } - &:hover:after { background-color: $base3; } + &:hover:after { background-color: lighten($nav-color, 20); } } .maskImage { body > nav { @@ -134,3 +134,4 @@ body > nav { a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); } a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); } } + diff --git a/sass/partials/_sidebar.scss b/sass/partials/_sidebar.scss index eec540ba7..cd8c1ca26 100644 --- a/sass/partials/_sidebar.scss +++ b/sass/partials/_sidebar.scss @@ -1,5 +1,4 @@ @import "sidebar/base"; -@import "sidebar/twitter"; @import "sidebar/googleplus"; @import "sidebar/pinboard"; @import "sidebar/delicious"; diff --git a/sass/partials/_syntax.scss b/sass/partials/_syntax.scss index 77ac8d785..5465286fd 100644 --- a/sass/partials/_syntax.scss +++ b/sass/partials/_syntax.scss @@ -1,44 +1,52 @@ .highlight, html .gist .gist-file .gist-syntax .gist-highlight { table td.code { width: 100%; } - .line-numbers { - text-align: right; - font-size: 13px; - line-height: 1.45em; - @if $solarized == light { - background: lighten($base03, 1) $noise-bg !important; - border-right: 1px solid darken($base02, 2) !important; - @include box-shadow(lighten($base03, 2) -1px 0 inset); - text-shadow: lighten($base02, 2) 0 -1px; - } @else { - background: $base02 $noise-bg !important; - border-right: 1px solid darken($base03, 2) !important; - @include box-shadow(lighten($base02, 2) -1px 0 inset); - text-shadow: darken($base02, 10) 0 -1px; - } - span { color: $base01 !important; } - padding: .8em !important; - @include border-radius(0); - } border: 1px solid $pre-border !important; } +.highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers { + text-align: right; + font-size: 13px; + line-height: 1.45em; + @if $solarized == light { + background: lighten($base03, 1) $noise-bg !important; + border-right: 1px solid darken($base02, 2) !important; + @include box-shadow(lighten($base03, 2) -1px 0 inset); + text-shadow: lighten($base02, 2) 0 -1px; + } @else { + background: $base02 $noise-bg !important; + border-right: 1px solid darken($base03, 2) !important; + @include box-shadow(lighten($base02, 2) -1px 0 inset); + text-shadow: darken($base02, 10) 0 -1px; + } + span { color: $base01 !important; } + padding: .8em !important; + @include border-radius(0); +} + figure.code, .gist-file, pre { @include box-shadow(rgba(#000, .06) 0 0 10px); .highlight pre { @include box-shadow(none); } } +.gist .highlight, figure.code .highlight { + @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); +} html .gist .gist-file { margin-bottom: 1.8em; position: relative; border: none; padding-top: image-height("code_bg.png") !important; + .highlight { + margin-bottom: 0; + } .gist-syntax { border-bottom: 0 !important; background: none !important; - .gist-highlight{ + .gist-highlight { background: $base03 !important; - pre { - @extend .pre-code; - } + } + .highlight pre { + @extend .pre-code; + padding: 0; } } .gist-meta { @@ -107,12 +115,11 @@ p, li { } .pre-code { - @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); font-family: $mono !important; overflow: scroll; overflow-y: hidden; display: block; - padding: .8em !important; + padding: .8em; overflow-x: auto; line-height: 1.45em; background: $base03 $noise-bg !important; @@ -187,7 +194,7 @@ p, li { } .highlight, .gist-highlight { - pre { background: none; @include border-radius(none); border: none; padding: 0; margin-bottom: 0; } + pre { background: none; @include border-radius(0px); border: none; padding: 0; margin-bottom: 0; } margin-bottom: 1.8em; background: $base03; overflow-y: hidden; @@ -206,7 +213,9 @@ pre, .highlight, .gist-highlight { &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb; -webkit-border-radius: 4px; border-radius: 4px } } -.highlight code { @extend .pre-code; background: #000;} +.highlight code { + @extend .pre-code; background: #000; +} figure.code { background: none; padding: 0; @@ -250,4 +259,3 @@ figure.code { text-shadow: #cbcccc 0 1px 0; padding-left: 3em; } - diff --git a/sass/screen.scss b/sass/screen.scss index 1899f6084..75eac0a24 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -1,10 +1,10 @@ @import "compass"; @include global-reset; -@include reset-html5; @import "custom/colors"; @import "custom/fonts"; @import "custom/layout"; @import "base"; @import "partials"; +@import "plugins/**/*"; @import "custom/styles"; diff --git a/source/_includes/archive_post.html b/source/_includes/archive_post.html index fef3328e2..210dbbbe7 100644 --- a/source/_includes/archive_post.html +++ b/source/_includes/archive_post.html @@ -1,5 +1,5 @@ {% capture category %}{{ post.categories | size }}{% endcapture %} -

{{post.title}}

+

{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}

{% if category != '0' %}