Move css to scss with new design

2 files changed, 726 insertions, 1 deletions

diff --git a/source/css/theme.scss b/source/css/theme.scss
new file mode 100644
index 00000000..f4427768
--- /dev/null
+++ b/source/css/theme.scss
@@ -0,0 +1,725 @@
+/*** 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;
+}
+
+$font-stack: "monospace", "helvetica", serif;
+$black: #000;
+$white: #fff;
+$red: red;
+
+/*** Main theme ***/
+
+body {
+  background-color: $black;
+  color: $white;
+  font-family: $font-stack;
+  font-size: 12px;
+  -webkit-font-smoothing: antialiased;
+  margin: 0 0 100px 0;
+}
+
+.bodya {
+  border: 1px solid $white;
+  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;
+
+  li {
+    list-style: none;
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+.lia {
+  text-decoration: none;
+
+  li:before {
+    list-style: none;
+    content: "" !important;
+  }
+
+  &:hover  li {
+    background-color: $white;
+    color: $black;
+  }
+}
+
+.left-lia {
+  float: left;
+
+  &:after {
+    content: "█▓▒░";
+  }
+}
+
+.right-lia {
+  float: right;
+
+  &:after {
+    content: "░▒▓█";
+  }
+}
+
+.lia-border {
+  border: 1px solid $white;
+
+  ul {
+    padding: 0px;
+    margin: 0;
+  }
+
+  hr {
+    background-color: $white;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* subMenu design */
+.subnav {
+  position: fixed;
+  right: 2.5%;
+  height: 150px;
+  width: 200px;
+  text-align: center;
+
+  li {
+    list-style: none;
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+.sublia {
+  text-decoration: none;
+
+  li:before {
+  list-style: none;
+  content: "" !important;
+  }
+
+  &:hover li {
+    background-color: white;
+    color: black;
+  }
+}
+
+.subleft-lia {
+  float: left;
+
+  &:after {
+    content: "█▓▒░";
+  }
+}
+
+.subright-lia {
+  float: right;
+
+  &:after {
+    content: "░▒▓█";
+  }
+}
+
+.sublia-border {
+  border: 1px solid $white;
+
+  ul {
+    padding: 0px;
+    margin: 0;
+  }
+
+  hr {
+    background-color: $white;
+    margin: 0;
+    padding: 0;
+  }
+
+  pre code ul, pre code, 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;
+
+  li {
+    list-style: none;
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+ .situation1lia, .situation2lia {
+   text-decoration: none;
+
+   li:hover {
+     background-color: white;
+     color: black;
+   }
+
+   li:before {
+     list-style: none;
+     content: "" !important;
+   }
+ }
+
+ .situation1left-lia, .situation2left-lia {
+   float: left;
+
+   &:after {
+     content: "█▓▒░";
+   }
+ }
+
+ .situation1right-lia, .situation2right-lia {
+   float: right;
+
+   &:after {
+     content: "░▒▓█";
+   }
+ }
+
+ .situation1lia-border, .situation2lia-border {
+   border: 1px solid white;
+
+   ul {
+     padding: 0px;
+     margin: 0;
+   }
+
+   hr {
+     background-color: white;
+     margin: 0;
+     padding: 0;
+   }
+
+   pre code ul, pre code, pre, pre code ul, pre code, 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;
+
+  pre, ul, 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 {
+    text-align: center;
+    font-weight: bold;
+}
+
+.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: $black;
+    font-family: Courier, monospace;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background-color: $white;
+    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;
+}
+
+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%;
+
+  ol {
+    padding-left: 1.4em;
+  }
+
+  p {
+    margin: 0.6em 0;
+  }
+}
+
+.footnotes-backlink {
+    margin-left: 0.2em;
+    vertical-align: -0.2em;
+    color: #bbb;
+    text-decoration: none;
+
+    &: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;
+
+  a {
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  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%;
+    }
+}
+
+/*** 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%;
+    }
+
+    .content .sourceCode {
+
+    }
+
+    .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;
+    }
+}
diff --git a/source/template.html b/source/template.html
index e3b835ef..56735eaa 100644
--- a/source/template.html
+++ b/source/template.html
@@ -14,7 +14,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/theme.css" media="all" rel="stylesheet" type="text/css"/>
+    <link href="/css/out.css" media="all" rel="stylesheet" type="text/css"/>
 $if(chinese_article)$
     <link href="/css/theme-chinese-article.css" rel="stylesheet" type="text/css"/>
 $endif$