From e3ed3e43f563bfed007344f07597193dabd88d57 Mon Sep 17 00:00:00 2001
From: neodarz <neodarz@neodarz.net>
Date: Fri, 2 Jun 2017 14:24:15 +0200
Subject: Move css to scss with new design
---
source/css/theme.scss | 725 ++++++++++++++++++++++++++++++++++++++++++++++++++
source/template.html | 2 +-
2 files changed, 726 insertions(+), 1 deletion(-)
create mode 100644 source/css/theme.scss
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$
--
cgit v1.2.1