├── .gitignore ├── source ├── favicon.png ├── font │ ├── sourcesanspro.woff │ └── sourcesanspro.woff2 ├── scss │ ├── _partial │ │ ├── copyright.scss │ │ ├── header.scss │ │ ├── footer.scss │ │ ├── home-post-list.scss │ │ ├── archive-post-list.scss │ │ ├── mq.scss │ │ ├── base.scss │ │ ├── post.scss │ │ └── normalize.scss │ └── apollo.scss └── css │ └── apollo.css ├── languages ├── zh-cn.yml └── en.yml ├── layout ├── archive.jade ├── index.jade ├── partial │ ├── nav.jade │ ├── copyright.jade │ ├── layout.jade │ ├── head.jade │ ├── scripts.jade │ └── comment.jade ├── post.jade └── mixins │ ├── paginator.jade │ └── post.jade ├── _config.yml ├── gulpfile.js ├── package.json ├── LICENSE ├── README.md └── doc ├── doc-zh.md └── doc-en.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | db.json 4 | *.log 5 | node_modules/ 6 | public/ 7 | .deploy*/ -------------------------------------------------------------------------------- /source/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhoKnowInfinity/hexo-theme-apollo/HEAD/source/favicon.png -------------------------------------------------------------------------------- /languages/zh-cn.yml: -------------------------------------------------------------------------------- 1 | prev: 上一页 2 | next: 下一页 3 | prev_post: 上一篇 4 | next_post: 下一篇 5 | more: ...阅读全文 6 | translated: 翻译 · 原文地址 7 | -------------------------------------------------------------------------------- /source/font/sourcesanspro.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhoKnowInfinity/hexo-theme-apollo/HEAD/source/font/sourcesanspro.woff -------------------------------------------------------------------------------- /source/font/sourcesanspro.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WhoKnowInfinity/hexo-theme-apollo/HEAD/source/font/sourcesanspro.woff2 -------------------------------------------------------------------------------- /languages/en.yml: -------------------------------------------------------------------------------- 1 | prev: PREV 2 | next: NEXT 3 | prev_post: PREV 4 | next_post: NEXT 5 | more: ...more 6 | translated: Translation · Original Link 7 | -------------------------------------------------------------------------------- /layout/archive.jade: -------------------------------------------------------------------------------- 1 | extends partial/layout 2 | 3 | block container 4 | include mixins/post 5 | +postList() 6 | 7 | block pagination 8 | include mixins/paginator 9 | +home() 10 | 11 | block copyright 12 | include partial/copyright -------------------------------------------------------------------------------- /layout/index.jade: -------------------------------------------------------------------------------- 1 | extends partial/layout 2 | 3 | block container 4 | include mixins/post 5 | +posts() 6 | 7 | block pagination 8 | include mixins/paginator 9 | +home() 10 | 11 | block copyright 12 | include partial/copyright 13 | -------------------------------------------------------------------------------- /source/scss/_partial/copyright.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | padding-bottom: 1px; 3 | .copyright { 4 | margin: 4em 0; 5 | border-top: 1px solid #ddd; 6 | text-align: center; 7 | p, a { 8 | color: #aaa; 9 | font-size: 14px; 10 | font-weight: 100; 11 | } 12 | a:hover { 13 | color: #888; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /layout/partial/nav.jade: -------------------------------------------------------------------------------- 1 | ul.nav.nav-list 2 | each value, key in theme.menu 3 | li.nav-list-item 4 | - var re = /^(http|https):\/\/*/gi; 5 | - var tar = re.test(value) ? "_blank" : "_self" 6 | - var act = !re.test(value) && "/"+page.current_url === value 7 | a.nav-list-link(class={active: act} href=url_for(value) target=tar) 8 | != key.toUpperCase() 9 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | menu: 2 | Blog: / 3 | Archive: /archives/ 4 | Weibo: http://weibo.com/sunchongsheng 5 | GitHub: https://github.com/pinggod 6 | Rss: /atom.xml 7 | 8 | favicon: /favicon.png 9 | logo: /favicon.png 10 | 11 | # Comment 12 | # e.g disqus: seansun 13 | disqus: 14 | duoshuo: 15 | 16 | # Analytics 17 | # google-analytics: 18 | # ga: UA-xxxxxxxx-x 19 | 20 | # Copyright Infomation 21 | startyear: 2015 22 | -------------------------------------------------------------------------------- /layout/partial/copyright.jade: -------------------------------------------------------------------------------- 1 | .copyright 2 | - var hexoURL = "https://hexo.io/"; 3 | - var apolloURL = "https://github.com/pinggod/hexo-theme-apollo"; 4 | - var currentDate = new Date(); 5 | - var year = currentDate.getFullYear(); 6 | - year = year == theme.startyear ? year : theme.startyear + ' - ' + year; 7 | p © #{year} #[a(href=config.url)!= config.author], powered by #[a(href=hexoURL, target="_blank") Hexo] and #[a(href=apolloURL, target="_blank") hexo-theme-apollo]. -------------------------------------------------------------------------------- /layout/partial/layout.jade: -------------------------------------------------------------------------------- 1 | doctype 2 | html(lang=config.language) 3 | head 4 | include head 5 | body 6 | .wrap 7 | header 8 | a.logo-link(href=url_for()) 9 | img(src=url_for(theme.logo) alt="logo") 10 | include nav 11 | main.container 12 | block container 13 | footer 14 | block pagination 15 | block copyright 16 | include scripts 17 | -------------------------------------------------------------------------------- /layout/post.jade: -------------------------------------------------------------------------------- 1 | extends partial/layout 2 | 3 | block site_title 4 | != page.title + " · " + config.title 5 | 6 | block description 7 | - var desc = page.desc || page.title + ' - ' + config.author; 8 | meta(name="description", content=desc) 9 | 10 | block container 11 | include mixins/post 12 | +post(page) 13 | 14 | block pagination 15 | include mixins/paginator 16 | +post() 17 | include partial/comment 18 | 19 | block copyright 20 | include partial/copyright -------------------------------------------------------------------------------- /source/scss/_partial/header.scss: -------------------------------------------------------------------------------- 1 | header { 2 | min-height: 60px; 3 | 4 | .logo-link { 5 | float: left; 6 | } 7 | 8 | .nav { 9 | float: right; 10 | left: 80px; 11 | } 12 | 13 | .logo-link img { 14 | height: 60px; 15 | } 16 | 17 | .nav-list-item { 18 | display: inline-block; 19 | padding: 19px 10px ; 20 | a { 21 | font-size: 16px; 22 | line-height: 1.4; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /source/scss/_partial/footer.scss: -------------------------------------------------------------------------------- 1 | .paginator { 2 | margin: 4em 0; 3 | text-align: center; 4 | .prev, .next { 5 | display: inline-block; 6 | margin: 0 4px; 7 | padding: 4px 12px; 8 | border-radius: 4px; 9 | border-bottom: 4px solid #3aa373; 10 | font-size: 14px; 11 | color: #fff; 12 | background-color: #4fc08d; 13 | &:hover { 14 | background-color: #22bd77; 15 | } 16 | } 17 | } 18 | 19 | .ds-thread, 20 | #disqus_thread { 21 | margin-bottom: 2em; 22 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var autoprefixer = require('gulp-autoprefixer'); 4 | 5 | // 一次性编译 Sass 6 | gulp.task('sass', function() { 7 | return gulp.src('./source/scss/*.scss') 8 | .pipe(sass({outputStyle: 'compressed'})) 9 | .pipe(autoprefixer()) 10 | .pipe(gulp.dest('./source/css')); 11 | }); 12 | 13 | // 实时编译 14 | gulp.task('default', ['sass'], function() { 15 | gulp.watch('./source/scss/_partial/*.scss', ['sass']); 16 | gulp.watch('./source/scss/*.scss', ['sass']); 17 | }); -------------------------------------------------------------------------------- /source/scss/_partial/home-post-list.scss: -------------------------------------------------------------------------------- 1 | .home.post-list { 2 | margin: 2em 0; 3 | .post-list-item { 4 | padding: 1em 0 2em; 5 | border-bottom: 1px solid #ddd; 6 | &:last-child { 7 | border-bottom: 0px; 8 | } 9 | } 10 | .post-content{ 11 | h2, h3, h4, h5, h6 { 12 | &:before { 13 | content: ''; 14 | } 15 | } 16 | & > ul { 17 | list-style: initial; 18 | } 19 | } 20 | .read-more { 21 | color: #42b983; 22 | } 23 | } -------------------------------------------------------------------------------- /source/scss/apollo.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import "_partial/normalize"; 4 | @import "_partial/base"; 5 | @import "_partial/header"; 6 | @import "_partial/home-post-list"; 7 | @import "_partial/archive-post-list"; 8 | @import "_partial/post"; 9 | @import "_partial/footer"; 10 | @import "_partial/mq"; 11 | @import "_partial/copyright"; 12 | 13 | @font-face { 14 | font-family: 'sourcesanspro'; 15 | src: url('../font/sourcesanspro.woff2') format('woff2'), 16 | url('../font/sourcesanspro.woff') format('woff'); 17 | font-weight: normal; 18 | font-style: normal; 19 | } 20 | -------------------------------------------------------------------------------- /layout/mixins/paginator.jade: -------------------------------------------------------------------------------- 1 | mixin home() 2 | - var prev = page.prev_link 3 | - var next = page.next_link 4 | .paginator 5 | if page.prev 6 | a.prev(href=url_for(prev))!= __('prev') 7 | if page.next 8 | a.next(href=url_for(next))!= __('next') 9 | 10 | mixin post() 11 | - var prev = page.prev ? page.prev.path : false; 12 | - var next = page.next ? page.next.path : false; 13 | .paginator 14 | if prev 15 | a.prev(href=url_for(prev))!= __('prev_post') 16 | if next 17 | a.next(href=url_for(next))!= __('next_post') -------------------------------------------------------------------------------- /source/scss/_partial/archive-post-list.scss: -------------------------------------------------------------------------------- 1 | .archive { 2 | max-width: 500px; 3 | margin: 5em auto; 4 | .post-item { 5 | padding: 2px 0 0 50px; 6 | } 7 | .post-time, 8 | .post-title-link { 9 | font-size: 1rem; 10 | } 11 | .post-title-link { 12 | display: block; 13 | margin-left: 125px; 14 | color: #42b983; 15 | word-break: break-all; 16 | &:hover { 17 | border-bottom: 0; 18 | color: #267B54; 19 | } 20 | } 21 | .post-info { 22 | float: left; 23 | width: 125px; 24 | color: #7f8c8d; 25 | } 26 | } -------------------------------------------------------------------------------- /layout/partial/head.jade: -------------------------------------------------------------------------------- 1 | meta(charset="utf-8") 2 | meta(name="X-UA-Compatible", content="IE=edge") 3 | 4 | title 5 | block site_title 6 | = config.title 7 | block description 8 | meta(name="description", content= config.description ? config.description : 'A Blog Powered By Hexo') 9 | 10 | meta(name="viewport", content="width=device-width, initial-scale=1") 11 | link(rel="icon", href=url_for(theme.favicon)) 12 | link(rel="stylesheet", href=url_for("css/apollo.css")) 13 | 14 | - var xml = config.url + '/atom.xml' 15 | link(rel="search", type="application/opensearchdescription+xml", href=xml, title=config.title) 16 | 17 | -------------------------------------------------------------------------------- /layout/partial/scripts.jade: -------------------------------------------------------------------------------- 1 | //- LaTex 2 | script(async src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML" integrity="sha384-crwIf/BuaWM9rM65iM+dWFldgQ1Un8jWZMuh3puxb8TOY9+linwLoI7ZHZT+aekW" crossorigin="anonymous") 3 | 4 | //- Analytics tracking 5 | - var ga = theme.ga 6 | if ga 7 | script 8 | | (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create', 9 | != '"' + ga + '"' 10 | | ,'auto');ga('send','pageview'); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-theme-apollo", 3 | "version": "1.0.0", 4 | "description": "A hexo theme inspired by vuejs.org", 5 | "main": "index.js", 6 | "scripts": { 7 | "sass": "gulp sass" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/pinggod/hexo-theme-apollo" 12 | }, 13 | "keywords": [ 14 | "hexo", 15 | "theme", 16 | "apollo" 17 | ], 18 | "author": "Sean Sun", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/pinggod/hexo-theme-apollo/issues" 22 | }, 23 | "homepage": "https://github.com/pinggod/hexo-theme-apollo#readme", 24 | "devDependencies": { 25 | "gulp": "^3.9.0", 26 | "gulp-autoprefixer": "^3.0.2", 27 | "gulp-sass": "^2.0.4" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /source/scss/_partial/mq.scss: -------------------------------------------------------------------------------- 1 | main.container { 2 | margin: 2em 10px; 3 | } 4 | 5 | @media screen and (min-width: 700px) { 6 | .wrap { 7 | width: 700px; 8 | margin: 0 auto; 9 | } 10 | header { 11 | padding: 20px 100px; 12 | } 13 | } 14 | 15 | @media screen and (max-width: 700px) { 16 | .wrap { 17 | width: 100%; 18 | } 19 | header { 20 | padding: 20px 0; 21 | a.logo-link, 22 | ul.nav.nav-list { 23 | float: none; 24 | display: block; 25 | text-align: center; 26 | } 27 | li.nav-list-item { 28 | padding: 10px 10px; 29 | } 30 | } 31 | main.container, 32 | .home.post-list, 33 | .archive { 34 | margin-top: 0; 35 | } 36 | .archive .post-item { 37 | padding-left: 20px; 38 | } 39 | .post-content { 40 | h2, h3, h4, h5, h6 { 41 | max-width: 300px; 42 | left: 15px; 43 | } 44 | } 45 | .ds-thread, 46 | #disqus_thread { 47 | margin: 2em 10px; 48 | } 49 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Sean Sun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | - ⛺ 如果你期望使用 Astro + MDX 技术栈 2 | - 🌆 如果你希望在博客中增加一点不一样的东西 3 | - 😍 欢迎来使用和反馈新主题 [astro-theme-mia](https://github.com/infinity-ooo/astro-theme-mia) 4 | - 🚅 Astro 相比 Hexo 性能更强，MDX 提供的能力可实现更强大的交互能力 5 | 6 | --- 7 | 8 | ![hexo-theme-apollo](https://cloud.githubusercontent.com/assets/9530963/13026956/08e76eca-d277-11e5-8bfc-2e80cea20a0d.png) 9 | 10 | ## 文档 11 | 12 | - [中文文档](https://github.com/pinggod/hexo-theme-apollo/blob/master/doc%2Fdoc-zh.md) 13 | - [Document](https://github.com/pinggod/hexo-theme-apollo/blob/master/doc%2Fdoc-en.md) 14 | 15 | ## 贡献 16 | 17 | 通过 Fork 该项目，自由发挥自己的创造性想法可能更适合你。 18 | 19 | ## 安装 20 | 21 | ``` bash 22 | hexo init Blog 23 | cd Blog 24 | npm install 25 | npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive 26 | git clone https://github.com/pinggod/hexo-theme-apollo.git themes/apollo 27 | ``` 28 | 29 | ## 启用 30 | 31 | 修改 `_config.yml` 的 `theme` 配置项为 `apollo`: 32 | 33 | ```yaml 34 | theme: apollo 35 | 36 | # 在归档页面显示所有文章 37 | # 需要上面安装的 hexo-generator-archive 插件支持 38 | archive_generator: 39 | per_page: 0 40 | yearly: false 41 | monthly: false 42 | daily: false 43 | ``` 44 | 45 | ## 更新 46 | 47 | ``` bash 48 | cd themes/apollo 49 | git pull 50 | ``` 51 | 52 | ## License 53 | 54 | MIT 55 | -------------------------------------------------------------------------------- /layout/partial/comment.jade: -------------------------------------------------------------------------------- 1 | if theme.duoshuo 2 | .ds-thread(data-thread-key=page.path, data-title=page.title, data-url=page.permalink, data-author-key='1') 3 | script. 4 | var duoshuoQuery = {short_name:"#{theme.duoshuo}"}; 5 | (function() { 6 | var ds = document.createElement('script'); 7 | ds.type = 'text/javascript';ds.async = true; 8 | ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; 9 | ds.charset = 'UTF-8'; 10 | (document.getElementsByTagName('head')[0] 11 | || document.getElementsByTagName('body')[0]).appendChild(ds); 12 | })(); 13 | 14 | 15 | if theme.disqus 16 | #disqus_thread 17 | script. 18 | var disqus_shortname = '#{theme.disqus}'; 19 | var disqus_identifier = '#{page.path}'; 20 | var disqus_title = '#{page.title}'; 21 | var disqus_url = '#{config.url}/#{page.path}'; 22 | (function() { 23 | var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 24 | dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 25 | (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 26 | })(); 27 | script(id='dsq-count-scr' src='//#{theme.disqus}.disqus.com/count.js' async) -------------------------------------------------------------------------------- /source/scss/_partial/base.scss: -------------------------------------------------------------------------------- 1 | ::selection { 2 | color: #FFFFFF; 3 | background-color: #42b983; 4 | } 5 | 6 | html, body { 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | color: #34495e; 14 | font-size: 15px; 15 | line-height: 1.6; 16 | background-color: #fff; 17 | font-family: 'sourcesanspro', 'Helvetica Neue', Arial, sans-serif; 18 | } 19 | 20 | ul.nav, 21 | ul.post-list { 22 | margin: 0; 23 | padding: 0; 24 | list-style-type: none; 25 | } 26 | 27 | ul { 28 | margin: 1rem 0; 29 | } 30 | 31 | a, a:active { 32 | color: #2c3e50; 33 | text-decoration: none; 34 | } 35 | 36 | a.nav-list-link.active, 37 | a.nav-list-link:hover, 38 | a.post-title-link:hover { 39 | border-bottom: 2px solid #42b983; 40 | } 41 | 42 | hr { 43 | border: 0; 44 | } 45 | 46 | code { 47 | margin: 0 2px; 48 | padding: 3px 5px; 49 | color: #e96900; 50 | border-radius: 2px; 51 | white-space: inherit; 52 | } 53 | 54 | iframe, video { 55 | max-width: 100%; 56 | margin: 1rem auto; 57 | display: block; 58 | } 59 | 60 | table { 61 | width: 100%; 62 | margin: 1em auto; 63 | thead { 64 | background-color: #ddd; 65 | th { 66 | padding: 5px; 67 | min-width: 20px; 68 | } 69 | } 70 | tbody { 71 | tr:nth-child(2n) { 72 | background-color: #eee; 73 | } 74 | td { 75 | padding: 5px; 76 | vertical-align: text-top; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /layout/mixins/post.jade: -------------------------------------------------------------------------------- 1 | mixin postInfo(item) 2 | .post-info 3 | != full_date(item.date, 'll') 4 | if item.from && (is_home() || is_post()) 5 | a.post-from(href=item.from target="_blank" title=item.from)!= __('translated') 6 | 7 | 8 | //- Index Page 9 | mixin posts() 10 | ul.home.post-list 11 | - page.posts.each(function (item) { 12 | li.post-list-item 13 | article.post-block 14 | h2.post-title 15 | a.post-title-link(href= url_for(item.path)) 16 | != item.title 17 | +postInfo(item) 18 | .post-content 19 | != item.excerpt 20 | a.read-more(href= url_for(item.path))!= __('more') 21 | - }) 22 | 23 | //- Archive Page 24 | mixin postList() 25 | .archive 26 | - var year = 0; 27 | - var change = false; 28 | - page.posts.each(function (item) { 29 | - var itemYear = date(item.date, 'YYYY') - 0; 30 | - change = year !== itemYear; 31 | - year = change ? itemYear : year; 32 | if change 33 | h2.archive-year!= year 34 | .post-item 35 | +postInfo(item) 36 | a.post-title-link(href= url_for(item.path)) 37 | != item.title 38 | - }) 39 | 40 | //- Post Page 41 | mixin post(item) 42 | .post 43 | article.post-block 44 | h1.post-title 45 | != item.title 46 | +postInfo(item) 47 | .post-content 48 | != item.content -------------------------------------------------------------------------------- /doc/doc-zh.md: -------------------------------------------------------------------------------- 1 | ## Meta Description 2 | 3 | 如果你想设置页面的 meta description 信息，请在每篇 markdown 文件的头部添加 `desc` 字段信息——更实用的方式是在 scaffolds 文件夹中，将 `desc` 配置到常用模板中去，示例如下： 4 | 5 | ```md 6 | title: Lorem ipsum dolor 7 | date: 2015-12-31 14:49:13 8 | desc: Lorem ipsum dolor sit amet, consectetur. 9 | --- 10 | 11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, non numquam saepe ex ut. Deleniti culpa inventore consectetur nam saepe! 12 | ``` 13 | 14 | 生成结果: 15 | 16 | ```html 17 | 18 | ``` 19 | 20 | 如果没有配置该信息，Hexo-theme-apollo 会使用 `page.title` 和 `page.author` 来配置该标签。 21 | 22 | ## 标题 23 | 24 | 实际上，Hexo-theme-apollo 只支持两种标题：`h1~h3` 大标题，`h4~h6` 小标题，也就是说，`#` 和 `###` 的样式是一样的。之所以这么处理，是因为就个人感觉而言，我们不应该为文章设置过多的层级消耗读者的阅读精力。这相当于强制使用 Hexo-theme-apollo 的用户在写文章时注意文章结构，最多只能使用两层结构。 25 | 26 | 另一个潜在的原因是因为我还没有发现好的样式来处理不同层级的标题，单纯以大小和颜色很容易让页面变得混乱和冗杂。如果你有好的建议，请告诉我:)! 27 | 28 | ## 文章摘要 29 | 30 | 如果你想创建文章摘要用于向读者展示文章的核心内容，那么需要在文章摘要之后其他内容之前添加 HTML 注释标签 ``，使用方法如下图所示： 31 | 32 | ![https://cloud.githubusercontent.com/assets/9530963/14064341/0fa3c754-f432-11e5-8ad7-5d063d4a0886.png](https://cloud.githubusercontent.com/assets/9530963/14064341/0fa3c754-f432-11e5-8ad7-5d063d4a0886.png) 33 | 34 | ## 评论插件 35 | 36 | Hexo-theme-apollo 支持两种评论插件：Disqus 和 Duoshuo. 请在 `themes/apollo/_config.yml` 文件中做如下配置: 37 | 38 | ```yaml 39 | disqus: seansun 40 | ``` 41 | 42 | ## 警告块 43 | 44 | 使用警告块需要 `div` 标签和 `tip` 类名： 45 | 46 | ```html 47 |
48 | 预处理器很强大，但它只是编写 CSS 的辅助工具。出于对扩展和维护等方面的考虑，在大型项目中有必要使用预处理器构建 CSS；但是对于小型项目，原生的 CSS 可能是一种更好的选择。不要肆意使用预处理器！ 49 |
50 | ``` 51 | 52 | ![danger](https://cloud.githubusercontent.com/assets/9530963/11359678/489a510c-92b9-11e5-9256-341cef6999b6.png) 53 | 54 | ## 图例 55 | 56 | 也许你已经在我的博客中看到了很多图例：流程图、草图……也许你想问它们是怎么生成的……实际上，它们是用 Microsoft Powerpoint 制作的，可能这个答案让你有点小失望，但是你还是应该尝试用它制作一下图例，你会发现它真的很适合！ 57 | 58 | ## Last but not Least 59 | 60 | 专注文章内容的创作胜过博客样式的美观，祝各位玩的开心:) ! -------------------------------------------------------------------------------- /doc/doc-en.md: -------------------------------------------------------------------------------- 1 | ![hexo-theme-apollo](https://cloud.githubusercontent.com/assets/9530963/13026956/08e76eca-d277-11e5-8bfc-2e80cea20a0d.png) 2 | 3 | ## Install 4 | 5 | ``` bash 6 | hexo init Blog 7 | cd Blog 8 | npm install 9 | npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive 10 | git clone https://github.com/pinggod/hexo-theme-apollo.git themes/apollo 11 | ``` 12 | 13 | ## Enable 14 | 15 | Go to `_config.yml` and change the `theme` property to `apollo` value: 16 | 17 | ```yaml 18 | theme: apollo 19 | 20 | # Show all posts in archive page using hexo-generator-archive 21 | archive_generator: 22 | per_page: 0 23 | yearly: false 24 | monthly: false 25 | daily: false 26 | ``` 27 | 28 | ## Update 29 | 30 | ``` bash 31 | cd themes/apollo 32 | git pull 33 | ``` 34 | 35 | ## Meta Description 36 | 37 | If you want to set meta description information, please set `desc` property and value to each post — the better method is setting default `desc` property to your scaffolds files, just like: 38 | 39 | ```md 40 | title: Lorem ipsum dolor 41 | date: 2015-12-31 14:49:13 42 | desc: Lorem ipsum dolor sit amet, consectetur. 43 | --- 44 | 45 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, non numquam saepe ex ut. Deleniti culpa inventore consectetur nam saepe! 46 | ``` 47 | 48 | result: 49 | 50 | ```html 51 | 52 | ``` 53 | 54 | If there is no `desc` property or value, hexo-theme-apollo will use `page.title` and `page.author` instead of it. 55 | 56 | ## H1~H6 Title 57 | 58 | In fact, Hexo-theme-apollo only supoort two kinds of titles: h1~h3 belongs to what i called `big title`, and h4~h6 belongs to `small title`, this means that `#` and `###` have the same styles。 59 | 60 | Why i do this? I support that an article should be short and clean, dont let visitors spend much time to recognise the blog post structure. 61 | 62 | Another reason is that: i don't have met a great styles to distinguish between different kinds of headers.If you have gread idea about it, please let me know. 63 | 64 | ## post excerpt 65 | 66 | If you want to show excerpt(core content of article) to your visitors, do add HTML comment tag `` before else content，and finally the tag will be parsed to be a variable which represents post excerpt by Hexo: 67 | 68 | ![https://cloud.githubusercontent.com/assets/9530963/14064341/0fa3c754-f432-11e5-8ad7-5d063d4a0886.png](https://cloud.githubusercontent.com/assets/9530963/14064341/0fa3c754-f432-11e5-8ad7-5d063d4a0886.png) 69 | 70 | ## Comment Plugin 71 | 72 | Hexo-theme-apollo support two comment plugins: Disqus and Duoshuo. please set like this in your `themes/apollo/_config.yml`: 73 | 74 | ```yaml 75 | disqus: seansun 76 | ``` 77 | 78 | ## Danger Block 79 | 80 | Use html tag with special class property to render block: 81 | 82 | ```html 83 |
84 | 预处理器很强大，但它只是编写 CSS 的辅助工具。出于对扩展和维护等方面的考虑，在大型项目中有必要使用预处理器构建 CSS；但是对于小型项目，原生的 CSS 可能是一种更好的选择。不要肆意使用预处理器！ 85 |
86 | ``` 87 | 88 | ![danger](https://cloud.githubusercontent.com/assets/9530963/11359678/489a510c-92b9-11e5-9256-341cef6999b6.png) 89 | 90 | ## Legends 91 | 92 | This may lead to disappointed: i don't have spacial tool to create diagrams，but just Microsoft Powerpoint。 93 | 94 | ## Last but not Least 95 | 96 | Focus on blog posts, not blog's styles. Have fun :) ! 97 | -------------------------------------------------------------------------------- /source/scss/_partial/post.scss: -------------------------------------------------------------------------------- 1 | .post { 2 | padding-top: 1em; 3 | } 4 | 5 | .post-block { 6 | .post-title { 7 | margin: 0.65em 0; 8 | color: #2c3e50; 9 | font-size: 1.5em; 10 | } 11 | 12 | .post-info { 13 | color: #7f8c8d; 14 | margin: 1.2em 0; 15 | span { 16 | margin-left: 0.5rem; 17 | } 18 | a.post-from { 19 | margin-left: 0.5rem; 20 | padding: 3px 6px; 21 | border-radius: 5px; 22 | font-size: 12px; 23 | color: white; 24 | background-color: #E36B6B; 25 | } 26 | } 27 | } 28 | 29 | .post-content { 30 | h2, h3, h4, h5, h6 { 31 | position: relative; 32 | margin: 1em 0; 33 | a:before { 34 | content: "#"; 35 | color: #42b983; 36 | position: absolute; 37 | left: -0.7em; 38 | top: -4px; 39 | font-size: 1.2em; 40 | font-weight: bold; 41 | } 42 | } 43 | h4, h5, h6 { 44 | a:before { 45 | content: ""; 46 | } 47 | } 48 | 49 | h2, h3 { 50 | font-size: 22px; 51 | } 52 | 53 | h4, h5, h6 { 54 | font-size: 18px; 55 | } 56 | a { 57 | color: #42b983; 58 | word-break: break-all; 59 | } 60 | blockquote { 61 | margin: 2em 0; 62 | padding-left: 20px; 63 | border-left: 4px solid #42b983; 64 | } 65 | img { 66 | display: block; 67 | max-width: 100%; 68 | margin: 1em auto; 69 | } 70 | & > table, 71 | & > figure.highlight { 72 | box-shadow: 0 1px 2px rgba(0,0,0,0.125); 73 | } 74 | .tip { 75 | position: relative; 76 | margin: 2em 0; 77 | padding: 12px 24px 12px 30px; 78 | border-left: 4px solid #f66; 79 | border-top-right-radius: 2px; 80 | border-bottom-right-radius: 2px; 81 | background-color: #f8f8f8; 82 | br { 83 | display: none; 84 | } 85 | } 86 | .tip:before { 87 | position: absolute; 88 | top: 14px; 89 | left: -12px; 90 | content: "!"; 91 | width: 20px; 92 | height: 20px; 93 | border-radius: 100%; 94 | color: #fff; 95 | font-size: 14px; 96 | line-height: 20px; 97 | font-weight: bold; 98 | text-align: center; 99 | background-color: #f66; 100 | font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; 101 | } 102 | } 103 | 104 | #mask { 105 | position: fixed; 106 | overflow: scroll; 107 | width: 100%; 108 | height: 100%; 109 | padding: 1em 0; 110 | background-color: rgba(0, 0, 0, 0.5); 111 | z-index: 10; 112 | #mask-image { 113 | max-width: 95%; 114 | } 115 | } 116 | 117 | code, 118 | pre { 119 | font-size: 0.8em; 120 | background-color: #f8f8f8; 121 | font-family: 'Roboto Mono', Monaco, courier, monospace; 122 | } 123 | 124 | .highlight { 125 | position: relative; 126 | margin: 1em 0; 127 | border-radius: 2px; 128 | line-height: 1.1em; 129 | background-color: #f8f8f8; 130 | overflow-x: auto; 131 | table, tr, td { 132 | width: 100%; 133 | border-collapse: collapse; 134 | padding: 0; 135 | margin: 0; 136 | } 137 | .gutter { 138 | display: none; 139 | } 140 | .code pre { 141 | padding: 1.2em 1.4em; 142 | line-height: 1.5em; 143 | margin: 0; 144 | .line { 145 | width: auto; 146 | height: 18px; 147 | } 148 | } 149 | } 150 | 151 | %code-base { 152 | position: absolute; 153 | top: 0; 154 | right: 0; 155 | color: #ccc; 156 | text-align: right; 157 | font-size: 0.75em; 158 | padding: 5px 10px 0; 159 | line-height: 15px; 160 | height: 15px; 161 | font-weight: 600; 162 | } 163 | 164 | @mixin code-signs($keys) { 165 | @each $key in $keys { 166 | .highlight.#{$key} .code:after { 167 | content: to-upper-case($key); 168 | @extend %code-base; 169 | } 170 | } 171 | } 172 | 173 | $signs: ("html", "js", "bash", "css", "scss","diff", "java", "xml", "python", "json", "swift", "ruby", "perl", "php", "c", "java", "cpp", "ts"); 174 | @include code-signs($signs); 175 | 176 | .highlight.cpp .code:after { 177 | content: 'C++'; 178 | } 179 | 180 | pre { 181 | color: #525252; 182 | .function .keyword, 183 | .constant { 184 | color: #0092db; 185 | } 186 | .keyword, 187 | .attribute { 188 | color: #e96900; 189 | } 190 | .number, 191 | .literal { 192 | color: #ae81ff; 193 | } 194 | .tag, 195 | .tag .title, 196 | .change, 197 | .winutils, 198 | .flow, 199 | .lisp .title, 200 | .clojure .built_in, 201 | .nginx .title, 202 | .tex .special { 203 | color: #2973b7; 204 | } 205 | .symbol, 206 | .symbol .string, 207 | .value, 208 | .regexp { 209 | color: #42b983; 210 | } 211 | .title { 212 | color: #83B917; 213 | } 214 | .tag .value, 215 | .string, 216 | .subst, 217 | .haskell .type, 218 | .preprocessor, 219 | .ruby .class .parent, 220 | .built_in, 221 | .sql .aggregate, 222 | .django .template_tag, 223 | .django .variable, 224 | .smalltalk .class, 225 | .javadoc, 226 | .django .filter .argument, 227 | .smalltalk .localvars, 228 | .smalltalk .array, 229 | .attr_selector, 230 | .pseudo, 231 | .addition, 232 | .stream, 233 | .envvar, 234 | .apache .tag, 235 | .apache .cbracket, 236 | .tex .command, 237 | .prompt { 238 | color: #42b983; 239 | } 240 | .comment, 241 | .java .annotation, 242 | .python .decorator, 243 | .template_comment, 244 | .pi, 245 | .doctype, 246 | .shebang, 247 | .apache .sqbracket, 248 | .tex .formula { 249 | color: #b3b3b3; 250 | } 251 | .deletion { 252 | color: #BA4545; 253 | } 254 | .coffeescript .javascript, 255 | .javascript .xml, 256 | .tex .formula, 257 | .xml .javascript, 258 | .xml .vbscript, 259 | .xml .css, 260 | .xml .cdata { 261 | opacity: 0.5; 262 | } 263 | } 264 | -------------------------------------------------------------------------------- /source/css/apollo.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}::-moz-selection{color:#FFFFFF;background-color:#42b983}::selection{color:#FFFFFF;background-color:#42b983}html,body{width:100%;height:100%}body{margin:0;color:#34495e;font-size:15px;line-height:1.6;background-color:#fff;font-family:'sourcesanspro', 'Helvetica Neue', Arial, sans-serif}ul.nav,ul.post-list{margin:0;padding:0;list-style-type:none}ul{margin:1rem 0}a,a:active{color:#2c3e50;text-decoration:none}a.nav-list-link.active,a.nav-list-link:hover,a.post-title-link:hover{border-bottom:2px solid #42b983}hr{border:0}code{margin:0 2px;padding:3px 5px;color:#e96900;border-radius:2px;white-space:inherit}iframe,video{max-width:100%;margin:1rem auto;display:block}table{width:100%;margin:1em auto}table thead{background-color:#ddd}table thead th{padding:5px;min-width:20px}table tbody tr:nth-child(2n){background-color:#eee}table tbody td{padding:5px;vertical-align:text-top}header{min-height:60px}header .logo-link{float:left}header .nav{float:right;left:80px}header .logo-link img{height:60px}header .nav-list-item{display:inline-block;padding:19px 10px}header .nav-list-item a{font-size:16px;line-height:1.4}.home.post-list{margin:2em 0}.home.post-list .post-list-item{padding:1em 0 2em;border-bottom:1px solid #ddd}.home.post-list .post-list-item:last-child{border-bottom:0px}.home.post-list .post-content h2:before,.home.post-list .post-content h3:before,.home.post-list .post-content h4:before,.home.post-list .post-content h5:before,.home.post-list .post-content h6:before{content:''}.home.post-list .post-content>ul{list-style:initial}.home.post-list .read-more{color:#42b983}.archive{max-width:500px;margin:5em auto}.archive .post-item{padding:2px 0 0 50px}.archive .post-time,.archive .post-title-link{font-size:1rem}.archive .post-title-link{display:block;margin-left:125px;color:#42b983;word-break:break-all}.archive .post-title-link:hover{border-bottom:0;color:#267B54}.archive .post-info{float:left;width:125px;color:#7f8c8d}.post{padding-top:1em}.post-block .post-title{margin:0.65em 0;color:#2c3e50;font-size:1.5em}.post-block .post-info{color:#7f8c8d;margin:1.2em 0}.post-block .post-info span{margin-left:0.5rem}.post-block .post-info a.post-from{margin-left:0.5rem;padding:3px 6px;border-radius:5px;font-size:12px;color:white;background-color:#E36B6B}.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{position:relative;margin:1em 0}.post-content h2:before,.post-content h3:before,.post-content h4:before,.post-content h5:before,.post-content h6:before{content:"#";color:#42b983;position:absolute;left:-0.7em;top:-4px;font-size:1.2em;font-weight:bold}.post-content h4:before,.post-content h5:before,.post-content h6:before{content:""}.post-content h2,.post-content h3{font-size:22px}.post-content h4,.post-content h5,.post-content h6{font-size:18px}.post-content a{color:#42b983;word-break:break-all}.post-content blockquote{margin:2em 0;padding-left:20px;border-left:4px solid #42b983}.post-content img{display:block;max-width:100%;margin:1em auto}.post-content>table,.post-content>figure.highlight{box-shadow:0 1px 2px rgba(0,0,0,0.125)}.post-content .tip{position:relative;margin:2em 0;padding:12px 24px 12px 30px;border-left:4px solid #f66;border-top-right-radius:2px;border-bottom-right-radius:2px;background-color:#f8f8f8}.post-content .tip br{display:none}.post-content .tip:before{position:absolute;top:14px;left:-12px;content:"!";width:20px;height:20px;border-radius:100%;color:#fff;font-size:14px;line-height:20px;font-weight:bold;text-align:center;background-color:#f66;font-family:'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif}#mask{position:fixed;overflow:scroll;width:100%;height:100%;padding:1em 0;background-color:rgba(0,0,0,0.5);z-index:10}#mask #mask-image{max-width:95%}code,pre{font-size:0.8em;background-color:#f8f8f8;font-family:'Roboto Mono', Monaco, courier, monospace}.highlight{position:relative;margin:1em 0;border-radius:2px;line-height:1.1em;background-color:#f8f8f8;overflow-x:auto}.highlight table,.highlight tr,.highlight td{width:100%;border-collapse:collapse;padding:0;margin:0}.highlight .gutter{display:none}.highlight .code pre{padding:1.2em 1.4em;line-height:1.5em;margin:0}.highlight .code pre .line{width:auto;height:18px}.highlight.html .code:after,.highlight.js .code:after,.highlight.bash .code:after,.highlight.css .code:after,.highlight.scss .code:after,.highlight.diff .code:after,.highlight.java .code:after,.highlight.xml .code:after,.highlight.python .code:after,.highlight.json .code:after,.highlight.swift .code:after,.highlight.ruby .code:after,.highlight.perl .code:after,.highlight.php .code:after,.highlight.c .code:after,.highlight.cpp .code:after,.highlight.ts .code:after{position:absolute;top:0;right:0;color:#ccc;text-align:right;font-size:0.75em;padding:5px 10px 0;line-height:15px;height:15px;font-weight:600}.highlight.html .code:after{content:"HTML"}.highlight.js .code:after{content:"JS"}.highlight.bash .code:after{content:"BASH"}.highlight.css .code:after{content:"CSS"}.highlight.scss .code:after{content:"SCSS"}.highlight.diff .code:after{content:"DIFF"}.highlight.java .code:after{content:"JAVA"}.highlight.xml .code:after{content:"XML"}.highlight.python .code:after{content:"PYTHON"}.highlight.json .code:after{content:"JSON"}.highlight.swift .code:after{content:"SWIFT"}.highlight.ruby .code:after{content:"RUBY"}.highlight.perl .code:after{content:"PERL"}.highlight.php .code:after{content:"PHP"}.highlight.c .code:after{content:"C"}.highlight.java .code:after{content:"JAVA"}.highlight.cpp .code:after{content:"CPP"}.highlight.ts .code:after{content:"TS"}.highlight.cpp .code:after{content:'C++'}pre{color:#525252}pre .function .keyword,pre .constant{color:#0092db}pre .keyword,pre .attribute{color:#e96900}pre .number,pre .literal{color:#ae81ff}pre .tag,pre .tag .title,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special{color:#2973b7}pre .symbol,pre .symbol .string,pre .value,pre .regexp{color:#42b983}pre .title{color:#83B917}pre .tag .value,pre .string,pre .subst,pre .haskell .type,pre .preprocessor,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .javadoc,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#42b983}pre .comment,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#b3b3b3}pre .deletion{color:#BA4545}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}.paginator{margin:4em 0;text-align:center}.paginator .prev,.paginator .next{display:inline-block;margin:0 4px;padding:4px 12px;border-radius:4px;border-bottom:4px solid #3aa373;font-size:14px;color:#fff;background-color:#4fc08d}.paginator .prev:hover,.paginator .next:hover{background-color:#22bd77}.ds-thread,#disqus_thread{margin-bottom:2em}main.container{margin:2em 10px}@media screen and (min-width: 700px){.wrap{width:700px;margin:0 auto}header{padding:20px 100px}}@media screen and (max-width: 700px){.wrap{width:100%}header{padding:20px 0}header a.logo-link,header ul.nav.nav-list{float:none;display:block;text-align:center}header li.nav-list-item{padding:10px 10px}main.container,.home.post-list,.archive{margin-top:0}.archive .post-item{padding-left:20px}.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{max-width:300px;left:15px}.ds-thread,#disqus_thread{margin:2em 10px}}footer{padding-bottom:1px}footer .copyright{margin:4em 0;border-top:1px solid #ddd;text-align:center}footer .copyright p,footer .copyright a{color:#aaa;font-size:14px;font-weight:100}footer .copyright a:hover{color:#888}@font-face{font-family:'sourcesanspro';src:url("../font/sourcesanspro.woff2") format("woff2"),url("../font/sourcesanspro.woff") format("woff");font-weight:normal;font-style:normal} 2 | -------------------------------------------------------------------------------- /source/scss/_partial/normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS and IE text size adjust after device orientation change, 6 | * without disabling user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability of focused elements when they are also in an 95 | * active/hover state. 96 | */ 97 | 98 | a:active, 99 | a:hover { 100 | outline: 0; 101 | } 102 | 103 | /* Text-level semantics 104 | ========================================================================== */ 105 | 106 | /** 107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 108 | */ 109 | 110 | abbr[title] { 111 | border-bottom: 1px dotted; 112 | } 113 | 114 | /** 115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 116 | */ 117 | 118 | b, 119 | strong { 120 | font-weight: bold; 121 | } 122 | 123 | /** 124 | * Address styling not present in Safari and Chrome. 125 | */ 126 | 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | /** 132 | * Address variable `h1` font-size and margin within `section` and `article` 133 | * contexts in Firefox 4+, Safari, and Chrome. 134 | */ 135 | 136 | h1 { 137 | font-size: 2em; 138 | margin: 0.67em 0; 139 | } 140 | 141 | /** 142 | * Address styling not present in IE 8/9. 143 | */ 144 | 145 | mark { 146 | background: #ff0; 147 | color: #000; 148 | } 149 | 150 | /** 151 | * Address inconsistent and variable font size in all browsers. 152 | */ 153 | 154 | small { 155 | font-size: 80%; 156 | } 157 | 158 | /** 159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 160 | */ 161 | 162 | sub, 163 | sup { 164 | font-size: 75%; 165 | line-height: 0; 166 | position: relative; 167 | vertical-align: baseline; 168 | } 169 | 170 | sup { 171 | top: -0.5em; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | /* Embedded content 179 | ========================================================================== */ 180 | 181 | /** 182 | * Remove border when inside `a` element in IE 8/9/10. 183 | */ 184 | 185 | img { 186 | border: 0; 187 | } 188 | 189 | /** 190 | * Correct overflow not hidden in IE 9/10/11. 191 | */ 192 | 193 | svg:not(:root) { 194 | overflow: hidden; 195 | } 196 | 197 | /* Grouping content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Address margin not present in IE 8/9 and Safari. 202 | */ 203 | 204 | figure { 205 | margin: 1em 40px; 206 | } 207 | 208 | /** 209 | * Address differences between Firefox and other browsers. 210 | */ 211 | 212 | hr { 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ 358 | box-sizing: content-box; /* 2 */ 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define consistent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } --------------------------------------------------------------------------------