From d041eb65886bda0c4f3e772fdc22c36de350ad03 Mon Sep 17 00:00:00 2001
From: Zhiming Wang <zmwangx@gmail.com>
Date: Fri, 2 Sep 2016 21:32:54 +0800
Subject: Collapse most CSS files into theme.css

Having a whole bunch of CSS files is not good for the performance of the
website.
---
 source/css/print-chinese-article.css |   5 --
 source/css/print.css                 |  23 --------
 source/css/theme-chinese-article.css |   8 +++
 source/css/theme-narrow.css          |  31 -----------
 source/css/theme-ultranarrow.css     |  11 ----
 source/css/theme-wide.css            |   3 -
 source/css/theme.css                 | 104 +++++++++++++++++++++++++++++++++++
 source/template.html                 |   8 ---
 8 files changed, 112 insertions(+), 81 deletions(-)
 delete mode 100644 source/css/print-chinese-article.css
 delete mode 100644 source/css/print.css
 delete mode 100644 source/css/theme-narrow.css
 delete mode 100644 source/css/theme-ultranarrow.css
 delete mode 100644 source/css/theme-wide.css

diff --git a/source/css/print-chinese-article.css b/source/css/print-chinese-article.css
deleted file mode 100644
index 15e663da..00000000
--- a/source/css/print-chinese-article.css
+++ /dev/null
@@ -1,5 +0,0 @@
-footer {
-    width: 0;
-    height: 0;
-    visibility: hidden;
-}
diff --git a/source/css/print.css b/source/css/print.css
deleted file mode 100644
index 1e9c08e3..00000000
--- a/source/css/print.css
+++ /dev/null
@@ -1,23 +0,0 @@
-body {
-    margin: 5% 0;
-    font-size: 12px;
-}
-
-sup {
-    font-size: 0.5em;
-    top: -1em;
-}
-
-pre {
-    -webkit-print-color-adjust: exact;
-}
-
-.content, .content-separator, .footer {
-    width: 90%;
-}
-
-.nav, .rss-icon, .atom-icon, .cc-icon {
-    width: 0;
-    height: 0;
-    visibility: hidden;
-}
diff --git a/source/css/theme-chinese-article.css b/source/css/theme-chinese-article.css
index 8e91477b..1b76afaf 100644
--- a/source/css/theme-chinese-article.css
+++ b/source/css/theme-chinese-article.css
@@ -64,3 +64,11 @@ sup {
     margin-bottom: 1em;
     text-indent: 0;
 }
+
+@media print {
+    footer {
+        width: 0;
+        height: 0;
+        visibility: hidden;
+    }
+}
diff --git a/source/css/theme-narrow.css b/source/css/theme-narrow.css
deleted file mode 100644
index d8b9eca5..00000000
--- a/source/css/theme-narrow.css
+++ /dev/null
@@ -1,31 +0,0 @@
-body {
-    margin: 40px 0 100px 0;
-}
-
-.nav {
-    position: static;
-    width: 100%;
-    height: 150px;
-    margin: 20px 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;
-}
-
-.content, .content-separator, .footer {
-    width: 80%;
-}
diff --git a/source/css/theme-ultranarrow.css b/source/css/theme-ultranarrow.css
deleted file mode 100644
index 859af383..00000000
--- a/source/css/theme-ultranarrow.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.content, .content-separator, .footer {
-    width: 90%;
-}
-
-.blog-index-yearly-index {
-    margin-left: 0;
-}
-
-.blog-index-post-date {
-    width: 4em;
-}
diff --git a/source/css/theme-wide.css b/source/css/theme-wide.css
deleted file mode 100644
index 9dfcf8fb..00000000
--- a/source/css/theme-wide.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.content, .content-separator, .footer {
-    width: 50%;
-}
diff --git a/source/css/theme.css b/source/css/theme.css
index 01b666d4..9b43397f 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -1,3 +1,19 @@
+/*** 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;
+}
+
+/*** Main theme ***/
+
 body {
     color: #000;
     font-family: Times, "Times New Roman",
@@ -275,3 +291,91 @@ noscript a {
     font-family: fontello;
     font-size: 95%;
 }
+
+/*** Wide screen ***/
+
+@media screen and (min-width: 1441px) {
+    .content, .content-separator, .footer {
+        width: 50%;
+    }
+}
+
+/*** Narrow screen ***/
+
+@media screen and (max-width: 1023px) {
+    body {
+        margin: 40px 0 100px 0;
+    }
+
+    .nav {
+        position: static;
+        width: 100%;
+        height: 150px;
+        margin: 20px 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;
+    }
+
+    .content, .content-separator, .footer {
+        width: 80%;
+    }
+}
+
+/*** Ultranarrow screen ***/
+
+@media screen and (max-width: 500px) {
+    .content, .content-separator, .footer {
+        width: 90%;
+    }
+
+    .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, .content-separator, .footer {
+        width: 90%;
+    }
+
+    .nav, .rss-icon, .atom-icon, .cc-icon {
+        width: 0;
+        height: 0;
+        visibility: hidden;
+    }
+}
diff --git a/source/template.html b/source/template.html
index f7e11237..f6b95b47 100644
--- a/source/template.html
+++ b/source/template.html
@@ -12,21 +12,13 @@ $endif$
     <meta name="msapplication-TileColor" content="#FFFFFF"/>
     <meta name="msapplication-TileImage" content="/img/favicon-144.png"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="/css/fonts.css" media="all" rel="stylesheet" type="text/css"/>
     <link href="/css/normalize.css" media="all" rel="stylesheet" type="text/css"/>
     <link href="/css/theme.css" media="all" rel="stylesheet" type="text/css"/>
-    <link href="/css/theme-wide.css" media="only screen and (min-width: 1441px)" rel="stylesheet" type="text/css"/>
-    <link href="/css/theme-narrow.css" media="only screen and (max-width: 1023px)" rel="stylesheet" type="text/css"/>
-    <link href="/css/theme-ultranarrow.css" media="only screen and (max-width: 500px)" rel="stylesheet" type="text/css"/>
 $if(chinese_article)$
     <link href="/css/theme-chinese-article.css" rel="stylesheet" type="text/css"/>
 $endif$
 $if(highlighting-css)$
     <link href="/css/highlight.css" media="all" rel="stylesheet" type="text/css"/>
-$endif$
-    <link href="/css/print.css" media="print" rel="stylesheet" type="text/css"/>
-$if(chinese_article)$
-    <link href="/css/print-chinese-article.css" media="print" rel="stylesheet" type="text/css"/>
 $endif$
 $if(custom-css)$
     <style type="text/css">$custom-css$</style>
-- 
cgit v1.2.1