├── .travis.yml ├── LICENSE ├── README.md ├── _config.yml ├── layout ├── _partial │ ├── comments.jade │ ├── helpers.jade │ └── paginator.jade ├── archive.jade ├── base.jade ├── index.jade ├── page.jade └── post.jade └── source └── css ├── _variables.scss ├── highlight.scss ├── normalize.css └── very-simple.scss /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 6.0.0 4 | branches: 5 | only: 6 | - master 7 | before_install: 8 | - git remote set-branches --add origin source 9 | - git remote update 10 | - git checkout -b source --track origin/source 11 | - npm install -g hexo-cli 12 | install: 13 | - npm install 14 | script: 15 | - git submodule init 16 | - git submodule update 17 | - cd themes/very-simple 18 | - git remote update 19 | - git reset --hard origin/master 20 | - cd ../.. 21 | - hexo generate 22 | deploy: 23 | provider: pages 24 | skip_cleanup: true 25 | github_token: "${GH_TOKEN}" 26 | local_dir: public 27 | on: 28 | branch: master 29 | env: 30 | global: 31 | secure: ZVyyEZO+8qfwgKTOq0wDvJG3GUmL3k7NJxXG20UONpbF+01CJAe8Lq4FddX+zh7jyXqGZhdeQYj6gmy1eWU8gbYpahtA2ohvxbCyyVioUTxPOm9yZAt5IqXM1Vems8vvS6eTR5huij0T6gt4BzHHy1szrXl55g6ho+wC5N3GCxwxh23GZhGK10HZcVRj9sgCWlOeEMDneuZUfLa20qLcn4tdEzD5iL2A/mNsH1aFqPvm/7F8da22UiEZkp+/PfO9hawraS8ydD3DAINWlya69WnPM8rewPTgdFl+4n11YNFgmXxLF8//ioyOExGRRu70ZyfVXGyxj7yllZqRXle7NNbYGnLbDNYKNMwGIEOYzAzRWDpi+g7AafKIEm/sgiOjjRta4hLRzK/5csfFqdi1LC9fm3GA8+GFAQpCuRAenPyXw6glObKXtTfVm6leZAuC1mo61qu4HGCyJZMObFyD97vY+SQnTmxPp0Cvu7NW9HFe5o4mxHDwhJH5HkjMy9m6sym6qQWbKNKoiqj06SAdNC84uu8vSnwxgZVtFEdgYGOucE6tJNa4CmQXSaU7v/ry3kqK9zrl3/YnbvooSKHzZ40MVm+D+JlIT1OI16chr35imw9XRCXPYjvP8i67PdrU3zX+SqKC0UFW2NPAct1we7DCPOCqpGj6GxL99w7x6es= 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Mark Wallace 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 | # very-simple 2 | 3 | [Demo](http://lotabout.github.io/very-simple/) 4 | 5 | A theme that aimed to be very simple, creatd by [lotabout](https://github.com/lotabout) 6 | 7 | ## Installation 8 | 9 | Install theme and renderers: 10 | 11 | ``` 12 | git clone https://github.com/lotabout/very-simple themes/very-simple 13 | npm install hexo-renderer-sass --save 14 | npm install hexo-renderer-jade --save 15 | ``` 16 | 17 | Edit `_config.yml` in hexo root, change `theme` to `very-simple`. 18 | 19 | ## Configuration 20 | Default config: 21 | 22 | ``` 23 | # very-simple/_config.yml 24 | menu: 25 | Home: / 26 | Archives: archives 27 | social: 28 | email: 29 | twitter: 30 | github: 31 | googleplus: 32 | rss: /atom.xml 33 | fancybox: true 34 | duoshuo: #duoshuo_shortname 35 | disqus: #disqus _shortname 36 | google_analytics: #Google Analytics Tracking Code 37 | google_adsense_page_level_ads: #Google Adsense Page Level Ads Code 38 | ``` 39 | 40 | - menu - The navigation links on the header 41 | - social - Social icons such as email/github/twitter etc. to show on the footer 42 | - email - Email address 43 | - twitter - twitter account 44 | - github - github account 45 | - googleplus - Google Plus account 46 | - rss - RSS subscription link, learn more in [hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed) 47 | - fancybox - Enable [Fancybox](http://fancyapps.com/fancybox/) 48 | - duoshuo - [Duoshuo](http://duoshuo.com) shortname 49 | - disqus - [Disqus](https://disqus.com) shortname 50 | - google_analytics - Google Analytics Tracking Code 51 | - google_adsense_page_level_ads: - Google Adsense Page Level Ads Code 52 | 53 | If you want to contain this theme only as a submodule, then you may be 54 | unwilling to keep all configuration inside theme 55 | folder(`very-simple/_config.yml`). In this case, you can keep the 56 | configurations in root configuration file `/_config.yml` by: 57 | 58 | ``` 59 | # /_config.yml 60 | very_simple: 61 | menu: 62 | Home: / 63 | Archives: archives 64 | social: 65 | email: 66 | twitter: 67 | github: 68 | googleplus: 69 | rss: /atom.xml 70 | fancybox: true 71 | duoshuo: #duoshuo_shortname 72 | disqus: #disqus _shortname 73 | google_analytics: #Google Analytics Tracking Code 74 | google_adsense_page_level_ads: #Google Adsense Page Level Ads Code 75 | ``` 76 | 77 | ##Features 78 | 79 | #### Logo 80 | You can set a **favicon.ico** for your website, please put it into `source` folder of hexo directory, recommended size: 32px*32px. 81 | 82 | #### Pages 83 | 84 | To customize pages, such as traditional 'About' page, follow the following 85 | steps: 86 | 87 | 1. create a directory `about/` under `/source` 88 | 2. create a corresponding index page `index.md` under directory `about/`. 89 | 3. add link to the page to `menu` configuration: 90 | 91 | menu: 92 | About: about 93 | 94 | Note that you don't need to add directory and create `about.md` under 95 | `/source`. But the configuration should changed to: 96 | 97 | ``` 98 | menu: 99 | About: about.html 100 | ``` 101 | 102 | #### Comments 103 | 104 | You can control whether to show comment system(default to enabled) in pages. 105 | Just add `comments: true` or `comments: false` in `front-matter` section of 106 | page. i.e. 107 | 108 | ``` 109 | title: About 110 | date: 2013-12-26 22:52:56 111 | layout: page 112 | comments: true 113 | --- 114 | ``` 115 | 116 | #### Excerpt 117 | You can control the abstract of a post shown at index, by: 118 | 119 | 1. Filling a `description:` item in `front-matter` of the `post.md` 120 | 2. Just inserting a `` before your hidden content. 121 | 3. Otherwise it will fetch the first paragraph as excerpt. 122 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Header 2 | menu: 3 | ## If your site is put in a subdirectory, set Home as '/child/' 4 | Home: / 5 | Archives: archives 6 | 7 | social: 8 | email: 9 | twitter: 10 | weibo: 11 | github: 12 | googleplus: 13 | rss: /atom.xml 14 | 15 | # Content 16 | fancybox: true # set to true if you want to use it 17 | 18 | duoshuo: #duoshuo_shortname 19 | disqus: #disqus _shortname 20 | google_analytics: #Google Analytics Tracking Code 21 | google_adsense_page_level_ads: #Google Adsense Page Level Ads Code 22 | valine: 23 | enable: # set to true if you want to use it 24 | appID: # Leancloud appID 25 | appKey: # Leancloud appKey 26 | notify: # notify when getting replies(true/false) 27 | verify: # captcha when post a comment(true/false) 28 | placeholder: # placeholder text -------------------------------------------------------------------------------- /layout/_partial/comments.jade: -------------------------------------------------------------------------------- 1 | if theme.duoshuo 2 | .ds-thread(data-thread-key=page.path, data-title=page.title, data-url=page.permalink) 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 | if theme.disqus 15 | #disqus_thread 16 | | 27 | | 28 | | Blog comments powered by Disqus 29 | 30 | if theme.valine.enable 31 | .comment 32 | | 33 | | 34 | | 52 | -------------------------------------------------------------------------------- /layout/_partial/helpers.jade: -------------------------------------------------------------------------------- 1 | mixin a_with_current(href, content) 2 | - var url = url_for(href) 3 | if (href == config.root && (is_home() || is_post())) || is_current(href) 4 | a.sidebar-nav-item.active(href=url) 5 | = content 6 | else 7 | a.sidebar-nav-item(href=url) 8 | = content 9 | 10 | mixin social_icon(type, website, icon) 11 | if ((config.social && config.social[type]) || (theme.social && theme.social[type])) 12 | a(href=website + ((config.social && config.social[type]) || (theme.social && theme.social[type])), target="_blank") 13 | i.fa(class=icon) 14 | 15 | -------------------------------------------------------------------------------- /layout/_partial/paginator.jade: -------------------------------------------------------------------------------- 1 | .container.page-navigator-wrapper 2 | if page.total > 1 3 | .page-navigator 4 | != paginator({prev_text: '« Prev', next_text: 'Next »', base: page.base}) 5 | -------------------------------------------------------------------------------- /layout/archive.jade: -------------------------------------------------------------------------------- 1 | extends base 2 | 3 | block title 4 | if page.category 5 | title= page.category + " | " + config.title 6 | if page.tag 7 | title= page.tag + " | " + config.title 8 | if page.archive 9 | title= __('archive') + " | " + config.title 10 | 11 | block main 12 | article 13 | .container 14 | if page.category || page.tag 15 | h1.label-title= (page.category || page.tag) 16 | .post 17 | // show all categories and tags 18 | if !(page.category || page.tag) 19 | .all-categories 20 | ul.tag-box.list-unstyled 21 | for category in site.categories.sort('name').toArray() 22 | li 23 | a(href=url_for(category.path))= category.name 24 | span= category.length 25 | .all-tags 26 | ul.tag-box.list-unstyled 27 | for tag in site.tags.sort('name').toArray() 28 | li 29 | a(href=url_for(tag.path))= tag.name 30 | span= tag.length 31 | 32 | .post-archive 33 | - 34 | function groupBy(collection, keyFunc) { 35 | var result = {}; 36 | collection.forEach(function(x) { 37 | var key = keyFunc(x); 38 | if (hasOwnProperty.call(result, key)) { 39 | result[key].push(x); 40 | } else { 41 | result[key] = [x]; 42 | } 43 | }); 44 | return result; 45 | } 46 | 47 | each posts, year in groupBy(page.posts.toArray(), function(p){return -p.date.format('YYYY')}) 48 | h2= -year 49 | ul.listing 50 | for post in posts 51 | li 52 | span.date= post.date.format('YYYY/MM/DD') 53 | a(href=url_for(post.path), title=post.title) 54 | = post.title 55 | include _partial/paginator.jade 56 | -------------------------------------------------------------------------------- /layout/base.jade: -------------------------------------------------------------------------------- 1 | if page.title 2 | - var current_title = page.title 3 | else 4 | - var current_title = config.title 5 | 6 | if (config.root != '/') 7 | - var root = config.root 8 | else 9 | - var root = '' 10 | 11 | if config.feed 12 | case config.feed.type 13 | when "rss2" 14 | - var feed_type='application/rss+xml' 15 | when "atom" 16 | default 17 | - var feed_type='application/atom+xml' 18 | 19 | if config.very_simple 20 | - for (var key in config.very_simple) { theme[key] = config.very_simple[key]; } 21 | 22 | include _partial/helpers 23 | 24 | doctype html 25 | html 26 | head 27 | meta(http-equiv="content-type", content="text/html; charset=utf-8") 28 | meta(content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0", name="viewport") 29 | meta(content="yes", name="apple-mobile-web-app-capable") 30 | meta(content="black-translucent", name="apple-mobile-web-app-status-bar-style") 31 | meta(content="telephone=no", name="format-detection") 32 | meta(name="description", content=config.description) 33 | block title 34 | link(rel='stylesheet', type='text/css', href=root + '/css/normalize.css') 35 | link(rel='stylesheet', type='text/css', href=root + '/css/highlight.css') 36 | link(rel='stylesheet', type='text/css', href=root + '/css/very-simple.css') 37 | link(rel='stylesheet', type='text/css', href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css") 38 | link(rel='Shortcut Icon', type='image/x-icon',href=url_for('favicon.ico')) 39 | if config.feed 40 | link(rel='alternate', type=feed_type, href=url_for(config.feed.path)) 41 | 42 | if theme.google_adsense_page_level_ads 43 | script(async, src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js") 44 | script. 45 | (adsbygoogle = window.adsbygoogle || []).push({ 46 | google_ad_client: "#{theme.google_adsense_page_level_ads}", 47 | enable_page_level_ads: true 48 | }); 49 | 50 | body 51 | 52 | // include the sidebar 53 | // include ./includes/sidebar.jade 54 | 55 | // Blog title and subtitle 56 | header: .container.header 57 | a#logo.title(href=url_for('.'))= config.title 58 | span.subtitle= config.subtitle 59 | label#toggle-menu(for="menu", onclick) 60 | i.fa.fa-bars 61 | 62 | // use checkbox hack for toggle nav-bar on small screens 63 | input#menu(type="checkbox") 64 | 65 | // Navigation Links 66 | nav#nav 67 | .container 68 | each nav, name in theme.menu 69 | +a_with_current(nav, __(name)) 70 | 71 | #header-margin-bar 72 | 73 | block main 74 | 75 | footer#footer 76 | .container 77 | .bar 78 | .social 79 | +social_icon('email', "mailto:", "fa-envelope-o") 80 | +social_icon('twitter', 'http://twitter.com/', 'fa-twitter') 81 | +social_icon('weibo', 'http://weibo.com/', 'fa-weibo') 82 | +social_icon('github', 'https://github.com/', 'fa-github') 83 | +social_icon('googleplus', 'https://plus.google.com/', 'fa-google-plus') 84 | +social_icon('rss', "", "fa-rss") 85 | 86 | .footer 87 | - var year = date(new Date(), 'YYYY'); 88 | = '© ' + year + ' ' 89 | a(href='/', rel='nofollow')= config.author 90 | = '. Powered by ' 91 | a(rel='nofollow', target='_blank', href='https://hexo.io') Hexo 92 | = '. Theme ' 93 | a(target='_blank', href='https://github.com/lotabout/very-simple') very-simple 94 | |. 95 | 96 | if theme.fancybox 97 | link(rel='stylesheet', type='text/css', href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.css") 98 | script(src="//cdn.bootcss.com/jquery/2.0.3/jquery.min.js") 99 | script(src="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js") 100 | 101 | script. 102 | $(document).ready(function() { 103 | $(".fancybox").fancybox(); 104 | }); 105 | 106 | if theme.google_analytics 107 | script. 108 | (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 109 | function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 110 | e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 111 | e.src='//www.google-analytics.com/analytics.js'; 112 | r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 113 | ga('create','#{theme.google_analytics}');ga('send','pageview'); 114 | -------------------------------------------------------------------------------- /layout/index.jade: -------------------------------------------------------------------------------- 1 | extends base 2 | - var current_title = page.title || tag.name || category.name || site.title 3 | 4 | block title 5 | title= (config.title ? (config.subtitle ? config.title + " | " + config.subtitle : config.title) : "") 6 | 7 | block main 8 | 9 | article 10 | #index-main.container.entries 11 | for post in page.posts.toArray() 12 | .post-entry 13 | .post-time= post.date.format(config.date_format) 14 | .post-desc 15 | .post-title 16 | if post.link 17 | a(href=url_for(post.link),target="_blank", itemprop="url")= post.title 18 | else 19 | a(href=url_for(post.path))= post.title 20 | 21 | .post-content 22 | if post.description 23 | != post.description 24 | else if post.excerpt 25 | != post.excerpt 26 | else if post.content 27 | - var br = post.content.indexOf('

') 28 | if br < 0 29 | != post.content 30 | else 31 | != post.content.substring(0, br + 4) 32 | 33 | .post-meta 34 | if (post.tags && post.tags.length) 35 | .post-tags 36 | != list_tags(post.tags, {show_count: false, class: 'post-tag', style:'none', separator:'/'}) 37 | if (post.categories && post.categories.length) 38 | .post-categories 39 | != list_categories(post.categories, {show_count: false, class: 'post-category', style: 'none', separator: '>'}) 40 | 41 | include _partial/paginator.jade 42 | -------------------------------------------------------------------------------- /layout/page.jade: -------------------------------------------------------------------------------- 1 | extends base 2 | block title 3 | title= page.title + " | " + config.title 4 | 5 | 6 | block main 7 | .wrapper 8 | .container.post-header 9 | h1: = page.title 10 | article 11 | .container.post 12 | != page.content 13 | if page.comments 14 | .container 15 | hr 16 | include _partial/comments 17 | -------------------------------------------------------------------------------- /layout/post.jade: -------------------------------------------------------------------------------- 1 | extends base 2 | 3 | block title 4 | title= page.title + " | " + config.title 5 | 6 | block main 7 | 8 | // gallery that comes before the header 9 | if page.photos 10 | if page.photos.length 11 | .article-gallery 12 | .article-gallery-photos.container 13 | for photo in page.photos 14 | a.article-gallery-img.fancybox(href=url_for(photo), rel="gallery_" + page._id) 15 | img(src=url_for(photo), itemprop="image") 16 | 17 | .wrapper 18 | .container.post-header 19 | h1: = page.title 20 | 21 | .wrapper 22 | .container.meta 23 | .post-time= page.date.format(config.date_format) 24 | if (page.categories && page.categories.length) 25 | .post-categories 26 | != list_categories(page.categories, {show_count: false, class: 'post-category', style: 'none', separator: '>'}) 27 | if (page.tags && page.tags.length) 28 | .post-tags 29 | != list_tags(page.tags, {show_count: false, class: 'post-tag', style:'none', separator:'/'}) 30 | 31 | 32 | article 33 | .container.post 34 | != page.content 35 | 36 | // comment system 37 | .container 38 | hr 39 | include _partial/comments 40 | 41 | -------------------------------------------------------------------------------- /source/css/_variables.scss: -------------------------------------------------------------------------------- 1 | // define variables 2 | 3 | $font-mono: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; 4 | $font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; 5 | $font-serif: Georgia, "Times New Roman", serif; 6 | $font-blog-title: "Comic Sans MS", cursive, LiSu, sans-serif; 7 | $font-post-title: "Titillium Web","Helvetica Neue",Helvetica, Arial,"Microsoft Yahei",sans-serif; 8 | $font-header: 'Helvetica Neue', "Microsoft Yahei","微软雅黑", "WenQuanYi Micro Hei", SimHei, Heiti, Impact, Charcoal, serif; 9 | $font-content: Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Heiti, ubuntu, sans-serif; 10 | 11 | $font-size-main: 16px; 12 | $font-size-code: 16px; 13 | $line-height: 1.6em; 14 | $line-height-title: 1.1em; 15 | 16 | // colors 17 | $color-background: white; 18 | $color-border: #CCC; 19 | $color-link: blue; 20 | $color-near-white: #FAFAFA; 21 | $color-underscore: #5DB1B4; 22 | $color-main-link: #368CCB; 23 | $color-main-link-hover: #2A64C8; 24 | 25 | 26 | // width height 27 | $article-padding: 1em; 28 | $vertical-bar-width: 6px; 29 | 30 | 31 | .clearfix { 32 | &::after { 33 | content: ""; 34 | display: table; 35 | clear: both; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /source/css/highlight.scss: -------------------------------------------------------------------------------- 1 | // https://github.com/chriskempson/tomorrow-theme 2 | // use theme: night 3 | 4 | @import "_variables"; 5 | 6 | // theme: night 7 | $highlight-background: #1d1f21; 8 | $highlight-current-line: #282a2e; 9 | $highlight-selection: #373b41; 10 | $highlight-foreground: #c5c8c6; 11 | $highlight-comment: #969896; 12 | $highlight-red: #cc6666; 13 | $highlight-orange: #de935f; 14 | $highlight-yellow: #f0c674; 15 | $highlight-green: #b5bd68; 16 | $highlight-aqua: #8abeb7; 17 | $highlight-blue: #81a2be; 18 | $highlight-purple : #b294bb; 19 | 20 | // theme: night eighties 21 | $highlight-background: #2d2d2d; 22 | $highlight-current-line: #393939; 23 | $highlight-selection: #515151; 24 | $highlight-foreground: #cccccc; 25 | $highlight-comment: #999999; 26 | $highlight-red: #f2777a; 27 | $highlight-orange: #f99157; 28 | $highlight-yellow: #ffcc66; 29 | $highlight-green: #99cc99; 30 | $highlight-aqua: #66cccc; 31 | $highlight-blue: #6699cc; 32 | $highlight-purple: #cc99cc; 33 | 34 | .code-block { 35 | background: $highlight-background; 36 | //margin: 0 $article-padding * -1; 37 | margin: 2ex 0; 38 | padding: 1rem $article-padding; 39 | border-style: solid; 40 | border-color: #333; 41 | border: 1px 0; 42 | border-radius: 2px; 43 | overflow: auto; 44 | color: $highlight-foreground; 45 | font-size: $font-size-code; 46 | line-height: $line-height; 47 | } 48 | 49 | .line-numbers { 50 | color: #666; 51 | font-size: $font-size-code; 52 | } 53 | 54 | article { 55 | pre, code { 56 | font-family: $font-mono; 57 | } 58 | 59 | code { 60 | background: $color-background; 61 | text-shadow: 0 1px #fff; 62 | padding: 0 0.3rem; 63 | } 64 | 65 | pre { 66 | @extend .code-block; 67 | code { 68 | background: none; 69 | text-shadow: none; 70 | padding: 0; 71 | } 72 | } 73 | 74 | .highlight { 75 | @extend .code-block; 76 | 77 | pre { 78 | border: none; 79 | margin: 0; 80 | padding: 0; 81 | } 82 | table { 83 | margin: 0; 84 | width: auto; 85 | } 86 | td { 87 | border: none; 88 | padding: 0; 89 | } 90 | figcaption { 91 | @extend .clearfix; 92 | font-size: 0.85em; 93 | color: $highlight-comment; 94 | line-height: 1em; 95 | margin-bottom: 1em; 96 | } 97 | a { 98 | color: $highlight-aqua !important; 99 | text-decoration: none; 100 | float: right; 101 | &:hover { 102 | color: $highlight-blue !important; 103 | 104 | } 105 | } 106 | .gutter pre { 107 | @extend .line-numbers; 108 | text-align: right; 109 | padding-right: 20px; 110 | } 111 | .line { 112 | height: $line-height; 113 | } 114 | } 115 | 116 | .gist-not-used { 117 | //margin: 0 $article-padding * -1; 118 | margin: 0; 119 | border-style: solid; 120 | border-color: $color-border; 121 | border-width: 1px 0; 122 | background: $highlight-background; 123 | padding: 1em $article-padding 1em 2px; 124 | .gist-file { 125 | border: none; 126 | font-family: $font-mono; 127 | margin: 0; 128 | .gist-data { 129 | background: none; 130 | border: none; 131 | .line-numbers { 132 | @extend .line-numbers; 133 | background: none; 134 | border: none; 135 | padding: 0 20px 0 0; 136 | } 137 | .line-data { 138 | padding: 0 !important; 139 | } 140 | } 141 | .highlight { 142 | margin: 0; 143 | padding: 0; 144 | border: none; 145 | } 146 | .gist-meta { 147 | background: $highlight-background; 148 | color: $highlight-comment; 149 | font: 0.85em $font-sans; 150 | text-shadow: 0 0; 151 | padding: 0; 152 | margin-top: 1em; 153 | margin-left: $article-padding; 154 | // 155 | } 156 | a { 157 | color: $color-link; 158 | font-weight: normal; 159 | &:hover { 160 | text-decoration: underline; 161 | } 162 | } 163 | } 164 | } 165 | 166 | // for jsfiddle 167 | iframe { 168 | border: 1px solid #CCC; 169 | } 170 | } 171 | 172 | 173 | pre { 174 | .comment, 175 | .title { 176 | color: $highlight-comment; 177 | } 178 | .variable, 179 | .attribute, 180 | .tag, 181 | .regexp, 182 | .ruby .constant, 183 | .xml .tag .title, 184 | .xml .pi, 185 | .xml .doctype, 186 | .html .doctype, 187 | .css .id, 188 | .css .class, 189 | .css .pseudo { 190 | color: $highlight-red; 191 | } 192 | .number, 193 | .preprocessor, 194 | .built_in, 195 | .literal, 196 | .params, 197 | .constant { 198 | color: $highlight-orange; 199 | } 200 | .class, 201 | .ruby .class .title, 202 | .css .rules .attribute { 203 | color: $highlight-green; 204 | } 205 | .string, 206 | .value, 207 | .inheritance, 208 | .header, 209 | .ruby .symbol, 210 | .xml .cdata { 211 | color: $highlight-green; 212 | } 213 | .css .hexcolor{ 214 | color: $highlight-aqua; 215 | } 216 | .function, 217 | .python .decorator, 218 | .python .title, 219 | .ruby .function .title, 220 | .ruby .title .keyword, 221 | .perl .sub, 222 | .javascript .title, 223 | .coffeescript .title { 224 | color: $highlight-blue; 225 | } 226 | .keyword, 227 | .javascript .function { 228 | color: $highlight-purple; 229 | } 230 | } 231 | -------------------------------------------------------------------------------- /source/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * 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/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 when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title], 110 | acronym[title] { 111 | border-bottom: 1px dotted; 112 | text-decoration: none; 113 | } 114 | 115 | /** 116 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 117 | */ 118 | 119 | b, 120 | strong { 121 | font-weight: bold; 122 | } 123 | 124 | /** 125 | * Address styling not present in Safari and Chrome. 126 | */ 127 | 128 | dfn { 129 | font-style: italic; 130 | } 131 | 132 | /** 133 | * Address variable `h1` font-size and margin within `section` and `article` 134 | * contexts in Firefox 4+, Safari, and Chrome. 135 | */ 136 | 137 | h1 { 138 | font-size: 2em; 139 | margin: 0.67em 0; 140 | } 141 | 142 | /** 143 | * Address styling not present in IE 8/9. 144 | */ 145 | 146 | mark { 147 | background: #ff0; 148 | color: #000; 149 | } 150 | 151 | /** 152 | * Address inconsistent and variable font size in all browsers. 153 | */ 154 | 155 | small { 156 | font-size: 80%; 157 | } 158 | 159 | /** 160 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 161 | */ 162 | 163 | sub, 164 | sup { 165 | font-size: 75%; 166 | line-height: 0; 167 | position: relative; 168 | vertical-align: baseline; 169 | } 170 | 171 | sup { 172 | top: -0.5em; 173 | } 174 | 175 | sub { 176 | bottom: -0.25em; 177 | } 178 | 179 | /* Embedded content 180 | ========================================================================== */ 181 | 182 | /** 183 | * Remove border when inside `a` element in IE 8/9/10. 184 | */ 185 | 186 | img { 187 | border: 0; 188 | } 189 | 190 | /** 191 | * Correct overflow not hidden in IE 9/10/11. 192 | */ 193 | 194 | svg:not(:root) { 195 | overflow: hidden; 196 | } 197 | 198 | /* Grouping content 199 | ========================================================================== */ 200 | 201 | /** 202 | * Address margin not present in IE 8/9 and Safari. 203 | */ 204 | 205 | figure { 206 | margin: 1em 40px; 207 | } 208 | 209 | /** 210 | * Address differences between Firefox and other browsers. 211 | */ 212 | 213 | hr { 214 | -moz-box-sizing: content-box; 215 | box-sizing: content-box; 216 | height: 0; 217 | } 218 | 219 | /** 220 | * Contain overflow in all browsers. 221 | */ 222 | 223 | pre { 224 | overflow: auto; 225 | } 226 | 227 | /** 228 | * Address odd `em`-unit font size rendering in all browsers. 229 | */ 230 | 231 | code, 232 | kbd, 233 | pre, 234 | samp { 235 | font-family: monospace, monospace; 236 | font-size: 1em; 237 | } 238 | 239 | /* Forms 240 | ========================================================================== */ 241 | 242 | /** 243 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 244 | * styling of `select`, unless a `border` property is set. 245 | */ 246 | 247 | /** 248 | * 1. Correct color not being inherited. 249 | * Known issue: affects color of disabled elements. 250 | * 2. Correct font properties not being inherited. 251 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 252 | */ 253 | 254 | button, 255 | input, 256 | optgroup, 257 | select, 258 | textarea { 259 | color: inherit; /* 1 */ 260 | font: inherit; /* 2 */ 261 | margin: 0; /* 3 */ 262 | } 263 | 264 | /** 265 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 266 | */ 267 | 268 | button { 269 | overflow: visible; 270 | } 271 | 272 | /** 273 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 274 | * All other form control elements do not inherit `text-transform` values. 275 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 276 | * Correct `select` style inheritance in Firefox. 277 | */ 278 | 279 | button, 280 | select { 281 | text-transform: none; 282 | } 283 | 284 | /** 285 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 286 | * and `video` controls. 287 | * 2. Correct inability to style clickable `input` types in iOS. 288 | * 3. Improve usability and consistency of cursor style between image-type 289 | * `input` and others. 290 | */ 291 | 292 | button, 293 | html input[type="button"], /* 1 */ 294 | input[type="reset"], 295 | input[type="submit"] { 296 | -webkit-appearance: button; /* 2 */ 297 | cursor: pointer; /* 3 */ 298 | } 299 | 300 | /** 301 | * Re-set default cursor for disabled elements. 302 | */ 303 | 304 | button[disabled], 305 | html input[disabled] { 306 | cursor: default; 307 | } 308 | 309 | /** 310 | * Remove inner padding and border in Firefox 4+. 311 | */ 312 | 313 | button::-moz-focus-inner, 314 | input::-moz-focus-inner { 315 | border: 0; 316 | padding: 0; 317 | } 318 | 319 | /** 320 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 321 | * the UA stylesheet. 322 | */ 323 | 324 | input { 325 | line-height: normal; 326 | } 327 | 328 | /** 329 | * It's recommended that you don't attempt to style these elements. 330 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 331 | * 332 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 333 | * 2. Remove excess padding in IE 8/9/10. 334 | */ 335 | 336 | input[type="checkbox"], 337 | input[type="radio"] { 338 | box-sizing: border-box; /* 1 */ 339 | padding: 0; /* 2 */ 340 | } 341 | 342 | /** 343 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 344 | * `font-size` values of the `input`, it causes the cursor style of the 345 | * decrement button to change from `default` to `text`. 346 | */ 347 | 348 | input[type="number"]::-webkit-inner-spin-button, 349 | input[type="number"]::-webkit-outer-spin-button { 350 | height: auto; 351 | } 352 | 353 | /** 354 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 355 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 356 | * (include `-moz` to future-proof). 357 | */ 358 | 359 | input[type="search"] { 360 | -webkit-appearance: textfield; /* 1 */ 361 | -moz-box-sizing: content-box; 362 | -webkit-box-sizing: content-box; /* 2 */ 363 | box-sizing: content-box; 364 | } 365 | 366 | /** 367 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 368 | * Safari (but not Chrome) clips the cancel button when the search input has 369 | * padding (and `textfield` appearance). 370 | */ 371 | 372 | input[type="search"]::-webkit-search-cancel-button, 373 | input[type="search"]::-webkit-search-decoration { 374 | -webkit-appearance: none; 375 | } 376 | 377 | /** 378 | * Define consistent border, margin, and padding. 379 | */ 380 | 381 | fieldset { 382 | border: 1px solid #c0c0c0; 383 | margin: 0 2px; 384 | padding: 0.35em 0.625em 0.75em; 385 | } 386 | 387 | /** 388 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 389 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 390 | */ 391 | 392 | legend { 393 | border: 0; /* 1 */ 394 | padding: 0; /* 2 */ 395 | } 396 | 397 | /** 398 | * Remove default vertical scrollbar in IE 8/9/10/11. 399 | */ 400 | 401 | textarea { 402 | overflow: auto; 403 | } 404 | 405 | /** 406 | * Don't inherit the `font-weight` (applied by a rule above). 407 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 408 | */ 409 | 410 | optgroup { 411 | font-weight: bold; 412 | } 413 | 414 | /* Tables 415 | ========================================================================== */ 416 | 417 | /** 418 | * Remove most spacing between table cells. 419 | */ 420 | 421 | table { 422 | border-collapse: collapse; 423 | border-spacing: 0; 424 | } 425 | 426 | td, 427 | th { 428 | padding: 0; 429 | } 430 | -------------------------------------------------------------------------------- /source/css/very-simple.scss: -------------------------------------------------------------------------------- 1 | @import "_variables"; 2 | 3 | /** 4 | * reset global 5 | */ 6 | html, body { 7 | margin: 0; 8 | font-size: $font-size-main; 9 | position: relative; 10 | 11 | a { 12 | outline: none; 13 | } 14 | } 15 | 16 | /** 17 | * responsive breaks 18 | */ 19 | $break-level-1: 320px; 20 | $break-level-2: 414px; 21 | $break-level-3-1: 680px; 22 | $break-level-3: 768px; 23 | $break-level-4: 900px; // > 900px timeline will work. 24 | $break-level-5: 980px; 25 | 26 | /* 980px work fine */ 27 | 28 | /** 29 | * Global settings of layout 30 | */ 31 | 32 | .container { 33 | box-sizing: border-box; 34 | margin: auto; 35 | width: 100%; 36 | max-width: 720px; 37 | 38 | @media only screen and (max-width: $break-level-5) { 39 | max-width: 680px; 40 | } 41 | 42 | @media only screen and (max-width: $break-level-3) { 43 | max-width: 88.54%; 44 | } 45 | 46 | @media only screen and (max-width: $break-level-2) { 47 | max-width: 95%; 48 | } 49 | } 50 | 51 | 52 | body { 53 | display: flex; 54 | flex-direction: column; 55 | min-height: 100vh; 56 | color: #333; 57 | font-family: $font-content; 58 | } 59 | 60 | article { 61 | flex-grow: 1; 62 | } 63 | 64 | /** 65 | * header 66 | */ 67 | header { 68 | padding: 1em 0; 69 | 70 | background: #333; 71 | color: #F1F1F1; 72 | 73 | .container{ 74 | font-family: $font-blog-title; 75 | border-bottom: .3em solid #333; 76 | 77 | .title { 78 | color: #EEE; 79 | text-decoration: none; 80 | font-size: 2.4em; 81 | } 82 | .subtitle { 83 | color: #aaa; 84 | font-size: 1.4em; 85 | margin-left: 1.2em; 86 | } 87 | } 88 | @media only screen and (max-width: $break-level-2) { 89 | padding: 0; 90 | 91 | .container.header { 92 | display: flex; 93 | align-items: center; 94 | 95 | .title { 96 | flex: 1; 97 | } 98 | .subtitle { 99 | display: none; 100 | } 101 | } 102 | } 103 | } 104 | 105 | /* navigation bar */ 106 | nav { 107 | top: 0; 108 | position: sticky; 109 | background: #333; 110 | font-family: $font-mono; 111 | font-size: 1em; 112 | z-index: 10; 113 | 114 | @media only screen and (max-width: $break-level-2) { 115 | position: static; 116 | } 117 | } 118 | 119 | #nav { 120 | text-align: right; 121 | 122 | a { 123 | &, &:visited { 124 | text-decoration: none; 125 | color: #F1F1F1; 126 | } 127 | 128 | padding: .625em 1.25em; 129 | display: inline-block; 130 | position: relative; 131 | 132 | // decoration 133 | &::after { 134 | content: ''; 135 | display: block; 136 | position: absolute; 137 | right: -3px; 138 | top: 19px; 139 | height: 6px; 140 | width: 6px; 141 | background: white; 142 | opacity: 0.5; 143 | } 144 | 145 | // for hover style 146 | &::before { 147 | content: ''; 148 | display: block; 149 | position: absolute; 150 | left: 0; 151 | bottom: 0; 152 | height: 3px; 153 | width: 0; 154 | background: $color-underscore; 155 | transition: width .25s; 156 | } 157 | 158 | &.active, &:hover { 159 | &::before { 160 | width: 100%; 161 | } 162 | } 163 | 164 | &:last-child::after { 165 | display: none; 166 | } 167 | } 168 | } 169 | 170 | /* menu button on small screen */ 171 | #menu { 172 | position: absolute; 173 | top: -9999px; 174 | left: -9999px; 175 | } 176 | 177 | #toggle-menu{ 178 | cursor: pointer; 179 | user-select: none; 180 | display: none; // large display, hide it 181 | } 182 | 183 | @media only screen and (max-width: $break-level-2) { 184 | #toggle-menu { 185 | display: block; 186 | color: #EEE; 187 | font-size: 2.2em; 188 | } 189 | 190 | #nav { 191 | display: none; 192 | } 193 | 194 | #menu:checked ~ #nav { 195 | display: block; 196 | 197 | a { 198 | display: block; 199 | 200 | // style 201 | color: #CCC; 202 | border-bottom: 1px solid #CCC; 203 | 204 | &:last-child { 205 | border-bottom: none; 206 | } 207 | 208 | &:hover { 209 | background: #CCC; 210 | color: #333; 211 | } 212 | 213 | // disable hover style 214 | &::before { 215 | display: none; 216 | } 217 | 218 | // enable decoration 219 | &:last-child::after { 220 | display: block; 221 | } 222 | } 223 | } 224 | } 225 | 226 | #header-margin-bar { 227 | margin: 20px 0; 228 | } 229 | 230 | /* post entries, version 2*/ 231 | 232 | // vertical bar 233 | #index-main.container { 234 | position: relative; 235 | box-sizing: border-box; 236 | 237 | &::before { 238 | content: ''; 239 | position: absolute; 240 | height: 100%; 241 | width: 6px; 242 | background: #666; // #333 with opacity 0.75 243 | 244 | @media only screen and (max-width: $break-level-4) { 245 | content: none; 246 | } 247 | } 248 | } 249 | 250 | // template style for tags of post 251 | .post-tags-template { 252 | display: inline-block; 253 | margin-left: .5rem; 254 | text-align: right; 255 | color: #666; 256 | opacity: .6; 257 | transition: opacity .3s ease-in-out; 258 | 259 | &:hover { 260 | opacity: 1; 261 | } 262 | 263 | &::before { 264 | content: "\f02c"; 265 | font-family: FontAwesome; 266 | } 267 | 268 | a{ 269 | text-decoration: none; 270 | outline: none; 271 | color: #666; 272 | margin: 0 .3rem; 273 | &:hover { 274 | color: #333; 275 | border-bottom: 2px solid #666; 276 | } 277 | 278 | transition: border .2s ease-in-out; 279 | } 280 | } 281 | 282 | $outer-circle-radius: 10px; 283 | $inner-circle-radius: 8px; 284 | $post-time-space: 1em; 285 | .post-entry { 286 | font-size: 16px; 287 | line-height: 1.5; 288 | margin: 1.5em 0; 289 | padding: 0 1.5em; 290 | position: relative; 291 | display: flex; 292 | align-items: center; 293 | 294 | @media only screen and (max-width: $break-level-4) { 295 | flex-direction: column; 296 | padding: 0; 297 | margin: 3.5em 0; 298 | align-items: initial; 299 | 300 | &:first-child { 301 | margin-top: 0; 302 | } 303 | } 304 | 305 | .post-time { 306 | flex: none; 307 | font-family: $font-mono; 308 | font-size: 0.875rem; 309 | margin-right: 1rem; 310 | position: absolute; 311 | right: 100%; 312 | color: #CCC; 313 | transition: color .2s ease-in-out; 314 | white-space: nowrap; // chrome needs this 315 | top: 50%; // chrome will need this to center vertically 316 | 317 | @media only screen and (max-width: $break-level-4) { 318 | order: 1; 319 | margin: auto; 320 | bottom: .2ex; 321 | left: 0; 322 | right: auto; 323 | color: #666; 324 | opacity: .6; 325 | top: auto; 326 | } 327 | 328 | &::before { 329 | content: ''; 330 | position: absolute; 331 | width: 20px; 332 | height: 20px; 333 | background: #666; // #333 with opacity 0.75 334 | border-radius: 100%; 335 | left: calc(100% + 1rem + #{$vertical-bar-width}/2 - #{$outer-circle-radius}); 336 | top: calc(50% - #{$outer-circle-radius}); 337 | 338 | @media only screen and (max-width: $break-level-4) { 339 | content: none; 340 | left: calc(-#{$post-time-space} - #{$outer-circle-radius}); 341 | } 342 | 343 | } 344 | 345 | &::after { 346 | content: ''; 347 | position: absolute; 348 | width: 16px; 349 | height: 16px; 350 | background: #FCF9E8; 351 | border-radius: 100%; 352 | transition: background-color .2s ease-in-out; 353 | left: calc(100% + 1rem + #{$vertical-bar-width}/2 - #{$inner-circle-radius}); 354 | top: calc(50% - #{$inner-circle-radius}); 355 | 356 | @media only screen and (max-width: $break-level-4) { 357 | content: none; 358 | left: calc(-#{$post-time-space} - #{$inner-circle-radius}); 359 | } 360 | } 361 | } 362 | 363 | &:hover { 364 | .post-time{ 365 | //border-bottom: 2px solid $color-underscore; 366 | color: #666; 367 | 368 | &::after { 369 | background: #A1EFE9; 370 | } 371 | } 372 | } 373 | 374 | .post-desc { 375 | flex: 1; 376 | //padding-left: calc(1rem + #{$vertical-bar-width}); 377 | 378 | 379 | // style for post-title 380 | .post-title { 381 | border-bottom: 1px solid #EEE; 382 | transition: border-color .2s ease; 383 | font-weight: 600; 384 | font-size: 1.2em; 385 | 386 | &:hover { 387 | border-bottom: 1px solid #666; 388 | } 389 | 390 | a { 391 | color: #333; 392 | text-decoration: none; 393 | border: none; 394 | display: block; 395 | min-height: 1ex; 396 | outline: none; 397 | } 398 | } 399 | 400 | // style for post-meta 401 | .post-meta { 402 | text-align: right; 403 | min-height: 2em; 404 | display: flex; 405 | align-items: flex-end; 406 | flex-direction: row-reverse; 407 | justify-content: flex-start; 408 | } 409 | 410 | .post-tags { 411 | @extend .post-tags-template; 412 | } 413 | 414 | // style for post-categories 415 | .post-categories { 416 | @extend .post-tags-template; 417 | 418 | &::before { 419 | content: "\f07b"; 420 | } 421 | } 422 | 423 | // hide tags when screen is too small 424 | @media only screen and (max-width: $break-level-2) { 425 | .post-tags { 426 | display: none; 427 | } 428 | .post-categories { 429 | margin: 0; 430 | } 431 | } 432 | 433 | // style for post description 434 | .post-content { 435 | padding-left: 2em; 436 | 437 | @media only screen and (max-width: $break-level-4) { 438 | padding-left: 0; 439 | } 440 | 441 | p { 442 | margin: 0.6em 0 0 0; 443 | } 444 | } 445 | } 446 | } 447 | 448 | /* paginator */ 449 | 450 | // make it occupy all width 451 | .page-navigator-wrapper { 452 | @media only screen and (max-width: $break-level-3) { 453 | max-width: 100%; 454 | } 455 | } 456 | .page-navigator { 457 | margin: 3.5ex 0; 458 | overflow: hidden; 459 | text-align: center; 460 | border-bottom: 2px solid #CCC; 461 | color: #777; 462 | @media only screen and (max-width: $break-level-3) { 463 | border-top: 2px solid #CCC; 464 | } 465 | 466 | * { 467 | padding: 1px 20px; 468 | } 469 | 470 | .page-number { 471 | display: inline-block; 472 | } 473 | 474 | .current { 475 | color: #2F6EB6; 476 | } 477 | 478 | .prev { 479 | float: left; 480 | } 481 | 482 | .next { 483 | float: right; 484 | } 485 | 486 | 487 | a { 488 | color: inherit; 489 | text-decoration: none; 490 | &:hover { 491 | background: #BBB; 492 | color: #2F6EB6; 493 | } 494 | } 495 | } 496 | 497 | 498 | /** 499 | * footer 500 | */ 501 | 502 | footer#footer { 503 | text-align: right; 504 | margin-top: 2em; 505 | background: #333; 506 | 507 | &, & a, & a:visited { 508 | color: #AAA; 509 | } 510 | 511 | & a:hover { 512 | color: #EEE; 513 | } 514 | 515 | .bar { 516 | display: flex; 517 | //flex-wrap: wrap; 518 | 519 | .social { 520 | display: flex; 521 | align-items: center; 522 | //justify-content: center; 523 | a { 524 | display: inline-block; 525 | padding: 6px 12px; 526 | margin: 0 2px; 527 | font-size: 20px; 528 | 529 | transition: all .2s ease-in-out; 530 | 531 | &:hover { 532 | background: #EEE; 533 | color: #333; 534 | } 535 | } 536 | } 537 | 538 | .footer { 539 | flex: 1; 540 | padding: 1em 0; 541 | } 542 | 543 | @media only screen and (max-width: $break-level-3) { 544 | flex-direction: column; 545 | align-items: center; 546 | 547 | .social { 548 | padding: .5em .2em; 549 | } 550 | 551 | .footer { 552 | padding: .5em .2em; 553 | text-align: center 554 | } 555 | } 556 | } 557 | } 558 | 559 | 560 | /** 561 | * main content style 562 | */ 563 | .post-header h1 { 564 | font-family: $font-post-title; 565 | font-size: 2em; 566 | } 567 | 568 | /* post header meta data(time/tag) */ 569 | .wrapper .meta { 570 | //display: flex; 571 | //box-sizing: border-box; 572 | //padding: 0 20px; 573 | text-align: right; 574 | background: #333; 575 | color: #CCC; 576 | border-top: 2px solid #555; 577 | border-bottom: 2px solid #555; 578 | display: flex; 579 | box-shadow: 0 0 2px 1px rgba(200, 200, 200, 0.8); 580 | transition: background-color .2s ease-in-out; 581 | margin-bottom: 2em; 582 | 583 | // show full width on small screen 584 | @media only screen and (max-width: $break-level-2) { 585 | max-width: 100%; 586 | } 587 | 588 | &:hover { 589 | background: #222; 590 | } 591 | 592 | .post-time { 593 | flex: 1; 594 | text-align: left; 595 | font-family: $font-mono; 596 | font-size: 14px; 597 | align-self: center; 598 | } 599 | 600 | 601 | .post-tags, .post-categories { 602 | &::before { 603 | font-family: FontAwesome; 604 | } 605 | 606 | a { 607 | color: #CCC; 608 | text-decoration: none; 609 | margin: 0 .3rem; 610 | transition: border-bottom .3s ease-in-out, color .2s ease-in-out; 611 | 612 | &:hover { 613 | color: $color-underscore; 614 | border-bottom: 2px solid $color-underscore; 615 | } 616 | } 617 | } 618 | 619 | .post-tags { 620 | margin-left: 1em; 621 | &::before { 622 | content: "\f02c"; 623 | } 624 | } 625 | 626 | .post-categories { 627 | &::before { 628 | content: "\f07b"; 629 | font-family: FontAwesome; 630 | } 631 | } 632 | 633 | @media only screen and (max-width: $break-level-3) { 634 | flex-wrap: wrap; 635 | 636 | .post-tags, .post-categories { 637 | margin-left: auto; 638 | } 639 | } 640 | } 641 | 642 | 643 | article { 644 | /* global */ 645 | font-size: 18px; 646 | line-height: 1.75; 647 | 648 | .entry { 649 | font-size: 16px; 650 | } 651 | 652 | 653 | /* headers */ 654 | h1,h2,h3,h4,h5,h6 { 655 | font-family: $font-header; 656 | font-weight: 600; 657 | } 658 | 659 | h1 { 660 | border-bottom: 2px solid #333; 661 | padding: 3px 0; 662 | font-size: 2em; 663 | } 664 | 665 | h2 { 666 | border-bottom: 1px solid #CCC; 667 | } 668 | 669 | // rule 670 | hr { 671 | border-top: 3px dashed #878787; 672 | border-bottom: none; 673 | } 674 | 675 | // link 676 | a { 677 | color: $color-main-link; 678 | text-decoration: none; 679 | opacity: 0.9; 680 | 681 | transition: border .2s; 682 | transition: color .2s; 683 | border-bottom: .08em solid lightgray; 684 | &:hover { 685 | opacity: 1; 686 | border-bottom: .08em solid $color-main-link-hover; 687 | color: $color-main-link-hover; 688 | } 689 | } 690 | 691 | // ignore border-bottom for code blocks 692 | .post .highlight a { 693 | border: none !important; 694 | } 695 | 696 | // blockquote 697 | blockquote { 698 | margin: 1em 0; 699 | padding: 0 $article-padding; 700 | border-left: 5px solid $color-underscore; 701 | 702 | // block footer 703 | footer { 704 | font-size: 85%; 705 | cite::before { 706 | content: "—"; 707 | padding: 0 0.5em; 708 | font-style: italic; 709 | } 710 | } 711 | } 712 | 713 | blockquote.pullquote.left { 714 | border: none; 715 | margin: 0 1em 0 .5em; 716 | width: 45%; 717 | } 718 | 719 | blockquote.pullquote.right { 720 | border: none; 721 | margin: 0 .5em 0 1em; 722 | width: 45%; 723 | } 724 | 725 | .left, .alignleft { 726 | float: left; 727 | } 728 | 729 | .right, .alignright { 730 | float: right; 731 | } 732 | 733 | // image 734 | img, video{ 735 | display: block; 736 | height: auto; 737 | margin: auto; 738 | max-width: 100%; 739 | border: none; 740 | box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4); 741 | } 742 | 743 | .video-container { 744 | position: relative; 745 | padding-top: 56.9%; // 16:9 746 | height: 0; 747 | overflow: hidden; 748 | iframe, object, embed { 749 | position: absolute; 750 | top: 0; 751 | left: 0; 752 | height: 100%; 753 | width: 100%; 754 | margin-top: 0; 755 | } 756 | } 757 | 758 | // cancel dangling list for the first level 759 | ol, ul { 760 | padding-left: 0; 761 | ol, ul { 762 | padding-left: 40px; 763 | } 764 | } 765 | 766 | // list 767 | li p { 768 | margin-top: 0; 769 | margin-bottom: 0; 770 | } 771 | 772 | // inline code 773 | code { 774 | border: 1px solid #BBB; 775 | background: #EEE; 776 | font-size: 14px; 777 | } 778 | 779 | // table 780 | table { 781 | width: 100%; 782 | border-collapse: collapse; 783 | border-spacing: 0; 784 | vertical-align: middle; 785 | 786 | th { 787 | text-align: left; 788 | background: #333; 789 | color: #EEE; 790 | } 791 | 792 | th, td { 793 | padding: 5px 8px; 794 | border: 1px solid #ddd; 795 | } 796 | 797 | tr:nth-child(2n) { 798 | background-color: #f2f2f2; 799 | } 800 | } 801 | } 802 | 803 | // fancybox 804 | .article-gallery a.article-gallery-img { 805 | width: 100%; 806 | display: none; 807 | 808 | &:first-child { 809 | display: block; 810 | } 811 | 812 | img { 813 | width: 100%; 814 | } 815 | } 816 | 817 | // archive/category/tags page 818 | .post-archive { 819 | // reset list indentation 820 | ol, ul { 821 | padding-left: 40px; 822 | } 823 | 824 | li .date { 825 | margin-right: 1em; 826 | } 827 | 828 | @media only screen and (max-width: $break-level-3-1) { 829 | ul { 830 | padding-left: 0; 831 | li { 832 | margin: 1em 0; 833 | } 834 | } 835 | a { 836 | display: block; 837 | } 838 | } 839 | } 840 | 841 | // category/tags on archive page 842 | .list-unstyled { 843 | list-style: outside none none; 844 | padding-left: 0; 845 | } 846 | 847 | .all-categories, .all-tags { 848 | &::before { 849 | font-family: FontAwesome; 850 | float: left; 851 | margin-right: 1em; 852 | } 853 | 854 | ul.tag-box { 855 | display: flex; 856 | flex-wrap: wrap; 857 | 858 | li { 859 | a { 860 | display: inline; 861 | text-decoration: none; 862 | border: 1px dashed #CCC; 863 | border-radius: 3px; 864 | margin: .2em; 865 | padding: .1em .3em; 866 | outline: none; 867 | 868 | transition: none; 869 | 870 | span { 871 | font-size: 0.8em; 872 | border-left: 1px solid #CCC; 873 | margin-left: .3em; 874 | padding: 0 .3em; 875 | } 876 | 877 | &:hover { 878 | background: #666; 879 | color: #EEE; 880 | } 881 | } 882 | } 883 | } 884 | } 885 | 886 | .all-categories::before { 887 | content: "\f07b"; 888 | } 889 | 890 | .all-tags::before { 891 | content: "\f02c"; 892 | } 893 | --------------------------------------------------------------------------------