├── .gitignore ├── renovate.json ├── languages └── en.yml ├── layout ├── archive.pug ├── index.pug ├── partial │ ├── nav.pug │ ├── copyright.pug │ ├── comment.pug │ ├── head.pug │ ├── layout.pug │ └── scripts.pug ├── post.pug ├── page.pug └── mixins │ ├── paginator.pug │ └── post.pug ├── _config.yml ├── package.json ├── LICENSE ├── source ├── logo.svg ├── favicon.svg └── css │ └── theme.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /languages/en.yml: -------------------------------------------------------------------------------- 1 | prev: prev 2 | next: next 3 | prev_post: prev 4 | next_post: next 5 | read_more: 'more… ' 6 | untitled: (untitled) 7 | translate_original: Translate the original address 8 | meta_description: A Blog Powered By Hexo -------------------------------------------------------------------------------- /layout/archive.pug: -------------------------------------------------------------------------------- 1 | extends partial/layout.pug 2 | 3 | block container 4 | include mixins/post.pug 5 | +postList() 6 | 7 | block pagination 8 | include mixins/paginator.pug 9 | +home() 10 | 11 | block copyright 12 | include partial/copyright.pug -------------------------------------------------------------------------------- /layout/index.pug: -------------------------------------------------------------------------------- 1 | extends partial/layout.pug 2 | 3 | block container 4 | include mixins/post.pug 5 | +posts() 6 | 7 | block pagination 8 | include mixins/paginator.pug 9 | +home() 10 | 11 | block copyright 12 | include partial/copyright.pug 13 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | name: Brewski 2 | url: https://github.com/tiaanduplessis/hexo-theme-brewski 3 | 4 | menu: 5 | Home: / 6 | About: /about 7 | Archives: /archives 8 | Impressum: 9 | GitHub: 10 | RSS: /atom.xml 11 | 12 | favicon: /favicon.svg 13 | logo: /logo.svg 14 | 15 | # Disqus shortname 16 | disqus: 17 | 18 | # Analytics 19 | google_analytics: 20 | 21 | # Copyright Infomation 22 | copyright: 23 | since: 24 | name: 25 | url: 26 | -------------------------------------------------------------------------------- /layout/partial/nav.pug: -------------------------------------------------------------------------------- 1 | ul.nav.nav-list 2 | each value, key in theme.menu 3 | li.nav-list-item 4 | - console.log(value, key) 5 | - if (!value) return null 6 | - var re = /^(http|https):\/\/*/gi; 7 | - var tar = re.test(value) ? "_blank" : "_self" 8 | - var type = value.indexOf('.html') === -1 ? 'no-barba' : '' 9 | a.nav-list-link(href=url_for(value) target=tar class=type) 10 | != key.toUpperCase() 11 | -------------------------------------------------------------------------------- /layout/post.pug: -------------------------------------------------------------------------------- 1 | extends partial/layout.pug 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.pug 12 | +post(page) 13 | 14 | block pagination 15 | include mixins/paginator.pug 16 | +post() 17 | include partial/comment.pug 18 | 19 | block copyright 20 | include partial/copyright.pug -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-theme-brewski", 3 | "version": "1.0.0", 4 | "description": "A minimal Hexo theme", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/tiaanduplessis/hexo-theme-brewski" 8 | }, 9 | "keywords": [ 10 | "hexo", 11 | "theme" 12 | ], 13 | "author": "Tiaan du Plessis", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/tiaanduplessis/hexo-theme-brewski/issues" 17 | }, 18 | "homepage": "https://github.com/tiaanduplessis/hexo-theme-brewski#readme" 19 | } -------------------------------------------------------------------------------- /layout/page.pug: -------------------------------------------------------------------------------- 1 | extends partial/layout.pug 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.pug 12 | .post 13 | article.post-block 14 | h1.post-title 15 | +postTitle(page.title) 16 | .post-content 17 | != page.content 18 | 19 | block copyright 20 | include partial/copyright.pug -------------------------------------------------------------------------------- /layout/partial/copyright.pug: -------------------------------------------------------------------------------- 1 | .copyright 2 | - var currentDate = new Date(); 3 | - var currentYear = currentDate.getFullYear(); 4 | - var copyrightYear = ! theme.copyright.since || currentYear == theme.copyright.since ? currentYear : theme.copyright.since + ' - ' + currentYear; 5 | - var copyrightURL = theme.copyright.url || config.url 6 | - var copyrightName = theme.copyright.name || config.author 7 | p © #{copyrightYear} #[a(href=copyrightURL) #{copyrightName}] 8 | br 9 | | Powered by #[a(href='https://hexo.io/', rel='noreferrer', target='_blank') Hexo] -------------------------------------------------------------------------------- /layout/mixins/paginator.pug: -------------------------------------------------------------------------------- 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)) 7 | != __('prev') 8 | if page.next 9 | a.next(href=url_for(next)) 10 | != __('next') 11 | 12 | mixin post() 13 | - var prev = page.prev ? page.prev.path : false; 14 | - var next = page.next ? page.next.path : false; 15 | .paginator 16 | if prev 17 | a.prev(href=url_for(prev)) 18 | != __('prev_post') 19 | if next 20 | a.next(href=url_for(next)) 21 | != __('next_post') -------------------------------------------------------------------------------- /layout/partial/comment.pug: -------------------------------------------------------------------------------- 1 | if theme.disqus 2 | #disqus_thread 3 | script. 4 | var disqus_shortname = '#{theme.disqus}'; 5 | var disqus_identifier = '#{page.path}'; 6 | var disqus_title = '#{page.title}'; 7 | var disqus_url = '#{config.url}/#{page.path}'; 8 | (function () { 9 | var dsq = document.createElement('script'); dsq.async = true; 10 | dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js'; 11 | (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 12 | })(); 13 | script(id='dsq-count-scr' src='//'+ theme.disqus + '.disqus.com/count.js' async) -------------------------------------------------------------------------------- /layout/partial/head.pug: -------------------------------------------------------------------------------- 1 | meta(charset='utf-8') 2 | meta(name='X-UA-Compatible', content='IE=edge') 3 | meta(name='viewport', content='width=device-width, initial-scale=1') 4 | meta(name="robots", content="index, follow") 5 | 6 | title 7 | block site_title 8 | = config.title 9 | 10 | block description 11 | meta(name='description', content=config.description ? config.description : __('meta_description')) 12 | 13 | 14 | link(rel='icon', href=url_for(theme.favicon)) 15 | link(rel='stylesheet', href='https://unpkg.com/nanoreset@3.0.1/nanoreset.min.css') 16 | link(rel='stylesheet', href=url_for('css/theme.css')) 17 | link(rel='search', type='application/opensearchdescription+xml', href=url_for('atom.xml'), title=config.title) 18 | -------------------------------------------------------------------------------- /layout/partial/layout.pug: -------------------------------------------------------------------------------- 1 | doctype 2 | html(lang=config.language) 3 | head 4 | include head.pug 5 | body 6 | .wrap#barba-wrapper 7 | header 8 | h1.branding 9 | a(href=url_for(), title=config.title) 10 | if theme.logo 11 | img.logo-image(src=url_for(theme.logo), alt='logo') 12 | else 13 | = config.title 14 | include nav.pug 15 | .barba-container 16 | main.container 17 | block container 18 | footer 19 | block pagination 20 | block copyright 21 | include scripts.pug 22 | -------------------------------------------------------------------------------- /layout/partial/scripts.pug: -------------------------------------------------------------------------------- 1 | //- Analytics tracking 2 | if theme.google_analytics 3 | script. 4 | var _gaq = _gaq || []; 5 | _gaq.push(['_setAccount', '#{theme.google_analytics}']); 6 | _gaq.push(['_trackPageview']); 7 | 8 | (function () { 9 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 10 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 11 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 12 | })(); 13 | script(src='https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js') 14 | script. 15 | document.addEventListener('DOMContentLoaded', function() { 16 | Barba.Pjax.start() 17 | }) 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Tiaan du Plessis 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. -------------------------------------------------------------------------------- /layout/mixins/post.pug: -------------------------------------------------------------------------------- 1 | mixin postInfo(item) 2 | .post-info 3 | a 4 | != full_date(item.date, config.date_format) 5 | if item.from && (is_home() || is_post()) 6 | a.post-from(href=item.from, target='_blank', title=item.from) 7 | != __('translate_original') 8 | 9 | mixin postTitle(title) 10 | if title 11 | != title 12 | else 13 | != __('untitled') 14 | 15 | //- Index Page 16 | mixin posts() 17 | ul.home.post-list 18 | - page.posts.each(function (item) { 19 | li.post-list-item 20 | article.post-block 21 | h2.post-title 22 | a.post-title-link(href=url_for(item.path) class="no-barba") 23 | +postTitle(item.title) 24 | +postInfo(item) 25 | .post-content 26 | != item.excerpt 27 | a.read-more(href=url_for(item.path)) 28 | != __('read_more') 29 | - }) 30 | 31 | //- Archive Page 32 | mixin postList() 33 | .archive 34 | - var year = 0; 35 | - var change = false; 36 | - page.posts.each(function (item) { 37 | - var itemYear = date(item.date, 'YYYY') - 0; 38 | - change = year !== itemYear; 39 | - year = change ? itemYear : year; 40 | if change 41 | h2.archive-year 42 | != year 43 | .post-item 44 | +postInfo(item) 45 | a.post-title-link(href=url_for(item.path)) 46 | +postTitle(item.title) 47 | - }) 48 | 49 | 50 | 51 | //- Post Page 52 | mixin post(item) 53 | .post 54 | article.post-block 55 | h1.post-title 56 | +postTitle(item.title) 57 | +postInfo(item) 58 | .post-content 59 | != item.content -------------------------------------------------------------------------------- /source/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 10 | 12 | 17 | 26 | 30 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /source/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 10 | 12 | 17 | 26 | 30 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

🍺 brewski

3 |
4 | A minimal Hexo theme 5 |
6 |
7 | 8 | make a pull request 9 | 10 |
11 |
12 |
13 | 14 | Github Watch Badge 15 | 16 | 17 | Github Star Badge 18 | 19 | 20 | Tweet 21 | 22 |
23 |
24 |
25 | Built with ❤︎ by tiaanduplessis and contributors 26 |
27 | 28 |

Table of Contents

29 |
30 | Table of Contents 31 |
  • About
    • 32 |
  • Install
    • 33 |
  • Usage
    • 34 |
  • Update
    • 35 |
  • Contribute
    • 36 |
  • License
    • 37 |
    38 | 39 | ## About 40 | 41 | A minimal theme based on and hacked from [artemis](https://github.com/Dreyer/hexo-theme-artemis). Check out the demo [here](https://tiaanduplessis.github.io/hexo-theme-brewski-demo/). 42 | 43 | ### Install 44 | 45 | From your Hexo project root directory: 46 | 47 | Copy the theme into your `themes` sub-directory: 48 | 49 | ```sh 50 | $ git clone https://github.com/tiaanduplessis/hexo-theme-brewski.git themes/brewski 51 | ``` 52 | 53 | You can also add it as a submodule (plays better with CI like [travis](https://travis-ci.org)): 54 | 55 | ```sh 56 | $ git submodule add https://github.com/tiaanduplessis/hexo-theme-brewski.git themes/brewski 57 | ``` 58 | 59 | After cloning, install the needed dependencies: 60 | 61 | ```sh 62 | $ npm install --save hexo-renderer-pug hexo-generator-feed hexo-generator-sitemap 63 | ``` 64 | 65 | 66 | ### Usage 67 | 68 | Modify `theme` setting in `_config.yml` to `brewski`. 69 | 70 | You can override the theme options using `theme_config` in the main `_config.yml`: 71 | 72 | ```yaml 73 | theme: brewski 74 | theme_config: 75 | logo: 76 | google_analytics: UA-XXXXXXXX-X 77 | copyright: 78 | since: 2016 79 | name: John Doe 80 | url: https://www.example.org/john-doe 81 | menu: 82 | Home: / 83 | About: /about 84 | GitHub: https://github.com/tiaanduplessis 85 | RSS: /atom.xml 86 | ``` 87 | 88 | ### Update 89 | 90 | ```sh 91 | $cd themes/brewski 92 | $ git pull 93 | ``` 94 | 95 | 96 | ## Contributing 97 | 98 | Contributions are welcome! 99 | 100 | 1. Fork it. 101 | 2. Create your feature branch: `git checkout -b my-new-feature` 102 | 3. Commit your changes: `git commit -am 'Add some feature'` 103 | 4. Push to the branch: `git push origin my-new-feature` 104 | 5. Submit a pull request :D 105 | 106 | Or open up [a issue](https://github.com/tiaanduplessis/form-extract/issues). 107 | 108 | ## License 109 | 110 | Licensed under the MIT License. 111 | -------------------------------------------------------------------------------- /source/css/theme.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #222831; 3 | font-size: calc(110% + 0.1vw); 4 | line-height: 1.6; 5 | background-color: #fff; 6 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, 7 | "Helvetica Neue", sans-serif; 8 | } 9 | 10 | .wrap { 11 | width: 90%; 12 | max-width: 45em; 13 | margin: 0 auto; 14 | } 15 | 16 | ul { 17 | margin: 1rem 0; 18 | } 19 | 20 | p { 21 | letter-spacing: -.01em; 22 | line-height: 1.8; 23 | margin: 1.2em 0; 24 | } 25 | 26 | a, 27 | a:active { 28 | color: #222831; 29 | text-decoration: none; 30 | } 31 | 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6 { 38 | letter-spacing: -.002em; 39 | font-weight: 600; 40 | line-height: 1.2; 41 | } 42 | 43 | ::selection { 44 | color: #fff; 45 | background-color: #9e1900; 46 | } 47 | 48 | .nav-list { 49 | display: flex; 50 | flex-wrap: wrap; 51 | justify-content: center; 52 | } 53 | 54 | .nav-list-link { 55 | padding-bottom: .15em; 56 | border-bottom: .2em solid transparent; 57 | } 58 | 59 | .nav-list-link:hover { 60 | border-bottom: .2em solid #9e1900; 61 | padding-bottom: .15em; 62 | transition: 150ms ease-in-out; 63 | } 64 | 65 | code { 66 | padding: .2em .4em; 67 | } 68 | 69 | iframe, 70 | video { 71 | max-width: 100%; 72 | margin: 1rem auto; 73 | } 74 | 75 | /*table { 76 | padding: 0; 77 | }*/ 78 | table th { 79 | font-weight: 600; 80 | border: 0; 81 | text-align: left; 82 | margin: 0; 83 | padding: .4em .8em; 84 | } 85 | table thead { 86 | background-color: #fff; 87 | } 88 | table tbody tr { 89 | border-top: 0; 90 | background-color: #fff; 91 | } 92 | table tbody tr:nth-child(2n) { 93 | background-color: #f6f8fa; 94 | } 95 | table tbody td { 96 | border: .05em solid transparent; 97 | text-align: left; 98 | } 99 | table tbody th :first-child, 100 | table tbody td :first-child { 101 | margin-top: 0; 102 | } 103 | table tbody th :last-child, 104 | table tbody td :last-child { 105 | margin-bottom: 0; 106 | } 107 | 108 | header { 109 | min-height: 7em; 110 | display: flex; 111 | justify-content: space-between; 112 | align-items: center; 113 | flex-wrap: wrap; 114 | } 115 | 116 | @media screen and (max-width: 600px) { 117 | header { 118 | justify-content: center; 119 | } 120 | } 121 | 122 | header .branding { 123 | display: inline-block; 124 | margin: .6em 0 0 0; 125 | position: relative; 126 | } 127 | 128 | .logo-image:hover { 129 | animation: sway 1.4s ease-in-out both; 130 | } 131 | 132 | @keyframes sway { 133 | 10%, 134 | 90% { 135 | transform: rotate(-15deg); 136 | } 137 | 138 | 20%, 139 | 80% { 140 | transform: rotate(15deg); 141 | } 142 | 143 | 30%, 144 | 50%, 145 | 70% { 146 | transform: rotate(-10deg); 147 | } 148 | 149 | 40%, 150 | 60% { 151 | transform: rotate(10deg); 152 | } 153 | } 154 | 155 | .logo-image { 156 | height: 5em; 157 | } 158 | 159 | header .nav-list-item { 160 | display: inline-block; 161 | padding: 1em .8em; 162 | } 163 | header .nav-list-item a { 164 | font-size: .9em; 165 | line-height: 1.4; 166 | } 167 | 168 | .home.post-list { 169 | margin: 2em 0; 170 | list-style: none; 171 | } 172 | .home.post-list .post-list-item { 173 | padding: 1em .4em; 174 | } 175 | 176 | .home.post-list .post-content h2:before, 177 | .home.post-list .post-content h3:before, 178 | .home.post-list .post-content h4:before, 179 | .home.post-list .post-content h5:before, 180 | .home.post-list .post-content h6:before { 181 | content: ""; 182 | } 183 | .home.post-list .post-content > ul { 184 | list-style: initial; 185 | } 186 | 187 | .home.post-list .read-more { 188 | color: #9e1900; 189 | } 190 | 191 | .archive .post-item { 192 | display: flex; 193 | flex-wrap: wrap; 194 | padding-left: 1.5rem; 195 | } 196 | .archive .post-time, 197 | .archive .post-title-link { 198 | font-size: 1rem; 199 | } 200 | .archive .post-title-link { 201 | color: #9e1900; 202 | padding-left: 1em; 203 | } 204 | .archive .post-title-link:hover { 205 | border-bottom: 0; 206 | color: #801501; 207 | } 208 | .archive .post-info { 209 | width: 6em; 210 | font-size: .9em; 211 | color: #393e46; 212 | } 213 | 214 | .post { 215 | padding-top: 1em; 216 | } 217 | 218 | .post-block .post-title { 219 | margin: .65em 0; 220 | font-size: 1.5em; 221 | } 222 | .post-block .post-info { 223 | color: #393e46; 224 | margin: 1.2em 0; 225 | } 226 | .post-block .post-info span { 227 | margin-left: .5rem; 228 | } 229 | .post-block .post-info a.post-from { 230 | margin-left: .5rem; 231 | padding: .2em .3em; 232 | border-radius: .3em; 233 | font-size: .7em; 234 | color: #fff; 235 | background-color: #e36b6b; 236 | } 237 | 238 | .post-content h2, 239 | .post-content h3, 240 | .post-content h4, 241 | .post-content h5, 242 | .post-content h6 { 243 | margin-bottom: 1em; 244 | } 245 | 246 | .post-content h2 a:before, 247 | .post-content h3 a:before, 248 | .post-content h4 a:before, 249 | .post-content h5 a:before, 250 | .post-content h6 a:before { 251 | content: "#"; 252 | color: #9e1900; 253 | position: absolute; 254 | left: -.8em; 255 | top: -.1em; 256 | font-size: 1.1em; 257 | font-weight: 500; 258 | } 259 | .post-content h4 a:before, 260 | .post-content h5 a:before, 261 | .post-content h6 a:before { 262 | content: ""; 263 | } 264 | 265 | .post-content h1, 266 | .post-block .post-title { 267 | margin-top: 2em; 268 | font-size: 3em; 269 | } 270 | 271 | .post-content h2 { 272 | margin-top: 1.8em; 273 | font-size: 2.8em; 274 | } 275 | 276 | .post-content h3 { 277 | margin-top: 1.6em; 278 | font-size: 2.6em; 279 | } 280 | 281 | .post-content h4 { 282 | margin-top: 1.4em; 283 | font-size: 2.4em; 284 | } 285 | 286 | .post-content h5 { 287 | margin-top: 1.2em; 288 | font-size: 2.2em; 289 | } 290 | 291 | .post-content h6 { 292 | margin-top: 1em; 293 | font-size: 2em; 294 | } 295 | 296 | .post-content a { 297 | color: #9e1900; 298 | } 299 | .post-content blockquote { 300 | margin: 2em 0; 301 | padding: .5em 1.3em; 302 | border: .05em solid #eee; 303 | border-radius: .1em; 304 | border-left-color: #9e1900; 305 | border-left-width: .1em; 306 | } 307 | 308 | .post-content li { 309 | margin-left: 1em; 310 | list-style-type: disc; 311 | } 312 | 313 | .post-content blockquote.warning { 314 | border-left-color: #f0ad4e; 315 | border-left-width: 4px; 316 | } 317 | .post-content img { 318 | display: block; 319 | max-width: 100%; 320 | margin: 1em auto; 321 | } 322 | .post-content .tip { 323 | position: relative; 324 | margin: 2em 0; 325 | padding: .6em 1.2em .6em 1.2em; 326 | border-left: 4px solid #f66; 327 | border-top-right-radius: .06em; 328 | border-bottom-right-radius: .06em; 329 | background-color: #f8f8f8; 330 | } 331 | .post-content .tip br { 332 | display: none; 333 | } 334 | .post-content .tip:before { 335 | position: absolute; 336 | top: 14px; 337 | left: -12px; 338 | content: "!"; 339 | width: 20px; 340 | height: 20px; 341 | border-radius: 100%; 342 | color: #fff; 343 | font-size: 14px; 344 | line-height: 20px; 345 | font-weight: 600; 346 | text-align: center; 347 | background-color: #f66; 348 | font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; 349 | } 350 | 351 | #mask { 352 | position: fixed; 353 | overflow: scroll; 354 | width: 100%; 355 | height: 100%; 356 | padding: 1em 0; 357 | background-color: rgba(0, 0, 0, .5); 358 | z-index: 10; 359 | } 360 | #mask #mask-image { 361 | max-width: 95%; 362 | } 363 | 364 | .paginator { 365 | margin: 2em 0; 366 | display: flex; 367 | justify-content: space-around; 368 | } 369 | 370 | .paginator .prev, 371 | .paginator .next { 372 | position: relative; 373 | box-shadow: 0 .3em #801501; 374 | display: inline-block; 375 | margin: 0 .2em; 376 | padding: .3em 1.5em; 377 | border-radius: 5px; 378 | color: #fff; 379 | background-color: #9e1900; 380 | font-weight: 600; 381 | } 382 | .paginator .prev:hover, 383 | .paginator .next:hover { 384 | box-shadow: 0 .2em #801501; 385 | top: .1em; 386 | } 387 | 388 | .ds-thread, 389 | #disqus_thread { 390 | margin-bottom: 2em; 391 | } 392 | 393 | main.container { 394 | margin: 2em .7em; 395 | min-height: 30vh; 396 | } 397 | 398 | @media screen and (max-width: 700px) { 399 | main.container, 400 | .home.post-list, 401 | .archive { 402 | margin-top: 0; 403 | } 404 | .ds-thread, 405 | #disqus_thread { 406 | margin: 2em .8em; 407 | } 408 | } 409 | 410 | footer .copyright { 411 | font-size: .8em; 412 | margin: 4em 4em; 413 | border-top: 1px solid #eee; 414 | text-align: center; 415 | } 416 | footer .copyright p, 417 | footer .copyright a { 418 | padding: 1em 0; 419 | color: #393e46; 420 | font-weight: 300; 421 | } 422 | footer .copyright a:hover { 423 | color: #393e46; 424 | } 425 | 426 | code, 427 | pre { 428 | font-size: .8em; 429 | background-color: #f8f8f8; 430 | font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", 431 | monospace; 432 | } 433 | 434 | .highlight { 435 | position: relative; 436 | margin: 1em 0; 437 | border-radius: .02em; 438 | line-height: 1.1em; 439 | background-color: #f8f8f8; 440 | overflow-x: auto; 441 | } 442 | .highlight table, 443 | .highlight tr, 444 | .highlight td { 445 | width: 100%; 446 | border-collapse: collapse; 447 | padding: 0; 448 | margin: 0; 449 | } 450 | .highlight .gutter { 451 | display: none; 452 | } 453 | .highlight .code pre { 454 | padding: 1.2em 1.4em; 455 | line-height: 1.5em; 456 | margin: 0; 457 | } 458 | .highlight .code pre .line { 459 | width: auto; 460 | height: 1.5em; 461 | } 462 | 463 | .highlight.sql .code:after, 464 | .highlight.ini .code:after, 465 | .highlight.conf .code:after, 466 | .highlight.html .code:after, 467 | .highlight.javascript .code:after, 468 | .highlight.js .code:after, 469 | .highlight.bash .code:after, 470 | .highlight.css .code:after, 471 | .highlight.scss .code:after, 472 | .highlight.diff .code:after, 473 | .highlight.java .code:after, 474 | .highlight.xml .code:after, 475 | .highlight.python .code:after, 476 | .highlight.json .code:after, 477 | .highlight.swift .code:after, 478 | .highlight.ruby .code:after, 479 | .highlight.perl .code:after, 480 | .highlight.php .code:after, 481 | .highlight.c .code:after, 482 | .highlight.cpp .code:after, 483 | .highlight.ts .code:after { 484 | position: absolute; 485 | top: 0; 486 | right: 0; 487 | color: #84878c; 488 | text-align: right; 489 | font-size: .7em; 490 | padding: .4em .7em 0; 491 | height: .9em; 492 | font-weight: 600; 493 | } 494 | 495 | .highlight.sql .code:after { 496 | content: "SQL"; 497 | } 498 | 499 | .highlight.ini .code:after { 500 | content: "INI"; 501 | } 502 | 503 | .highlight.conf .code:after { 504 | content: "CONF"; 505 | } 506 | 507 | .highlight.html .code:after { 508 | content: "HTML"; 509 | } 510 | 511 | .highlight.javascript .code:after { 512 | content: "JAVASCRIPT"; 513 | } 514 | 515 | .highlight.js .code:after { 516 | content: "JS"; 517 | } 518 | 519 | .highlight.bash .code:after { 520 | content: "BASH"; 521 | } 522 | 523 | .highlight.css .code:after { 524 | content: "CSS"; 525 | } 526 | 527 | .highlight.scss .code:after { 528 | content: "SCSS"; 529 | } 530 | 531 | .highlight.diff .code:after { 532 | content: "DIFF"; 533 | } 534 | 535 | .highlight.java .code:after { 536 | content: "JAVA"; 537 | } 538 | 539 | .highlight.xml .code:after { 540 | content: "XML"; 541 | } 542 | 543 | .highlight.python .code:after { 544 | content: "PYTHON"; 545 | } 546 | 547 | .highlight.json .code:after { 548 | content: "JSON"; 549 | } 550 | 551 | .highlight.swift .code:after { 552 | content: "SWIFT"; 553 | } 554 | 555 | .highlight.ruby .code:after { 556 | content: "RUBY"; 557 | } 558 | 559 | .highlight.perl .code:after { 560 | content: "PERL"; 561 | } 562 | 563 | .highlight.php .code:after { 564 | content: "PHP"; 565 | } 566 | 567 | .highlight.c .code:after { 568 | content: "C"; 569 | } 570 | 571 | .highlight.java .code:after { 572 | content: "JAVA"; 573 | } 574 | 575 | .highlight.cpp .code:after { 576 | content: "CPP"; 577 | } 578 | 579 | .highlight.ts .code:after { 580 | content: "TS"; 581 | } 582 | 583 | .highlight.cpp .code:after { 584 | content: "C++"; 585 | } 586 | 587 | pre { 588 | color: #525252; 589 | } 590 | pre .comment, 591 | pre .quote { 592 | color: #998; 593 | font-style: italic; 594 | } 595 | pre .keyword, 596 | pre .selector-tag, 597 | pre .subst { 598 | color: #222831; 599 | font-weight: 600; 600 | } 601 | pre .number, 602 | pre .literal, 603 | pre .variable, 604 | pre .template-variable, 605 | pre .tag .attr { 606 | color: #008080; 607 | } 608 | pre .string, 609 | pre .doctag { 610 | color: #d14; 611 | } 612 | pre .title, 613 | pre .section, 614 | pre .selector-id { 615 | color: #900; 616 | font-weight: 600; 617 | } 618 | pre .subst { 619 | font-weight: normal; 620 | } 621 | pre .type, 622 | pre .class .title { 623 | color: #458; 624 | font-weight: 600; 625 | } 626 | pre .tag, 627 | pre .name, 628 | pre .attribute { 629 | color: #000080; 630 | font-weight: normal; 631 | } 632 | pre .regexp, 633 | pre .link { 634 | color: #009926; 635 | } 636 | pre .symbol, 637 | pre .bullet { 638 | color: #990073; 639 | } 640 | pre .built_in, 641 | pre .builtin-name { 642 | color: #0086b3; 643 | } 644 | pre .meta { 645 | color: #999; 646 | font-weight: 600; 647 | } 648 | pre .deletion { 649 | background: #fdd; 650 | } 651 | pre .addition { 652 | background: #dfd; 653 | } 654 | pre .emphasis { 655 | font-style: italic; 656 | } 657 | pre .strong { 658 | font-weight: 600; 659 | } 660 | --------------------------------------------------------------------------------