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
erikzaadi/solarized-octopress-theme#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

@@ -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

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,15 +36,14 @@ $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;
 $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 {

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;
 }
+

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;

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;
-    }
-}

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'); }
 }
+

sass/partials/_sidebar.scss

@@ -1,5 +1,4 @@
 @import "sidebar/base";
-@import "sidebar/twitter";
 @import "sidebar/googleplus";
 @import "sidebar/pinboard";
 @import "sidebar/delicious";