├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── _config.yml ├── _images.yml ├── example ├── _config.shoka.yml ├── _config.yml ├── package.json └── source │ ├── _data │ ├── colors.styl │ ├── custom.styl │ ├── iconfont.styl │ ├── images.yml │ └── languages.yml │ ├── _posts │ ├── categories.md │ ├── code-highlight.md │ ├── computer-science │ │ ├── java │ │ │ └── course-1 │ │ │ │ ├── cover.jpg │ │ │ │ ├── week-1.md │ │ │ │ └── week-2.md │ │ └── note │ │ │ ├── cover.jpg │ │ │ ├── theme-shoka-doc.md │ │ │ └── theme-shoka-doc │ │ │ ├── config.md │ │ │ ├── dependents.md │ │ │ ├── display.md │ │ │ └── special.md │ ├── elements.md │ ├── excerpts.md │ ├── gallery-post.md │ ├── hello-world.md │ ├── images.md │ ├── link-post-without-title.md │ ├── link-post.md │ ├── long-title.md │ ├── markdown.md │ ├── no-title.md │ ├── tag-plugins.md │ ├── tags.md │ ├── videos.md │ ├── 中文測試.md │ └── 日本語テスト.md │ ├── assets │ ├── wallpaper-2311325.jpg │ ├── wallpaper-2572384.jpg │ └── wallpaper-878514.jpg │ └── friends │ ├── _data.yml │ └── index.md ├── languages ├── README.md ├── default.yml ├── en.yml ├── ja.yml ├── zh-CN.yml ├── zh-HK.yml └── zh-TW.yml ├── layout ├── _alternate │ ├── atom.ejs │ ├── json.ejs │ └── rss.ejs ├── _macro │ ├── breadcrumb.njk │ ├── card.njk │ ├── comment.njk │ ├── postmeta.njk │ ├── segment.njk │ ├── sidebar.njk │ └── widgets.njk ├── _partials │ ├── footer.njk │ ├── head │ │ ├── head.njk │ │ └── head_unique.njk │ ├── header.njk │ ├── layout.njk │ ├── pagination.njk │ ├── post │ │ ├── copyright.njk │ │ ├── footer.njk │ │ ├── nav.njk │ │ ├── post.njk │ │ └── reward.njk │ ├── sidebar │ │ ├── menu.njk │ │ └── overview.njk │ └── third-party │ │ └── baidu-analytics.njk ├── archive.njk ├── category.njk ├── index.njk ├── page.njk ├── post.njk └── tag.njk ├── package.json ├── screenshot.png ├── scripts ├── filters │ ├── locals.js │ └── post.js ├── generaters │ ├── archive.js │ ├── config.js │ ├── images.js │ ├── index.js │ ├── pages.js │ └── script.js ├── helpers │ ├── asset.js │ ├── engine.js │ └── list_categories.js ├── renderer │ └── njk.js └── tags │ ├── links.js │ └── media.js └── source ├── css ├── _colors.styl ├── _common │ ├── components │ │ ├── components.styl │ │ ├── highlight │ │ │ ├── highlight.styl │ │ │ └── operation.styl │ │ ├── pages │ │ │ ├── collapse.styl │ │ │ ├── home.styl │ │ │ ├── pages.styl │ │ │ └── tag-cloud.styl │ │ ├── post │ │ │ ├── breadcrumb.styl │ │ │ ├── copyright.styl │ │ │ ├── expand.styl │ │ │ ├── footer.styl │ │ │ ├── header.styl │ │ │ ├── nav.styl │ │ │ ├── post.styl │ │ │ ├── reward.styl │ │ │ ├── rtl.styl │ │ │ └── tags.styl │ │ ├── tags │ │ │ ├── collapse.styl │ │ │ ├── container.styl │ │ │ ├── label.styl │ │ │ ├── links.styl │ │ │ ├── list.styl │ │ │ ├── note.styl │ │ │ ├── player.styl │ │ │ ├── quiz.styl │ │ │ ├── tabs.styl │ │ │ └── tags.styl │ │ └── third-party │ │ │ ├── loading.styl │ │ │ ├── mermaid │ │ │ ├── class.styl │ │ │ ├── flowchart.styl │ │ │ ├── gantt.styl │ │ │ ├── git.styl │ │ │ ├── mermaid.styl │ │ │ ├── pie.styl │ │ │ ├── sequence.styl │ │ │ └── state.styl │ │ │ ├── pace.styl │ │ │ ├── search.styl │ │ │ ├── theme.styl │ │ │ ├── third-party.styl │ │ │ ├── valine.styl │ │ │ └── widgets.styl │ ├── outline │ │ ├── footer │ │ │ └── footer.styl │ │ ├── header │ │ │ ├── brand.styl │ │ │ ├── header.styl │ │ │ ├── image.styl │ │ │ ├── menu.styl │ │ │ ├── nav.styl │ │ │ ├── right.styl │ │ │ ├── tool.styl │ │ │ └── waves.styl │ │ ├── mobile.styl │ │ ├── outline.styl │ │ └── sidebar │ │ │ ├── author.styl │ │ │ ├── dimmer.styl │ │ │ ├── menu.styl │ │ │ ├── quick.styl │ │ │ ├── related.styl │ │ │ ├── sidebar.styl │ │ │ ├── social.styl │ │ │ ├── state.styl │ │ │ ├── tab.styl │ │ │ └── toc.styl │ └── scaffolding │ │ ├── animate.styl │ │ ├── base.styl │ │ ├── buttons.styl │ │ ├── divider.styl │ │ ├── iconfont.styl │ │ ├── normalize.styl │ │ ├── pagination.styl │ │ ├── ribbon.styl │ │ ├── scaffolding.styl │ │ ├── scrollbar.styl │ │ ├── tables.styl │ │ ├── tip.styl │ │ └── toggles.styl ├── _iconfont.styl ├── _mixins.styl ├── _variables.styl ├── app.styl ├── comment.styl └── mermaid.styl ├── images ├── 404.png ├── algolia_logo.svg ├── alipay.png ├── apple-touch-icon.png ├── avatar.jpg ├── failure.ico ├── favicon.ico ├── logo.svg ├── paypal.png ├── play_disc.png ├── play_needle.png ├── search.png └── wechatpay.png └── js └── _app ├── dom.js ├── fireworks.js ├── global.js ├── page.js ├── pjax.js ├── player.js ├── sidebar.js └── utils.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [*.md] 11 | trim_trailing_whitespace = false 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | node_modules/ 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 霜月琉璃 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hexo Theme Shoka 2 | 3 | ## Usage 4 | 5 | 1. Clone this repository 6 | 7 | ``` bash 8 | # cd your-blog 9 | git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka 10 | ``` 11 | 12 | 2. Make changes to the root `_config.yml` 13 | - update `theme` fragment as `shoka`. 14 | 15 | 3. Install the necessary plugins 16 | - [hexo-renderer-multi-markdown-it](https://www.npmjs.com/package/hexo-renderer-multi-markdown-it) 17 | - [hexo-autoprefixer](https://www.npmjs.com/package/hexo-autoprefixer) 18 | - [hexo-algoliasearch](https://www.npmjs.com/package/hexo-algoliasearch) 19 | - [hexo-symbols-count-time](https://www.npmjs.com/package/hexo-symbols-count-time) 20 | - [hexo-feed](https://www.npmjs.com/package/hexo-feed) 21 | 22 | 4. View a site configuration example in the `example` folder. 23 | 24 | 5. [中文使用说明](https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/) 25 | -------------------------------------------------------------------------------- /_images.yml: -------------------------------------------------------------------------------- 1 | - 6833939bly1giciryrr3rj20zk0m8nhk.jpg 2 | - 6833939bly1gicis081o9j20zk0m8dmr.jpg 3 | - 6833939bly1gicis3attqj20zk0m8k7l.jpg 4 | - 6833939bly1giciszlczyj20zk0m816d.jpg 5 | - 6833939bly1gicit31ffoj20zk0m8naf.jpg 6 | - 6833939bly1gicit4jrvuj20zk0m8785.jpg 7 | - 6833939bly1gicitcxhpij20zk0m8hdt.jpg 8 | - 6833939bly1gicitf0kl1j20zk0m87fe.jpg 9 | - 6833939bly1gicitht3xtj20zk0m8k5v.jpg 10 | - 6833939bly1gicitspjpbj20zk0m81ky.jpg 11 | - 6833939bly1gicitzannuj20zk0m8b29.jpg 12 | - 6833939bly1giciub8ja1j20zk0m81ky.jpg 13 | - 6833939bly1giciuja1j1j20zk0m8kjl.jpg 14 | - 6833939bly1giciukx8a7j20zk0m8aio.jpg 15 | - 6833939bly1giciundwu5j20zk0m8n9e.jpg 16 | - 6833939bly1giciusoyjnj219g0u0x56.jpg 17 | - 6833939bly1giciuv0socj20zk0m8qes.jpg 18 | - 6833939bly1gicivghyooj20zk0m8dir.jpg 19 | - 6833939bly1giclfb3vzhj20zk0m8wny.jpg 20 | - 6833939bly1giclfdu6exj20zk0m87hw.jpg 21 | - 6833939bly1giclffsa1cj20zk0m811l.jpg 22 | - 6833939bly1giclflwv2aj20zk0m84qp.jpg 23 | - 6833939bly1giclfw2t96j20zk0m8x6p.jpg 24 | - 6833939bly1giclg5ms2rj20zk0m8u0x.jpg 25 | - 6833939bly1giclga70tsj20zk0m84mr.jpg 26 | - 6833939bly1giclgi503lj20zk0m8hdt.jpg 27 | - 6833939bly1giclgrvbd6j20zk0m8qv5.jpg 28 | - 6833939bly1giclh0m9pdj20zk0m8hdt.jpg 29 | - 6833939bly1giclh3brzpj20zk0m8ann.jpg 30 | - 6833939bly1giclh5u05ej20zk0m87df.jpg 31 | - 6833939bly1giclhfehz7j20zk0m8u0x.jpg 32 | - 6833939bly1giclhnx9glj20zk0m8npd.jpg 33 | - 6833939bly1giclhpw3lwj20zk0m8gvw.jpg 34 | - 6833939bly1giclhtuo6nj20zk0m8ttm.jpg 35 | - 6833939bly1gicli3sbvtj20zk0m8x6p.jpg 36 | - 6833939bly1gicli9lfebj20zk0m84qp.jpg 37 | - 6833939bly1gicliierfjj20zk0m8npd.jpg 38 | - 6833939bly1giclil3m4ej20zk0m8tn8.jpg 39 | - 6833939bly1giclimtf7dj20zk0m8qav.jpg 40 | - 6833939bly1giclip4jbpj20zk0m87cv.jpg 41 | - 6833939bly1gicliwyw55j20zk0m8hdt.jpg 42 | - 6833939bly1giclize41wj20zk0m87gk.jpg 43 | - 6833939bly1giclj61ylzj20zk0m8b29.jpg 44 | - 6833939bly1giclj9410cj20zk0m8h12.jpg 45 | - 6833939bly1gicljgocqbj20zk0m8e81.jpg 46 | - 6833939bly1gicljitigmj20zk0m87fp.jpg 47 | - 6833939bly1giclwrdwyaj20zk0m8are.jpg 48 | - 6833939bly1giclwuom7cj20zk0m8dvn.jpg 49 | - 6833939bly1giclx29mstj20zk0m8hdt.jpg 50 | - 6833939bly1giclx6phq6j20zk0m8e36.jpg 51 | - 6833939bly1giclxfdlttj20zk0m8npd.jpg 52 | - 6833939bly1giclxp31goj20zk0m8qv5.jpg 53 | - 6833939bly1giclxxcb6rj20zk0m8b29.jpg 54 | - 6833939bly1gicm07ih54j20zk0m84qp.jpg 55 | - 6833939bly1gicm0fdw5cj20zk0m8hdt.jpg 56 | - 6833939bly1gicm0n457cj20zk0m8e81.jpg 57 | - 6833939bly1gicmnywqgpj20zk0m8dwx.jpg 58 | - 6833939bly1gipesng5oej20zk0m87d4.jpg 59 | - 6833939bly1gipesrnqv3j20zk0m8ava.jpg 60 | - 6833939bly1gipesx5fdwj20zk0m81kx.jpg 61 | - 6833939bly1gipet4bz0yj20zk0m8e81.jpg 62 | - 6833939bly1gipet8c1a2j20zk0m8kct.jpg 63 | - 6833939bly1gipetfk5zwj20zk0m8e81.jpg 64 | - 6833939bly1gipetlbztpj20zk0m84qp.jpg 65 | - 6833939bly1gipetv6p75j20zk0m8x6p.jpg 66 | - 6833939bly1gipeu1usa7j20zk0m8b29.jpg 67 | - 6833939bly1gipeu7txpzj20zk0m81kx.jpg 68 | - 6833939bly1gipeubcbajj20zk0m8h1h.jpg 69 | - 6833939bly1gipeudstjqj20zk0m8k3r.jpg 70 | - 6833939bly1gipeuibk9fj20zk0m8ay2.jpg 71 | - 6833939bly1gipeun65urj20zk0m81ii.jpg 72 | - 6833939bly1gipeuv80yoj20zk0m8kjl.jpg 73 | - 6833939bly1gipev1x5e4j20zk0m8b29.jpg 74 | - 6833939bly1gipevarprfj20zk0m8npd.jpg 75 | - 6833939bly1gipevgoki5j20zk0m84qp.jpg 76 | - 6833939bly1gipevo9j1jj20zk0m8e81.jpg 77 | - 6833939bly1gipevuctzzj20zk0m84qp.jpg 78 | - 6833939bly1gipew28b65j20zk0m8hdt.jpg 79 | - 6833939bly1gipew8gmvyj20zk0m87wh.jpg 80 | - 6833939bly1gipewf5l51j20zk0m8b29.jpg 81 | - 6833939bly1gipewkhf1zj20zk0m81kx.jpg 82 | - 6833939bly1gipewr8iypj20zk0m8b29.jpg 83 | - 6833939bly1gipex2cdtbj20zk0m8x6p.jpg 84 | - 6833939bly1gipexbei4hj20zk0m8npd.jpg 85 | - 6833939bly1gipexe4oykj20zk0m87ji.jpg 86 | - 6833939bly1gipexj2jgzj20zk0m8b09.jpg 87 | - 6833939bly1gipexoj0moj20zk0m8kgu.jpg 88 | - 6833939bly1gipexw3o58j20zk0m8e81.jpg 89 | - 6833939bly1gipey0a334j20zk0m8qpt.jpg 90 | - 6833939bly1gipey84bjtj20zk0m8hdt.jpg 91 | - 6833939bly1gipeybxm1pj20zk0m8niv.jpg 92 | - 6833939bly1gipeyhsblkj20zk0m81kx.jpg 93 | - 6833939bly1gipeyonbf9j20zk0m8e81.jpg 94 | - 6833939bly1gipeyvx1d4j20zk0m8hdt.jpg 95 | - 6833939bly1giph47e9vtj20zk0m8x6l.jpg 96 | - 6833939bly1giph4baakhj20zk0m8h5q.jpg 97 | - 6833939bly1giph4fomxoj20zk0m8axp.jpg 98 | - 6833939bly1giph4lm9i7j20zk0m84qp.jpg 99 | - 6833939bly1giph4wqtg4j20zk0m8x6p.jpg 100 | -------------------------------------------------------------------------------- /example/_config.shoka.yml: -------------------------------------------------------------------------------- 1 | alternate: Yume Shoka 2 | 3 | # Assets 4 | statics: / #//cdn.jsdelivr.net/gh/amehime/shoka@latest/ 5 | 6 | open_graph: 7 | #twitter_id: 8 | #google_plus: 9 | #fb_admins: 10 | #fb_app_id: 11 | 12 | menu: 13 | home: / || home 14 | posts: 15 | default: / || feather 16 | archives: /archives/ || list-alt 17 | categories: /categories/ || th 18 | tags: /tags/ || tags 19 | friends: /friends/ || heart 20 | 21 | # Social Links 22 | # Usage: `Key: permalink || icon || color` 23 | # Key is the link label showing to end users. 24 | # Value before `||` delimiter is the target permalink, 25 | # secend value is the name of Font icon. 26 | social: 27 | github: https://github.com/amehime || github || "#191717" 28 | #google: https://plus.google.com/yourname || google 29 | twitter: https://twitter.com/amehime || twitter || "#00aff0" 30 | zhihu: https://www.zhihu.com/people/rurismzk || zhihu || "#1e88e5" 31 | music: https://music.163.com/#/user/home?id=12886823 || cloud-music || "#e60026" 32 | weibo: https://weibo.com/amehime || weibo || "#ea716e" 33 | about: https://about.me/amehime || address-card || "#3b5998" 34 | #email: mailto:yourname@mail.com || envelope || "#55acd5" 35 | #facebook: https://www.facebook.com/yourname || facebook 36 | #stackoverflow: https://stackoverflow.com/yourname || stack-overflow 37 | #youtube: https://youtube.com/yourname || youtube 38 | #instagram: https://instagram.com/yourname || instagram 39 | #skype: skype:yourname?call|chat || skype 40 | #douban: https://www.douban.com/people/yourname/ || douban 41 | 42 | footer: 43 | # Specify the date when the site was setup. If not defined, current year will be used. 44 | since: 2010 45 | count: true 46 | 47 | post: 48 | count: true 49 | 50 | 51 | # --------------------------------------------------------------- 52 | # Third Party Plugins & Services Settings 53 | # --------------------------------------------------------------- 54 | 55 | # Comments 56 | # Valine 57 | # For more information: https://valine.js.org, https://github.com/xCss/Valine 58 | valine: 59 | appId: #这里不要忘了改 60 | appKey: #这里不要忘了改 61 | placeholder: ヽ(○´∀`)ノ♪ # Comment box placeholder 62 | pageSize: 10 # Pagination size 63 | lang: zh-CN 64 | tagMember: 65 | master: 66 | # - deea5a8d259d17182a53be1772e4c182 67 | friend: 68 | - deea5a8d259d17182a53be1772e4c182 69 | 70 | # bgm 71 | audio: 72 | - title: 列表1 73 | list: 74 | - https://music.163.com/#/playlist?id=2943811283 75 | - https://music.163.com/#/playlist?id=2297706586 76 | - title: 列表2 77 | list: 78 | - https://music.163.com/#/playlist?id=2031842656 79 | 80 | # Dependencies: https://github.com/amehime/hexo-renderer-multi-markdown-it 81 | pangu: true 82 | 83 | # --------------------------------------------------------------- 84 | # analytics & SEO Settings 85 | # --------------------------------------------------------------- 86 | 87 | 88 | # Disable Baidu transformation on mobile devices. 89 | disable_baidu_transformation: true 90 | 91 | # Automatically add external URL with Base64 encrypt & decrypt. 92 | exturl: true 93 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-site", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "hexo generate", 7 | "clean": "hexo clean", 8 | "deploy": "hexo deploy", 9 | "server": "hexo server" 10 | }, 11 | "hexo": { 12 | "version": "5.2.0" 13 | }, 14 | "dependencies": { 15 | "hexo": "^5.0.0", 16 | "hexo-algoliasearch": "^0.4.2", 17 | "hexo-autoprefixer": "^2.0.0", 18 | "hexo-deployer-git": "^2.1.0", 19 | "hexo-feed": "^1.0.2", 20 | "hexo-generator-category": "^1.0.0", 21 | "hexo-generator-tag": "^1.0.0", 22 | "hexo-renderer-ejs": "^1.0.0", 23 | "hexo-renderer-multi-markdown-it": "^0.1.5", 24 | "hexo-renderer-stylus": "^2.0.0", 25 | "hexo-server": "^2.0.0", 26 | "hexo-symbols-count-time": "^0.7.1", 27 | "hexo-util": "^2.4.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /example/source/_data/custom.styl: -------------------------------------------------------------------------------- 1 | /* 一些自定义样式 */ 2 | -------------------------------------------------------------------------------- /example/source/_data/languages.yml: -------------------------------------------------------------------------------- 1 | # language 2 | zh-CN: 3 | # items 4 | menu: 5 | links: 链接 6 | travellings: 开往 7 | webstack: 网址 8 | friends: 友達 9 | 10 | zh-HK: 11 | menu: 12 | links: 链接 13 | travellings: 開往 14 | friends: 友達 15 | webstack: 網址 16 | 17 | zh-TW: 18 | menu: 19 | links: 链接 20 | travellings: 開往 21 | friends: 友達 22 | webstack: 網址 23 | 24 | en: 25 | menu: 26 | links: Links 27 | travellings: Travellings 28 | webstack: Web Stack 29 | friends: Friends 30 | 31 | ja: 32 | menu: 33 | links: リンク 34 | travellings: 旅行 35 | friends: 友達 36 | webstack: ウェブスタック 37 | -------------------------------------------------------------------------------- /example/source/_posts/categories.md: -------------------------------------------------------------------------------- 1 | title: Categories 2 | date: 2013-12-24 23:30:09 3 | categories: 4 | - Foo 5 | - Bar 6 | - Baz 7 | --- 8 | 9 | This post contains 3 categories. Make sure your theme can display all of the categories. -------------------------------------------------------------------------------- /example/source/_posts/computer-science/java/course-1/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/example/source/_posts/computer-science/java/course-1/cover.jpg -------------------------------------------------------------------------------- /example/source/_posts/computer-science/note/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/example/source/_posts/computer-science/note/cover.jpg -------------------------------------------------------------------------------- /example/source/_posts/elements.md: -------------------------------------------------------------------------------- 1 | title: Elements 2 | date: 2013-12-24 23:29:08 3 | tags: 4 | --- 5 | 6 | The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself. 7 | 8 | --- 9 | 10 | # Heading 1 11 | 12 | ## Heading 2 13 | 14 | ### Heading 3 15 | 16 | #### Heading 4 17 | 18 | ##### Heading 5 19 | 20 | ###### Heading 6 21 | 22 | --- 23 | 24 | ## Paragraph 25 | 26 | Lorem ipsum dolor sit amet, [test link]() consectetur adipiscing elit. **Strong text** pellentesque ligula commodo viverra vehicula. *Italic text* at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. ~~Deleted text~~ tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan. 27 | 28 | Interdum et malesuada fames ac ante ipsum primis in faucibus. `Sed erat diam`, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget. 29 | 30 | > Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. 31 | 32 | Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet. 33 | 34 | ## List Types 35 | 36 | ### Definition List (dl) 37 | 38 |
Definition List Title
This is a definition list division.
39 | 40 | ### Ordered List (ol) 41 | 42 | 1. List Item 1 43 | 2. List Item 2 44 | 3. List Item 3 45 | 46 | ### Unordered List (ul) 47 | 48 | - List Item 1 49 | - List Item 2 50 | - List Item 3 51 | 52 | ### Checkbox List (ul) 53 | 54 | - [ ] List Item 1 unchecked 55 | - [x] List Item 2 checked 56 | - [X] List Item 3 checked 57 | 58 | ## Table 59 | 60 | | Table Header 1 | Table Header 2 | Table Header 3 | 61 | | - | - | - | 62 | | Division 1 | Division 2 | Division 3 | 63 | | Division 1 | Division 2 | Division 3 | 64 | | Division 1 | Division 2 | Division 3 | 65 | 66 | ## Misc Stuff - abbr, acronym, sub, sup, kbd, etc. 67 | 68 | Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop. 69 | -------------------------------------------------------------------------------- /example/source/_posts/excerpts.md: -------------------------------------------------------------------------------- 1 | title: Excerpts 2 | date: 2013-12-25 00:23:23 3 | tags: 4 | --- 5 | 6 | The following contents should be invisible in home/archive page. 7 | 8 | 9 | 10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget urna vitae velit eleifend interdum at ac nisi. In nec ligula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu cursus erat, ut dapibus quam. Aliquam eleifend dolor vitae libero pharetra adipiscing. Etiam adipiscing dolor a quam tempor, eu convallis nulla varius. Aliquam sollicitudin risus a porta aliquam. Ut nec velit dolor. Proin eget leo lobortis, aliquam est sed, mollis mauris. Fusce vitae leo pretium massa accumsan condimentum. Fusce malesuada gravida lectus vel vulputate. Donec bibendum porta nibh ut aliquam. 11 | 12 | Sed lorem felis, congue non fringilla eu, aliquam eu eros. Curabitur orci libero, mollis sed semper vitae, adipiscing in lectus. Aenean non egestas odio. Donec sollicitudin nisi quis lorem gravida, in pharetra mauris fringilla. Duis sit amet faucibus dolor, id aliquam neque. In egestas, odio gravida tempor dictum, mauris felis faucibus purus, sit amet commodo lacus diam vitae est. Ut ut quam eget massa semper sodales. Aenean non ipsum cursus, blandit lectus in, ornare odio. Curabitur ultrices porttitor vulputate. -------------------------------------------------------------------------------- /example/source/_posts/gallery-post.md: -------------------------------------------------------------------------------- 1 | title: Gallery Post 2 | date: 2013-12-25 00:16:18 3 | photos: 4 | - assets/wallpaper-2572384.jpg 5 | - assets/wallpaper-2311325.jpg 6 | - assets/wallpaper-878514.jpg 7 | - http://placehold.it/350x150.jpg 8 | --- 9 | 10 | This post contains 4 photos: 11 | 12 | - Widescreen wallpaper 13 | - Portrait photo 14 | - Dual widescreen wallpaper 15 | - Small photo 16 | 17 | All photos should be displayed properly. 18 | 19 | *From [Wallbase.cc](http://wallbase.cc)* -------------------------------------------------------------------------------- /example/source/_posts/hello-world.md: -------------------------------------------------------------------------------- 1 | title: Hello World 2 | date: 2013-12-24 17:49:32 3 | tags: 4 | --- 5 | 6 | Welcome to [Hexo](http://zespia.tw/hexo)! This is your very first post. Check [documentation](http://zespia.tw/hexo/docs) to learn how to use. -------------------------------------------------------------------------------- /example/source/_posts/images.md: -------------------------------------------------------------------------------- 1 | title: Images 2 | date: 2013-12-26 22:46:49 3 | cover: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg 4 | --- 5 | 6 | This is a image test post. 7 | 8 | ![](/assets/wallpaper-2572384.jpg) 9 | 10 | ![Caption](/assets/wallpaper-2311325.jpg) 11 | 12 | ![](/assets/wallpaper-878514.jpg) 13 | 14 | ![Small Picture](https://placehold.it/350x150.jpg) 15 | -------------------------------------------------------------------------------- /example/source/_posts/link-post-without-title.md: -------------------------------------------------------------------------------- 1 | date: 2013-12-24 23:44:13 2 | link: http://www.google.com/ 3 | --- 4 | 5 | This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open [Google](http://www.google.com/) in a new tab or window. -------------------------------------------------------------------------------- /example/source/_posts/link-post.md: -------------------------------------------------------------------------------- 1 | title: Link Post 2 | date: 2013-12-24 23:30:04 3 | link: http://www.google.com/ 4 | --- 5 | 6 | This is a link post. Clicking on the link should open [Google](http://www.google.com/) in a new tab or window. -------------------------------------------------------------------------------- /example/source/_posts/long-title.md: -------------------------------------------------------------------------------- 1 | title: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id. 2 | date: 2013-12-24 23:31:06 3 | tags: 4 | --- 5 | 6 | This post has a long title. Make sure the title displayed right. -------------------------------------------------------------------------------- /example/source/_posts/no-title.md: -------------------------------------------------------------------------------- 1 | date: 2013-12-25 22:57:49 2 | tags: 3 | --- 4 | 5 | This post doesn't have a title. Make sure it's accessible. -------------------------------------------------------------------------------- /example/source/_posts/tag-plugins.md: -------------------------------------------------------------------------------- 1 | title: Tag Plugins 2 | date: 2013-12-25 00:14:39 3 | tags: 4 | --- 5 | 6 | This post is used for testing tag plugins. See [docs](http://zespia.tw/hexo/docs/tag-plugins.html) for more info. 7 | 8 | ## Block Quote 9 | 10 | ### Normal blockquote 11 | 12 | > Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. 13 | 14 | ### Quote from a book 15 | 16 | {% blockquote David Levithan, Wide Awake %} 17 | Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy. 18 | {% endblockquote %} 19 | 20 | ### Quote from Twitter 21 | 22 | {% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %} 23 | NEW: DevDocs now comes with syntax highlighting. http://devdocs.io 24 | {% endblockquote %} 25 | 26 | ### Quote from an article on the web 27 | 28 | {% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %} 29 | Every interaction is both precious and an opportunity to delight. 30 | {% endblockquote %} 31 | 32 | ## Code Block 33 | 34 | ### Normal code block 35 | 36 | ``` 37 | alert('Hello World!'); 38 | ``` 39 | 40 | ### With caption 41 | 42 | {% codeblock Array.map %} 43 | array.map(callback[, thisArg]) 44 | {% endcodeblock %} 45 | 46 | ### With caption and URL 47 | 48 | {% codeblock .compact http://underscorejs.org/#compact Underscore.js %} 49 | .compact([0, 1, false, 2, ‘’, 3]); 50 | => [1, 2, 3] 51 | {% endcodeblock %} 52 | 53 | ### With marked lines 54 | 55 | Line 1,7-8,10 should be marked with different color. 56 | 57 | {% codeblock lang:js mark:1,7-8,10 %} 58 | const http = require('http'); 59 | 60 | const hostname = '127.0.0.1'; 61 | const port = 1337; 62 | 63 | http.createServer((req, res) => { 64 | res.writeHead(200, { 'Content-Type': 'text/plain' }); 65 | res.end('Hello World\n'); 66 | }).listen(port, hostname, () => { 67 | console.log(`Server running at http://${hostname}:${port}/`); 68 | }); 69 | {% endcodeblock %} 70 | 71 | Note: Theme's style should support `.highlight.line.marked` (recommend to use the selection or current line color). 72 | 73 | ### Gist 74 | 75 | {% gist 996818 %} 76 | 77 | ### jsFiddle 78 | 79 | {% jsfiddle ccWP7 %} 80 | 81 | ## Pullquote 82 | 83 | ### Left 84 | 85 | {% pullquote left %} 86 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 87 | {% endpullquote %} 88 | 89 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac. 90 | 91 | ### Right 92 | 93 | {% pullquote right %} 94 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 95 | {% endpullquote %} 96 | 97 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit. 98 | -------------------------------------------------------------------------------- /example/source/_posts/tags.md: -------------------------------------------------------------------------------- 1 | title: Tags 2 | date: 2013-12-24 23:29:53 3 | tags: 4 | - Foo 5 | - Bar 6 | - Baz 7 | --- 8 | 9 | This post contains 3 tags. Make sure your theme can display all of the tags. -------------------------------------------------------------------------------- /example/source/_posts/videos.md: -------------------------------------------------------------------------------- 1 | title: Videos 2 | date: 2013-12-25 00:19:15 3 | tags: 4 | --- 5 | 6 | This is a video test post. 7 | 8 | **Youtube** 9 | 10 | {% youtube TIbZDRXM-Tg %} 11 | 12 | **Vimeo** 13 | 14 | {% vimeo 82090131 %} -------------------------------------------------------------------------------- /example/source/_posts/中文測試.md: -------------------------------------------------------------------------------- 1 | title: 中文測試 2 | date: 2013-12-24 23:31:30 3 | tags: 4 | --- 5 | 6 | This is a Chinese test post. 7 | 8 | 善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時,安程幾?合學作。觀經而作建。都非子作這!法如言子你關!手師也。 9 | 10 | 以也座論頭室業放。要車時地變此親不老高小是統習直麼調未,行年香一? 11 | 12 | 就竟在,是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結,進快保的行戰從:弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影;全氣具些回童但倒影發狀在示,數上學大法很,如要我……月品大供這起服滿老?應學傳者國:山式排只不之然清同關;細車是!停屋常間又,資畫領生,相們制在?公別的人寫教資夠。資再我我!只臉夫藝量不路政吃息緊回力之;兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會,經時取頭,嚴了新科同?很夫營動通打,出和導一樂,查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。 13 | 14 | 國新故。 15 | 16 | > 工步他始能詩的,裝進分星海演意學值例道……於財型目古香亮自和這乎?化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不? 17 | 18 | *From [亂數假文產生器 - Chinese Lorem Ipsum](http://www.richyli.com/tool/loremipsum/)* -------------------------------------------------------------------------------- /example/source/_posts/日本語テスト.md: -------------------------------------------------------------------------------- 1 | title: 日本語テスト 2 | date: 2013-12-24 23:33:26 3 | tags: 4 | --- 5 | 6 | This is a Japanese test post. 7 | 8 | 私は昨日ついにその助力家というのの上よりするたなけれ。 9 | 10 | 最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。 11 | 12 | がたを知っないはずも同時に九月をいよいよたありた。 13 | 14 | もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。 15 | 16 | > それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。 17 | 18 | この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。 19 | 20 | *From [すぐ使えるダミーテキスト - 日本語 Lorem ipsum](http://lipsum.sugutsukaeru.jp/index.cgi)* -------------------------------------------------------------------------------- /example/source/assets/wallpaper-2311325.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/example/source/assets/wallpaper-2311325.jpg -------------------------------------------------------------------------------- /example/source/assets/wallpaper-2572384.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/example/source/assets/wallpaper-2572384.jpg -------------------------------------------------------------------------------- /example/source/assets/wallpaper-878514.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/example/source/assets/wallpaper-878514.jpg -------------------------------------------------------------------------------- /example/source/friends/_data.yml: -------------------------------------------------------------------------------- 1 | - site: 優萌初華 2 | owner: 霜月琉璃 3 | url: https://shoka.lostyu.me 4 | desc: 琉璃的医学 & 编程笔记 5 | image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg 6 | color: "#e9546b" 7 | 8 | - site: 優萌初華 9 | owner: 霜月琉璃 10 | url: https://shoka.lostyu.me 11 | desc: 琉璃的医学 & 编程笔记 12 | image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg 13 | color: "#e9546b" -------------------------------------------------------------------------------- /example/source/friends/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 友情链接 3 | keywords: 友情链接 4 | description: 霜月琉璃的小伙伴们 5 | copyright: false 6 | --- 7 | 8 | # 本站信息 9 | - 站名: 優萌初華 10 | - 站长: 霜月琉璃 11 | - 地址: https://shoka.lostyu.me 12 | - 标志: ![霜月琉璃](https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg){height="100" width="100"} 13 | - 简介: 琉璃的医学 & 编程笔记 14 | 15 | # 申请方法 16 | - 添加本站后,在本页留言,格式如下 17 | 18 | ~~~yml 19 | ```yml 20 | - site: #网站的名字 21 | owner: #您的名字 22 | url: #您的网址 23 | desc: #简短描述 24 | image: #一张图片 25 | color: #方块颜色 26 | ``` 27 | ~~~ 28 | 29 | # 小伙伴们 30 | {% linksfile friends/_data.yml %} 31 | 32 | -------------------------------------------------------------------------------- /languages/README.md: -------------------------------------------------------------------------------- 1 | # Override Default Translations 2 | 3 | If you would like to customize the default translation, you do not need to modify the translation files in the `languages` directory. You can override all translations using [Data Files](https://hexo.io/docs/data-files). 4 | 5 | 1. Creat a `languages.yml` in `source/_data`. 6 | 2. Insert following codes: (be careful about the two-space indent) 7 | 8 | ```yml 9 | # language 10 | zh-CN: 11 | # items 12 | post: 13 | copyright: 14 | # the translation you perfer 15 | author: 本文博主 16 | en: 17 | menu: 18 | schedule: Calendar 19 | ``` 20 | -------------------------------------------------------------------------------- /languages/default.yml: -------------------------------------------------------------------------------- 1 | en.yml 2 | -------------------------------------------------------------------------------- /languages/en.yml: -------------------------------------------------------------------------------- 1 | name: English 2 | 3 | favicon: 4 | show: (●´3`●)Goooood 5 | hide: (´Д`)Booooom 6 | 7 | title: 8 | archive: Archive 9 | category: Category 10 | tag: Tag 11 | all: All 12 | not_found: Σ( ° △ °|||)︴404! 13 | category_in: Posted in category "%s" 14 | tag_in: Posted with tag "%s" 15 | archive_in: Posted on "%s" 16 | 17 | menu: 18 | home: Home 19 | posts: Posts 20 | archives: Archives 21 | categories: Categories 22 | tags: Tags 23 | about: About 24 | search: Search 25 | 26 | sidebar: 27 | overview: Overview 28 | toc: Contents 29 | related: Related 30 | 31 | index: 32 | sticky: Sticky Posts 33 | category: Categories 34 | posts: Post List 35 | random_posts: Random Posts 36 | recent_comments: Recent Comments 37 | 38 | post: 39 | posted: Posted on 40 | edited: Edited on 41 | created: Created 42 | modified: Modified 43 | edit: Edit this post 44 | in: In 45 | read_more: Read more 46 | untitled: Untitled 47 | sticky: Sticky 48 | views: Views 49 | related_posts: Related Posts 50 | next: Next Post 51 | prev: Previous Post 52 | copyright: 53 | author: Post author 54 | link: Post link 55 | license_title: Copyright Notice 56 | license_content: "All articles in this blog are licensed under %s unless stating additionally." 57 | nocopy: "This page is prohibited reprint." 58 | 59 | footer: 60 | powered: "Powered by %s" 61 | total_views: Total Views 62 | total_visitors: Total Visitors 63 | 64 | counter: 65 | index: 66 | post: "%d posts in total" 67 | category: "%d subcategories in total, " 68 | tag_cloud: 69 | zero: No tags 70 | one: 1 tag in total 71 | other: "%d tags in total" 72 | categories: 73 | zero: No categories 74 | one: 1 category in total 75 | other: "%d categories in total" 76 | archive_posts: 77 | zero: No posts. 78 | one: 1 post. 79 | other: "%d posts in total." 80 | 81 | state: 82 | posts: posts 83 | tags: tags 84 | categories: categories 85 | 86 | search: 87 | placeholder: Search for Posts 88 | empty: "We didn't find any results for the search: ${query}" 89 | stats: "${hits} results found in ${time} ms" 90 | 91 | cheers: 92 | um: Um.. 93 | ok: OK 94 | nice: Nice 95 | good: Good 96 | great: Great 97 | excellent: Excellent 98 | 99 | keep_on: Keep on posting. 100 | 101 | symbol: 102 | comma: ", " 103 | period: ". " 104 | colon: ": " 105 | year: "Y" 106 | month: "M" 107 | 108 | reward: 109 | donate: Donate 110 | text: Give me a cup of [coffee]~( ̄▽ ̄)~* 111 | wechatpay: WeChat Pay 112 | alipay: Alipay 113 | paypal: PayPal 114 | bitcoin: Bitcoin 115 | 116 | follow_me: 117 | welcome: Welcome to my other publishing channels 118 | 119 | accessibility: 120 | nav_toggle: Toggle navigation bar 121 | prev_page: Previous page 122 | next_page: Next page 123 | 124 | symbols_count_time: 125 | count: Symbols count in article 126 | count_total: Symbols count total 127 | time: Reading time 128 | time_total: Reading time total 129 | time_minutes: mins. 130 | word: words 131 | view: times 132 | 133 | tips: 134 | copyright: "Copied to clipboard successfully!
All articles in this blog are licensed under %s." 135 | nocopy: "Copied to clipboard failed! This page is prohibited reprint." 136 | 137 | quiz: 138 | choice: Multiple Choice 139 | multiple: Multiple Answer 140 | true_false: True/False 141 | essay: Questions 142 | gap_fill: Gap Filling 143 | mistake: Wrong Answer 144 | -------------------------------------------------------------------------------- /languages/ja.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: 日本語 3 | favicon: 4 | show: (●´3`●)やれやれだぜ 5 | hide: (´Д`)大変だ! 6 | 7 | title: 8 | archive: アーカイブ 9 | category: カテゴリ 10 | tag: タグ 11 | all: 全て 12 | not_found: Σ( ° △ °|||)︴404!何も見えない 13 | category_in: 「%s」に分類された記事 14 | tag_in: タグ "%s"の記事 15 | archive_in: 「%s」で公開された記事 16 | 17 | menu: 18 | home: ホーム 19 | posts: 投稿 20 | archives: アーカイブ 21 | categories: カテゴリ 22 | tags: タグ 23 | about: プロフィール 24 | search: 検索 25 | 26 | sidebar: 27 | overview: 概要 28 | toc: 見出し 29 | related: 関連記事 30 | 31 | index: 32 | sticky: 固定記事 33 | category: 注目のカテゴリ 34 | posts: 記事のリスト 35 | random_posts: ランダムな記事 36 | recent_comments: 最近のコメント 37 | 38 | post: 39 | posted: 投稿日 40 | edited: 編集日 41 | created: 作成日 42 | modified: 修正日 43 | edit: この記事を編集する 44 | in: カテゴリ 45 | read_more: 続きを読む 46 | untitled: 無題 47 | sticky: 固定 48 | views: 閲覧数 49 | related_posts: 関連記事 50 | next: 次の記事 51 | prev: 前の記事 52 | copyright: 53 | author: 著者 54 | link: 記事へのリンク 55 | license_title: 著作権表示 56 | license_content: "このブログ内のすべての記事は、特別な記載がない限り %s の下のライセンスで保護されています。" 57 | nocopy: "再印刷は禁止されています。" 58 | 59 | footer: 60 | powered: "Powered by %s" 61 | total_views: 閲覧合計数 62 | total_visitors: 合計閲覧者数 63 | 64 | counter: 65 | index: 66 | post: "%d 件の記事" 67 | category: "%d サブカテゴリ," 68 | tag_cloud: 69 | zero: タグなし 70 | one: 全 1 タグ 71 | other: "全 %d タグ" 72 | categories: 73 | zero: カテゴリなし 74 | one: 全 1 カテゴリ 75 | other: "全 %d カテゴリ" 76 | archive_posts: 77 | zero: ポストなし 78 | one: 全 1 ポスト 79 | other: "全 %d ポスト" 80 | 81 | state: 82 | posts: ポスト 83 | tags: タグ 84 | categories: カテゴリ 85 | 86 | search: 87 | placeholder: 検索… 88 | empty: "「 ${query} 」については何も見つかりませんでした" 89 | stats: "${time} ms以内に ${hits} 件の結果が見つかりました" 90 | 91 | cheers: 92 | um: うーん 93 | ok: はい 94 | nice: まあまあ 95 | good: いいね 96 | great: すごい 97 | excellent: 最高 98 | 99 | keep_on: もっと書こう! 100 | 101 | symbol: 102 | comma: "、" 103 | period: "。" 104 | colon: ":" 105 | year: 年 106 | month: 月 107 | 108 | reward: 109 | donate: 寄付 110 | text: "*~( ̄▽ ̄)~[お茶]を一杯ください" 111 | wechatpay: WeChat 支払う 112 | alipay: Alipay 113 | paypal: PayPal 114 | bitcoin: ビットコイン 115 | 116 | follow_me: 117 | welcome: Welcome to my other publishing channels 118 | 119 | accessibility: 120 | nav_toggle: ナビゲーションバーの切り替え 121 | prev_page: 前のページ 122 | next_page: 次のページ 123 | 124 | symbols_count_time: 125 | count: 単語数 126 | count_total: 単語の総数 127 | time: 読書の時間 128 | time_total: 読書の合計時間 129 | time_minutes: 分 130 | word: 単語 131 | view: 回 132 | 133 | tips: 134 | copyright: "コピーは成功しました。
再印刷については、 %s 契約に従ってください。" 135 | nocopy: "コピーに失敗しました。
再印刷は禁止されています。" 136 | 137 | quiz: 138 | choice: 選択 139 | multiple: 複数選択 140 | true_false: 正誤 141 | essay: 問答 142 | gap_fill: 空欄 143 | mistake: 間違った答え 144 | -------------------------------------------------------------------------------- /languages/zh-CN.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: 简体中文 3 | favicon: 4 | show: (●´3`●)やれやれだぜ 5 | hide: (´Д`)大変だ! 6 | 7 | title: 8 | archive: 归档 9 | category: 分类 10 | tag: 标签 11 | all: 全部 12 | not_found: Σ( ° △ °|||)︴404!何も見えない 13 | category_in: 分类于"%s"的文章 14 | tag_in: 包含标签"%s"的文章 15 | archive_in: 发表于"%s"的文章 16 | 17 | menu: 18 | home: 首页 19 | posts: 文章 20 | archives: 归档 21 | categories: 分类 22 | tags: 标签 23 | about: 关于 24 | search: 搜索 25 | 26 | sidebar: 27 | overview: 站点概览 28 | toc: 文章目录 29 | related: 系列文章 30 | 31 | index: 32 | sticky: 置顶文章 33 | category: 精选分类 34 | posts: 文章列表 35 | random_posts: 随机文章 36 | recent_comments: 最新评论 37 | 38 | post: 39 | posted: 发表于 40 | edited: 更新于 41 | created: 创建时间 42 | modified: 修改时间 43 | edit: 编辑 44 | in: 分类于 45 | read_more: 阅读全文 46 | untitled: 未命名 47 | sticky: 置顶 48 | views: 阅读次数 49 | related_posts: 相关文章 50 | next: 下一篇 51 | prev: 上一篇 52 | copyright: 53 | author: 本文作者 54 | link: 本文链接 55 | license_title: 版权声明 56 | license_content: "本站所有文章除特别声明外,均采用 %s 许可协议。转载请注明出处!" 57 | nocopy: "本页内容禁止转载!" 58 | 59 | footer: 60 | powered: "基于 %s" 61 | total_views: 总访问量 62 | total_visitors: 总访客量 63 | 64 | counter: 65 | index: 66 | post: "%d 篇文章" 67 | category: "%d 个子项," 68 | tag_cloud: 69 | zero: 暂无标签 70 | one: 目前共计 1 个标签 71 | other: "目前共计 %d 个标签" 72 | categories: 73 | zero: 暂无分类 74 | one: 目前共计 1 个分类 75 | other: "目前共计 %d 个分类" 76 | archive_posts: 77 | zero: 暂无文章。 78 | one: 目前共计 1 篇文章。 79 | other: "目前共计 %d 篇文章。" 80 | 81 | state: 82 | posts: 文章 83 | tags: 标签 84 | categories: 分类 85 | 86 | search: 87 | placeholder: 文章搜索 88 | empty: "关于 「 ${query} 」,什么也没搜到" 89 | stats: "${time} ms 内找到 ${hits} 条结果" 90 | 91 | cheers: 92 | um: 嗯.. 93 | ok: 还行 94 | nice: 不错 95 | good: 很好 96 | great: 非常好 97 | excellent: 太棒了 98 | 99 | keep_on: 继续努力。 100 | 101 | symbol: 102 | comma: "," 103 | period: "。" 104 | colon: ":" 105 | year: 年 106 | month: 月 107 | 108 | reward: 109 | donate: 赞赏 110 | text: 请我喝[茶]~( ̄▽ ̄)~* 111 | wechatpay: 微信支付 112 | alipay: 支付宝 113 | paypal: 贝宝 114 | bitcoin: 比特币 115 | 116 | follow_me: 117 | welcome: 欢迎关注我的其它发布渠道 118 | 119 | accessibility: 120 | nav_toggle: 切换导航栏 121 | prev_page: 上一页 122 | next_page: 下一页 123 | 124 | symbols_count_time: 125 | count: 本文字数 126 | count_total: 站点总字数 127 | time: 阅读时长 128 | time_total: 站点阅读时长 129 | time_minutes: 分钟 130 | word: 字 131 | view: 次 132 | 133 | tips: 134 | copyright: "复制成功,转载请遵守 %s 协议。" 135 | nocopy: "复制失败,本页内容禁止转载!" 136 | 137 | quiz: 138 | choice: 单选题 139 | multiple: 多选题 140 | true_false: 判断题 141 | essay: 问答题 142 | gap_fill: 填空题 143 | mistake: 错题备注 144 | -------------------------------------------------------------------------------- /languages/zh-HK.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: 繁體中文(香港) 3 | favicon: 4 | show: (●´3`●)復活成功 5 | hide: (´Д`)瀏覽器崩潰啦 6 | 7 | title: 8 | archive: 歸檔 9 | category: 分類 10 | tag: 標籤 11 | all: 全部 12 | not_found: Σ( ° △ °|||)︴404!何も見えない 13 | category_in: 分類於"%s"的文章 14 | tag_in: 包含標籤"%s"的文章 15 | archive_in: 發表於"%s"的文章 16 | 17 | menu: 18 | home: 首頁 19 | posts: 文章 20 | archives: 歸檔 21 | categories: 分類 22 | tags: 標籤 23 | about: 關於 24 | search: 檢索 25 | 26 | sidebar: 27 | overview: 本站概覽 28 | toc: 文章目錄 29 | related: 系列文章 30 | 31 | index: 32 | sticky: 置頂文章 33 | category: 精選分類 34 | posts: 文章列表 35 | random_posts: 隨機文章 36 | recent_comments: 最新評論 37 | 38 | post: 39 | posted: 發表於 40 | edited: 更新於 41 | created: 創建時間 42 | modified: 修改時間 43 | edit: 編輯 44 | in: 分類於 45 | read_more: 閱讀全文 46 | untitled: 未命名 47 | sticky: 置頂 48 | views: 閱讀次數 49 | related_posts: 相關文章 50 | next: 下一篇 51 | prev: 上一篇 52 | copyright: 53 | author: 博主 54 | link: 文章連結 55 | license_title: 版權聲明 56 | license_content: "本網誌所有文章除特別聲明外,均採用 %s 許可協議。轉載請註明出處!" 57 | nocopy: "本頁內容禁止轉載!" 58 | 59 | footer: 60 | powered: "基於 %s" 61 | total_views: 總瀏覽次數 62 | total_visitors: 訪客總數 63 | 64 | counter: 65 | index: 66 | post: "%d 篇文章" 67 | category: "%d 個子項," 68 | tag_cloud: 69 | zero: 暫無標籤 70 | one: 目前共有 1 個標籤 71 | other: "目前共有 %d 個標籤" 72 | categories: 73 | zero: 暫無分類 74 | one: 目前共有 1 個分類 75 | other: "目前共有 %d 個分類" 76 | archive_posts: 77 | zero: 暫無文章。 78 | one: 目前共有 1 篇文章。 79 | other: "目前共有 %d 篇文章。" 80 | 81 | state: 82 | posts: 文章 83 | tags: 標籤 84 | categories: 分類 85 | 86 | search: 87 | placeholder: 文章搜索 88 | empty: "關於 「 ${query} 」 ,什麼也沒搜到" 89 | stats: "${time} ms 內找到 ${hits} 條結果" 90 | 91 | cheers: 92 | um: 嗯.. 93 | ok: 還行 94 | nice: 好 95 | good: 很好 96 | great: 非常好 97 | excellent: 太棒了 98 | 99 | keep_on: 繼續努力。 100 | 101 | symbol: 102 | comma: "," 103 | period: "。" 104 | colon: ":" 105 | year: 年 106 | month: 月 107 | 108 | reward: 109 | donate: 打賞 110 | text: 請我喝[茶]~( ̄▽ ̄)~* 111 | wechatpay: 微信支付 112 | alipay: 支付寶 113 | paypal: PayPal 114 | bitcoin: 比特幣 115 | 116 | follow_me: 117 | welcome: 歡迎關注我的其它發布渠道 118 | 119 | accessibility: 120 | nav_toggle: 切換導航欄 121 | prev_page: 上一頁 122 | next_page: 下一頁 123 | 124 | symbols_count_time: 125 | count: 本文字數 126 | count_total: 站點總字數 127 | time: 閱讀時長 128 | time_total: 站點閱讀時長 129 | time_minutes: 分鍾 130 | word: 字 131 | view: 次 132 | 133 | tips: 134 | copyright: "複製成功,轉載請遵守 %s 協議。" 135 | nocopy: "複製失敗,本頁內容禁止轉載!" 136 | 137 | quiz: 138 | choice: 單選題 139 | multiple: 多選題 140 | true_false: 判斷題 141 | essay: 問答題 142 | gap_fill: 填空題 143 | mistake: 錯題備註 144 | -------------------------------------------------------------------------------- /languages/zh-TW.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: 繁體中文 3 | favicon: 4 | show: (●´3`●)復活成功 5 | hide: (´Д`)瀏覽器崩潰啦 6 | 7 | title: 8 | archive: 歸檔 9 | category: 分類 10 | tag: 標籤 11 | all: 全部 12 | not_found: Σ( ° △ °|||)︴404!何も見えない 13 | category_in: 分類於"%s"的文章 14 | tag_in: 包含標籤"%s"的文章 15 | archive_in: 發表於"%s"的文章 16 | 17 | menu: 18 | home: 首頁 19 | posts: 文章 20 | archives: 歸檔 21 | categories: 分類 22 | tags: 標籤 23 | about: 關於 24 | search: 檢索 25 | 26 | sidebar: 27 | overview: 本站概要 28 | toc: 文章目錄 29 | related: 系列文章 30 | 31 | index: 32 | sticky: 置頂文章 33 | category: 精選分類 34 | posts: 文章列表 35 | random_posts: 隨機文章 36 | recent_comments: 最新評論 37 | 38 | post: 39 | posted: 發表於 40 | edited: 更新於 41 | created: 創建時間 42 | modified: 修改時間 43 | edit: 編輯 44 | in: 分類於 45 | read_more: 閱讀全文 46 | untitled: 未命名 47 | sticky: 置頂 48 | views: 閱讀次數 49 | related_posts: 相關文章 50 | next: 下一篇 51 | prev: 上一篇 52 | copyright: 53 | author: 作者 54 | link: 文章連結 55 | license_title: 版權聲明 56 | license_content: "本網誌所有文章除特別聲明外,均採用 %s 許可協議。轉載請註明出處!" 57 | nocopy: "本頁內容禁止轉載!" 58 | 59 | footer: 60 | powered: "基於 %s" 61 | total_views: 總瀏覽次數 62 | total_visitors: 訪客總數 63 | 64 | counter: 65 | index: 66 | post: "%d 篇文章" 67 | category: "%d 個子項," 68 | tag_cloud: 69 | zero: 沒有標籤 70 | one: 目前共有 1 個標籤 71 | other: "目前共有 %d 個標籤" 72 | categories: 73 | zero: 沒有分類 74 | one: 目前共有 1 個分類 75 | other: "目前共有 %d 個分類" 76 | archive_posts: 77 | zero: 沒有文章。 78 | one: 目前共有 1 篇文章。 79 | other: "目前共有 %d 篇文章。" 80 | 81 | state: 82 | posts: 文章 83 | tags: 標籤 84 | categories: 分類 85 | 86 | search: 87 | placeholder: 文章搜尋 88 | empty: "關於 「 ${query} 」 ,什麼也沒搜到" 89 | stats: "${time} ms 內找到 ${hits} 條結果" 90 | 91 | cheers: 92 | um: 嗯.. 93 | ok: 還行 94 | nice: 好 95 | good: 很好 96 | great: 非常好 97 | excellent: 太棒了 98 | 99 | keep_on: 繼續努力。 100 | 101 | symbol: 102 | comma: "," 103 | period: "。" 104 | colon: ":" 105 | year: 年 106 | month: 月 107 | 108 | reward: 109 | donate: 捐贈 110 | text: 請我喝[茶]~( ̄▽ ̄)~* 111 | wechatpay: 微信支付 112 | alipay: 支付寶 113 | paypal: PayPal 114 | bitcoin: 比特幣 115 | 116 | follow_me: 117 | welcome: 歡迎關注我的其它發布渠道 118 | 119 | accessibility: 120 | nav_toggle: 切換導航欄 121 | prev_page: 上一頁 122 | next_page: 下一頁 123 | 124 | symbols_count_time: 125 | count: 文章字數 126 | count_total: 總字數 127 | time: 所需閱讀時間 128 | time_total: 所需總閱讀時間 129 | time_minutes: 分鐘 130 | word: 字 131 | view: 次 132 | 133 | tips: 134 | copyright: "複製成功,轉載請遵守 %s 協議。" 135 | nocopy: "複製失敗,本頁內容禁止轉載!" 136 | 137 | quiz: 138 | choice: 單選題 139 | multiple: 多選題 140 | true_false: 判斷題 141 | essay: 問答題 142 | gap_fill: 填空題 143 | mistake: 錯題備註 144 | -------------------------------------------------------------------------------- /layout/_alternate/atom.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%= config.url %> 4 | <%= config.title %> 5 | <%= config.subtitle %> 6 | <%= full_url_for('/images/favicon.ico') %> 7 | 8 | 9 | <%= config.author %> 10 | 11 | <%= moment(lastBuildDate).toISOString() %> 12 | <%_ for (item of (config.keywords ? config.keywords.split(',') : [])) { _%> 13 | 14 | <%_ } _%> 15 | <%_ for (const post of posts) { _%> 16 | 17 | <%= post.permalink %> 18 | <%= post.title %> 19 | 20 | <%= post.content %> 21 | <%_ for (const { name, path } of (post.categories ? post.categories.toArray() : [])) { _%> 22 | 23 | <%_ } _%> 24 | <%_ for (const { name, path } of (post.tags ? post.tags.toArray() : [])) { _%> 25 | 26 | <%_ } _%> 27 | <%= moment(post.date).toISOString() %> 28 | 29 | <%_ } _%> 30 | 31 | -------------------------------------------------------------------------------- /layout/_alternate/json.ejs: -------------------------------------------------------------------------------- 1 | <%- JSON.stringify({ 2 | version: 'https://jsonfeed.org/version/1', 3 | title: config.title, 4 | subtitle: config.subtitle, 5 | icon: full_url_for('/images/favicon.ico'), 6 | description: config.description, 7 | home_page_url: config.url, 8 | items: posts.map(post => ({ 9 | id: post.permalink, 10 | url: post.permalink, 11 | title: post.title, 12 | date_published: moment(post.date).toISOString(), 13 | content_html: post.content || '', 14 | tags: [...(post.categories ? post.categories.toArray() : []).map(({ name }) => name), ...(post.tags ? post.tags.toArray() : []).map(({ name }) => name)] 15 | })) 16 | }, null, 4) _%> 17 | -------------------------------------------------------------------------------- /layout/_alternate/rss.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= config.title %> 5 | <%= config.subtitle %> 6 | <%= full_url_for('/images/favicon.ico') %> 7 | <%= config.url %> 8 | 9 | <%= config.author %> 10 | 11 | <%= config.description %> 12 | <%= config.language %> 13 | <%= moment(lastBuildDate).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %> 14 | <%= moment(lastBuildDate).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %> 15 | <%_ for (item of (config.keywords ? config.keywords.split(',') : [])) { _%> 16 | 17 | <%_ } _%> 18 | <%_ for (const post of posts) { _%> 19 | 20 | <%= post.permalink %> 21 | <%= post.title %> 22 | <%= post.permalink %> 23 | <%_ for (const { name, path } of (post.categories ? post.categories.toArray() : [])) { _%> 24 | 25 | <%_ } _%> 26 | <%_ for (const { name, path } of (post.tags ? post.tags.toArray() : [])) { _%> 27 | 28 | <%_ } _%> 29 | <%= moment(post.date).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %> 30 | ]]> 31 | 32 | <%_ } _%> 33 | 34 | 35 | -------------------------------------------------------------------------------- /layout/_macro/breadcrumb.njk: -------------------------------------------------------------------------------- 1 | {% macro render(post, home) %} 2 | {%- if home %} 3 | `; 81 | } 82 | }); 83 | 84 | return ``; 85 | 86 | } 87 | 88 | hexo.extend.tag.register('links', linkGrid, {ends: true}); 89 | hexo.extend.tag.register('linksfile', linkGrid, {ends: false, async: true}) 90 | -------------------------------------------------------------------------------- /scripts/tags/media.js: -------------------------------------------------------------------------------- 1 | 2 | /* global hexo */ 3 | 4 | 'use strict'; 5 | const yaml = require('js-yaml'); 6 | function postMedia(args, content) { 7 | if(!args[0] || !content) { 8 | return 9 | } 10 | const list = yaml.load(content); 11 | switch(args[0]) { 12 | case 'video': 13 | case 'audio': 14 | return `
`; 15 | break; 16 | } 17 | 18 | } 19 | 20 | hexo.extend.tag.register('media', postMedia, {ends: true}); 21 | 22 | // return ``; 23 | -------------------------------------------------------------------------------- /source/css/_common/components/components.styl: -------------------------------------------------------------------------------- 1 | @import 'post'; 2 | @import 'pages'; 3 | @import 'third-party'; 4 | 5 | @import 'highlight'; 6 | @import 'tags'; 7 | -------------------------------------------------------------------------------- /source/css/_common/components/highlight/operation.styl: -------------------------------------------------------------------------------- 1 | .operation { 2 | color: var(--grey-5); 3 | cursor: pointer; 4 | position: absolute; 5 | padding: .125rem .375rem; 6 | right: .125rem; 7 | top: .45rem; 8 | font-size: $font-size-smaller; 9 | 10 | span { 11 | the-transition(); 12 | margin: 0 .3125rem; 13 | 14 | &:hover { 15 | color: var(--grey-7); 16 | } 17 | } 18 | 19 | } 20 | 21 | 22 | -------------------------------------------------------------------------------- /source/css/_common/components/pages/collapse.styl: -------------------------------------------------------------------------------- 1 | .collapse { 2 | 3 | small { 4 | color: var(--grey-4); 5 | margin: auto .3125rem; 6 | } 7 | 8 | .item { 9 | position: relative; 10 | padding: 1.25rem 1.875rem; 11 | margin: 0; 12 | 13 | 14 | &::before { 15 | content: ""; 16 | position: absolute; 17 | z-index: $zindex-1; 18 | the-transition(); 19 | box-sizing: unset; 20 | top: 1.9rem; 21 | left: 0; 22 | width: .6rem; 23 | height: .6rem; 24 | border: .15rem solid var(--primary-color); 25 | border-radius: 50%; 26 | background: var(--grey-1); 27 | } 28 | 29 | &:not(:last-child):not(.title)::after { 30 | content: ""; 31 | position: absolute; 32 | top: 1.9rem; 33 | bottom: -1.9rem; 34 | left: .35rem; 35 | border-left: .2rem solid var(--color-red-a3); 36 | } 37 | 38 | &:hover::before { 39 | border-color: var(--color-blue); 40 | } 41 | } 42 | 43 | 44 | .item.header { 45 | 46 | &::after { 47 | border-left-style: dashed !important; 48 | } 49 | 50 | .cheers { 51 | display: block; 52 | } 53 | } 54 | 55 | .item.section { 56 | &::before { 57 | width: .4rem; 58 | height: .4rem; 59 | margin-left: .1rem; 60 | } 61 | } 62 | 63 | .item.title, .item.header, .item.section { 64 | a { 65 | border-bottom: .0625rem dashed var(--grey-4); 66 | } 67 | &:hover a { 68 | border-bottom-color: var(--color-blue); 69 | } 70 | } 71 | 72 | .item.normal { 73 | 74 | &::before { 75 | top: 1.4rem; 76 | width: .2rem; 77 | height: .2rem; 78 | margin-left: .2rem; 79 | background: var(--primary-color); 80 | } 81 | 82 | &:hover::before { 83 | background: var(--color-blue); 84 | } 85 | 86 | display: flex; 87 | flex-wrap: wrap; 88 | align-items: center; 89 | padding: .625rem 1.875rem; 90 | 91 | 92 | .meta { 93 | display: inline; 94 | font-size: $font-size-smallest; 95 | margin-right: .625rem; 96 | 97 | time { 98 | color: var(--grey-4); 99 | } 100 | } 101 | 102 | .title { 103 | display: inline; 104 | 105 | a { 106 | color: var(--primary-color); 107 | 108 | &:hover { 109 | color: var(--color-blue); 110 | } 111 | } 112 | 113 | .i-link-alt { 114 | font-size: $font-size-small; 115 | margin-left: .3125rem; 116 | } 117 | } 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /source/css/_common/components/pages/pages.styl: -------------------------------------------------------------------------------- 1 | // Page specific styles 2 | 3 | @import 'home'; 4 | @import 'collapse'; 5 | @import 'tag-cloud'; 6 | 7 | .page { 8 | .notfound { 9 | width: 18.75rem; 10 | height: 22.625rem; 11 | background: url("../images/404.png") no-repeat center bottom; 12 | text-align: center; 13 | margin: 6.25rem auto; 14 | } 15 | 16 | .anchor::before { 17 | font-family-icons(); 18 | color: var(--grey-4); 19 | position: absolute; 20 | left: -1.5625rem; 21 | margin-top: .25rem; 22 | visibility: visible; 23 | 24 | +mobile-small() { 25 | left: -.1875rem; 26 | } 27 | } 28 | 29 | .body h1 .anchor::before { 30 | @extend .i-sakura:before; 31 | @extend .rotate; 32 | font-size: $font-size-small; 33 | margin-top: .15rem; 34 | color: pink; 35 | left: -1.875rem; 36 | 37 | +mobile-small() { 38 | left: -.3125rem; 39 | } 40 | } 41 | 42 | .body h2 .anchor::before { 43 | @extend .i-heartbeat:before; 44 | @extend .beat; 45 | font-size: $font-size-smaller; 46 | color: var(--color-pink); 47 | } 48 | 49 | .body h3 .anchor::before { 50 | @extend .i-star:before; 51 | @extend .flash; 52 | font-size: $font-size-smallest; 53 | color: var(--color-orange); 54 | } 55 | 56 | } 57 | -------------------------------------------------------------------------------- /source/css/_common/components/pages/tag-cloud.styl: -------------------------------------------------------------------------------- 1 | .tag.cloud { 2 | text-align: center; 3 | 4 | a { 5 | display: inline-block; 6 | margin: .625rem; 7 | 8 | &:hover { 9 | color: var(--primary-color) !important; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /source/css/_common/components/post/breadcrumb.styl: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | display: inline-flex; 3 | font-size: $font-size-smaller; 4 | align-items: center; 5 | margin: 1.25rem 0; 6 | flex-wrap: wrap; 7 | 8 | .ic { 9 | margin: 0 .125rem; 10 | color: var(--grey-4); 11 | 12 | &:nth-child(1) { 13 | margin-left: 0rem; 14 | margin-right: .3125rem; 15 | } 16 | } 17 | 18 | span { 19 | white-space: pre; 20 | } 21 | 22 | span.current { 23 | background-color: var(--color-red-a1); 24 | border-radius: .625rem; 25 | padding: 0 .625rem; 26 | the-transition(); 27 | 28 | span { 29 | white-space: normal; 30 | } 31 | a { 32 | color: var(--primary-color); 33 | } 34 | 35 | &:hover { 36 | background-color: var(--color-red-a3); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /source/css/_common/components/post/copyright.styl: -------------------------------------------------------------------------------- 1 | #copyright { 2 | background: var(--grey-2); 3 | padding: 1rem 2rem; 4 | position: relative; 5 | font-size: $font-size-smallest; 6 | border-radius: .625rem; 7 | color: var(--grey-6); 8 | 9 | li { 10 | &::before { 11 | font-family-icons() 12 | color: var(--grey-5); 13 | margin-right: .3125rem; 14 | font-size: 1.1rem; 15 | line-height: .75rem; 16 | vertical-align: -.0667rem; 17 | } 18 | } 19 | 20 | .author::before { 21 | @extend .i-person:before; 22 | } 23 | 24 | .link::before { 25 | @extend .i-link-circle:before; 26 | } 27 | 28 | .license::before { 29 | @extend .i-share:before; 30 | } 31 | // &::before { 32 | // content: ""; 33 | // position: absolute; 34 | // width: .3125rem; 35 | // height: 100%; 36 | // left: -.3125rem; 37 | // top: 0rem; 38 | // background: var(--primary-color); 39 | // border-radius: .375rem; 40 | // } 41 | } 42 | -------------------------------------------------------------------------------- /source/css/_common/components/post/footer.styl: -------------------------------------------------------------------------------- 1 | .post footer { 2 | &::before { 3 | content: ""; 4 | width: 100%; 5 | height: .0625rem; 6 | background: var(--grey-3); 7 | display: block; 8 | margin: 1.25rem auto 0rem; 9 | } 10 | 11 | } 12 | -------------------------------------------------------------------------------- /source/css/_common/components/post/header.styl: -------------------------------------------------------------------------------- 1 | .post header { 2 | font-size: $font-size-large; 3 | margin-bottom: .625rem; 4 | 5 | 6 | .title { 7 | font-size: $font-size-largest; 8 | margin: initial; 9 | text-align: center; 10 | word-wrap(); 11 | padding-bottom: .625rem; 12 | } 13 | 14 | 15 | .link { 16 | display: inline-block; 17 | position: relative; 18 | vertical-align: top; 19 | 20 | .i-link-alt { 21 | font-size: $font-size-small; 22 | margin-left: .3125rem; 23 | } 24 | } 25 | 26 | .meta { 27 | text-align: center; 28 | border-top: .0625rem dashed var(--grey-9-a1); 29 | font-family: $font-family-posts; 30 | } 31 | 32 | } 33 | 34 | 35 | .post .meta { 36 | color: var(--grey-5); 37 | font-size: $font-size-smallest; 38 | text-align: right; 39 | 40 | .item { 41 | //border-radius: .625rem; 42 | //padding: 0 .625rem; 43 | display: inline-block; 44 | //margin-bottom: .3125rem; 45 | margin-right: .625rem; 46 | //the-transition(); 47 | } 48 | 49 | /*.item:nth-child(1) { 50 | background-color: var(--color-red-a1); 51 | color: var(--color-red); 52 | &:hover { 53 | background-color: var(--color-red-a3); 54 | } 55 | } 56 | .item:nth-child(2) { 57 | background-color: alpha($blue,.15); 58 | color: $blue; 59 | &:hover { 60 | background-color: alpha($blue,.3); 61 | } 62 | } 63 | .item:nth-child(3) { 64 | background-color: alpha($orange,.15); 65 | color: $orange; 66 | &:hover { 67 | background-color: alpha($orange ,.3); 68 | } 69 | }*/ 70 | 71 | .icon { 72 | margin-right: .1875rem; 73 | 74 | +tablet-mobile() { 75 | display: inline-block; 76 | } 77 | } 78 | 79 | } 80 | -------------------------------------------------------------------------------- /source/css/_common/components/post/nav.styl: -------------------------------------------------------------------------------- 1 | .post-nav { 2 | display: flex; 3 | margin-bottom: 2.5rem; 4 | 5 | +mobile() { 6 | flex-direction: column; 7 | } 8 | 9 | .item { 10 | width: 50%; 11 | +mobile() { 12 | width: 100%; 13 | } 14 | 15 | a { 16 | display: flex; 17 | flex-direction: column; 18 | height: 100%; 19 | color: var(--header-text-color); 20 | padding: 1.25rem 2.5rem; 21 | background-size: cover; 22 | position: relative; 23 | 24 | &::before { 25 | content: ""; 26 | position: absolute; 27 | width: 100%; 28 | height: 100%; 29 | background: linear-gradient(135deg,#434343,#000); 30 | opacity: .5; 31 | the-transition(); 32 | z-index: -1; 33 | top: 0; 34 | left: 0; 35 | } 36 | 37 | &:hover { 38 | &::before { 39 | opacity: .4; 40 | } 41 | } 42 | } 43 | 44 | span { 45 | font-size: $font-size-smaller; 46 | } 47 | 48 | &.left { 49 | span, h3 { 50 | align-self: flex-start; 51 | } 52 | } 53 | 54 | &.right { 55 | span, h3 { 56 | align-self: flex-end; 57 | text-align: right; 58 | } 59 | } 60 | 61 | } 62 | 63 | } 64 | -------------------------------------------------------------------------------- /source/css/_common/components/post/post.styl: -------------------------------------------------------------------------------- 1 | .post.block { 2 | padding: 0 2rem; 3 | } 4 | 5 | .md { 6 | font-family: $font-family-posts; 7 | word-wrap(); 8 | 9 | .exturl .ic { 10 | font-size: $font-size-small; 11 | margin-left: .25rem; 12 | } 13 | 14 | .button { 15 | margin-top: 2.5rem; 16 | text-align: center; 17 | } 18 | } 19 | 20 | 21 | @import 'breadcrumb'; 22 | @import 'header'; 23 | @import 'nav'; 24 | @import 'expand'; 25 | @import 'rtl'; 26 | @import 'footer'; 27 | @import 'tags'; 28 | @import 'reward'; 29 | @import 'copyright'; 30 | -------------------------------------------------------------------------------- /source/css/_common/components/post/reward.styl: -------------------------------------------------------------------------------- 1 | .reward { 2 | margin: 1.25rem auto; 3 | padding: .625rem 0; 4 | text-align: center; 5 | 6 | button { 7 | background: var(--primary-color); 8 | border: 0; 9 | border-radius: .3125rem; 10 | color: var(--grey-0); 11 | cursor: pointer; 12 | line-height: 2; 13 | outline: 0; 14 | padding: 0 .9375rem; 15 | vertical-align: text-top; 16 | 17 | &:hover { 18 | background: var(--primary-color); 19 | } 20 | 21 | i { 22 | margin-right: .3125rem; 23 | } 24 | } 25 | 26 | p { 27 | font-size: $font-size-smaller; 28 | color: var(--grey-5); 29 | margin: 0; 30 | } 31 | } 32 | 33 | #qr { 34 | padding-top: 1.25rem; 35 | display: none; 36 | 37 | a { 38 | border: 0; 39 | } 40 | 41 | img { 42 | display: inline-block; 43 | max-width: 100%; 44 | } 45 | 46 | p { 47 | text-align: center; 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /source/css/_common/components/post/rtl.styl: -------------------------------------------------------------------------------- 1 | .rtl { 2 | &.body { 3 | p, a, h1, h2, h3, h4, h5, h6, li, ul, ol { 4 | direction: rtl; 5 | font-family: UKIJ Ekran; 6 | } 7 | } 8 | 9 | &.title { 10 | font-family: UKIJ Ekran; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /source/css/_common/components/post/tags.styl: -------------------------------------------------------------------------------- 1 | .post .tags { 2 | text-align: left; 3 | margin-top: .625rem; 4 | font-size: $font-size-smallest; 5 | 6 | a { 7 | display: inline-block; 8 | position: relative; 9 | padding: 0rem .3125rem; 10 | border-radius: .3125rem; 11 | background: var(--note-bg); 12 | color: var(--note-text); 13 | 14 | &:not(:last-child) { 15 | margin-right: .625rem; 16 | } 17 | 18 | &:before { 19 | content: ''; 20 | position: absolute; 21 | bottom: 0; 22 | height: 100%; 23 | width: 0; 24 | right: 0; 25 | background: var(--color-red-a1); 26 | border-radius: .25rem; 27 | the-transition(); 28 | } 29 | 30 | &:hover { 31 | color: var(--primary-color); 32 | 33 | &:before { 34 | width: 104%; 35 | left: -2%; 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/collapse.styl: -------------------------------------------------------------------------------- 1 | ::-webkit-details-marker { 2 | display: none; 3 | } 4 | 5 | details{ 6 | > summary:first-of-type { 7 | list-style-type: none; 8 | } 9 | 10 | summary { 11 | outline: none; 12 | cursor: pointer; 13 | padding: .625rem; 14 | background: var(--note-bg, none); 15 | border-radius: .25rem; 16 | transition: all .4s ease; 17 | 18 | &::before { 19 | font-family-icons(); 20 | @extend .i-angle-right:before; 21 | color: var(--grey-4); 22 | margin-right: .5rem; 23 | } 24 | } 25 | 26 | > div { 27 | padding: .625rem; 28 | } 29 | 30 | &.primary, &.info, &.success, &.warning, &.danger { 31 | margin: 0 0 .8rem; 32 | summary { 33 | color: var(--note-text); 34 | &::before { 35 | color: var(--note-text); 36 | } 37 | } 38 | } 39 | } 40 | 41 | details[open] { 42 | background: var(--note-bg, none); 43 | border-radius: .25rem; 44 | color: var(--grey-6); 45 | 46 | summary { 47 | background: var(--note-hover, var(--grey-2)); 48 | border-radius: .25rem; 49 | 50 | &::before { 51 | @extend .i-angle-down:before; 52 | color: var(--primary-color); 53 | } 54 | } 55 | 56 | > div { 57 | margin: 0 0 .8rem; 58 | @extend .fade-in; 59 | } 60 | 61 | &.primary, &.info, &.success, &.warning, &.danger { 62 | color: var(--note-text); 63 | > summary { 64 | color: #FFF; 65 | border-radius: .25rem .25rem 0 0; 66 | 67 | &::before { 68 | color: #FFF; 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/container.styl: -------------------------------------------------------------------------------- 1 | .md { 2 | .note, details { 3 | h2, 4 | h3, 5 | h4, 6 | h5, 7 | h6 { 8 | margin-top: .1875rem; 9 | border-bottom: initial; 10 | margin-bottom: 0; 11 | padding-top: 0; 12 | } 13 | 14 | p { 15 | line-height: 1.8; 16 | } 17 | 18 | a { 19 | &:not(.btn) { 20 | color: var(--note-hover); 21 | border-bottom: .0625rem dashed var(--note-text); 22 | 23 | &:hover { 24 | color: var(--note-text); 25 | border-bottom-color: var(--note-text); 26 | } 27 | } 28 | } 29 | 30 | ul { 31 | li::before { 32 | background: var(--note-text); 33 | } 34 | } 35 | 36 | ol { 37 | li:before { 38 | background: var(--note-text, var(--primary-color)) !important; 39 | width: .8rem; 40 | height: .8rem; 41 | font-size: .45rem; 42 | line-height: .8rem; 43 | top: .4rem; 44 | left: -1.2rem 45 | } 46 | } 47 | } 48 | } 49 | 50 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/label.styl: -------------------------------------------------------------------------------- 1 | span.label { 2 | display: inline; 3 | border-radius: .3rem; 4 | border: .0625rem solid; 5 | padding: .2rem .3rem; 6 | font-family: $font-family-monospace; 7 | font-size: $font-size-medium; 8 | 9 | background: var(--note-bg, var(--grey-2)); 10 | border-color: var(--note-border, var(--grey-4)); 11 | color: var(--note-text, var(--grey-6)); 12 | } 13 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/links.styl: -------------------------------------------------------------------------------- 1 | .links { 2 | display: flex; 3 | flex-wrap: wrap; 4 | font-size: .9rem; 5 | 6 | 7 | .item { 8 | position: relative; 9 | display: inline-flex; 10 | justify-self: center; 11 | align-items: center; 12 | line-height: 1.5; 13 | width: calc(50% - 2rem); 14 | padding: .5rem 1rem; 15 | margin: 1rem; 16 | the-transition(); 17 | shadow-box(); 18 | 19 | --bg-color: var(--block-color, #666); 20 | 21 | .image { 22 | display: block; 23 | width: 4rem; 24 | height: 4rem; 25 | border-radius: .9375rem; 26 | background: var(--grey-1) center no-repeat; 27 | background-size: contain; 28 | flex-shrink: 0; 29 | border: none; 30 | } 31 | 32 | .info { 33 | padding-left: 1rem; 34 | } 35 | 36 | .title { 37 | margin: .5rem 0; 38 | font-family: $font-family-title; 39 | font-weight: bold; 40 | color: var(--bg-color); 41 | border: none; 42 | .ic { 43 | display: none; 44 | } 45 | } 46 | 47 | .desc { 48 | font-size: $font-size-smallest; 49 | margin: .5rem 0; 50 | } 51 | 52 | 53 | &:hover { 54 | color: var(--header-text-color); 55 | background-color: var(--bg-color); 56 | box-shadow: 0 .125rem 1.25rem var(--bg-color); 57 | border-color: var(--bg-color); 58 | 59 | .image { 60 | mix-blend-mode: normal; 61 | background-color: var(--bg-color); 62 | } 63 | 64 | .title { 65 | color: var(--header-text-color); 66 | } 67 | } 68 | } 69 | 70 | 71 | +mobile() { 72 | font-size: $font-size-base; 73 | .item { 74 | width: calc(100% - 2rem); 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/list.styl: -------------------------------------------------------------------------------- 1 | .md { 2 | li { 3 | position: relative; 4 | margin: .2rem 0; 5 | 6 | &:before { 7 | the-transition(); 8 | } 9 | 10 | p { 11 | margin: 0; 12 | } 13 | } 14 | 15 | ul, ol, dl { 16 | margin: .5em 0 .5em; 17 | padding: .1em .2em .1em 1.4em; 18 | } 19 | 20 | ul > li, 21 | dl dt { 22 | &::before { 23 | content: ""; 24 | position: absolute; 25 | width: .4em; 26 | height: .4em; 27 | background: var(--primary-color); 28 | border-radius: 50%; 29 | top: .85em; 30 | left: -1em; 31 | } 32 | 33 | &:hover::before { 34 | background: var(--color-pink); 35 | } 36 | } 37 | 38 | ol { 39 | &:not([start]) { 40 | counter-reset: counter; 41 | } 42 | 43 | >li { 44 | 45 | &::before { 46 | counter-increment: counter; 47 | content: counter(counter); 48 | position: absolute; 49 | width: 1.4em; 50 | height: 1.4em; 51 | border-radius: 50%; 52 | text-align: center; 53 | font-size: .8em; 54 | line-height: 1.4; 55 | top: .5em; 56 | left: -1.8em; 57 | background: var(--primary-color); 58 | color: var(--grey-1); 59 | cursor: pointer; 60 | } 61 | 62 | &:hover::before { 63 | color: var(--grey-1); 64 | background: var(--color-pink); 65 | } 66 | } 67 | } 68 | 69 | dl { 70 | dt { 71 | position: relative; 72 | } 73 | dd { 74 | padding-left: .9375em; 75 | } 76 | } 77 | 78 | ul { 79 | li.nodot { 80 | &::before { 81 | li-nodot(); 82 | } 83 | } 84 | 85 | li.task-list-item { 86 | &::before { 87 | li-nodot(); 88 | } 89 | 90 | input[type='checkbox'] { 91 | display: none; 92 | } 93 | 94 | input[type='checkbox']+label::before { 95 | @extend .i-times-circle:before; 96 | font-family-icons(); 97 | color: var(--grey-4); 98 | display: inline-block; 99 | margin-right: .625em; 100 | } 101 | 102 | input[type='checkbox']:checked+label::before { 103 | @extend .i-check-circle:before; 104 | color: var(--note-text, var(--primary-color)); 105 | } 106 | } 107 | } 108 | 109 | li ul > li { 110 | &::before { 111 | background: var(--grey-1); 112 | border: 1px solid var(--primary-color); 113 | } 114 | } 115 | 116 | li ol > li, dd ol > li{ 117 | &::before { 118 | content: counter(counter) "."; 119 | background: none; 120 | color: var(--primary-color); 121 | font-size: 1em; 122 | line-height: 1; 123 | width: auto; 124 | } 125 | 126 | &:hover::before { 127 | background: none; 128 | color: var(--color-pink); 129 | } 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/note.styl: -------------------------------------------------------------------------------- 1 | .md .note { 2 | border-radius: .1875rem; 3 | margin: 1rem 0; 4 | padding: 1rem; 5 | position: relative; 6 | 7 | background: var(--note-bg, var(--grey-2)); 8 | color: var(--grey-6); 9 | border-left: .25rem solid var(--note-border, var(--grey-4)); 10 | 11 | font-size: $font-size-small; 12 | 13 | padding-left: 2.5rem; 14 | 15 | --primary-color: var(--note-text); 16 | 17 | &::before { 18 | position: absolute; 19 | left: .5rem; 20 | top: calc(50% - 1.5rem); 21 | font-family-icons(); 22 | font-size: 1.5rem; 23 | color: var(--note-text, var(--grey-6)); 24 | } 25 | 26 | &.default { 27 | &::before { 28 | @extend .i-arrow-circle-right:before; 29 | } 30 | } 31 | 32 | &.primary { 33 | &::before { 34 | @extend .i-plus-circle:before; 35 | } 36 | } 37 | 38 | &.info { 39 | &::before { 40 | @extend .i-info-circle:before; 41 | } 42 | } 43 | 44 | &.success { 45 | &::before { 46 | @extend .i-check-circle:before; 47 | } 48 | 49 | } 50 | 51 | &.warning { 52 | &::before { 53 | @extend .i-exclamation-circle:before; 54 | } 55 | } 56 | 57 | &.danger { 58 | &::before { 59 | @extend .i-minus-circle:before; 60 | } 61 | } 62 | 63 | &.no-icon { 64 | &::before { 65 | content: none; 66 | } 67 | 68 | padding-left: 1rem; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/quiz.styl: -------------------------------------------------------------------------------- 1 | $check { 2 | &::before { 3 | color: var(--color-green); 4 | } 5 | 6 | &::after { 7 | @extend .i-check:before; 8 | color: var(--color-green); 9 | animation: fadeIn .5s; 10 | } 11 | } 12 | 13 | $times { 14 | &::before { 15 | color: var(--color-red); 16 | } 17 | 18 | &::after { 19 | @extend .i-times:before; 20 | color: var(--color-red); 21 | animation: fadeIn .5s; 22 | } 23 | } 24 | 25 | .md ol>li.quiz { 26 | margin: .625rem 0; 27 | 28 | &::before{ 29 | counter-increment: counter; 30 | content: counter(counter) "."; 31 | position: absolute; 32 | color: var(--primary-color); 33 | text-align: right; 34 | width: 2rem; 35 | left: -2.2rem; 36 | height: auto; 37 | background: none !important; 38 | border: none !important; 39 | font-size: $font-size-base; 40 | } 41 | 42 | >p { 43 | margin: 0; 44 | cursor: pointer; 45 | 46 | &:first-child::before { 47 | content: "[" attr(data-type) "]"; 48 | font-size: $font-size-smallest; 49 | color: var(--grey-4); 50 | margin: auto .3125rem; 51 | } 52 | } 53 | 54 | &.mistake >p { 55 | &:first-child::before { 56 | color: var(--primary-color); 57 | } 58 | } 59 | .gap { 60 | display: inline-block; 61 | min-width: 2.5rem; 62 | text-align: center; 63 | padding: 0 .625rem; 64 | text-indent: -624.9375rem; 65 | 66 | &::after { 67 | display: block; 68 | content: ""; 69 | background: var(--text-color); 70 | width: calc(100% + 1.25rem); 71 | height: .0625rem; 72 | margin-bottom: -.0625rem; 73 | margin-left: -.625rem; 74 | } 75 | } 76 | 77 | &.show.fill .gap{ 78 | text-indent: 0rem; 79 | } 80 | 81 | &::before, &::after { 82 | the-transition(); 83 | } 84 | 85 | blockquote { 86 | display: none; 87 | 88 | .mistake { 89 | display: block; 90 | border: .1875rem dashed var(--grey-4); 91 | padding: .625rem 1.25rem; 92 | background: var(--grey-3); 93 | margin: .3125rem; 94 | 95 | &::before { 96 | display: block; 97 | content: "[" attr(data-type) "]"; 98 | font-size: $font-size-smaller; 99 | color: var(--grey-4); 100 | } 101 | } 102 | } 103 | 104 | .note { 105 | display: none; 106 | padding: 0; 107 | margin: 0; 108 | background: none; 109 | border: none; 110 | border-radius: inherit; 111 | color: unset; 112 | font-size: inherit; 113 | filter: unset; 114 | } 115 | 116 | &.show blockquote, &.show .note { 117 | display: block; 118 | @extend .slide; 119 | } 120 | 121 | ul.options { 122 | padding-inline-start: .625rem; 123 | 124 | li { 125 | 126 | &::before { 127 | color: var(--color-grey); 128 | margin-right: .625rem; 129 | the-transition(); 130 | li-nodot(); 131 | } 132 | 133 | &:nth-child(1)::before { 134 | content: "A." 135 | } 136 | 137 | &:nth-child(2)::before { 138 | content: "B." 139 | } 140 | 141 | &:nth-child(3)::before { 142 | content: "C." 143 | } 144 | 145 | &:nth-child(4)::before { 146 | content: "D." 147 | } 148 | 149 | &:nth-child(5)::before { 150 | content: "E." 151 | } 152 | 153 | } 154 | } 155 | 156 | >ul.options { 157 | li { 158 | cursor: pointer; 159 | 160 | &::after { 161 | font-family-icons(); 162 | position: absolute; 163 | left: -1.5625rem; 164 | top: 0rem; 165 | } 166 | 167 | &.right { 168 | @extend $check; 169 | } 170 | 171 | &.wrong { 172 | @extend $times; 173 | } 174 | } 175 | } 176 | 177 | &.show.false, &.show.true { 178 | &::before { 179 | visibility: hidden; 180 | } 181 | 182 | &::after { 183 | font-family-icons(); 184 | position: absolute; 185 | left: -1.2rem; 186 | top: .25rem; 187 | } 188 | } 189 | 190 | &.show.true { 191 | @extend $check; 192 | } 193 | 194 | &.show.false { 195 | @extend $times; 196 | } 197 | } 198 | 199 | 200 | 201 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/tabs.styl: -------------------------------------------------------------------------------- 1 | .tabs { 2 | display: block; 3 | position: relative; 4 | 5 | .nav { 6 | overflow: hidden; 7 | border-bottom: .0625rem solid var(--grey-1-a7); 8 | height: 2.6875rem; 9 | 10 | ul { 11 | display: flex; 12 | padding: 0; 13 | white-space: nowrap; 14 | overflow-x: auto; 15 | } 16 | 17 | li { 18 | position: relative; 19 | cursor: pointer; 20 | border: none; 21 | display: inline-block; 22 | padding: .3125rem 1.25rem; 23 | margin: 0; 24 | 25 | &::before { 26 | content: ""; 27 | position: absolute; 28 | left: 50%; 29 | right: 50%; 30 | top: auto; 31 | bottom: 0; 32 | transition: all .2s ease-in-out; 33 | width: auto; 34 | height: auto; 35 | background: none; 36 | border-radius: 0; 37 | border-bottom: .125rem solid transparent; 38 | } 39 | 40 | &.active::before { 41 | left: 0; 42 | right: 0; 43 | border-bottom-color: var(--note-hover, var(--primary-color)); 44 | } 45 | } 46 | } 47 | 48 | .tab { 49 | display: none; 50 | @extend .fade-in; 51 | 52 | &.active { 53 | display: block; 54 | } 55 | } 56 | 57 | .show-btn { 58 | position: absolute; 59 | cursor: pointer; 60 | right: 0; 61 | bottom: 0; 62 | width: 2.875rem; 63 | height: 2.875rem; 64 | text-align: center; 65 | color: var(--grey-4); 66 | z-index: $zindex-1; 67 | 68 | &::before { 69 | font-family-icons(); 70 | @extend .i-arrow-up:before; 71 | } 72 | } 73 | 74 | } 75 | 76 | .md .tabs { 77 | margin: 0 0 2rem; 78 | shadow-box(); 79 | 80 | .tab { 81 | padding: 1.25rem; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /source/css/_common/components/tags/tags.styl: -------------------------------------------------------------------------------- 1 | @import 'list'; 2 | @import 'quiz'; 3 | @import 'links'; 4 | @import 'note'; 5 | @import 'collapse'; 6 | @import 'label'; 7 | @import 'tabs'; 8 | @import 'container'; 9 | @import 'player'; 10 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/mermaid/class.styl: -------------------------------------------------------------------------------- 1 | g.classGroup text { 2 | fill: var(--text-color); 3 | stroke: none; 4 | font-family: var(--mermaid-font-family); 5 | font-size: .625rem; 6 | 7 | .title { 8 | font-weight: bolder; 9 | } 10 | } 11 | 12 | g.clickable { 13 | cursor: pointer; 14 | } 15 | 16 | g.classGroup rect { 17 | fill: var(--grey-1); 18 | stroke: var(--text-color); 19 | } 20 | 21 | g.classGroup line { 22 | stroke: var(--text-color); 23 | stroke-width: 1; 24 | } 25 | 26 | .classLabel .box { 27 | stroke: none; 28 | stroke-width: 0; 29 | fill: var(--grey-1); 30 | opacity: .5; 31 | } 32 | 33 | .classLabel .label { 34 | fill: var(--text-color); 35 | font-size: .625rem; 36 | } 37 | 38 | .relation { 39 | stroke: var(--text-color); 40 | stroke-width: 1; 41 | fill: none; 42 | } 43 | 44 | .dashed-line{ 45 | stroke-dasharray: 3; 46 | } 47 | 48 | @mixin composition { 49 | fill: var(--text-color); 50 | stroke: var(--text-color); 51 | stroke-width: 1; 52 | } 53 | 54 | #compositionStart { 55 | @include composition; 56 | } 57 | 58 | #compositionEnd { 59 | @include composition; 60 | } 61 | 62 | @mixin aggregation { 63 | fill: var(--grey-1); 64 | stroke: var(--text-color); 65 | stroke-width: 1; 66 | } 67 | 68 | #aggregationStart { 69 | @include aggregation; 70 | } 71 | 72 | #aggregationEnd { 73 | @include aggregation; 74 | } 75 | 76 | #dependencyStart { 77 | @include composition; 78 | } 79 | 80 | #dependencyEnd { 81 | @include composition; 82 | } 83 | 84 | #extensionStart { 85 | @include composition; 86 | } 87 | 88 | #extensionEnd { 89 | @include composition; 90 | } 91 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/mermaid/flowchart.styl: -------------------------------------------------------------------------------- 1 | .label { 2 | font-family: var(--mermaid-font-family); 3 | color: var(--grey-7); 4 | font-size: $font-size-small; 5 | } 6 | 7 | .label text { 8 | fill: var(--text-color); 9 | } 10 | 11 | .node rect, 12 | .node circle, 13 | .node ellipse, 14 | .node polygon, 15 | .node path { 16 | fill: var(--grey-1); 17 | stroke: var(--text-color); 18 | stroke-width: .0625rem; 19 | } 20 | 21 | .node .label { 22 | text-align: center; 23 | } 24 | .node.clickable { 25 | cursor: pointer; 26 | } 27 | 28 | .arrowheadPath { 29 | fill: var(--text-color); 30 | } 31 | 32 | .edgePath .path { 33 | stroke: var(--text-color); 34 | } 35 | 36 | .flowchart-link { 37 | stroke: var(--text-color); 38 | fill: none; 39 | } 40 | 41 | .edgeLabel { 42 | background-color: var(--grey-2); 43 | rect { 44 | opacity: .8; 45 | fill: var(--grey-2) !important; 46 | } 47 | text-align: center; 48 | } 49 | 50 | .cluster rect { 51 | fill: var(--grey-2); 52 | stroke: var(--text-color); 53 | stroke-width: .0625rem; 54 | } 55 | 56 | .cluster text { 57 | fill: var(--text-color); 58 | } 59 | 60 | div.mermaidTooltip { 61 | position: absolute; 62 | text-align: center; 63 | max-width: 12.5rem; 64 | padding: .125rem; 65 | font-family: var(--mermaid-font-family); 66 | font-size: .75rem; 67 | background: var(--grey-1); 68 | border: .0625rem solid var(--text-color); 69 | border-radius: .125rem; 70 | pointer-events: none; 71 | z-index: $zindex-3; 72 | } 73 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/mermaid/git.styl: -------------------------------------------------------------------------------- 1 | .commit-id, 2 | .commit-msg, 3 | .branch-label { 4 | fill: lightgrey; 5 | color: lightgrey; 6 | font-family: var(--mermaid-font-family); 7 | } 8 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/mermaid/mermaid.styl: -------------------------------------------------------------------------------- 1 | pre.mermaid, pre.graphviz { 2 | background: none; 3 | padding: 0; 4 | border: none; 5 | } 6 | 7 | pre > svg { 8 | display: block; 9 | margin: 0 auto; 10 | } 11 | 12 | pre.graphviz { 13 | white-space: normal; 14 | max-width: calc(100% - 3.125rem); 15 | svg > g > polygon { 16 | fill: var(--grey-1); 17 | } 18 | } 19 | 20 | .mermaid { 21 | &.graph svg{ 22 | max-height: 18.75rem; 23 | } 24 | 25 | @import 'flowchart'; 26 | @import 'sequence'; 27 | @import 'gantt'; 28 | @import 'class'; 29 | @import 'git'; 30 | @import 'pie'; 31 | @import 'state'; 32 | } 33 | 34 | :root { 35 | --mermaid-font-family: "trebuchet ms", verdana, arial; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/mermaid/pie.styl: -------------------------------------------------------------------------------- 1 | .pieTitleText { 2 | text-anchor: middle; 3 | font-size: 1.5625rem; 4 | fill: $taskTextDarkColor; 5 | font-family: var(--mermaid-font-family); 6 | } 7 | .slice { 8 | font-family: var(--mermaid-font-family); 9 | } 10 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/mermaid/sequence.styl: -------------------------------------------------------------------------------- 1 | .actor { 2 | stroke: var(--text-color); 3 | fill: var(--grey-1); 4 | } 5 | 6 | text.actor { 7 | fill: var(--text-color); 8 | stroke: none; 9 | } 10 | 11 | .actor-line { 12 | stroke: var(--text-color); 13 | } 14 | 15 | .messageLine0 { 16 | stroke-width: 1.5; 17 | stroke-dasharray: '2 2'; 18 | stroke: var(--text-color); 19 | } 20 | 21 | .messageLine1 { 22 | stroke-width: 1.5; 23 | stroke-dasharray: '2 2'; 24 | stroke: var(--text-color); 25 | } 26 | 27 | #arrowhead { 28 | fill: var(--text-color); 29 | } 30 | 31 | .sequenceNumber { 32 | fill: white; 33 | } 34 | 35 | #sequencenumber { 36 | fill: var(--text-color); 37 | } 38 | 39 | #crosshead path { 40 | fill: var(--text-color) !important; 41 | stroke: var(--text-color) !important; 42 | } 43 | 44 | .messageText { 45 | fill: var(--text-color); 46 | stroke: none; 47 | } 48 | 49 | .labelBox { 50 | stroke: var(--text-color); 51 | fill: var(--grey-3); 52 | } 53 | 54 | .labelText { 55 | fill: var(--text-color); 56 | stroke: none; 57 | } 58 | 59 | .loopText { 60 | fill: var(--text-color); 61 | stroke: none; 62 | } 63 | 64 | .loopLine { 65 | stroke-width: 2; 66 | stroke-dasharray: '2 2'; 67 | stroke: var(--text-color); 68 | } 69 | 70 | .note { 71 | stroke: var(--grey-4); 72 | fill: var(--grey-3); 73 | } 74 | 75 | .noteText { 76 | fill: black; 77 | stroke: none; 78 | font-family: var(--mermaid-font-family); 79 | font-size: .875rem; 80 | } 81 | 82 | .activation0 { 83 | fill: #f4f4f4; 84 | stroke: #666; 85 | } 86 | 87 | .activation1 { 88 | fill: #f4f4f4; 89 | stroke: #666; 90 | } 91 | 92 | .activation2 { 93 | fill: #f4f4f4; 94 | stroke: #666; 95 | } 96 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/mermaid/state.styl: -------------------------------------------------------------------------------- 1 | g.stateGroup text { 2 | fill: var(--text-color); 3 | stroke: none; 4 | font-size: .625rem; 5 | font-family: var(--mermaid-font-family); 6 | } 7 | g.stateGroup text { 8 | fill: var(--text-color); 9 | stroke: none; 10 | font-size: .625rem; 11 | 12 | } 13 | g.stateGroup .state-title { 14 | font-weight: bolder; 15 | fill: black; 16 | } 17 | 18 | g.stateGroup rect { 19 | fill: var(--grey-1); 20 | stroke: var(--text-color); 21 | } 22 | 23 | g.stateGroup line { 24 | stroke: var(--text-color); 25 | stroke-width: 1; 26 | } 27 | 28 | .transition { 29 | stroke: var(--text-color); 30 | stroke-width: 1; 31 | fill: none; 32 | } 33 | 34 | .stateGroup .composit { 35 | fill: white; 36 | border-bottom: .0625rem 37 | } 38 | 39 | .stateGroup .alt-composit { 40 | fill: #e0e0e0; 41 | border-bottom: .0625rem 42 | } 43 | 44 | .state-note { 45 | stroke: var(--grey-4); 46 | fill: var(--grey-3); 47 | 48 | text { 49 | fill: black; 50 | stroke: none; 51 | font-size: .625rem; 52 | } 53 | } 54 | 55 | .stateLabel .box { 56 | stroke: none; 57 | stroke-width: 0; 58 | fill: var(--grey-1); 59 | opacity: .5; 60 | } 61 | 62 | .stateLabel text { 63 | fill: black; 64 | font-size: .625rem; 65 | font-weight: bold; 66 | font-family: var(--mermaid-font-family); 67 | } 68 | 69 | .node circle.state-start { 70 | fill: black; 71 | stroke: black; 72 | } 73 | .node circle.state-end { 74 | fill: black; 75 | stroke: white; 76 | stroke-width: 1.5 77 | } 78 | #statediagram-barbEnd { 79 | fill: var(--text-color) 80 | } 81 | 82 | .statediagram-cluster rect { 83 | fill: var(--grey-1); 84 | stroke: var(--text-color); 85 | stroke-width: .0625rem; 86 | } 87 | .statediagram-cluster rect.outer { 88 | rx: .3125rem; 89 | ry: .3125rem; 90 | } 91 | .statediagram-state .divider { 92 | stroke: var(--text-color); 93 | } 94 | 95 | .statediagram-state .title-state { 96 | rx: .3125rem; 97 | ry: .3125rem; 98 | } 99 | .statediagram-cluster.statediagram-cluster .inner { 100 | fill: white; 101 | } 102 | .statediagram-cluster.statediagram-cluster-alt .inner { 103 | fill: #e0e0e0; 104 | } 105 | 106 | .statediagram-cluster .inner { 107 | rx:0; 108 | ry:0; 109 | } 110 | 111 | .statediagram-state rect.basic { 112 | rx: .3125rem; 113 | ry: .3125rem; 114 | } 115 | .statediagram-state rect.divider { 116 | stroke-dasharray: 10,10; 117 | fill: #efefef; 118 | } 119 | 120 | .note-edge { 121 | stroke-dasharray: 5; 122 | } 123 | 124 | .statediagram-note rect { 125 | stroke: var(--grey-4); 126 | fill: var(--grey-3); 127 | stroke-width: .0625rem; 128 | rx: 0; 129 | ry: 0; 130 | } 131 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/pace.styl: -------------------------------------------------------------------------------- 1 | .pace { 2 | pointer-events: none; 3 | user-select: none; 4 | } 5 | 6 | .pace-inactive { 7 | display: none; 8 | } 9 | 10 | .pace .pace-progress { 11 | background: var(--primary-color); 12 | position: fixed; 13 | z-index: 2000; 14 | top: 0; 15 | right: 100%; 16 | width: 100%; 17 | height: .125rem; 18 | } 19 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/search.styl: -------------------------------------------------------------------------------- 1 | #search { 2 | position: fixed; 3 | background: var(--nav-bg); 4 | left: 0; 5 | top: 0; 6 | width: 100%; 7 | height: 100%; 8 | padding: 1.25rem; 9 | z-index: $zindex-4; 10 | display: none; 11 | 12 | >.inner { 13 | border-radius: 0; 14 | height: 100%; 15 | margin: 0 auto; 16 | width: 43.75rem; 17 | text-shadow: none; 18 | 19 | +mobile() { 20 | width: 100%; 21 | } 22 | .icon, 23 | .close-btn { 24 | color: var(--grey-5); 25 | font-size: 1.125rem; 26 | padding: 0 .625rem; 27 | } 28 | 29 | .close-btn { 30 | cursor: pointer; 31 | 32 | &:hover i { 33 | color: var(--grey-7); 34 | } 35 | } 36 | 37 | .header { 38 | display: flex; 39 | background: var(--grey-1-a5); 40 | border-radius: 3rem; 41 | padding: .5rem 1.5rem; 42 | margin-bottom: 1.25rem; 43 | border: .0625rem solid var(--grey-5); 44 | font-size: $font-size-large; 45 | align-items: center; 46 | } 47 | 48 | .search-input-container { 49 | flex-grow: 1; 50 | 51 | form { 52 | padding: .125rem; 53 | } 54 | } 55 | 56 | .search-input { 57 | background: transparent; 58 | border: 0; 59 | outline: 0; 60 | width: 100%; 61 | 62 | &::-webkit-search-cancel-button { 63 | display: none; 64 | } 65 | } 66 | } 67 | 68 | 69 | .results { 70 | height: calc(100% - 6.25rem); 71 | padding: 1.875rem 1.875rem .3125rem; 72 | border-radius: .3125rem; 73 | 74 | background: var(--grey-1-a7) url(../images/search.png) no-repeat bottom right; 75 | 76 | color: var(--text-color); 77 | 78 | .inner { 79 | position: relative; 80 | height: 100%; 81 | overflow: hidden; 82 | } 83 | 84 | hr { 85 | margin: .625rem 0; 86 | } 87 | } 88 | 89 | } 90 | 91 | 92 | .algolia-powered { 93 | float: right; 94 | background: url('../images/algolia_logo.svg') no-repeat; 95 | display: inline-block; 96 | height: 1.125rem; 97 | width: 4.25rem; 98 | margin: .5rem auto; 99 | } 100 | 101 | 102 | #search-hits { 103 | overflow-y: scroll; 104 | height: calc(100% - 8.125rem); 105 | 106 | ol { 107 | padding: 0; 108 | } 109 | 110 | .item { 111 | margin: .9375rem 0; 112 | 113 | a { 114 | border-bottom: .0625rem dashed var(--grey-4); 115 | display: block; 116 | the-transition(); 117 | } 118 | 119 | span { 120 | font-size: 70%; 121 | display: block; 122 | 123 | i { 124 | color: var(--grey-4); 125 | margin: 0 .3125rem; 126 | } 127 | } 128 | } 129 | 130 | } 131 | 132 | 133 | #search-pagination { 134 | ul { 135 | padding: 0rem; 136 | margin: 1.25rem 0; 137 | } 138 | .pagination { 139 | opacity: 1; 140 | padding: 0; 141 | } 142 | 143 | .pagination-item { 144 | display: inline-block; 145 | } 146 | 147 | .page-number { 148 | the-transition(); 149 | } 150 | 151 | .current .page-number { 152 | @extend .pagination .page-number.current; 153 | cursor: default; 154 | } 155 | 156 | .disabled-item { 157 | color: var(--grey-4); 158 | cursor: default; 159 | 160 | .page-number:hover { 161 | color: var(--grey-4); 162 | background: none; 163 | box-shadow: none; 164 | } 165 | 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/theme.styl: -------------------------------------------------------------------------------- 1 | #neko { 2 | @extend $fix-fullscreen; 3 | display: none; 4 | background: linear-gradient(to top, #fddb92 0%, #d1fdff 80%); 5 | 6 | .planet { 7 | position: fixed; 8 | left: -50%; 9 | top: -50%; 10 | width: 200%; 11 | height: 200%; 12 | animation: rotate 2s cubic-bezier(.7, 0, 0, 1); 13 | transform-origin: center bottom; 14 | } 15 | 16 | &:before { 17 | content: ""; 18 | position: absolute; 19 | left: 0; 20 | right: 0; 21 | top: 0; 22 | bottom: 0; 23 | opacity: 0; 24 | background: linear-gradient(to top, #30cfd0 0%, #330867 100%); 25 | transition: 2s ease all; 26 | } 27 | 28 | .sun, .moon { 29 | position: absolute; 30 | border-radius: 100%; 31 | left: 55%; 32 | top: 32%; 33 | } 34 | 35 | .sun { 36 | height: 40px; 37 | width: 40px; 38 | background: #ffee94; 39 | box-shadow: 0px 0px 40px #ffee94; 40 | opacity: 1; 41 | } 42 | 43 | .moon { 44 | height: 24px; 45 | width: 24px; 46 | background: #eee; 47 | box-shadow: 0px 0px 20px #fff; 48 | opacity: 0; 49 | } 50 | 51 | .body { 52 | display: block; 53 | position: absolute; 54 | bottom: -20px; 55 | height: 140px; 56 | width: 135px; 57 | left: 50%; 58 | margin-left: -100px; 59 | background: #777; 60 | transition: all .25s ease-in-out; 61 | animation: slideUpBigIn 1s; 62 | 63 | &:before, &:after { 64 | position: absolute; 65 | content: ""; 66 | width: 0; 67 | height: 0; 68 | border-bottom: 20px solid #777; 69 | top: -20px; 70 | transition: all .25s ease-in-out; 71 | } 72 | &:before { 73 | border-left: 0px solid transparent; 74 | border-right: 30px solid transparent; 75 | left: 0; 76 | } 77 | &:after { 78 | border-right: 0px solid transparent; 79 | border-left: 30px solid transparent; 80 | right: 0; 81 | } 82 | 83 | .eyes { 84 | display: block; 85 | position: absolute; 86 | background: #ffee94; 87 | height: 40px; 88 | width: 40px; 89 | border-radius: 100%; 90 | bottom: 80px; 91 | } 92 | 93 | .eyes.left { 94 | left: 12px; 95 | } 96 | 97 | .eyes.right { 98 | right: 12px; 99 | } 100 | 101 | .eyes .pupil, .nose { 102 | display: block; 103 | position: relative; 104 | background: #ffb399; 105 | border-radius: 100%; 106 | margin: 0 auto; 107 | } 108 | 109 | .eyes .pupil { 110 | height: 100%; 111 | width: 5px; 112 | transition: width 1s .5s ease-in-out; 113 | } 114 | 115 | .nose { 116 | top: 45px; 117 | height: 10px; 118 | width: 10px; 119 | } 120 | } 121 | 122 | &.dark { 123 | &:before { 124 | opacity: 1; 125 | } 126 | 127 | .sun { 128 | opacity: 0; 129 | } 130 | 131 | .moon { 132 | opacity: 1; 133 | } 134 | 135 | .body { 136 | background: #444; 137 | &:before { 138 | border-bottom: 20px solid #444; 139 | } 140 | &:after { 141 | border-bottom: 20px solid #444; 142 | } 143 | 144 | .eyes .pupil { 145 | height: 90%; 146 | width: 34px; 147 | margin: 5% auto; 148 | } 149 | } 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/third-party.styl: -------------------------------------------------------------------------------- 1 | @import 'pace'; 2 | @import 'loading'; 3 | @import 'search'; 4 | @import 'theme'; 5 | @import 'widgets'; 6 | 7 | .katex, 8 | .katex-display { 9 | user-select: all; 10 | } 11 | 12 | .medium-zoom-overlay { 13 | z-index: $zindex-5 - 1; 14 | } 15 | 16 | .medium-zoom-image--opened { 17 | z-index: $zindex-5; 18 | } 19 | 20 | .lozaded { 21 | @extend .blur; 22 | } 23 | -------------------------------------------------------------------------------- /source/css/_common/components/third-party/widgets.styl: -------------------------------------------------------------------------------- 1 | .widgets { 2 | display: flex; 3 | z-index: 1; 4 | background: var(--body-bg-shadow); 5 | justify-content: space-around; 6 | 7 | > div { 8 | width: calc(50% - 2rem); 9 | padding: 1rem; 10 | } 11 | 12 | +mobile() { 13 | flex-direction: column-reverse; 14 | 15 | > div { 16 | width: calc(100% - 1rem) !important; 17 | } 18 | } 19 | 20 | ul { 21 | counter-reset: counter; 22 | } 23 | 24 | .item { 25 | padding: .5rem 0 .5rem 2rem; 26 | border-bottom: .0625rem dashed var(--grey-4); 27 | position: relative; 28 | 29 | &::before { 30 | counter-increment: counter; 31 | content: counter(counter); 32 | position: absolute; 33 | left: 0; 34 | font-size: 1.5em; 35 | color: var(--grey-4); 36 | line-height: 1.2; 37 | text-align: right; 38 | width: 1em; 39 | } 40 | 41 | 42 | span, .breadcrumb { 43 | display: block; 44 | text-overflow: ellipsis; 45 | overflow: hidden; 46 | max-height: 2rem; 47 | white-space: nowrap; 48 | } 49 | 50 | .breadcrumb { 51 | margin: 0; 52 | display: flex; 53 | max-height: 1.2rem; 54 | } 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /source/css/_common/outline/footer/footer.styl: -------------------------------------------------------------------------------- 1 | // Footer Section 2 | // -------------------------------------------------- 3 | #footer { 4 | color: var(--grey-5); 5 | font-size: $font-size-small; 6 | background: var(--body-bg-shadow); 7 | 8 | .inner { 9 | margin: 0 auto; 10 | width: $content-desktop; 11 | position: relative; 12 | 13 | if (hexo-config('sidebar.position') == 'left') { 14 | padding-left: 16.25rem; 15 | } else { 16 | padding-right: 16.25rem; 17 | } 18 | 19 | +desktop-large() { 20 | width: $content-desktop-large; 21 | } 22 | 23 | +desktop-largest() { 24 | width: $content-desktop-largest; 25 | } 26 | 27 | +tablet-mobile() { 28 | padding-left: 0; 29 | padding-right: 0; 30 | width: auto; 31 | } 32 | } 33 | } 34 | 35 | .status { 36 | width: 100%; 37 | text-align: center; 38 | margin-top: 2rem; 39 | } 40 | 41 | .languages { 42 | display: inline-block; 43 | font-size: $font-size-large; 44 | position: relative; 45 | 46 | .lang-select-label span { 47 | margin: 0 .5rem; 48 | } 49 | 50 | .lang-select { 51 | height: 100%; 52 | left: 0; 53 | opacity: 0; 54 | position: absolute; 55 | top: 0; 56 | width: 100%; 57 | } 58 | } 59 | 60 | .with-love { 61 | color: unquote(hexo-config('footer.icon.color')); 62 | display: inline-block; 63 | margin: 0 .3125rem 0 .125rem; 64 | } 65 | 66 | .powered-by, .theme-info { 67 | display: inline-block; 68 | margin-bottom: .625rem; 69 | } 70 | -------------------------------------------------------------------------------- /source/css/_common/outline/header/brand.styl: -------------------------------------------------------------------------------- 1 | #brand { 2 | position: fixed; 3 | padding: 3rem 5rem 0; 4 | text-align: center; 5 | width: 100%; 6 | height: 50vh; 7 | min-height: 10rem; 8 | 9 | &.affix { 10 | z-index: $zindex-0; 11 | } 12 | 13 | &, .pjax { 14 | the-flex(); 15 | } 16 | 17 | .artboard { 18 | font-family: $font-family-logo; 19 | font-size: $font-size-logo; 20 | line-height: 1.2; 21 | } 22 | 23 | h1 { 24 | font-size: $font-size-title; 25 | letter-spacing: .125rem; 26 | } 27 | 28 | .artboard + h1 { 29 | margin: .625rem 0; 30 | } 31 | 32 | .sticky { 33 | font-size: $font-size-smallest; 34 | display: inline-block; 35 | transform: rotate(30deg); 36 | backface-visibility: hidden; 37 | } 38 | 39 | .meta { 40 | display: flex; 41 | font-size: $font-size-subtitle; 42 | margin: 0; 43 | 44 | .item+.item { 45 | margin-left: .625rem; 46 | } 47 | } 48 | 49 | +tablet() { 50 | .meta { 51 | font-size: $font-size-smaller; 52 | } 53 | } 54 | 55 | +mobile() { 56 | padding: 3rem .5rem 0; 57 | 58 | h1 { 59 | font-size: $font-size-largest; 60 | } 61 | 62 | .meta { 63 | font-size: $font-size-smallest; 64 | 65 | .text { 66 | display: none; 67 | } 68 | } 69 | } 70 | 71 | 72 | +mobile-smallest() { 73 | .artboard { 74 | font-size: $font-size-title; 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /source/css/_common/outline/header/header.styl: -------------------------------------------------------------------------------- 1 | // Header Section 2 | // -------------------------------------------------- 3 | #header { 4 | margin: 0 auto; 5 | position: relative; 6 | width: 100%; 7 | height: 50vh; 8 | text-shadow: 0rem .2rem .3rem alpha(#000, .5); 9 | color: var(--header-text-color); 10 | 11 | a:hover { 12 | color: currentColor; 13 | } 14 | } 15 | 16 | @import 'image'; 17 | @import 'nav'; 18 | @import 'brand'; 19 | @import 'tool'; 20 | @import 'waves'; 21 | -------------------------------------------------------------------------------- /source/css/_common/outline/header/image.styl: -------------------------------------------------------------------------------- 1 | #imgs { 2 | display: block; 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 70vh; 8 | min-height: 25rem; 9 | z-index: -9; 10 | background-color: #363636; 11 | 12 | img { 13 | width: 100%; 14 | height: 100%; 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | object-fit: cover; 19 | } 20 | 21 | .item { 22 | width: 100%; 23 | height: 100%; 24 | position: absolute; 25 | top: 0rem; 26 | left: 0rem; 27 | background-size: cover; 28 | background-position: 50% 50%; 29 | background-repeat: no-repeat; 30 | opacity: 0; 31 | z-index: 0; 32 | animation: imageAnimation 36s linear infinite 0s; 33 | backface-visibility: hidden; 34 | transform-style: preserve-3d; 35 | } 36 | 37 | for num in (1 .. 6) { 38 | .item:nth-child({num+1}) { 39 | animation-delay: unit(num * 6, 's'); 40 | } 41 | } 42 | 43 | &::before { 44 | content: ''; 45 | display: block; 46 | position: absolute; 47 | top: 0; 48 | left: 0; 49 | width: 100%; 50 | height: 100%; 51 | background-color: rgba(0, 0, 0, .2); 52 | z-index: $zindex-1; 53 | the-transition(); 54 | } 55 | } 56 | 57 | @keyframes imageAnimation { 58 | 0% { 59 | opacity: 0; 60 | animation-timing-function: ease-in; 61 | } 62 | 2% { 63 | opacity: 1; 64 | } 65 | 8% { 66 | opacity: 1; 67 | transform: scale(1.05); 68 | animation-timing-function: ease-out; 69 | } 70 | 17% { 71 | opacity: 1; 72 | transform: scale(1.1); 73 | } 74 | 25% { 75 | opacity: 0; 76 | transform: scale(1.1); 77 | } 78 | 100% { opacity: 0 } 79 | } 80 | -------------------------------------------------------------------------------- /source/css/_common/outline/header/menu.styl: -------------------------------------------------------------------------------- 1 | // Menu 2 | // -------------------------------------------------- 3 | #nav .menu { 4 | padding: .625rem 0; 5 | margin: 0; 6 | width: 100%; 7 | 8 | .item { 9 | display: inline-block; 10 | position: relative; 11 | 12 | padding: 0 .625rem; 13 | letter-spacing: .0625rem; 14 | text-align: center; 15 | 16 | 17 | +mobile() { 18 | display: none; 19 | 20 | &.title { 21 | display: block; 22 | } 23 | } 24 | 25 | .ic { 26 | margin-right: .5rem; 27 | } 28 | 29 | &:not(.title) a { 30 | display: block; 31 | font-size: $font-size-medium; 32 | 33 | @extend $hover-underline; 34 | } 35 | 36 | &.active:not(.dropdown), &:not(.dropdown):hover { 37 | a::before { 38 | width: 70%; 39 | } 40 | } 41 | } 42 | 43 | .submenu { 44 | display: none; 45 | position: absolute; 46 | margin-top: .5rem; 47 | padding: 0; 48 | width: max-content; 49 | background-color: var(--grey-9-a5); 50 | box-shadow: 0 .3125rem 1.25rem -.25rem var(--grey-9-a1); 51 | border-radius: .625rem 0; 52 | @extend .slide-up-in; 53 | 54 | &::before { 55 | position: absolute; 56 | top: -1.25rem; 57 | left: 0; 58 | width: 100%; 59 | height: 2.5rem; 60 | content: ''; 61 | } 62 | 63 | &:hover { 64 | display: block; 65 | } 66 | 67 | .item { 68 | display: block; 69 | 70 | &:first-child{ 71 | border-radius: .625rem 0 0 0; 72 | } 73 | 74 | &:last-child{ 75 | border-radius: 0 0 .625rem 0 76 | } 77 | 78 | a { 79 | display: inline-block; 80 | padding: .3rem .7rem; 81 | width: 100%; 82 | text-shadow: none; 83 | &::before { 84 | content: none; 85 | } 86 | } 87 | 88 | &:hover a { 89 | transform: translateX(.3rem); 90 | } 91 | 92 | &:hover, &.active { 93 | @extend $color-btn; 94 | a { 95 | opacity: 1; 96 | } 97 | } 98 | } 99 | } 100 | 101 | .item.dropdown { 102 | >a::after { 103 | content: ""; 104 | display: inline-block; 105 | margin-left: .3rem; 106 | vertical-align: middle; 107 | border: .3rem solid transparent; 108 | border-top-color: currentColor; 109 | border-bottom: 0; 110 | } 111 | &:hover { 112 | .submenu { 113 | display: block; 114 | } 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /source/css/_common/outline/header/nav.styl: -------------------------------------------------------------------------------- 1 | #nav { 2 | position: fixed; 3 | z-index: $zindex-2; 4 | width: 100%; 5 | height: 3.125rem; 6 | the-transition(); 7 | 8 | &.up { 9 | transform: translateY(0); 10 | } 11 | 12 | &.down { 13 | transform: translateY(-100%); 14 | } 15 | 16 | &.show { 17 | background: var(--nav-bg); 18 | box-shadow: .1rem .1rem .2rem var(--grey-9-a1); 19 | text-shadow: 0rem 0rem .0625rem var(--grey-9-a1); 20 | color: var(--text-color); 21 | 22 | .line { 23 | background: var(--text-color); 24 | box-shadow: 0rem 0rem .0625rem var(--grey-9-a1); 25 | } 26 | 27 | .item.active > a, .item.expand > a { 28 | color: var(--color-aqua); 29 | opacity: 1; 30 | } 31 | 32 | .menu { 33 | .submenu { 34 | background-color: var(--grey-1); 35 | .item.active a { 36 | color: var(--grey-0); 37 | opacity: 1; 38 | } 39 | } 40 | } 41 | } 42 | 43 | .inner { 44 | height: 100%; 45 | display: flex; 46 | width: $content-desktop; 47 | flex-wrap: nowrap; 48 | 49 | +desktop-large() { 50 | width: $content-desktop-large; 51 | } 52 | 53 | +desktop-largest() { 54 | width: $content-desktop-largest; 55 | } 56 | 57 | +tablet-mobile() { 58 | //width: auto; 59 | } 60 | 61 | } 62 | 63 | .toggle { 64 | display: none; 65 | 66 | +tablet-mobile() { 67 | the-flex(); 68 | } 69 | 70 | .lines { 71 | padding: 1.25rem; 72 | width: 1.375rem; 73 | box-sizing: unset; 74 | } 75 | } 76 | } 77 | 78 | 79 | @import 'menu'; 80 | @import 'right'; 81 | -------------------------------------------------------------------------------- /source/css/_common/outline/header/right.styl: -------------------------------------------------------------------------------- 1 | #nav .right { 2 | display: inline-flex; 3 | align-items: center; 4 | justify-content: center; 5 | 6 | .item { 7 | padding: .625rem .5rem; 8 | cursor: pointer; 9 | } 10 | 11 | .i-sun { 12 | font-size: $font-size-large; 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /source/css/_common/outline/header/waves.styl: -------------------------------------------------------------------------------- 1 | .waves { 2 | width: 100%; 3 | height: 15vh; 4 | margin-bottom: -.6875rem; 5 | min-height: 3.125rem; 6 | max-height: 9.375rem; 7 | position:relative; 8 | 9 | +mobile() { 10 | height: 10vh; 11 | } 12 | } 13 | /* Animation */ 14 | .parallax>use { 15 | animation: wave 25s cubic-bezier(.55, .5, .45, .5) infinite; 16 | } 17 | 18 | .parallax>use:nth-child(1) { 19 | animation-delay: -2s; 20 | animation-duration: 7s; 21 | fill: var(--grey-1-a7); 22 | } 23 | 24 | .parallax>use:nth-child(2) { 25 | animation-delay: -3s; 26 | animation-duration: 10s; 27 | fill: var(--grey-1-a5); 28 | } 29 | 30 | .parallax>use:nth-child(3) { 31 | animation-delay: -4s; 32 | animation-duration: 13s; 33 | fill: var(--grey-1-a3); 34 | } 35 | 36 | .parallax>use:nth-child(4) { 37 | animation-delay: -5s; 38 | animation-duration: 20s; 39 | fill: var(--grey-1); 40 | } 41 | 42 | @keyframes wave { 43 | 0% { 44 | transform: translate3d(-90px, 0, 0); 45 | } 46 | 47 | 100% { 48 | transform: translate3d(85px, 0, 0); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /source/css/_common/outline/mobile.styl: -------------------------------------------------------------------------------- 1 | /* 2 | // < 47.9375rem 3 | +mobile() { 4 | 5 | } 6 | */ 7 | 8 | +mobile-small() { 9 | .post.block { 10 | padding: initial !important; 11 | } 12 | 13 | .md { 14 | // For headers narrow width. 15 | h1, h2, h3, h4, h5, h6 { 16 | padding-left: 1.25rem; 17 | } 18 | 19 | // Rewrite paddings & margins inside tags. 20 | .note, .tabs .tab-content .tab-pane { 21 | h1, h2, h3, h4, h5, h6 { 22 | margin: 0 .3125rem; 23 | } 24 | } 25 | 26 | img, video { 27 | margin-bottom: .625rem !important; 28 | } 29 | 30 | .tabs .tab-content .tab-pane { 31 | padding: .625rem .625rem 0 .625rem !important; 32 | } 33 | } 34 | 35 | .post .eof { 36 | margin: 2.5rem auto 1.25rem !important; 37 | } 38 | 39 | } 40 | 41 | /* 42 | // < 25.8125rem 43 | +mobile-smallest() { 44 | 45 | } 46 | */ 47 | -------------------------------------------------------------------------------- /source/css/_common/outline/outline.styl: -------------------------------------------------------------------------------- 1 | #container { 2 | min-height: 100%; 3 | min-width: 100%; 4 | position: relative; 5 | display: flex; 6 | flex-direction: column; 7 | } 8 | 9 | 10 | .inner { 11 | margin: 0 auto; 12 | width: 100%; 13 | } 14 | 15 | main { 16 | background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom; 17 | 18 | >.inner { 19 | width: $content-desktop; 20 | align-items: flex-start; 21 | display: flex; 22 | justify-content: space-between; 23 | if (hexo-config('sidebar.position') == 'left') { 24 | flex-direction: row-reverse; 25 | } 26 | 27 | +desktop-large() { 28 | width: $content-desktop-large; 29 | } 30 | 31 | +desktop-largest() { 32 | width: $content-desktop-largest; 33 | } 34 | } 35 | 36 | } 37 | 38 | #main { 39 | background: linear-gradient(to top, var(--grey-0) 0, var(--grey-1) 20%) no-repeat top; 40 | box-shadow: 0rem 1.25rem 1rem .3125rem var(--body-bg-shadow); 41 | 42 | width: $content-wrap; 43 | 44 | min-height: 37.5rem; 45 | 46 | .cat { 47 | margin-top: 10rem; 48 | } 49 | 50 | .wrap { 51 | position: relative; 52 | padding: $content-desktop-padding; 53 | } 54 | 55 | .wrap:nth-child(1) { 56 | margin-bottom: 1.25rem; 57 | } 58 | 59 | +tablet-mobile() { 60 | width: 100%; 61 | 62 | .wrap { 63 | padding: $content-tablet-padding; 64 | } 65 | } 66 | 67 | +mobile() { 68 | .wrap { 69 | padding: $content-mobile-padding; 70 | } 71 | } 72 | } 73 | 74 | @import 'header'; 75 | @import 'sidebar'; 76 | @import 'footer'; 77 | 78 | @import 'mobile'; 79 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/author.styl: -------------------------------------------------------------------------------- 1 | .overview .author { 2 | 3 | &:hover .image { 4 | @extend .shake; 5 | } 6 | 7 | .image { 8 | border: .0625rem solid var(--body-bg-shadow); 9 | display: block; 10 | margin: 0 auto; 11 | max-width: 10rem; 12 | padding: .125rem; 13 | box-shadow: 0 0rem 1rem .625rem var(--body-bg-shadow); 14 | border-radius: 50%; 15 | } 16 | 17 | 18 | .name { 19 | color: var(--grey-7); 20 | font-weight: normal; 21 | margin: .3125rem 0 0; 22 | text-align: center; 23 | } 24 | 25 | .description { 26 | color: var(--grey-5); 27 | font-size: $font-size-medium; 28 | margin-top: .3125rem; 29 | text-align: center; 30 | } 31 | } 32 | 33 | @keyframes shake { 34 | 0% { 35 | transform: scale(1); 36 | } 37 | 38 | 10%, 39 | 20% { 40 | transform: scale(.9) rotate(3deg); 41 | } 42 | 43 | 30%, 44 | 50%, 45 | 70%, 46 | 90% { 47 | transform: scale(1.1) rotate(-3deg); 48 | } 49 | 50 | 40%, 51 | 60%, 52 | 80% { 53 | transform: scale(1.1) rotate(3deg); 54 | } 55 | 56 | 100% { 57 | transform: scale(1); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/dimmer.styl: -------------------------------------------------------------------------------- 1 | .dimmer { 2 | display: none; 3 | } 4 | 5 | +tablet-mobile() { 6 | .dimmer { 7 | background: black; 8 | height: 100%; 9 | left: 100%; 10 | opacity: 0; 11 | top: 0; 12 | width: 100%; 13 | z-index: $zindex-2; 14 | transition: opacity 1s; 15 | } 16 | 17 | #sidebar.on + .dimmer { 18 | position: fixed; 19 | display: block; 20 | opacity: .3; 21 | transform: translateX(-100%); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/menu.styl: -------------------------------------------------------------------------------- 1 | .overview .menu { 2 | padding: 1.25rem; 3 | margin: 0; 4 | 5 | background-color: transparent; 6 | 7 | .item { 8 | border-radius: .9375rem; 9 | margin-bottom: .625rem; 10 | display: block; 11 | color: var(--grey-5); 12 | the-transition(); 13 | 14 | a { 15 | color: inherit; 16 | display: block; 17 | line-height: 3; 18 | } 19 | 20 | .submenu { 21 | display: none; 22 | padding: 0; 23 | @extend .slide-down-in; 24 | } 25 | 26 | &:hover { 27 | background-color: rgba(0,0,0,.1); 28 | color: inherit; 29 | 30 | .submenu { 31 | display: block; 32 | } 33 | } 34 | 35 | .ic { 36 | margin-right: .625rem; 37 | } 38 | 39 | &.active { 40 | @extend $color-btn; 41 | 42 | &:hover { 43 | box-shadow: 0 0 .75rem var(--color-pink); 44 | color: var(--grey-0); 45 | } 46 | 47 | .item { 48 | color: currentColor; 49 | } 50 | } 51 | 52 | 53 | &.expand { 54 | background-color: rgba(0,0,0,.05); 55 | 56 | .submenu { 57 | display: block; 58 | } 59 | 60 | } 61 | 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/quick.styl: -------------------------------------------------------------------------------- 1 | #quick { 2 | display: none; 3 | align-items: center; 4 | flex-wrap: wrap; 5 | width: $sidebar-desktop; 6 | margin: 0; 7 | padding: 0; 8 | position: fixed; 9 | bottom: .125rem; 10 | 11 | li { 12 | width: 25%; 13 | min-height: 1.875rem; 14 | the-transition(); 15 | 16 | i { 17 | cursor: pointer; 18 | } 19 | 20 | a { 21 | width: 100%; 22 | display: block; 23 | } 24 | 25 | &:hover { 26 | color: var(--primary-color); 27 | } 28 | } 29 | 30 | li.percent { 31 | display: block; 32 | background: var(--primary-color); 33 | width: 0rem; 34 | min-height: .125rem; 35 | } 36 | } 37 | 38 | #sidebar.affix, #sidebar.on { 39 | #quick { 40 | display: flex; 41 | } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/related.styl: -------------------------------------------------------------------------------- 1 | .related { 2 | font-size: $font-size-small; 3 | 4 | ul { 5 | 6 | padding: 0 .125rem .3125rem 1.25rem; 7 | text-align: left; 8 | 9 | li { 10 | position: relative; 11 | line-height: 1.8; 12 | padding-bottom: .625rem; 13 | 14 | a { 15 | text-overflow: ellipsis; 16 | white-space: nowrap; 17 | overflow: hidden; 18 | width: 100%; 19 | display: inline-block; 20 | } 21 | 22 | &.active a { 23 | color: var(--primary-color); 24 | } 25 | 26 | &::before { 27 | content: ""; 28 | width: .5rem; 29 | height: .5rem; 30 | background: var(--primary-color); 31 | box-sizing: unset; 32 | left: -1.25rem; 33 | top: .3125rem; 34 | border-radius: 100%; 35 | position: absolute; 36 | border: .1875rem solid var(--grey-1); 37 | z-index: $zindex-1; 38 | the-transition(); 39 | } 40 | 41 | &:hover::before { 42 | background: var(--color-blue); 43 | } 44 | 45 | &:not(:last-child)::after { 46 | content: ""; 47 | height: 100%; 48 | width: .125rem; 49 | background: var(--color-red-a3); 50 | position: absolute; 51 | left: -.875rem; 52 | top: .5rem; 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/sidebar.styl: -------------------------------------------------------------------------------- 1 | #sidebar { 2 | position: static; 3 | width: $sidebar-desktop; 4 | top: 0; 5 | bottom: 0; 6 | the-transition(); 7 | 8 | +tablet-mobile() { 9 | display: none; 10 | position: fixed; 11 | right: 0; 12 | background: var(--grey-1); 13 | box-shadow: 0 .375rem .9375rem .3125rem rgba(0, 0, 0, .2); 14 | z-index: $zindex-3; 15 | } 16 | 17 | &.affix { 18 | >.inner { 19 | position: fixed; 20 | top: 0rem; 21 | } 22 | .panels { 23 | padding-top: 3.625rem; 24 | height: 100vh; 25 | } 26 | } 27 | 28 | >.inner { 29 | position: relative; 30 | width: $sidebar-desktop; 31 | color: var(--grey-6); 32 | text-align: center; 33 | display: flex; 34 | justify-content: space-around; 35 | align-items: flex-start; 36 | flex-wrap: wrap; 37 | z-index: $zindex-1; 38 | } 39 | } 40 | 41 | .panels { 42 | padding: 4.6875rem 0 2rem; 43 | width: 100%; 44 | overflow: hidden; 45 | 46 | .inner { 47 | overflow-x: hidden; 48 | overflow-y: auto; 49 | -webkit-overflow-scrolling: touch; 50 | width: auto; 51 | height: 100%; 52 | 53 | &::-webkit-scrollbar { 54 | display: none; 55 | } 56 | } 57 | 58 | .panel { 59 | display: none; 60 | padding: .875rem .9375rem 2rem; 61 | } 62 | } 63 | 64 | 65 | @import 'dimmer'; 66 | @import 'author'; 67 | @import 'menu'; 68 | @import 'social'; 69 | 70 | @import 'quick'; 71 | @import 'tab'; 72 | 73 | @import 'toc'; 74 | @import 'related'; 75 | @import 'state'; 76 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/social.styl: -------------------------------------------------------------------------------- 1 | .social { 2 | margin-top: .9375rem; 3 | text-align: center; 4 | .item { 5 | display: inline-block; 6 | width: 1.875rem; 7 | height: 1.875rem; 8 | line-height: 1.875rem; 9 | text-align: center; 10 | position: relative; 11 | overflow: hidden; 12 | border-radius: 38%; 13 | 14 | i { 15 | font-size: 1.4em; 16 | vertical-align: middle; 17 | transform: scale(.8); 18 | } 19 | 20 | 21 | &::before { 22 | top: 90%; 23 | left: -110%; 24 | content: ""; 25 | width: 120%; 26 | height: 120%; 27 | position: absolute; 28 | transform: rotate(45deg); 29 | } 30 | 31 | &::before, 32 | i { 33 | the-transition(.35s, cubic-bezier(.31, -.105, .43, 1.59)); 34 | } 35 | 36 | &:focus::before, 37 | &:hover::before { 38 | top: -10%; 39 | left: -10%; 40 | } 41 | 42 | $social = hexo-config('social'); 43 | 44 | for type in $social { 45 | for i in split(" || ", slice(type, 1)) { 46 | color = slice(i, 1, -1) 47 | } 48 | 49 | &.{slice(type, 0, 1)} { 50 | 51 | &::before { 52 | background-color: unquote(color); 53 | } 54 | i { 55 | color: unquote(color); 56 | } 57 | 58 | } 59 | } 60 | 61 | 62 | &:focus i, 63 | &:hover i { 64 | color: var(--grey-0); 65 | transform: scale(1); 66 | } 67 | 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/state.styl: -------------------------------------------------------------------------------- 1 | .state { 2 | display: flex; 3 | justify-content: center; 4 | line-height: 1.4; 5 | margin-top: .625rem; 6 | overflow: hidden; 7 | text-align: center; 8 | white-space: nowrap; 9 | 10 | 11 | .item { 12 | padding: 0 .9375rem; 13 | 14 | &:not(:first-child) { 15 | border-left: .0625rem solid var(--grey-4); 16 | } 17 | 18 | a { 19 | border-bottom: none; 20 | } 21 | 22 | .count { 23 | display: block; 24 | font-size: $font-size-larger; 25 | font-weight: 600; 26 | text-align: center; 27 | } 28 | 29 | .name { 30 | color: inherit; 31 | font-size: $font-size-small; 32 | } 33 | } 34 | 35 | 36 | 37 | } 38 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/tab.styl: -------------------------------------------------------------------------------- 1 | #sidebar .tab { 2 | position: absolute; 3 | display: inline-flex; 4 | padding: 1.875rem 0 .625rem; 5 | margin: 0; 6 | min-height: 1.875rem; 7 | 8 | 9 | .item { 10 | cursor: pointer; 11 | display: inline-flex; 12 | font-size: $font-size-small; 13 | padding: .3125rem .9375rem; 14 | color: var(--grey-5); 15 | 16 | border-radius: .625rem; 17 | text-align: center; 18 | text-decoration: none; 19 | background-color: rgba(0, 0, 0, .08); 20 | 21 | the-transition(.2s, ease-out); 22 | 23 | &:nth-child(2) { 24 | margin: auto .625rem; 25 | } 26 | 27 | span { 28 | display: none; 29 | word-break: keep-all; 30 | } 31 | 32 | &.active span { 33 | display: inherit; 34 | } 35 | 36 | &:hover, 37 | &.active { 38 | @extend $color-btn; 39 | } 40 | 41 | 42 | &.active:hover { 43 | box-shadow: 0rem 0rem .75rem var(--color-pink); 44 | } 45 | 46 | &::before { 47 | font-family-icons(); 48 | } 49 | 50 | &.contents::before { 51 | @extend .i-list-ol:before; 52 | } 53 | 54 | &.related::before { 55 | @extend .i-sitemap:before; 56 | } 57 | 58 | &.overview::before { 59 | @extend .i-home:before; 60 | } 61 | 62 | &.active::before { 63 | margin-right: .3125rem; 64 | } 65 | } 66 | 67 | } 68 | 69 | #sidebar.affix .tab { 70 | padding-top: .625rem; 71 | } 72 | -------------------------------------------------------------------------------- /source/css/_common/outline/sidebar/toc.styl: -------------------------------------------------------------------------------- 1 | .contents { 2 | ol { 3 | 4 | padding: 0 .125rem .3125rem .625rem; 5 | text-align: left; 6 | 7 | >ol { 8 | padding-left: 0; 9 | } 10 | } 11 | 12 | .toc-item { 13 | font-size: $font-size-medium; 14 | line-height: 1.8; 15 | overflow: hidden; 16 | text-overflow: ellipsis; 17 | white-space: nowrap; 18 | } 19 | 20 | .toc-child { 21 | display: none; 22 | } 23 | 24 | .active>.toc-child { 25 | display: block; 26 | } 27 | 28 | .current>.toc-child { 29 | display: block; 30 | 31 | >.toc-item { 32 | display: block; 33 | } 34 | } 35 | 36 | .active>a { 37 | color: var(--primary-color); 38 | } 39 | 40 | .current>a { 41 | color: var(--primary-color); 42 | 43 | &:hover { 44 | color: var(--primary-color); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/base.styl: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background: var(--color-orange); 3 | color: var(--grey-2); 4 | } 5 | 6 | *, *:before, *:after { 7 | box-sizing: border-box; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | html, body { 13 | height: 100%; 14 | } 15 | 16 | body { 17 | background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom; 18 | color: var(--text-color); 19 | font-family: $font-family-base; 20 | font-size: $font-size-base; 21 | line-height: $line-height-base; 22 | -webkit-font-smoothing: antialiased; 23 | overflow: hidden; 24 | 25 | &.loaded { 26 | overflow: auto; 27 | @extend $big-scrollbar; 28 | 29 | #main .wrap { 30 | @extend .slide-up-big-in; 31 | } 32 | 33 | #sidebar .panel.active { 34 | @extend .slide-up-big-in; 35 | display: block; 36 | } 37 | 38 | #brand .pjax { 39 | @extend .slide-down-in; 40 | } 41 | } 42 | 43 | +tablet-mobile() { 44 | // Remove the padding of body when the sidebar is open. 45 | padding-left: 0 !important; 46 | padding-right: 0 !important; 47 | } 48 | &.fullscreen { 49 | overflow: hidden; 50 | 51 | #tool, #sidebar>.inner { 52 | z-index: 0; 53 | } 54 | } 55 | } 56 | h1, h2, h3, h4, h5, h6 { 57 | font-family: $font-family-headings; 58 | font-weight: bold; 59 | line-height: 1.5; 60 | margin: 1.25rem 0 .9375rem; 61 | &.title { 62 | font-family: $font-family-title; 63 | } 64 | } 65 | 66 | a { 67 | border: none; 68 | color: currentColor; 69 | outline: 0; 70 | text-decoration: none; 71 | word-wrap(); 72 | the-transition(); 73 | 74 | &:hover { 75 | border-bottom-color: var(--color-blue); 76 | color: var(--color-blue); 77 | } 78 | 79 | &::before, &::after { 80 | the-transition(.4s); 81 | } 82 | 83 | cursor: pointer; 84 | } 85 | 86 | a, li, div { 87 | -webkit-tap-highlight-color: transparent; 88 | } 89 | 90 | li { 91 | list-style: none; 92 | } 93 | 94 | iframe, img, video { 95 | display: block; 96 | margin-left: auto; 97 | margin-right: auto; 98 | max-width: 100%; 99 | } 100 | 101 | hr { 102 | background-image: repeating-linear-gradient(-45deg, var(--grey-3), var(--grey-4) .25rem, transparent .25rem, transparent .5rem); 103 | border: none; 104 | height: .125rem; 105 | margin: 1.5rem 0; 106 | } 107 | 108 | blockquote { 109 | border-left: .25rem solid var(--grey-4); 110 | color: var(--grey-6); 111 | margin: 1.25rem 0; 112 | padding: .625rem 1.25rem; 113 | 114 | cite::before { 115 | content: '-'; 116 | padding: 0 .3125rem; 117 | } 118 | } 119 | 120 | dt { 121 | font-weight: bold; 122 | } 123 | 124 | dd { 125 | margin: 0; 126 | padding: 0; 127 | } 128 | 129 | input, textarea { 130 | color: var(--text-color); 131 | } 132 | 133 | @font-face { 134 | font-family: 'ic'; 135 | src: url('//at.alicdn.com/t/font_' + $iconfont + '.eot'); 136 | src: url('//at.alicdn.com/t/font_' + $iconfont + '.eot?#iefix') format('embedded-opentype'), 137 | url('//at.alicdn.com/t/font_' + $iconfont + '.woff2') format('woff2'), 138 | url('//at.alicdn.com/t/font_' + $iconfont + '.woff') format('woff'), 139 | url('//at.alicdn.com/t/font_' + $iconfont + '.ttf') format('truetype'), 140 | url('//at.alicdn.com/t/font_' + $iconfont + '.svg#ic') format('svg'); 141 | } 142 | 143 | .ic { 144 | font-family: "ic" !important; 145 | -webkit-font-smoothing: antialiased; 146 | -moz-osx-font-smoothing: grayscale; 147 | text-align: center; 148 | width: 1.25em; 149 | display: inline-block; 150 | font-style: normal; 151 | font-variant: normal; 152 | text-rendering: auto; 153 | line-height: 1; 154 | } 155 | 156 | .ic em { 157 | font-size: 0; 158 | } 159 | 160 | .ic-lg { 161 | font-size: 1.33333em; 162 | line-height: .75em; 163 | vertical-align: -.0667em; 164 | } 165 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/buttons.styl: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-block; 3 | cursor: pointer; 4 | touch-action: manipulation; 5 | text-align: center; 6 | text-decoration: none; 7 | vertical-align: middle; 8 | white-space: nowrap; 9 | border-radius: .3rem; 10 | border: .0625rem solid var(--grey-3); 11 | 12 | color: var(--grey-6); 13 | font-size: $font-size-small; 14 | font-weight: 400; 15 | line-height: 1.5; 16 | 17 | background: transparent; 18 | margin-bottom: 0; 19 | min-height: 1em; 20 | padding: .5em 1.25em; 21 | user-select: none; 22 | outline: none; 23 | will-change: auto; 24 | the-transition(); 25 | 26 | &+.button { 27 | margin-left: 1.25em 28 | } 29 | 30 | &:active, 31 | &:hover { 32 | color: var(--grey-0); 33 | background-color: var(--primary-color); 34 | border-color: var(--primary-color); 35 | } 36 | 37 | &:disabled { 38 | border-color: var(--grey-4); 39 | color: var(--grey-4); 40 | background-color: var(--grey-2); 41 | cursor: not-allowed 42 | } 43 | 44 | .ic { 45 | text-align: left; 46 | width: (18em / 14); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/divider.styl: -------------------------------------------------------------------------------- 1 | .divider { 2 | margin: 1rem 0; 3 | line-height: 1; 4 | height: 0; 5 | font-weight: 700; 6 | text-transform: uppercase; 7 | letter-spacing: .05rem; 8 | user-select: none; 9 | color: var(--grey-4); 10 | 11 | display: table; 12 | white-space: nowrap; 13 | height: auto; 14 | line-height: 1; 15 | text-align: center; 16 | 17 | &::after, 18 | &::before { 19 | content: ''; 20 | display: table-cell; 21 | position: relative; 22 | top: 50%; 23 | width: 50%; 24 | background-repeat: no-repeat; 25 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC") 26 | } 27 | 28 | &::before { 29 | background-position: right 1rem top 50% 30 | } 31 | 32 | &::after { 33 | background-position: left 1rem top 50% 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/pagination.styl: -------------------------------------------------------------------------------- 1 | $page-number-basic { 2 | display: inline-block; 3 | margin: 0 .5rem; 4 | padding: 0 .75rem; 5 | position: relative; 6 | border-radius: .3125rem; 7 | 8 | +mobile() { 9 | margin: 0 .3125rem; 10 | } 11 | } 12 | 13 | .pagination { 14 | width: 100%; 15 | padding: 1.25rem 3.125rem; 16 | text-align: center; 17 | display: inline-block; 18 | color: var(--grey-5); 19 | 20 | +mobile() { 21 | padding: 1.25rem .625rem; 22 | } 23 | 24 | .inner { 25 | width: auto; 26 | border-radius: .9375rem; 27 | } 28 | 29 | .prev, 30 | .next, 31 | .page-number { 32 | @extend $page-number-basic; 33 | 34 | the-transition(); 35 | 36 | &:hover { 37 | @extend $color-btn; 38 | } 39 | } 40 | 41 | .space { 42 | @extend $page-number-basic; 43 | margin: 0; 44 | padding: 0; 45 | } 46 | 47 | .prev { 48 | margin-left: 0; 49 | } 50 | 51 | .next { 52 | margin-right: 0; 53 | } 54 | 55 | .page-number.current { 56 | @extend $color-btn; 57 | 58 | &:hover { 59 | box-shadow: 0 0 .3125rem var(--primary-color); 60 | } 61 | } 62 | } 63 | 64 | /*+mobile() { 65 | .pagination { 66 | border-top: none; 67 | } 68 | 69 | .pagination { 70 | .prev, .next, .page-number { 71 | border-bottom: .0625rem solid var(--grey-3); 72 | border-top: 0; 73 | margin-bottom: .625rem; 74 | padding: 0 .625rem; 75 | 76 | &:hover { 77 | border-bottom-color: var(--color-red); 78 | } 79 | } 80 | } 81 | }*/ 82 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/ribbon.styl: -------------------------------------------------------------------------------- 1 | .ribbon { 2 | display: inline-block; 3 | align-self: flex-start; 4 | position: relative; 5 | padding: 0 1rem 0 2rem; 6 | border-radius: 0 .3rem .3rem 0; 7 | background-image: linear-gradient(to right,var(--color-orange) 0,var(--color-pink) 100%); 8 | color: var(--grey-0); 9 | 10 | &::after { 11 | content: ""; 12 | position: absolute; 13 | top: 100%; 14 | left: 0; 15 | width: 0; 16 | height: 0; 17 | background-color: transparent; 18 | border-style: solid; 19 | border-width: 0 1rem 1rem 0; 20 | border-color: transparent; 21 | border-right-color: var(--color-orange); 22 | filter: brightness(.9); 23 | } 24 | 25 | a { 26 | display: block; 27 | margin: 0; 28 | text-align: center; 29 | overflow: hidden; 30 | white-space: nowrap; 31 | text-overflow: ellipsis; 32 | 33 | &:hover { 34 | color: currentColor; 35 | @extend .shake; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/scaffolding.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Scaffolding 3 | // ================================================== 4 | @import 'normalize'; 5 | @import 'scrollbar'; 6 | @import 'animate'; 7 | @import 'base'; 8 | @import 'tables'; 9 | @import 'buttons'; 10 | @import 'toggles'; 11 | @import 'pagination'; 12 | @import 'tip'; 13 | @import 'ribbon'; 14 | @import 'divider'; 15 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/scrollbar.styl: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: .3125rem; 3 | height: .3125rem; 4 | background: transparent; 5 | } 6 | 7 | ::-webkit-scrollbar-track { 8 | border-radius: .3125rem; 9 | background: transparent; 10 | } 11 | 12 | ::-webkit-scrollbar-track-piece { 13 | background: transparent; 14 | } 15 | 16 | ::-webkit-scrollbar-button { 17 | background: transparent; 18 | height: 0; 19 | } 20 | 21 | ::-webkit-scrollbar-thumb { 22 | border-radius: 1.25rem; 23 | background-clip: padding-box; 24 | background-color: var(--grey-3); 25 | background-image: linear-gradient(45deg,var(--grey-1-a5) 25%,transparent 0,transparent 50%,var(--grey-1-a5) 0,var(--grey-1-a5) 75%,transparent 0,transparent); 26 | } 27 | 28 | $big-scrollbar { 29 | &::-webkit-scrollbar { 30 | width: .5rem; 31 | height: .5rem; 32 | } 33 | 34 | &::-webkit-scrollbar-thumb { 35 | background-color: var(--color-pink-light); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/tables.styl: -------------------------------------------------------------------------------- 1 | .table-container { 2 | overflow: auto; 3 | 4 | table { 5 | border-collapse: collapse; 6 | border-spacing: 0; 7 | font-size: $font-size-small; 8 | margin: 0 0 1.25rem 0; 9 | width: 100%; 10 | overflow: auto; 11 | 12 | tbody tr { 13 | &:nth-of-type(even) { 14 | background: var(--grey-0); 15 | } 16 | 17 | &:hover { 18 | background: var(--grey-2); 19 | } 20 | } 21 | 22 | caption, th, td { 23 | font-weight: normal; 24 | padding: .5rem; 25 | text-align: left; 26 | vertical-align: middle; 27 | } 28 | 29 | th, td { 30 | border: .0625rem solid var(--grey-3); 31 | border-bottom: .1875rem solid var(--grey-3); 32 | } 33 | 34 | th { 35 | font-weight: 700; 36 | padding-bottom: .625rem; 37 | text-align: center; 38 | } 39 | 40 | td { 41 | border-bottom-width: .0625rem; 42 | 43 | p:last-child, pre:last-child, .highlight:last-child { 44 | margin: 0; 45 | } 46 | 47 | } 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/tip.styl: -------------------------------------------------------------------------------- 1 | .tip { 2 | position: fixed; 3 | background: var(--grey-9-a5); 4 | color: #fff; 5 | top: 50%; 6 | left: 50%; 7 | z-index: $zindex-5; 8 | padding: .625rem 1rem; 9 | border-radius: .625rem; 10 | transform: translate(-50%,-50%); 11 | text-align: center; 12 | font-size: $font-size-small; 13 | backdrop-filter: blur(.625rem); 14 | @extend .fade-in; 15 | 16 | &.hide { 17 | @extend .fade-out; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /source/css/_common/scaffolding/toggles.styl: -------------------------------------------------------------------------------- 1 | .toggle { 2 | line-height: 0; 3 | cursor: pointer; 4 | 5 | .line { 6 | background: var(--header-text-color); 7 | display: inline-block; 8 | height: .125rem; 9 | left: 0; 10 | position: relative; 11 | border-radius: .0625rem; 12 | top: 0; 13 | transition: all .4s; 14 | vertical-align: top; 15 | width: 100%; 16 | box-shadow: 0rem 0rem .5rem alpha(#000, .5); 17 | 18 | &:not(:first-child) { 19 | margin-top: .1875rem; 20 | } 21 | } 22 | 23 | &.toggle-arrow { 24 | .toggle-line-first { 25 | left: 50%; 26 | top: .125rem; 27 | transform: rotate(45deg); 28 | width: 50%; 29 | } 30 | 31 | .toggle-line-middle { 32 | left: .125rem; 33 | width: 90%; 34 | } 35 | 36 | .toggle-line-last { 37 | left: 50%; 38 | top: -.125rem; 39 | transform: rotate(-45deg); 40 | width: 50%; 41 | } 42 | } 43 | 44 | &.close { 45 | .line:nth-child(1) { 46 | transform: rotate(-45deg); 47 | top: .3125rem; 48 | } 49 | 50 | .line:nth-child(2) { 51 | opacity: 0; 52 | } 53 | 54 | .line:nth-child(3) { 55 | transform: rotate(45deg); 56 | top: -.3125rem; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /source/css/_mixins.styl: -------------------------------------------------------------------------------- 1 | the-transition(duration = .2s, function = ease-in-out, delay = 0s, property = all) { 2 | transition:property duration function delay; 3 | } 4 | 5 | mobile-smallest() { 6 | @media (max-width: 413px) { 7 | {block}; 8 | } 9 | } 10 | 11 | mobile-small() { 12 | @media (max-width: 567px) { 13 | {block}; 14 | } 15 | } 16 | 17 | mobile() { 18 | @media (max-width: 767px) { 19 | {block}; 20 | } 21 | } 22 | 23 | tablet-mobile() { 24 | @media (max-width: 991px) { 25 | {block}; 26 | } 27 | } 28 | 29 | tablet-desktop() { 30 | @media (min-width: 768px) { 31 | {block}; 32 | } 33 | } 34 | 35 | tablet() { 36 | @media (min-width: 768px) and (max-width: 991px) { 37 | {block}; 38 | } 39 | } 40 | 41 | desktop() { 42 | @media (min-width: 992px) { 43 | {block}; 44 | } 45 | } 46 | 47 | desktop-large() { 48 | @media (min-width: 1200px) { 49 | {block}; 50 | } 51 | } 52 | 53 | desktop-largest() { 54 | @media (min-width: 1600px) { 55 | {block}; 56 | } 57 | } 58 | 59 | random-color($min, $max) { 60 | return floor(math(0, 'random') * ($max - $min + 1) + $min); 61 | } 62 | 63 | word-wrap() { 64 | overflow-wrap: break-word; 65 | word-wrap: break-word; 66 | } 67 | 68 | disable-user-select() { 69 | -moz-user-select: none; 70 | -ms-user-select: none; 71 | -webkit-user-select: none; 72 | user-select: none; 73 | } 74 | 75 | sidebar-inline-links-item() { 76 | margin: .3125rem 0 0; 77 | 78 | a { 79 | box-sizing: border-box; 80 | display: inline-block; 81 | margin-bottom: 0; 82 | margin-right: 0; 83 | max-width: 13.5rem; 84 | overflow: hidden; 85 | padding: 0 .3125rem; 86 | text-overflow: ellipsis; 87 | white-space: nowrap; 88 | } 89 | } 90 | 91 | the-flex(direction = column, justify = center, align = center) { 92 | display: flex; 93 | flex-direction: direction if direction == column; 94 | justify-content: justify; 95 | align-items: align; 96 | } 97 | 98 | font-family-icons() { 99 | font-family: 'ic'; 100 | font-weight: normal; 101 | } 102 | 103 | shadow-box(border = true, radius = .5rem) { 104 | border-radius: radius; 105 | border: .0625rem solid var(--grey-2) if border == true; 106 | box-shadow: 0 .625rem 1.875rem -.9375rem var(--box-bg-shadow); 107 | } 108 | 109 | li-nodot() { 110 | width: auto; 111 | height: auto; 112 | background: none !important; 113 | border: none !important; 114 | position: relative; 115 | top: 0 !important; 116 | left: 0 !important; 117 | } 118 | 119 | $hover-underline { 120 | &::before { 121 | content: ""; 122 | position: absolute; 123 | width: 0; 124 | height: .1875rem; 125 | bottom: 0; 126 | border-radius: .125rem; 127 | left: 50%; 128 | transform: translateX(-50%); 129 | background-color: currentColor; 130 | } 131 | } 132 | 133 | $color-btn { 134 | color: var(--grey-0); 135 | background-image: linear-gradient(to right,var(--color-pink) 0,var(--color-orange) 100%); 136 | box-shadow: 0 0 .75rem var(--color-pink-a3); 137 | } 138 | 139 | $fix-fullscreen { 140 | position: fixed; 141 | left: 0; 142 | right: 0; 143 | top: 0; 144 | bottom: 0; 145 | z-index: $zindex-5; 146 | } 147 | -------------------------------------------------------------------------------- /source/css/_variables.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // ================================================== 4 | 5 | // Typography 6 | // Font, line-height, and elements colors. 7 | // -------------------------------------------------- 8 | get_font_family(config) { 9 | $custom-family = hexo-config('font.' + config + '.family'); 10 | return $custom-family is a 'string' ? $custom-family : null; 11 | } 12 | 13 | // Font families. 14 | $font-family-chinese = -apple-system, "PingFang SC", "Microsoft YaHei"; 15 | 16 | $font-family-base = $font-family-chinese, sans-serif; 17 | $font-family-base = get_font_family('global'), $font-family-base if get_font_family('global'); 18 | 19 | $font-family-logo = $font-family-base; 20 | $font-family-logo = get_font_family('logo'), $font-family-base if get_font_family('title'); 21 | 22 | $font-family-title = $font-family-base; 23 | $font-family-title = get_font_family('title'), $font-family-base if get_font_family('title'); 24 | 25 | $font-family-headings = $font-family-base; 26 | $font-family-headings = get_font_family('headings'), $font-family-title if get_font_family('headings'); 27 | $font-family-headings = get_font_family('global'), $font-family-headings if get_font_family('global'); 28 | $font-family-title = get_font_family('title'), get_font_family('headings'), $font-family-base if get_font_family('headings'); 29 | $font-family-title = get_font_family('global'), $font-family-title if get_font_family('global'); 30 | 31 | $font-family-posts = $font-family-base; 32 | $font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts'); 33 | 34 | $font-family-monospace = consolas, Menlo, $font-family-chinese; 35 | $font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-chinese if get_font_family('codes'); 36 | 37 | $iconfont = hexo-config('iconfont'); 38 | 39 | // Font size 40 | $font-size-base = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em; 41 | $font-size-smallest = .75em; 42 | $font-size-smaller = .8125em; 43 | $font-size-small = .875em; 44 | $font-size-medium = 1em; 45 | $font-size-large = 1.125em; 46 | $font-size-larger = 1.25em; 47 | $font-size-largest = 1.5em; 48 | 49 | 50 | // Headings font size 51 | $font-size-headings-step = .125em; 52 | $font-size-headings-base = (hexo-config('font.enable') and hexo-config('font.headings.size') is a 'unit') ? unit(hexo-config('font.headings.size'), em) : 1.625em; 53 | 54 | 55 | // Global line height 56 | $line-height-base = 2; 57 | $line-height-code-block = 1.6; // Can't be less than 1.3; 58 | 59 | 60 | // Z-index master list 61 | // -------------------------------------------------- 62 | $zindex-0 = -1; 63 | $zindex-1 = 1; 64 | $zindex-2 = 9; 65 | $zindex-3 = 99; 66 | $zindex-4 = 999; 67 | $zindex-5 = 9999; 68 | 69 | 70 | // Pagination 71 | // -------------------------------------------------- 72 | 73 | 74 | // Layout sizes 75 | // -------------------------------------------------- 76 | $sidebar-width = 15; 77 | $sidebar-desktop = unit($sidebar-width, 'rem'); 78 | $content-offset = .75rem; 79 | $content-wrap = 'calc(100% - %s)' % unit($sidebar-width + $content-offset, 'rem'); 80 | 81 | $content-desktop-padding = 1.25rem; 82 | $content-tablet-padding = .625rem; 83 | $content-mobile-padding = .5rem; 84 | 85 | $content-desktop = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'rem'); 86 | $content-desktop-large = 72.5rem; 87 | $content-desktop-largest = 73%; 88 | 89 | 90 | 91 | // Site Meta 92 | $font-size-title = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : 2em; 93 | $font-size-subtitle = $font-size-small; 94 | $font-size-logo = (hexo-config('font.enable') and hexo-config('font.logo.size') is a 'unit') ? unit(hexo-config('font.logo.size'), em) : 3.5em; 95 | -------------------------------------------------------------------------------- /source/css/app.styl: -------------------------------------------------------------------------------- 1 | @import "_variables"; 2 | 3 | @import "_mixins"; 4 | 5 | if $colors = hexo-config('style.colors') 6 | @import $colors; 7 | else 8 | @import "_colors"; 9 | 10 | if $_iconfont = hexo-config('style.iconfont') 11 | @import $_iconfont; 12 | else 13 | @import "_iconfont"; 14 | 15 | // Scaffolding 16 | @import "_common/scaffolding"; 17 | 18 | // Layout 19 | @import "_common/outline"; 20 | 21 | // Components 22 | @import "_common/components"; 23 | 24 | if $custom = hexo-config('style.custom') 25 | @import $custom; 26 | -------------------------------------------------------------------------------- /source/css/comment.styl: -------------------------------------------------------------------------------- 1 | @import "_variables.styl"; 2 | 3 | @import "_mixins.styl"; 4 | 5 | @import "_common/components/third-party/valine"; 6 | -------------------------------------------------------------------------------- /source/css/mermaid.styl: -------------------------------------------------------------------------------- 1 | @import "_variables.styl"; 2 | 3 | @import "_mixins.styl"; 4 | 5 | @import "_common/components/third-party/mermaid"; 6 | -------------------------------------------------------------------------------- /source/images/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/404.png -------------------------------------------------------------------------------- /source/images/algolia_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /source/images/alipay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/alipay.png -------------------------------------------------------------------------------- /source/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/apple-touch-icon.png -------------------------------------------------------------------------------- /source/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/avatar.jpg -------------------------------------------------------------------------------- /source/images/failure.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/failure.ico -------------------------------------------------------------------------------- /source/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/favicon.ico -------------------------------------------------------------------------------- /source/images/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/paypal.png -------------------------------------------------------------------------------- /source/images/play_disc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/play_disc.png -------------------------------------------------------------------------------- /source/images/play_needle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/play_needle.png -------------------------------------------------------------------------------- /source/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/search.png -------------------------------------------------------------------------------- /source/images/wechatpay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amehime/hexo-theme-shoka/ad3bb6039fe37a294e2ce8d1a83aa2c782e5d2ea/source/images/wechatpay.png -------------------------------------------------------------------------------- /source/js/_app/dom.js: -------------------------------------------------------------------------------- 1 | const $ = function(selector, element) { 2 | element = element || document; 3 | if(selector.indexOf('#') === 0) { 4 | return element.getElementById(selector.replace('#', '')) 5 | } 6 | return element.querySelector(selector) 7 | }; 8 | 9 | $.all = function(selector, element) { 10 | element = element || document; 11 | return element.querySelectorAll(selector) 12 | }; 13 | 14 | $.each = function(selector, callback, element) { 15 | return $.all(selector, element).forEach(callback) 16 | } 17 | 18 | 19 | Object.assign(HTMLElement.prototype, { 20 | createChild: function(tag, obj, positon) { 21 | var child = document.createElement(tag); 22 | Object.assign(child, obj) 23 | switch(positon) { 24 | case 'after': 25 | this.insertAfter(child) 26 | break; 27 | case 'replace': 28 | this.innerHTML = "" 29 | default: 30 | this.appendChild(child) 31 | } 32 | return child 33 | }, 34 | wrap: function (obj) { 35 | var box = document.createElement('div'); 36 | Object.assign(box, obj) 37 | this.parentNode.insertBefore(box, this); 38 | this.parentNode.removeChild(this); 39 | box.appendChild(this); 40 | }, 41 | height: function(h) { 42 | if(h) { 43 | this.style.height = typeof h == 'number' ? h + 'rem' : h; 44 | } 45 | return this.getBoundingClientRect().height 46 | }, 47 | width: function(w) { 48 | if(w) { 49 | this.style.width = typeof w == 'number' ? w + 'rem' : w; 50 | } 51 | return this.getBoundingClientRect().width 52 | }, 53 | top: function() { 54 | return this.getBoundingClientRect().top 55 | }, 56 | left:function() { 57 | return this.getBoundingClientRect().left 58 | }, 59 | attr: function(type, value) { 60 | if(value === null) { 61 | return this.removeAttribute(type) 62 | } 63 | 64 | if(value) { 65 | this.setAttribute(type, value) 66 | return this 67 | } else { 68 | return this.getAttribute(type) 69 | } 70 | }, 71 | insertAfter: function(element) { 72 | var parent = this.parentNode; 73 | if(parent.lastChild == this){ 74 | parent.appendChild(element); 75 | }else{ 76 | parent.insertBefore(element, this.nextSibling); 77 | } 78 | }, 79 | display: function(d) { 80 | if(d == null) { 81 | return this.style.display 82 | } else { 83 | this.style.display = d; 84 | return this 85 | } 86 | }, 87 | child: function(selector) { 88 | return $(selector, this) 89 | }, 90 | find: function(selector) { 91 | return $.all(selector, this) 92 | }, 93 | _class: function(type, className, display) { 94 | var classNames = className.indexOf(' ') ? className.split(' ') : [className]; 95 | var that = this; 96 | classNames.forEach(function(name) { 97 | if(type == 'toggle') { 98 | that.classList.toggle(name, display) 99 | } else { 100 | that.classList[type](name) 101 | } 102 | }) 103 | }, 104 | addClass: function(className) { 105 | this._class('add', className); 106 | return this; 107 | }, 108 | removeClass: function(className) { 109 | this._class('remove', className); 110 | return this; 111 | }, 112 | toggleClass: function(className, display) { 113 | this._class('toggle', className, display); 114 | return this; 115 | }, 116 | hasClass: function(className) { 117 | return this.classList.contains(className) 118 | } 119 | }); 120 | -------------------------------------------------------------------------------- /source/js/_app/fireworks.js: -------------------------------------------------------------------------------- 1 | var canvasEl = document.createElement('canvas'); 2 | canvasEl.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:9999999'; 3 | document.body.appendChild(canvasEl); 4 | 5 | var ctx = canvasEl.getContext('2d'); 6 | var numberOfParticules = 30; 7 | var pointerX = 0; 8 | var pointerY = 0; 9 | var tap = 'click'; // ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown' 10 | var colors = CONFIG.fireworks; 11 | 12 | function setCanvasSize() { 13 | canvasEl.width = window.innerWidth * 2; 14 | canvasEl.height = window.innerHeight * 2; 15 | canvasEl.style.width = window.innerWidth + 'px'; 16 | canvasEl.style.height = window.innerHeight + 'px'; 17 | canvasEl.getContext('2d').scale(2, 2); 18 | } 19 | 20 | function updateCoords(e) { 21 | pointerX = e.clientX || e.touches && e.touches[0].clientX; 22 | pointerY = e.clientY || e.touches && e.touches[0].clientY; 23 | } 24 | 25 | function setParticuleDirection(p) { 26 | var angle = anime.random(0, 360) * Math.PI / 180; 27 | var value = anime.random(50, 180); 28 | var radius = [-1, 1][anime.random(0, 1)] * value; 29 | return { 30 | x: p.x + radius * Math.cos(angle), 31 | y: p.y + radius * Math.sin(angle) 32 | } 33 | } 34 | 35 | function createParticule(x,y) { 36 | var p = {}; 37 | p.x = x; 38 | p.y = y; 39 | p.color = colors[anime.random(0, colors.length - 1)]; 40 | p.radius = anime.random(16, 32); 41 | p.endPos = setParticuleDirection(p); 42 | p.draw = function() { 43 | ctx.beginPath(); 44 | ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true); 45 | ctx.fillStyle = p.color; 46 | ctx.fill(); 47 | } 48 | return p; 49 | } 50 | 51 | function createCircle(x,y) { 52 | var p = {}; 53 | p.x = x; 54 | p.y = y; 55 | p.color = '#FFF'; 56 | p.radius = 0.1; 57 | p.alpha = .5; 58 | p.lineWidth = 6; 59 | p.draw = function() { 60 | ctx.globalAlpha = p.alpha; 61 | ctx.beginPath(); 62 | ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true); 63 | ctx.lineWidth = p.lineWidth; 64 | ctx.strokeStyle = p.color; 65 | ctx.stroke(); 66 | ctx.globalAlpha = 1; 67 | } 68 | return p; 69 | } 70 | 71 | function renderParticule(anim) { 72 | for (var i = 0; i < anim.animatables.length; i++) { 73 | anim.animatables[i].target.draw(); 74 | } 75 | } 76 | 77 | function animateParticules(x, y) { 78 | var circle = createCircle(x, y); 79 | var particules = []; 80 | for (var i = 0; i < numberOfParticules; i++) { 81 | particules.push(createParticule(x, y)); 82 | } 83 | anime.timeline().add({ 84 | targets: particules, 85 | x: function(p) { return p.endPos.x; }, 86 | y: function(p) { return p.endPos.y; }, 87 | radius: 0.1, 88 | duration: anime.random(1200, 1800), 89 | easing: 'easeOutExpo', 90 | update: renderParticule 91 | }).add({ 92 | targets: circle, 93 | radius: anime.random(80, 160), 94 | lineWidth: 0, 95 | alpha: { 96 | value: 0, 97 | easing: 'linear', 98 | duration: anime.random(600, 800), 99 | }, 100 | duration: anime.random(1200, 1800), 101 | easing: 'easeOutExpo', 102 | update: renderParticule 103 | }, 0); 104 | } 105 | 106 | var render = anime({ 107 | duration: Infinity, 108 | update: function() { 109 | ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); 110 | } 111 | }); 112 | 113 | document.addEventListener(tap, function(e) { 114 | render.play(); 115 | updateCoords(e); 116 | animateParticules(pointerX, pointerY); 117 | }, false); 118 | 119 | setCanvasSize(); 120 | window.addEventListener('resize', setCanvasSize, false); 121 | --------------------------------------------------------------------------------