diff options
| -rw-r--r-- | source/css/print-chinese-article.css | 5 | ||||
| -rw-r--r-- | source/css/print.css | 23 | ||||
| -rw-r--r-- | source/css/theme-chinese-article.css | 8 | ||||
| -rw-r--r-- | source/css/theme-narrow.css | 31 | ||||
| -rw-r--r-- | source/css/theme-ultranarrow.css | 11 | ||||
| -rw-r--r-- | source/css/theme-wide.css | 3 | ||||
| -rw-r--r-- | source/css/theme.css | 104 | ||||
| -rw-r--r-- | source/template.html | 8 |
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$ |