Fix some css issues

4 files changed, 348 insertions, 1035 deletions

diff --git a/source/css/out.css b/source/css/out.css
deleted file mode 100644
index 79ad345a..00000000
--- a/source/css/out.css
+++ /dev/null
@@ -1,523 +0,0 @@
-@charset "UTF-8";
-/*** Webfonts ***/
-/* icon font from fontello */
-@font-face {
-  font-family: 'fontello';
-  src: url("../fonts/fontello.eot");
-  src: url("../fonts/fontello.eot?#iefix") format("embedded-opentype"), url("../fonts/fontello.woff") format("woff"), url("../fonts/fontello.ttf") format("truetype"), url("../fonts/fontello.svg#fontello") format("svg");
-  font-weight: normal;
-  font-style: normal; }
-@font-face {
-  font-family: 'awesome';
-  src: url("/fonts/font-awesome/fonts/fontawesome-webfont.eot");
-  src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome-webfont.svg#fontawesome-webfont") format("svg");
-  font-weight: normal;
-  font-style: normal; }
-/*** Main theme ***/
-body {
-  background-color: #000;
-  color: #fff;
-  font-family: "monospace", "helvetica", serif;
-  font-size: 12px;
-  -webkit-font-smoothing: antialiased;
-  margin: 0 0 100px 0; }
-
-.bodya {
-  border: 1px solid #fff;
-  margin-left: 20vw;
-  margin-right: 20vw; }
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.25dppx) {
-  -webkit-font-smoothing: subpixel-antialiased; }
-#archival-notice {
-  position: absolute;
-  top: 30px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  text-align: center;
-  color: red; }
-
-li {
-  list-style: none; }
-
-ul li:before {
-  content: "\25b6 \00a0"; }
-
-/* Menu design */
-.nav {
-  position: fixed;
-  left: 2.5%;
-  height: 150px;
-  width: 200px;
-  text-align: center; }
-  .nav li {
-    list-style: none; }
-    .nav li a {
-      text-decoration: none; }
-
-.lia {
-  text-decoration: none; }
-  .lia li:before {
-    list-style: none;
-    content: "" !important; }
-  .lia:hover li {
-    background-color: #fff;
-    color: #000; }
-
-.left-lia {
-  float: left; }
-  .left-lia:after {
-    content: "█▓▒░"; }
-
-.right-lia {
-  float: right; }
-  .right-lia:after {
-    content: "░▒▓█"; }
-
-.lia-border {
-  border: 1px solid #fff; }
-  .lia-border ul {
-    padding: 0px;
-    margin: 0; }
-  .lia-border hr {
-    background-color: #fff;
-    margin: 0;
-    padding: 0; }
-
-/* subMenu design */
-.subnav {
-  position: fixed;
-  right: 2.5%;
-  height: 150px;
-  width: 200px;
-  text-align: center; }
-  .subnav li {
-    list-style: none; }
-    .subnav li a {
-      text-decoration: none; }
-
-.sublia {
-  text-decoration: none; }
-  .sublia li:before {
-    list-style: none;
-    content: "" !important; }
-  .sublia:hover li {
-    background-color: white;
-    color: black; }
-
-.subleft-lia {
-  float: left; }
-  .subleft-lia:after {
-    content: "█▓▒░"; }
-
-.subright-lia {
-  float: right; }
-  .subright-lia:after {
-    content: "░▒▓█"; }
-
-.sublia-border {
-  border: 1px solid #fff; }
-  .sublia-border ul {
-    padding: 0px;
-    margin: 0; }
-  .sublia-border hr {
-    background-color: #fff;
-    margin: 0;
-    padding: 0; }
-  .sublia-border pre code ul, .sublia-border pre code, .sublia-border pre {
-    width: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    font-family: monospace,monospace !important;
-    font-size: 12px !important;
-    white-space: normal; }
-
-/* situations design */
-.situation1nav, .situation2nav {
-  position: fixed;
-  right: 2.5%;
-  margin-top: 100px;
-  height: 150px;
-  width: 200px;
-  text-align: center; }
-  .situation1nav li, .situation2nav li {
-    list-style: none; }
-    .situation1nav li a, .situation2nav li a {
-      text-decoration: none; }
-
-.situation1lia, .situation2lia {
-  text-decoration: none; }
-  .situation1lia li:hover, .situation2lia li:hover {
-    background-color: white;
-    color: black; }
-  .situation1lia li:before, .situation2lia li:before {
-    list-style: none;
-    content: "" !important; }
-
-.situation1left-lia, .situation2left-lia {
-  float: left; }
-  .situation1left-lia:after, .situation2left-lia:after {
-    content: "█▓▒░"; }
-
-.situation1right-lia, .situation2right-lia {
-  float: right; }
-  .situation1right-lia:after, .situation2right-lia:after {
-    content: "░▒▓█"; }
-
-.situation1lia-border, .situation2lia-border {
-  border: 1px solid white; }
-  .situation1lia-border ul, .situation2lia-border ul {
-    padding: 0px;
-    margin: 0; }
-  .situation1lia-border hr, .situation2lia-border hr {
-    background-color: white;
-    margin: 0;
-    padding: 0; }
-  .situation1lia-border pre code ul, .situation1lia-border pre code, .situation1lia-border pre, .situation1lia-border pre code ul, .situation1lia-border pre code, .situation1lia-border pre, .situation2lia-border pre code ul, .situation2lia-border pre code, .situation2lia-border pre, .situation2lia-border pre code ul, .situation2lia-border pre code, .situation2lia-border pre {
-    width: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    font-family: monospace,monospace !important;
-    font-size: 12px !important;
-    white-space: normal; }
-
-/* end menus design */
-.content-separator, .footer {
-  width: 60%;
-  margin: 0 auto; }
-
-.content {
-  text-align: justify; }
-  .content pre, .content ul, .content p {
-    width: 60%;
-    margin: 0 auto; }
-
-.content .sourceCode {
-  margin: 0 auto; }
-
-.header {
-  width: 100%; }
-
-hr {
-  border: 0;
-  height: 1px;
-  background: #888; }
-
-.content-separator {
-  margin: 15px auto 3px auto; }
-
-h1 {
-  text-align: center;
-  font-size: 160%;
-  font-weight: bold;
-  width: 100%; }
-
-.h1 {
-  text-align: center; }
-
-h2 {
-  text-align: center;
-  font-size: 125%;
-  font-weight: bold; }
-
-h3, h4 {
-  text-align: center;
-  font-weight: bold; }
-
-h3:before {
-  content: "· "; }
-h3:after {
-  content: " ·"; }
-
-.article-metadata {
-  text-align: center;
-  font-size: 100%;
-  font-weight: normal;
-  margin: 1em 0; }
-
-a {
-  color: #fff;
-  word-wrap: break-word; }
-
-a .active {
-  color: #fff; }
-
-/*p, h2, ul {
-  padding-left: 10vw;
-  padding-right: 10vw;
-}*/
-code {
-  font-size: 90%;
-  color: #000;
-  font-family: Courier, monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  background-color: #fff;
-  border-radius: 2px;
-  padding-left: 1px;
-  padding-right: 1px; }
-
-h1 code, h2 code {
-  font-size: 95%;
-  color: #000; }
-
-pre {
-  padding: 1em;
-  background: #000; }
-
-/* Pandoc wraps pre[class*=sourceCode] in a div tag, so it is necessary to
-eliminate the margins of such pre tags to avoid too much spacing.*/
-pre[class*=sourceCode] {
-  margin: 0;
-  border: 1px solid;
-  overflow: auto; }
-
-pre code {
-  font-size: 85%;
-  color: #fff;
-  white-space: pre;
-  word-wrap: normal;
-  background-color: black;
-  border-radius: 0;
-  padding: 0; }
-
-ol {
-  padding-left: 20px; }
-
-ul {
-  padding-left: 16px; }
-
-p {
-  padding: 7px 0 7px 0; }
-
-blockquote {
-  margin: 0;
-  padding: 0 1em;
-  font-style: italic;
-  border-left: 0.4em solid #ddd; }
-
-img {
-  display: block;
-  max-width: 100%;
-  margin: 5px auto; }
-
-.figure {
-  text-align: center;
-  margin: 0 auto;
-  width: 60%; }
-
-.figure img {
-  display: inline;
-  margin: 0 0 5px 0; }
-
-.figure .caption {
-  width: 80%;
-  margin: auto;
-  font-size: 90%; }
-
-sup {
-  font-size: 11px;
-  margin: 0 0 0 1px; }
-
-noscript {
-  color: #999; }
-
-noscript a {
-  color: #999; }
-
-.footnotes {
-  font-size: 90%; }
-  .footnotes ol {
-    padding-left: 1.4em; }
-  .footnotes p {
-    margin: 0.6em 0; }
-
-.footnotes-backlink {
-  margin-left: 0.2em;
-  vertical-align: -0.2em;
-  color: #bbb;
-  text-decoration: none; }
-  .footnotes-backlink:hover {
-    background-color: #bbb;
-    color: #fff; }
-
-.lfooter {
-  float: left; }
-
-.lfooter .updated:before {
-  content: "Last updated: "; }
-
-.rfooter {
-  float: right; }
-
-.rss-icon, .atom-icon, .cc-icon {
-  text-decoration: none;
-  position: relative;
-  top: 1px; }
-
-.rss-icon, .atom-icon {
-  margin: 0 3px; }
-
-.cc-icon {
-  margin: 0 1px; }
-
-.rss-icon:before, .atom-icon:before {
-  content: "\e800";
-  font-family: "monospace","helvetica";
-  font-size: 105%; }
-
-.rss-icon:before {
-  display: inline-block;
-  transform: scale(-1, 1);
-  -webkit-transform: scale(-1, 1); }
-
-.cc-icon:before {
-  content: "\e801";
-  font-family: "monospace","helvetica";
-  font-size: 95%; }
-
-.title-header {
-  display: table;
-  margin: 0 auto; }
-
-.link-header {
-  text-decoration: none; }
-
-table {
-  text-align: center;
-  width: 100% !important; }
-
-.skill-table {
-  text-align: left;
-  text-decoration: none;
-  list-style: none; }
-
-.skill-table tr td ul li {
-  list-style: none; }
-
-.skill-table tr td ul li::before {
-  content: ""; }
-
-.odd {
-  background-color: #131313;
-  border: 1px solid white; }
-
-.ouer {
-  display: block; }
-
-.code-outer {
-  margin-left: 1vw;
-  width: 65%;
-  margin-left: 10vw;
-  margin-bottom: 1vw;
-  border: 1px solid #fff;
-  overflow: auto;
-  font-family: "monospace","helvetica"; }
-
-.left-h1 {
-  float: left;
-  font-weight: bold;
-  font-size: 24.4px; }
-
-.right-h1 {
-  float: right;
-  font-weight: bold;
-  font-size: 24.4px; }
-
-.title-h1 {
-  display: inline-block;
-  font-size: 24.4px;
-  font-weight: bold; }
-
-.footer {
-  text-align: center; }
-
-/*** tag cloud ***/
-#cloudtag {
-  width: 50%;
-  margin: 0 auto;
-  border: 1px solid white;
-  padding: 10px; }
-  #cloudtag a {
-    text-decoration: none;
-    font-weight: bold; }
-  #cloudtag span {
-    font-weight: lighter; }
-
-/*** Wide screen ***/
-@media screen and (min-width: 1441px) {
-  .content pre, .content ul, .content p, .content-separator, .footer {
-    width: 50%; }
-
-  .header {
-    width: 100%; } }
-/*** Narrow screen ***/
-@media screen and (max-width: 1023px) {
-  body {
-    margin: 0 0 100px 0; }
-
-  .nav {
-    position: static;
-    width: 100%;
-    height: 150px;
-    margin: 20px 0 80px 0; }
-
-  .nav-icon {
-    width: 150px;
-    height: 150px;
-    line-height: 150px; }
-
-  .nav-icon:before {
-    font-size: 54px; }
-
-  .nav-title, .nav-author {
-    height: 0;
-    width: 0;
-    visibility: hidden;
-    pointer-events: none; }
-
-  p, .content-separator, .footer {
-    width: 80%; }
-
-  .header {
-    width: 100%; } }
-/*** Ultranarrow screen ***/
-@media screen and (max-width: 500px) {
-  .outer {
-    display: none; }
-
-  .content pre, .content ul, .content p, .content-separator, .footer {
-    width: 90%; }
-
-  .header {
-    width: 100%; }
-
-  .blog-index-yearly-index {
-    margin-left: 0; }
-
-  .blog-index-post-date {
-    width: 4em; } }
-/*** Print ***/
-@media print {
-  body {
-    margin: 5% 0;
-    font-size: 12px; }
-
-  sup {
-    font-size: 0.5em;
-    top: -1em; }
-
-  pre {
-    -webkit-print-color-adjust: exact; }
-
-  .content pre, .content ul, .content p, .content-separator, .footer {
-    width: 90%; }
-
-  .header {
-    width: 100%; }
-
-  .nav, .rss-icon, .atom-icon, .cc-icon, #archival-notice {
-    display: none; } }
-
-/*# sourceMappingURL=out.css.map */
diff --git a/source/css/theme.css b/source/css/theme.css
index 15810dfa..940aca95 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -1,543 +1,428 @@
+@charset "UTF-8";
 /*** Webfonts ***/
-
 /* icon font from fontello */
 @font-face {
   font-family: 'fontello';
-  src: url('../fonts/fontello.eot');
-  src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
-       url('../fonts/fontello.woff') format('woff'),
-       url('../fonts/fontello.ttf') format('truetype'),
-       url('../fonts/fontello.svg#fontello') format('svg');
+  src: url("../fonts/fontello.eot");
+  src: url("../fonts/fontello.eot?#iefix") format("embedded-opentype"), url("../fonts/fontello.woff") format("woff"), url("../fonts/fontello.ttf") format("truetype"), url("../fonts/fontello.svg#fontello") format("svg");
   font-weight: normal;
-  font-style: normal;
-}
+  font-style: normal; }
 
 @font-face {
   font-family: 'awesome';
-  src: url('/fonts/font-awesome/fonts/fontawesome-webfont.eot');
-  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
-       url('../fonts/fontawesome-webfont.woff') format('woff'),
-       url('../fonts/fontawesome-webfont.ttf') format('truetype'),
-       url('../fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
+  src: url("/fonts/font-awesome/fonts/fontawesome-webfont.eot");
+  src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome-webfont.svg#fontawesome-webfont") format("svg");
   font-weight: normal;
-  font-style: normal;
-}
+  font-style: normal; }
 
 /*** Main theme ***/
-
 body {
-    background-color: #000;
-    color: #fff;
-    font-family: "monospace",
-                 "helvetica",
-                 serif;
-    font-size: 12px;
-    -webkit-font-smoothing: antialiased;
-    margin: 0 0 100px 0;
-}
+  background-color: #000;
+  color: #fff;
+  font-family: "monospace", "helvetica", serif;
+  font-size: 12px;
+  -webkit-font-smoothing: antialiased;
+  margin: 0 0 100px 0; }
 
 .bodya {
   border: 1px solid #fff;
   margin-left: 20vw;
-  margin-right: 20vw;
-}
+  margin-right: 20vw; }
 
-@media
-only screen and (-webkit-min-device-pixel-ratio: 1.25),
-only screen and ( min-device-pixel-ratio: 1.25),
-only screen and ( min-resolution: 200dpi),
-only screen and ( min-resolution: 1.25dppx) {
-    -webkit-font-smoothing: subpixel-antialiased;
-}
+@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.25dppx) {
+  -webkit-font-smoothing: subpixel-antialiased; }
 
 #archival-notice {
-    position: absolute;
-    top: 30px;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    text-align: center;
-    color: red;
-}
+  position: absolute;
+  top: 30px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  text-align: center;
+  color: red; }
 
 li {
-  list-style: none;
-}
+  list-style: none; }
 
 ul li:before {
-	content: "\25b6 \00a0";
-}
+  content: "\25b6 \00a0"; }
 
 /* Menu design */
 .nav {
-    position: fixed;
-    left: 2.5%;
-    height: 150px;
-    width: 200px;
-    text-align: center;
-}
-
-.lia li:before {
-  list-style: none;
-  content: "" !important;
-}
-
-.nav li {
-  list-style: none;
-}
-
-.nav li a {
-  text-decoration: none;
-}
+  position: fixed;
+  left: 2.5%;
+  height: 150px;
+  width: 200px;
+  text-align: center; }
+  .nav li {
+    list-style: none; }
+    .nav li a {
+      text-decoration: none; }
 
+.lia {
+  text-decoration: none; }
+  .lia li:before {
+    list-style: none;
+    content: "" !important; }
+  .lia:hover li {
+    background-color: #fff;
+    color: #000; }
 
 .left-lia {
-  float: left;
-}
-
-.left-lia::after {
-  content: "█▓▒░";
-}
+  float: left; }
+  .left-lia:after {
+    content: "█▓▒░"; }
 
 .right-lia {
-  float: right;
-}
-
-.right-lia::after {
-  content: "░▒▓█";
-}
-
-.lia {
-  text-decoration: none;
-}
+  float: right; }
+  .right-lia:after {
+    content: "░▒▓█"; }
 
 .lia-border {
-  border: 1px solid white;
-}
-
-.lia-border ul {
-  padding: 0px;
-  margin: 0;
-}
-
-.lia-border hr {
-  background-color: white;
-  margin: 0;
-  padding: 0;
-}
-
-.lia:hover li{
-    background-color: white;
-    color: black;
-}
+  border: 1px solid #fff; }
+  .lia-border ul {
+    padding: 0px;
+    margin: 0; }
+  .lia-border hr {
+    background-color: #fff;
+    margin: 0;
+    padding: 0; }
 
 /* subMenu design */
 .subnav {
-    position: fixed;
-    right: 2.5%;
-    height: 150px;
-    width: 200px;
-    text-align: center;
-}
-
-.sublia li:before {
-  list-style: none;
-  content: "" !important;
-}
+  position: fixed;
+  right: 2.5%;
+  height: 150px;
+  width: 200px;
+  text-align: center; }
+  .subnav li {
+    list-style: none; }
+    .subnav li a {
+      text-decoration: none; }
 
-.subnav li {
-  list-style: none;
-}
-
-.subnav li a {
-  text-decoration: none;
-}
+.sublia {
+  text-decoration: none; }
+  .sublia li:before {
+    list-style: none;
+    content: "" !important; }
+  .sublia:hover li {
+    background-color: white;
+    color: black; }
 
 .subleft-lia {
-  float: left;
-}
-
-.subleft-lia::after {
-  content: "█▓▒░";
-}
+  float: left; }
+  .subleft-lia:after {
+    content: "█▓▒░"; }
 
 .subright-lia {
-  float: right;
-}
-
-.subright-lia::after {
-  content: "░▒▓█";
-}
-
-.sublia {
-  text-decoration: none;
-}
+  float: right; }
+  .subright-lia:after {
+    content: "░▒▓█"; }
 
 .sublia-border {
-  border: 1px solid white;
-}
-
-.sublia-border ul {
-  padding: 0px;
-  margin: 0;
-}
-
-.sublia-border hr {
-  background-color: white;
-  margin: 0;
-  padding: 0;
-}
-
-.sublia-border pre code ul, .sublia-border pre code, .sublia-border pre {
-  width: 100% !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  font-family: monospace,monospace !important;
-  font-size: 12px !important;
-  white-space: normal;
-}
-
-.sublia:hover li{
-    background-color: white;
-    color: black;
-}
-
-/* situation1 design */
+  border: 1px solid #fff; }
+  .sublia-border ul {
+    padding: 0px;
+    margin: 0; }
+  .sublia-border hr {
+    background-color: #fff;
+    margin: 0;
+    padding: 0; }
+  .sublia-border pre code ul, .sublia-border pre code, .sublia-border pre {
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    font-family: monospace,monospace !important;
+    font-size: 12px !important;
+    white-space: normal; }
+
+/* situations design */
 .situation1nav, .situation2nav {
-    position: fixed;
-    right: 2.5%;
-    margin-top: 100px;
-    height: 150px;
-    width: 200px;
-    text-align: center;
-}
-
- .situation1lia li:before, .situation2lia li:before {
-  list-style: none;
-  content: "" !important;
-}
+  position: fixed;
+  right: 2.5%;
+  margin-top: 100px;
+  height: 150px;
+  width: 200px;
+  text-align: center; }
+  .situation1nav li, .situation2nav li {
+    list-style: none; }
+    .situation1nav li a, .situation2nav li a {
+      text-decoration: none; }
 
-.situation1nav li, situation2nav li {
-  list-style: none;
-}
-
-.situation1nav li a, .situation2nav li a {
-  text-decoration: none;
-}
+.situation1lia, .situation2lia {
+  text-decoration: none; }
+  .situation1lia li:hover, .situation2lia li:hover {
+    background-color: white;
+    color: black; }
+  .situation1lia li:before, .situation2lia li:before {
+    list-style: none;
+    content: "" !important; }
 
 .situation1left-lia, .situation2left-lia {
-  float: left;
-}
-
-.situation1left-lia::after, .situation2left-lia::after {
-  content: "█▓▒░";
-}
+  float: left; }
+  .situation1left-lia:after, .situation2left-lia:after {
+    content: "█▓▒░"; }
 
 .situation1right-lia, .situation2right-lia {
-  float: right;
-}
-
-.situation1right-lia::after, .situation2right-lia::after {
-  content: "░▒▓█";
-}
-
-.situation1lia, .situation2lia {
-  text-decoration: none;
-}
+  float: right; }
+  .situation1right-lia:after, .situation2right-lia:after {
+    content: "░▒▓█"; }
 
 .situation1lia-border, .situation2lia-border {
-  border: 1px solid white;
-}
-
-.situation1lia-border ul, .situation2lia-border ul {
-  padding: 0px;
-  margin: 0;
-}
-
-.situation1lia-border hr, .situation2lia-border hr {
-  background-color: white;
-  margin: 0;
-  padding: 0;
-}
-
-.situation1lia-border pre code ul, .situation1lia-border pre code, .situation1lia-border pre, .situation2lia-border pre code ul, .situation2lia-border pre code, .situation2lia-border pre {
-  width: 100% !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  font-family: monospace,monospace !important;
-  font-size: 12px !important;
-  white-space: normal;
-}
-
-.situation1lia:hover li, .situation2lia:hover li {
+  border: 1px solid white; }
+  .situation1lia-border ul, .situation2lia-border ul {
+    padding: 0px;
+    margin: 0; }
+  .situation1lia-border hr, .situation2lia-border hr {
     background-color: white;
-    color: black;
-}
+    margin: 0;
+    padding: 0; }
+  .situation1lia-border pre code ul, .situation1lia-border pre code, .situation1lia-border pre, .situation1lia-border pre code ul, .situation1lia-border pre code, .situation1lia-border pre, .situation2lia-border pre code ul, .situation2lia-border pre code, .situation2lia-border pre, .situation2lia-border pre code ul, .situation2lia-border pre code, .situation2lia-border pre {
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    font-family: monospace,monospace !important;
+    font-size: 12px !important;
+    white-space: normal; }
 
 /* end menus design */
+.content-separator, .footer {
+  width: 60%;
+  margin: 0 auto; }
 
-.content pre, .content ul, .content p, .content-separator, .footer {
+.content {
+  text-align: justify; }
+  .content pre, .content ul, .content p {
     width: 60%;
-    margin: 0 auto;
-}
+    margin: 0 auto; }
 
 .content .sourceCode {
-  margin: 0 auto;
-}
+  margin: 0 auto; }
 
 .header {
-  width: 100%;
-}
+  width: 100%; }
 
 hr {
-    border: 0;
-    height: 1px;
-    background: #888;
-}
+  border: 0;
+  height: 1px;
+  background: #888; }
 
 .content-separator {
-    margin: 15px auto 3px auto;
-}
-
-.content {
-    text-align: justify;
-}
-
+  margin: 15px auto 3px auto; }
 
 h1 {
-    text-align: center;
-    font-size: 160%;
-    font-weight: bold;
-    width: 100%
-}
-
-.h1 {
   text-align: center;
-}
+  font-size: 160%;
+  font-weight: bold;
+  width: 100%; }
 
+.h1 {
+  text-align: center; }
 
 h2 {
-    text-align: center;
-    font-size: 125%;
-    font-weight: bold;
-}
+  text-align: center;
+  font-size: 125%;
+  font-weight: bold; }
 
 h3, h4 {
-    text-align: center;
-    font-weight: bold;
-}
+  text-align: center;
+  font-weight: bold; }
+
+h3:before {
+  content: "· "; }
+
+h3:after {
+  content: " ·"; }
 
 .article-metadata {
-    text-align: center;
-    font-size: 100%;
-    font-weight: normal;
-    margin: 1em 0;
-}
+  text-align: center;
+  font-size: 100%;
+  font-weight: normal;
+  margin: 1em 0; }
 
 a {
-    color: #fff;
-    word-wrap: break-word;
-}
+  color: #fff;
+  word-wrap: break-word; }
 
 a .active {
-  color: #fff;
-}
+  color: #fff; }
 
 /*p, h2, ul {
   padding-left: 10vw;
   padding-right: 10vw;
 }*/
-
 code {
-    font-size: 90%;
-    color: #333;
-    font-family: Courier, monospace;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
+  font-size: 90%;
+  color: #000;
+  font-family: Courier, monospace;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background-color: #fff;
+  border-radius: 2px;
+  padding-left: 1px;
+  padding-right: 1px; }
 
 h1 code, h2 code {
-    font-size: 95%;
-    color: #000;
-}
+  font-size: 95%;
+  color: #000; }
 
 pre {
-    padding: 1em;
-    background: #000;
-}
+  padding: 1em;
+  background: #000; }
 
 /* Pandoc wraps pre[class*=sourceCode] in a div tag, so it is necessary to
 eliminate the margins of such pre tags to avoid too much spacing.*/
 pre[class*=sourceCode] {
-    margin: 0;
-}
+  margin: 0;
+  border: 1px solid;
+  overflow: auto; }
 
 pre code {
-    font-size: 85%;
-    color: #fff;
-    white-space: pre;
-    word-wrap: normal;
-}
+  font-size: 85%;
+  color: #fff;
+  white-space: pre;
+  word-wrap: normal;
+  background-color: black;
+  border-radius: 0;
+  padding: 0; }
 
 ol {
-    padding-left: 20px;
-}
+  padding-left: 20px; }
 
 ul {
-    padding-left: 16px;
-}
+  padding-left: 16px; }
 
 p {
-  padding: 7px 0 7px 0;
-}
+  padding: 7px 0 7px 0; }
 
 blockquote {
-    margin: 0;
-    padding: 0 1em;
-    font-style: italic;
-    border-left: 0.4em solid #ddd;
-}
+  margin: 0;
+  padding: 0 1em;
+  font-style: italic;
+  border-left: 0.4em solid #ddd; }
 
 img {
-    display: block;
-    max-width: 100%;
-    margin: 5px auto;
-}
+  display: block;
+  max-width: 100%;
+  margin: 5px auto; }
 
 .figure {
-    text-align: center;
-    margin: 0 auto;
-    width: 60%;
-}
+  text-align: center;
+  margin: 0 auto;
+  width: 60%; }
 
 .figure img {
-    display: inline;
-    margin: 0 0 5px 0;
-}
+  display: inline;
+  margin: 0 0 5px 0; }
 
 .figure .caption {
-    width: 80%;
-    margin: auto;
-    font-size: 90%;
-}
+  width: 80%;
+  margin: auto;
+  font-size: 90%; }
 
 sup {
-    font-size: 11px;
-    margin: 0 0 0 1px;
-}
+  font-size: 11px;
+  margin: 0 0 0 1px; }
 
 noscript {
-    color: #999;
-}
+  color: #999; }
 
 noscript a {
-    color: #999;
-}
+  color: #999; }
 
 .footnotes {
-    font-size: 90%;
-}
-
-.footnotes ol {
-    padding-left: 1.4em;
-}
-
-.footnotes p {
-    margin: 0.6em 0;
-}
+  font-size: 90%; }
+  .footnotes ol {
+    padding-left: 1.4em; }
+  .footnotes p {
+    margin: 0.6em 0; }
 
 .footnotes-backlink {
-    margin-left: 0.2em;
-    vertical-align: -0.2em;
-    color: #bbb;
-    text-decoration: none;
-}
-
-.footnotes-backlink:hover {
+  margin-left: 0.2em;
+  vertical-align: -0.2em;
+  color: #bbb;
+  text-decoration: none; }
+  .footnotes-backlink:hover {
     background-color: #bbb;
-    color: #fff;
-}
+    color: #fff; }
 
 .lfooter {
-    float: left;
-}
+  float: left; }
 
 .lfooter .updated:before {
-    content: "Last updated: "
-}
+  content: "Last updated: "; }
 
 .rfooter {
-    float: right;
-}
+  float: right; }
 
 .rss-icon, .atom-icon, .cc-icon {
-    text-decoration: none;
-    position: relative;
-    top: 1px;
-}
+  text-decoration: none;
+  position: relative;
+  top: 1px; }
 
 .rss-icon, .atom-icon {
-    margin: 0 3px;
-}
+  margin: 0 3px; }
 
 .cc-icon {
-    margin: 0 1px;
-}
+  margin: 0 1px; }
 
 .rss-icon:before, .atom-icon:before {
-    content: "\e800";
-    font-family: "monospace","helvetica";
-    font-size: 105%;
-}
+  content: "\e800";
+  font-family: "monospace","helvetica";
+  font-size: 105%; }
 
 .rss-icon:before {
-    display: inline-block;
-    transform: scale(-1,1);
-    -webkit-transform: scale(-1,1);
-}
+  display: inline-block;
+  transform: scale(-1, 1);
+  -webkit-transform: scale(-1, 1); }
 
 .cc-icon:before {
-    content: "\e801";
-    font-family: "monospace","helvetica";
-    font-size: 95%;
-}
+  content: "\e801";
+  font-family: "monospace","helvetica";
+  font-size: 95%; }
 
 .title-header {
   display: table;
-  margin: 0 auto;
-}
+  margin: 0 auto; }
 
 .link-header {
-  text-decoration: none;
-}
+  text-decoration: none; }
 
 table {
-  text-align: center;
-  width: 100% !important;
-}
+  width: 100% !important; }
+
+#toc {
+  width: 50%;
+  margin: 0 auto; }
+
+.blog-index-yearly-index {
+  margin-left: 1em; }
+
+.blog-index-year-title {
+  text-align: center !important;
+  font-size: 150%;
+  margin: 30px 0; }
+
+.blog-index-post-date {
+  width: 5em; }
 
 .skill-table {
-  text-align:left;
+  text-align: left;
   text-decoration: none;
-  list-style: none;
-}
+  list-style: none; }
 
 .skill-table tr td ul li {
-  list-style: none;
-}
+  list-style: none; }
 
 .skill-table tr td ul li::before {
-  content: "";
-}
+  content: ""; }
 
 .odd {
   background-color: #131313;
-  border: 1px solid white;
-}
+  border: 1px solid white; }
 
 .ouer {
-  display: block;
-}
+  display: block; }
 
 .code-outer {
   margin-left: 1vw;
@@ -546,163 +431,96 @@ table {
   margin-bottom: 1vw;
   border: 1px solid #fff;
   overflow: auto;
-  font-family: "monospace","helvetica";
-}
+  font-family: "monospace","helvetica"; }
 
 .left-h1 {
   float: left;
   font-weight: bold;
-  font-size: 24.4px;
-}
+  font-size: 24.4px; }
 
 .right-h1 {
   float: right;
   font-weight: bold;
-  font-size: 24.4px;
-}
+  font-size: 24.4px; }
 
 .title-h1 {
   display: inline-block;
   font-size: 24.4px;
-  font-weight: bold;
-}
+  font-weight: bold; }
 
 .footer {
-  text-align: center;
-}
+  text-align: center; }
 
 /*** tag cloud ***/
-
 #cloudtag {
   width: 50%;
   margin: 0 auto;
   border: 1px solid white;
-  padding: 10px;
-}
-
-#cloudtag a {
-  text-decoration: none;
-  font-weight: bold;
-}
-
-#cloudtag span {
-  font-weight: lighter;
-}
+  padding: 10px; }
+  #cloudtag a {
+    text-decoration: none;
+    font-weight: bold; }
+  #cloudtag span {
+    font-weight: lighter; }
 
 /*** Wide screen ***/
-
 @media screen and (min-width: 1441px) {
-    .content pre, .content ul, .content p, .content-separator, .footer {
-        width: 50%;
-    }
-
-    .content .sourceCode {
-
-    }
-
-    .header {
-      width: 100%;
-    }
-}
+  .content pre, .content ul, .content p, .content-separator, .footer {
+    width: 50%; }
+  .header {
+    width: 100%; } }
 
 /*** Narrow screen ***/
-
 @media screen and (max-width: 1023px) {
-    body {
-        margin: 0 0 100px 0;
-    }
-
-    .nav {
-        position: static;
-        width: 100%;
-        height: 150px;
-        margin: 20px 0 80px 0;
-    }
-
-    .nav-icon {
-        width: 150px;
-        height: 150px;
-        line-height: 150px;
-    }
-
-    .nav-icon:before {
-        font-size: 54px;
-    }
-
-    .nav-title, .nav-author {
-        height: 0;
-        width: 0;
-        visibility: hidden;
-        pointer-events: none;
-    }
-
-    p, .content-separator, .footer {
-        width: 80%;
-    }
-
-    .header {
-      width: 100%;
-    }
-}
+  body {
+    margin: 0 0 100px 0; }
+  .nav {
+    position: static;
+    width: 100%;
+    height: 150px;
+    margin: 20px 0 80px 0; }
+  .nav-icon {
+    width: 150px;
+    height: 150px;
+    line-height: 150px; }
+  .nav-icon:before {
+    font-size: 54px; }
+  .nav-title, .nav-author {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+    pointer-events: none; }
+  p, .content-separator, .footer {
+    width: 80%; }
+  .header {
+    width: 100%; } }
 
 /*** Ultranarrow screen ***/
-
 @media screen and (max-width: 500px) {
-    .outer {
-      display: none;
-    }
-
-    .content pre, .content ul, .content p, .content-separator, .footer {
-        width: 90%;
-    }
-
-    .content .sourceCode {
-
-    }
-
-    .header {
-      width: 100%;
-    }
-
-    .blog-index-yearly-index {
-        margin-left: 0;
-    }
-
-    .blog-index-post-date {
-        width: 4em;
-    }
-}
+  .outer {
+    display: none; }
+  .content pre, .content ul, .content p, .content-separator, .footer {
+    width: 90%; }
+  .header {
+    width: 100%; }
+  .blog-index-yearly-index {
+    margin-left: 0; }
+  .blog-index-post-date {
+    width: 4em; } }
 
 /*** Print ***/
-
 @media print {
-    body {
-        margin: 5% 0;
-        font-size: 12px;
-    }
-
-    sup {
-        font-size: 0.5em;
-        top: -1em;
-    }
-
-    pre {
-        -webkit-print-color-adjust: exact;
-    }
-
-    .content pre, .content ul, .content p, .content-separator, .footer {
-        width: 90%;
-    }
-
-    .content .sourceCode {
-
-    }
-
-    .header {
-      width: 100%;
-    }
-
-    .nav, .rss-icon, .atom-icon, .cc-icon, #archival-notice {
-        display: none;
-    }
-}
+  body {
+    margin: 5% 0;
+    font-size: 12px; }
+  sup {
+    font-size: 0.5em;
+    top: -1em; }
+  pre {
+    -webkit-print-color-adjust: exact; }
+  .content pre, .content ul, .content p, .content-separator, .footer {
+    width: 90%; }
+  .header {
+    width: 100%; }
+  .nav, .rss-icon, .atom-icon, .cc-icon, #archival-notice {
+    display: none; } }
diff --git a/source/css/theme.scss b/source/css/theme.scss
index 262fcaaf..dfa1f8cd 100644
--- a/source/css/theme.scss
+++ b/source/css/theme.scss
@@ -539,10 +539,28 @@ noscript a {
 }
 
 table {
-  text-align: center;
   width: 100% !important;
 }
 
+#toc {
+	width: 50%;
+	margin: 0 auto;
+}
+
+.blog-index-yearly-index {
+    margin-left: 1em;
+}
+
+.blog-index-year-title {
+  text-align: center !important;
+  font-size: 150%;
+  margin: 30px 0;
+}
+
+.blog-index-post-date {
+  width: 5em;
+}
+
 .skill-table {
   text-align:left;
   text-decoration: none;
diff --git a/source/template.html b/source/template.html
index 08799b9e..92a25dc1 100644
--- a/source/template.html
+++ b/source/template.html
@@ -21,7 +21,7 @@ $endif$
     <meta name="msapplication-TileImage" content="/img/favicon-144.png"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="/css/normalize.min.css" media="all" rel="stylesheet" type="text/css"/>
-    <link href="/css/out.css" media="all" rel="stylesheet" type="text/css"/>
+    <link href="/css/theme.css" media="all" rel="stylesheet" type="text/css"/>
 $if(chinese_article)$
     <link href="/css/theme-chinese-article.css" rel="stylesheet" type="text/css"/>
 $endif$