aboutsummaryrefslogtreecommitdiff
path: root/source
diff options
context:
space:
mode:
authorZhiming Wang <zmwangx@gmail.com>2016-09-02 21:32:54 +0800
committerZhiming Wang <zmwangx@gmail.com>2016-09-02 21:32:54 +0800
commitd041eb65886bda0c4f3e772fdc22c36de350ad03 (patch)
treeff85eb9af1ec105465c9f06bdef752ddc0f72f9e /source
parent2188bbbd7b9fd97e9e2e369ee8b525121501746a (diff)
downloadmy_new_personal_website-d041eb65886bda0c4f3e772fdc22c36de350ad03.tar.xz
my_new_personal_website-d041eb65886bda0c4f3e772fdc22c36de350ad03.zip
Collapse most CSS files into theme.css
Having a whole bunch of CSS files is not good for the performance of the website.
Diffstat (limited to 'source')
-rw-r--r--source/css/print-chinese-article.css5
-rw-r--r--source/css/print.css23
-rw-r--r--source/css/theme-chinese-article.css8
-rw-r--r--source/css/theme-narrow.css31
-rw-r--r--source/css/theme-ultranarrow.css11
-rw-r--r--source/css/theme-wide.css3
-rw-r--r--source/css/theme.css104
-rw-r--r--source/template.html8
8 files changed, 112 insertions, 81 deletions
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,22 +12,14 @@ $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>
$endif$