├── .DS_Store ├── .gitmodules ├── 404.php ├── LICENSE ├── README.md ├── README └── Card.svg ├── archive.php ├── comments.php ├── footer.php ├── functions.php ├── header.php ├── img ├── icon-search.png └── icon-search@2x.png ├── index.php ├── page-about.php ├── page-links.php ├── page.php ├── post.php ├── screenshot.png ├── sidebar.php └── src ├── bootstrap ├── css │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js │ ├── bootstrap.bundle.js │ ├── bootstrap.bundle.js.map │ ├── bootstrap.bundle.min.js │ ├── bootstrap.bundle.min.js.map │ ├── bootstrap.js │ ├── bootstrap.js.map │ ├── bootstrap.min.js │ └── bootstrap.min.js.map ├── css ├── article.css ├── article │ └── view_card.css ├── color │ ├── append-dark.css │ ├── append-light.css │ ├── prism-dark.css │ └── prism-light.css ├── comments.css ├── components │ └── about.css ├── index.css ├── others.css └── page.css ├── font-awesome ├── HELP-US-OUT.txt ├── css │ ├── font-awesome.css │ └── font-awesome.min.css ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── less │ ├── animated.less │ ├── bordered-pulled.less │ ├── core.less │ ├── fixed-width.less │ ├── font-awesome.less │ ├── icons.less │ ├── larger.less │ ├── list.less │ ├── mixins.less │ ├── path.less │ ├── rotated-flipped.less │ ├── screen-reader.less │ ├── stacked.less │ └── variables.less └── scss │ ├── _animated.scss │ ├── _bordered-pulled.scss │ ├── _core.scss │ ├── _fixed-width.scss │ ├── _icons.scss │ ├── _larger.scss │ ├── _list.scss │ ├── _mixins.scss │ ├── _path.scss │ ├── _rotated-flipped.scss │ ├── _screen-reader.scss │ ├── _stacked.scss │ ├── _variables.scss │ └── font-awesome.scss └── js ├── article.js ├── components ├── about.js └── links.js ├── index.js ├── katex ├── auto-render.min.js └── katex.min.js ├── lib └── jquery-3.6.3.min.js ├── prism.js ├── util └── link_view.js └── viewerjs ├── viewer.css └── viewer.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/.DS_Store -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "src/Border-Card-UI"] 2 | path = src/Border-Card-UI 3 | url = https://github.com/Stapxs/Border-Card-UI.git 4 | branch = js-bcui 5 | -------------------------------------------------------------------------------- /404.php: -------------------------------------------------------------------------------- 1 | 2 | need('header.php'); ?> 3 | 4 |
5 | 6 |
7 |
8 | 9 | 404 10 | 小鱼干弄丢了 11 | 回去看看 12 |
13 | 14 | 20 |
21 | 22 |
23 | need('footer.php'); ?> 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Card 4 | 5 |

Fructose Lite

6 | 7 |

8 | 一个 BCUI 风格的卡片样式 Typecho 主题 9 |
10 |

11 |

12 | -------------------------------------------------------------------------------- /archive.php: -------------------------------------------------------------------------------- 1 | 2 | need('header.php'); ?> 3 | 4 | is('index')) { 10 | $page = "/index.php/page/"; 11 | } elseif ($this->is('author')) { 12 | $page = $this->author->permalink; 13 | } elseif ($this->is('category')) { 14 | $url = $_SERVER['PHP_SELF']; 15 | if (empty($url)) { 16 | $url = $_SERVER['REQUEST_URI']; 17 | } 18 | $page = preg_replace("/\/\d+/u", '', $url); 19 | } 20 | $prev = $this->_currentPage - 1; 21 | $next = $this->_currentPage + 1; 22 | if ($this->_currentPage == 0 || $this->_currentPage == 1) { 23 | $hidden = 'hidden'; 24 | $cpage = 1; 25 | } else { 26 | $cpage = $this->_currentPage; 27 | } 28 | if ($this->_currentPage == ceil($this->getTotal() / $this->parameter->pageSize)) { 29 | $hiddens = 'hidden'; 30 | } elseif (ceil($this->getTotal() / $this->parameter->pageSize) == 1) { 31 | $hiddens = 'hidden'; 32 | $hidden = 'hidden'; 33 | } 34 | $http_type = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) ? 'https://' : 'http://'; 35 | $site = $http_type . $_SERVER['HTTP_HOST']; 36 | ?> 37 | 38 |
39 | parameter->type; ?> 40 |
41 |
42 |
43 | archiveTitle([ 44 | 'category' => _t('分类 %s 下的文章'), 45 | 'search' => _t('包含关键字 %s 的文章'), 46 | 'tag' => _t('标签 %s 下的文章'), 47 | 'author' => _t('%s 发布的文章') 48 | ], '', ''); ?> 49 |
50 |
51 |
52 |
53 | have()): ?> 54 | 55 | next()): ?> 56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 | title() ?> 65 |
66 | excerpt(300,'...'); ?> 67 |
68 |
69 | author->gravatar(280, 'G', NULL, 'post-card-content-meta-authors-link-avatar') ?> 70 |
71 | author(); ?> 72 | date(); ?> 73 |
74 | 75 |
76 | category(','); ?> 77 | 78 |
79 | 80 |
81 |
82 |
83 | 84 | 85 |
86 |

87 |
88 | 89 |
90 | 91 |
92 | 93 |
第 页
94 | 95 |
96 |
97 | 98 | need('footer.php'); ?> 99 | -------------------------------------------------------------------------------- /comments.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | 7 | comments()->to($comments); ?> 8 | 9 | allow('comment')): ?> 10 |
11 | have()): ?> 12 | commentsNum(_t('暂无评论'), _t('仅有一条评论'), _t('已有 %d 条评论')); ?> 13 | listComments(); ?> 14 | pageNav('« 前一页', '后一页 »'); ?> 15 | 16 |
17 | 18 |
19 |
20 |
21 | user->hasLogin()): ?> 22 | 30 | 31 | 52 | 53 |

54 | 56 |

57 |

58 | 59 | cancelReply(); ?> 60 |

61 |
62 |
63 |
64 | 65 |

66 | 67 |
68 | -------------------------------------------------------------------------------- /footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | footer(); ?> 30 | 31 | 32 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | to($themes)->next()); 8 | echo ' 9 | 10 | 74 |
75 |
76 |
77 | 78 | 79 | '.$theme_info["title"].' 80 | for Typecho 81 | 82 | '.$theme_info["description"].' 83 | '.$theme_info["version"].' 84 |
85 |
86 |
87 |
Copyright © 2020 - '.date('Y').' '.$theme_info["author"].'
'; 88 | 89 | $copyright = new Typecho_Widget_Helper_Form_Element_Text( 90 | 'copyright', 91 | null, 92 | null, 93 | _t('copyright 信息'), 94 | _t('这种事情自己随意就好了。') 95 | ); 96 | $form->addInput($copyright); 97 | 98 | $filing = new Typecho_Widget_Helper_Form_Element_Text( 99 | 'filing', 100 | null, 101 | null, 102 | _t('备案信息'), 103 | _t('如果有备案信息的话（小声），可以填写 html 内容。') 104 | ); 105 | $form->addInput($filing); 106 | 107 | $darkmode = new Typecho_Widget_Helper_Form_Element_Radio( 108 | 'darkmode', 109 | array( 110 | 'auto' => _t('跟随系统'), 111 | 'light' => _t('浅色模式'), 112 | 'dark' => _t('深色模式') 113 | ), 114 | 'auto', 115 | _t('颜色模式'), 116 | _t('默认将跟随系统颜色模式，也可以自己指定。')); 117 | $form->addInput($darkmode); 118 | 119 | $color = new Typecho_Widget_Helper_Form_Element_Radio( 120 | 'color', 121 | array( 122 | '0' => _t('林槐蓝'), 123 | '1' => _t('墨竹青'), 124 | '2' => _t('少女粉'), 125 | '3' => _t('微软紫'), 126 | '4' => _t('坏猫黄'), 127 | '5' => _t('玄素黑') 128 | ), 129 | '0', 130 | _t('主题色'), 131 | _t('强调主题色，有六个可以选。')); 132 | $form->addInput($color); 133 | 134 | $bg = new Typecho_Widget_Helper_Form_Element_Text( 135 | 'bg', 136 | null, 137 | 'https://lib.stapxs.cn/download/pic/desktopImg/get_image.php', 138 | _t('顶栏背景图'), 139 | _t('需要填写一个返回图片的 API，默认是我的桌面壁纸 API。') 140 | ); 141 | $form->addInput($bg); 142 | 143 | $ana = new Typecho_Widget_Helper_Form_Element_Text( 144 | 'ana', 145 | null, 146 | null, 147 | _t('顶栏语录'), 148 | _t('需要填写一个只返回纯文本的 API，如果不使用 API 就直接填写文本。') 149 | ); 150 | $form->addInput($ana); 151 | 152 | $umami = new Typecho_Widget_Helper_Form_Element_Text( 153 | 'umami', 154 | null, 155 | null, 156 | _t('umami 代码'), 157 | _t('umami 站点统计的配置，这是个开源的站点统计工具，可以自己搭建；要启用请填写完整的跟踪代码。') 158 | ); 159 | $form->addInput($umami); 160 | 161 | $umami_publish = new Typecho_Widget_Helper_Form_Element_Text( 162 | 'umami_publish', 163 | null, 164 | null, 165 | _t('umami 公开链接'), 166 | _t('umami 站点统计公开链接，如果你想要展示出来的话，可以填写。') 167 | ); 168 | $form->addInput($umami_publish); 169 | } 170 | 171 | /* 172 | function themeFields($layout) 173 | { 174 | $logoUrl = new \Typecho\Widget\Helper\Form\Element\Text( 175 | 'logoUrl', 176 | null, 177 | null, 178 | _t('站点LOGO地址'), 179 | _t('在这里填入一个图片URL地址, 以在网站标题前加上一个LOGO') 180 | ); 181 | $layout->addItem($logoUrl); 182 | } 183 | */ 184 | 185 | // 这是个从 illi 主题抄过来的获取第一张图片的方法（x 186 | // https://github.com/touchitvoid/illi 187 | function showThumbnail($widget) 188 | { 189 | $cai = '';//这里可以添加图片后缀，例如七牛的缩略图裁剪规则，这里默认为空 190 | $attach = $widget->attachments(1)->attachment; 191 | $pattern = '/\]*>/i'; 192 | $patternMD = '/\!\[.*?\]\((http(s)?:\/\/.*?(jpg|png))/i'; 193 | $patternMDfoot = '/\[.*?\]:\s*(http(s)?:\/\/.*?(jpg|png))/i'; 194 | if (preg_match_all($pattern, $widget->content, $thumbUrl)) { 195 | $ctu = $thumbUrl[1][0].$cai; 196 | } 197 | //如果是内联式markdown格式的图片 198 | else if (preg_match_all($patternMD, $widget->content, $thumbUrl)) { 199 | $ctu = $thumbUrl[1][0].$cai; 200 | } 201 | //如果是脚注式markdown格式的图片 202 | else if (preg_match_all($patternMDfoot, $widget->content, $thumbUrl)) { 203 | $ctu = $thumbUrl[1][0].$cai; 204 | } 205 | else if ($attach && $attach->isImage) { 206 | $ctu = $attach->url.$cai; 207 | } 208 | if(Typecho_Widget::widget('Widget_Options')->slimg && 209 | 'showoff'==Typecho_Widget::widget('Widget_Options')->slimg){ 210 | if($widget->fields->thumb) 211 | { 212 | $ctu = $widget->fields->thumb; 213 | } 214 | } 215 | echo $ctu; 216 | } 217 | 218 | // 随机输出文章 219 | function posts($widget) 220 | { 221 | $db = Typecho_Db::get(); 222 | $sql = $db->select()->from('table.contents') 223 | ->where('table.contents.status = ?', 'publish') 224 | ->where('table.contents.type = ?', $widget->type) 225 | ->where('table.contents.password IS NULL') 226 | ->order('table.contents.created', Typecho_Db::SORT_ASC); 227 | $data = $db->fetchALL($sql); 228 | $total = count($data); 229 | $nums = ounts(3, $total); 230 | $temp = array_rand($data, $nums); 231 | $content = array(); 232 | foreach ($temp as $val) { 233 | $content[] = $data[$val]; 234 | } 235 | if ($content) { 236 | $arr = array(); 237 | foreach ($content as $key => $v) { 238 | $contents = $widget->filter($content[$key]); 239 | $arr[$key]['title'] = $contents['title']; 240 | $arr[$key]['url'] = $contents['permalink']; 241 | $arr[$key]['content'] = excerpt($contents['text']); 242 | $arr[$key]['category'] = $contents['categories'][0]['name']; 243 | $arr[$key]['timeStamp'] = $contents['date']->timeStamp; 244 | } 245 | return $arr; 246 | } else { 247 | return false; 248 | } 249 | } 250 | 251 | function ounts($sum, $total) 252 | { 253 | if ($sum > $total) { 254 | $sum -= 1; 255 | return ounts($sum, $total); 256 | } else { 257 | return $sum; 258 | } 259 | } 260 | 261 | function excerpt($post_excerpt) 262 | { 263 | $post_excerpt = strip_tags(htmlspecialchars_decode($post_excerpt)); 264 | $post_excerpt = trim($post_excerpt); 265 | 266 | $patternArr = array('/\s/', '/ /'); 267 | $replaceArr = array('', ''); 268 | $post_excerpt = preg_replace($patternArr, $replaceArr, $post_excerpt); 269 | $value = mb_strcut($post_excerpt, 0, 700, 'utf-8'); 270 | return $value; 271 | } -------------------------------------------------------------------------------- /header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <?php $this->archiveTitle([ 9 | 'category' => _t('分类 %s 下的文章'), 10 | 'search' => _t('包含关键字 %s 的文章'), 11 | 'tag' => _t('标签 %s 下的文章'), 12 | 'author' => _t('%s 发布的文章') 13 | ], '', ' - '); ?><?php $this->options->title(); ?> 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | header(); ?> 32 | 33 | 34 | 35 | 36 | 37 | 42 | umami(); ?> 43 | 44 | 45 | 46 | 104 | 105 |
106 | 110 | is('post') && !$this->is('category') && 111 | $this->parameter->type != 404): ?> 112 |
113 |
114 |
115 |
116 |

117 | is('page')) { 119 | echo $this->title(); 120 | } else { 121 | echo $this->options->title(); 122 | } 123 | ?> 124 |

125 | 126 |
127 |
128 |
129 | 130 |
-------------------------------------------------------------------------------- /img/icon-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/img/icon-search.png -------------------------------------------------------------------------------- /img/icon-search@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/img/icon-search@2x.png -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | need('header.php'); ?> 12 | is('index')) { 18 | $page = "/index.php/page/"; 19 | } elseif ($this->is('author')) { 20 | $page = $this->author->permalink; 21 | } elseif ($this->is('category')) { 22 | $url = $_SERVER['PHP_SELF']; 23 | if (empty($url)) { 24 | $url = $_SERVER['REQUEST_URI']; 25 | } 26 | $page = preg_replace("/\/\d+/u", '', $url); 27 | } 28 | $prev = $this->_currentPage - 1; 29 | $next = $this->_currentPage + 1; 30 | if ($this->_currentPage == 0 || $this->_currentPage == 1) { 31 | $hidden = 'hidden'; 32 | $cpage = 1; 33 | } else { 34 | $cpage = $this->_currentPage; 35 | } 36 | if ($this->_currentPage == ceil($this->getTotal() / $this->parameter->pageSize)) { 37 | $hiddens = 'hidden'; 38 | } elseif (ceil($this->getTotal() / $this->parameter->pageSize) == 1) { 39 | $hiddens = 'hidden'; 40 | $hidden = 'hidden'; 41 | } 42 | $http_type = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) ? 'https://' : 'http://'; 43 | $site = $http_type . $_SERVER['HTTP_HOST']; 44 | ?> 45 | 46 | 47 |
48 | 49 | next()): ?> 50 | tags) as $value) { 54 | $tag_names[] = $value["name"]; 55 | } 56 | ?> 57 | 58 |
59 |
60 | 61 |
62 |
63 | 碎碎念：title() ?> 64 | date(); ?> 65 | author->gravatar(280, 'G', NULL, 'post-card-content-meta-authors-link-avatar') ?> 66 |
67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 |
77 | title() ?> 78 |
79 | excerpt(300,'...'); ?> 80 |
81 |
82 | author->gravatar(280, 'G', NULL, 'post-card-content-meta-authors-link-avatar') ?> 83 |
84 | author(); ?> 85 | date(); ?> 86 |
87 |
88 | category(','); ?> 89 | 90 |
91 |
92 |
93 |
94 | 95 | 96 |
97 |
98 | 99 |
第 页
100 | 101 |
102 | 103 | need('sidebar.php'); ?> 104 | 105 | need('footer.php'); ?> 106 | -------------------------------------------------------------------------------- /page-about.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | need('header.php'); ?> 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 | card
", "type": "HTML" } 来输出 HTML 25 | ?> 26 | 27 |
28 |
29 |
{ab-gravatar}
30 |

{ab-name}

31 |

{ab-mail}

32 | {ab-context} 33 |
34 |
{ab-gpg}
35 |
36 |
37 |
{ab-hello-title}
38 |
{ab-hello}
39 |
40 |
41 |
42 | 43 |
44 | 45 |
46 | 47 | 48 | 49 | 50 | need('footer.php'); ?> 51 | -------------------------------------------------------------------------------- /page-links.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | need('header.php'); ?> 14 | 15 | 16 | 17 |
18 |
19 |
20 | content(); ?> 21 |
22 |
23 | 24 | need('comments.php'); ?> 25 |
26 | 27 | 28 | 29 | need('footer.php'); ?> 30 | -------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | 2 | need('header.php'); ?> 3 | 4 | 5 | 6 | 7 |
8 |
9 |
10 | content(); ?> 11 |
12 |
13 | need('comments.php'); ?> 14 |
15 | 16 | need('footer.php'); ?> 17 | -------------------------------------------------------------------------------- /post.php: -------------------------------------------------------------------------------- 1 | 2 | need('header.php'); ?> 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 |
21 |
22 | 23 |
24 |

25 | ——", $this->archiveTitle) ?> 26 |

27 |
28 |
29 | tags('
', true, ''); ?> 30 |
31 |
32 |
33 |
34 |
35 |
36 | author->gravatar(280, 'G', NULL, 'post-card-content-meta-authors-link-avatar') ?> 37 |
38 | author(); ?> 39 | 40 | 41 | 42 |
43 |
44 |
45 |
46 | tags('
', true, ''); ?> 47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | content; 56 | // 为 H 标签添加 id 方便目录跳转 57 | $content = preg_replace( 58 | '/<(h[1-6])>(.+?)<\/h[1-6]>/m', 59 | '<${1} id="toc-${2}">${2}', 60 | $content 61 | ); 62 | // 为 img 标签增加 id 方便定位图片预览器 63 | function addIdToImg($matches) { 64 | global $imgCounter; 65 | if(!$imgCounter) { 66 | $imgCounter = 0; 67 | } 68 | $imgTag = $matches[0]; 69 | $id = 'img-' . $imgCounter; 70 | $imgCounter++; 71 | $imgTagWithId = preg_replace('//i', '', $imgTag); 72 | return $imgTagWithId; 73 | } 74 | $imgCounter = 1; 75 | $content = preg_replace_callback('//i', 'addIdToImg', $content); 76 | echo $content; 77 | ?> 78 |
79 |
80 | 87 |
88 |
89 |
90 | 91 |
92 | 作者：author(); ?> 93 | 链接：permalink() ?> 94 | 版权：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！ 95 |
96 | 97 |
98 |
99 | 推荐 100 | ∞ 101 | 102 | 103 | $v) { ?> 104 |
105 | 106 | 107 | 108 |
109 | <  thePrev('%s', '没有了'); ?> 110 |
111 | theNext('%s', '没有了'); ?>  > 112 |
113 |
114 |
115 |
116 |
117 |
118 | 看看别的 119 | 120 |
121 | 122 |
123 | 124 |
125 |
126 |
127 |
128 | 129 | need('comments.php'); ?> 130 | 131 | 132 | 133 | need('footer.php'); ?> 134 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/screenshot.png -------------------------------------------------------------------------------- /sidebar.php: -------------------------------------------------------------------------------- 1 | 2 | 64 | -------------------------------------------------------------------------------- /src/bootstrap/css/bootstrap-reboot.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */ 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: border-box; 12 | } 13 | 14 | html { 15 | font-family: sans-serif; 16 | line-height: 1.15; 17 | -webkit-text-size-adjust: 100%; 18 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 19 | } 20 | 21 | article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { 22 | display: block; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 28 | font-size: 1rem; 29 | font-weight: 400; 30 | line-height: 1.5; 31 | color: #212529; 32 | text-align: left; 33 | background-color: #fff; 34 | } 35 | 36 | [tabindex="-1"]:focus:not(:focus-visible) { 37 | outline: 0 !important; 38 | } 39 | 40 | hr { 41 | box-sizing: content-box; 42 | height: 0; 43 | overflow: visible; 44 | } 45 | 46 | h1, h2, h3, h4, h5, h6 { 47 | margin-top: 0; 48 | margin-bottom: 0.5rem; 49 | } 50 | 51 | p { 52 | margin-top: 0; 53 | margin-bottom: 1rem; 54 | } 55 | 56 | abbr[title], 57 | abbr[data-original-title] { 58 | text-decoration: underline; 59 | -webkit-text-decoration: underline dotted; 60 | text-decoration: underline dotted; 61 | cursor: help; 62 | border-bottom: 0; 63 | -webkit-text-decoration-skip-ink: none; 64 | text-decoration-skip-ink: none; 65 | } 66 | 67 | address { 68 | margin-bottom: 1rem; 69 | font-style: normal; 70 | line-height: inherit; 71 | } 72 | 73 | ol, 74 | ul, 75 | dl { 76 | margin-top: 0; 77 | margin-bottom: 1rem; 78 | } 79 | 80 | ol ol, 81 | ul ul, 82 | ol ul, 83 | ul ol { 84 | margin-bottom: 0; 85 | } 86 | 87 | dt { 88 | font-weight: 700; 89 | } 90 | 91 | dd { 92 | margin-bottom: .5rem; 93 | margin-left: 0; 94 | } 95 | 96 | blockquote { 97 | margin: 0 0 1rem; 98 | } 99 | 100 | b, 101 | strong { 102 | font-weight: bolder; 103 | } 104 | 105 | small { 106 | font-size: 80%; 107 | } 108 | 109 | sub, 110 | sup { 111 | position: relative; 112 | font-size: 75%; 113 | line-height: 0; 114 | vertical-align: baseline; 115 | } 116 | 117 | sub { 118 | bottom: -.25em; 119 | } 120 | 121 | sup { 122 | top: -.5em; 123 | } 124 | 125 | a { 126 | color: #007bff; 127 | text-decoration: none; 128 | background-color: transparent; 129 | } 130 | 131 | a:hover { 132 | color: #0056b3; 133 | text-decoration: underline; 134 | } 135 | 136 | a:not([href]) { 137 | color: inherit; 138 | text-decoration: none; 139 | } 140 | 141 | a:not([href]):hover { 142 | color: inherit; 143 | text-decoration: none; 144 | } 145 | 146 | pre, 147 | code, 148 | kbd, 149 | samp { 150 | font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 151 | font-size: 1em; 152 | } 153 | 154 | pre { 155 | margin-top: 0; 156 | margin-bottom: 1rem; 157 | overflow: auto; 158 | } 159 | 160 | figure { 161 | margin: 0 0 1rem; 162 | } 163 | 164 | img { 165 | vertical-align: middle; 166 | border-style: none; 167 | } 168 | 169 | svg { 170 | overflow: hidden; 171 | vertical-align: middle; 172 | } 173 | 174 | table { 175 | border-collapse: collapse; 176 | } 177 | 178 | caption { 179 | padding-top: 0.75rem; 180 | padding-bottom: 0.75rem; 181 | color: #6c757d; 182 | text-align: left; 183 | caption-side: bottom; 184 | } 185 | 186 | th { 187 | text-align: inherit; 188 | } 189 | 190 | label { 191 | display: inline-block; 192 | margin-bottom: 0.5rem; 193 | } 194 | 195 | button { 196 | border-radius: 0; 197 | } 198 | 199 | button:focus { 200 | outline: 1px dotted; 201 | outline: 5px auto -webkit-focus-ring-color; 202 | } 203 | 204 | input, 205 | button, 206 | select, 207 | optgroup, 208 | textarea { 209 | margin: 0; 210 | font-family: inherit; 211 | font-size: inherit; 212 | line-height: inherit; 213 | } 214 | 215 | button, 216 | input { 217 | overflow: visible; 218 | } 219 | 220 | button, 221 | select { 222 | text-transform: none; 223 | } 224 | 225 | select { 226 | word-wrap: normal; 227 | } 228 | 229 | button, 230 | [type="button"], 231 | [type="reset"], 232 | [type="submit"] { 233 | -webkit-appearance: button; 234 | } 235 | 236 | button:not(:disabled), 237 | [type="button"]:not(:disabled), 238 | [type="reset"]:not(:disabled), 239 | [type="submit"]:not(:disabled) { 240 | cursor: pointer; 241 | } 242 | 243 | button::-moz-focus-inner, 244 | [type="button"]::-moz-focus-inner, 245 | [type="reset"]::-moz-focus-inner, 246 | [type="submit"]::-moz-focus-inner { 247 | padding: 0; 248 | border-style: none; 249 | } 250 | 251 | input[type="radio"], 252 | input[type="checkbox"] { 253 | box-sizing: border-box; 254 | padding: 0; 255 | } 256 | 257 | input[type="date"], 258 | input[type="time"], 259 | input[type="datetime-local"], 260 | input[type="month"] { 261 | -webkit-appearance: listbox; 262 | } 263 | 264 | textarea { 265 | overflow: auto; 266 | resize: vertical; 267 | } 268 | 269 | fieldset { 270 | min-width: 0; 271 | padding: 0; 272 | margin: 0; 273 | border: 0; 274 | } 275 | 276 | legend { 277 | display: block; 278 | width: 100%; 279 | max-width: 100%; 280 | padding: 0; 281 | margin-bottom: .5rem; 282 | font-size: 1.5rem; 283 | line-height: inherit; 284 | color: inherit; 285 | white-space: normal; 286 | } 287 | 288 | progress { 289 | vertical-align: baseline; 290 | } 291 | 292 | [type="number"]::-webkit-inner-spin-button, 293 | [type="number"]::-webkit-outer-spin-button { 294 | height: auto; 295 | } 296 | 297 | [type="search"] { 298 | outline-offset: -2px; 299 | -webkit-appearance: none; 300 | } 301 | 302 | [type="search"]::-webkit-search-decoration { 303 | -webkit-appearance: none; 304 | } 305 | 306 | ::-webkit-file-upload-button { 307 | font: inherit; 308 | -webkit-appearance: button; 309 | } 310 | 311 | output { 312 | display: inline-block; 313 | } 314 | 315 | summary { 316 | display: list-item; 317 | cursor: pointer; 318 | } 319 | 320 | template { 321 | display: none; 322 | } 323 | 324 | [hidden] { 325 | display: none !important; 326 | } 327 | /*# sourceMappingURL=bootstrap-reboot.css.map */ -------------------------------------------------------------------------------- /src/bootstrap/css/bootstrap-reboot.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important} 8 | /*# sourceMappingURL=bootstrap-reboot.min.css.map */ -------------------------------------------------------------------------------- /src/css/article.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | html { 5 | overflow-x: hidden; 6 | scroll-behavior: smooth; 7 | } 8 | body { 9 | background: var(--color-bg); 10 | height: 100%; 11 | display: flex; 12 | flex-direction: column; 13 | } 14 | 15 | .body { 16 | flex: 1; 17 | } 18 | 19 | .nav-bar { 20 | display: flex; 21 | flex-direction: column; 22 | box-shadow: 0 0 5px var(--color-shader); 23 | margin-top: 20px; 24 | border-radius: 7px; 25 | background: var(--color-card); 26 | margin-bottom: 20px; 27 | transition: border .3s, transform .3s; 28 | border-bottom: 3px solid transparent; 29 | } 30 | 31 | .nav-controller { 32 | width: 100%; 33 | position: absolute; 34 | margin-top: 50px; 35 | height: 10vh; 36 | } 37 | .nav-controller > div { 38 | height: 10px; 39 | border-radius: 5px; 40 | background: var(--color-main); 41 | width: 30%; 42 | margin: 30px auto 0; 43 | pointer-events: none; 44 | display: none; 45 | transition: margin .3s, opacity .5s; 46 | } 47 | 48 | .top-bar { 49 | --height:60vh; 50 | height: var(--height); 51 | } 52 | 53 | .top-bar > div:first-child { 54 | width: 100%; 55 | height: 100%; 56 | background: var(--color-bg); 57 | opacity: 0.5; 58 | } 59 | .top-bar > div:last-child { 60 | position: absolute; 61 | top: 0; 62 | height: var(--height); 63 | width: 100%; 64 | } 65 | 66 | .top-bar-title { 67 | height: 100%; 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | flex-direction: column; 72 | padding: 10px; 73 | width: calc(100% - 5px); 74 | } 75 | .top-bar-title p { 76 | font-size: 2rem; 77 | font-weight: bold; 78 | color: var(--color-font-1); 79 | margin-bottom: 5px; 80 | } 81 | .top-bar-title span { 82 | font-size: 1rem; 83 | color: var(--color-font-1); 84 | } 85 | @media (max-width: 992px) { 86 | .nav-bar { 87 | margin-top: 0 !important; 88 | border-radius: 0 !important; 89 | } 90 | } 91 | 92 | .main-card { 93 | width: 100%; 94 | margin-bottom: 20px; 95 | background: var(--color-bg); 96 | margin-top: 95px; 97 | border-radius: 7px; 98 | } 99 | 100 | .article-title > div { 101 | display: flex; 102 | align-items: end; 103 | } 104 | .article-title svg { 105 | width: 100px; 106 | fill: var(--color-card-2); 107 | margin-bottom: -25px; 108 | margin-top: 40px; 109 | } 110 | .article-title p { 111 | font-size: 23px; 112 | font-weight: bold; 113 | line-height: 40px; 114 | } 115 | 116 | .article-info-view { 117 | display: flex; 118 | flex-direction: column; 119 | align-items: flex-end; 120 | margin-top: -80px; 121 | margin-bottom: -20px; 122 | } 123 | .article-info { 124 | width: 300px; 125 | min-height: 40px; 126 | background: var(--color-main); 127 | border-radius: 7px; 128 | padding: 10px 20px; 129 | color: var(--color-font-r); 130 | display: flex; 131 | flex-direction: row; 132 | align-items: center; 133 | } 134 | .article-info > div.author { 135 | display: flex; 136 | flex-direction: column; 137 | font-size: 0.9rem; 138 | align-items: flex-end; 139 | } 140 | .article-info > img { 141 | height: 2.5rem; 142 | width: 2.5rem; 143 | border-radius: 50%; 144 | outline: 2px solid var(--color-main); 145 | border: 5px solid var(--color-card-2); 146 | transform: none; 147 | margin-right: 10px;; 148 | } 149 | 150 | .article-controller { 151 | transform: translate(0, 60px); 152 | transition: transform .3s; 153 | padding-left: 20px; 154 | flex-direction: row; 155 | align-items: stretch; 156 | height: 0; 157 | display: none !important; 158 | } 159 | .article-controller.hid { 160 | transform: translate(0, -20px); 161 | display: flex !important; 162 | } 163 | .article-controller > a { 164 | overflow: hidden; 165 | text-overflow: ellipsis; 166 | max-width: calc(100% - 60px); 167 | } 168 | .article-controller > a svg { 169 | height: 1.5rem; 170 | fill: var(--color-font-1); 171 | margin-right: 10px; 172 | margin-top: -5px; 173 | } 174 | .article-controller > div { 175 | display: flex; 176 | flex-direction: row-reverse; 177 | align-items: center; 178 | margin-right: -10px; 179 | } 180 | .article-controller > div svg { 181 | height: 40px; 182 | padding: 10px; 183 | cursor: pointer; 184 | fill: var(--color-font-1); 185 | } 186 | 187 | .main { 188 | display: flex; 189 | } 190 | .main > div:first-child { 191 | overflow: hidden; 192 | flex: 1; 193 | } 194 | .main > div:last-child { 195 | width: 0; 196 | padding-top: 20px; 197 | transition: width .3s; 198 | overflow: hidden; 199 | } 200 | 201 | .content { 202 | background: var(--color-card); 203 | border-radius: 7px; 204 | padding: 10px 20px 1px 20px; 205 | position: sticky; 206 | top: 20px; 207 | transition: top .3s; 208 | margin-bottom: 20px; 209 | overflow: hidden; 210 | display: flex; 211 | flex-direction: column; 212 | } 213 | .content > div:first-child { 214 | cursor: pointer; 215 | background: var(--color-main); 216 | color: var(--color-font-r); 217 | padding: 10px 20px; 218 | margin: -10px -20px 20px -20px; 219 | border-radius: 7px 7px 0 0; 220 | display: flex; 221 | align-items: center; 222 | } 223 | .content > div:first-child > span { 224 | flex: 1; 225 | } 226 | .content > div:first-child > svg { 227 | fill: var(--color-font-1-r); 228 | transition: transform .3s; 229 | transform: rotate(90deg); 230 | margin-top: 3px; 231 | display: none; 232 | } 233 | .content.show > div:first-child > svg { 234 | transform: rotate(270deg); 235 | } 236 | .content-progress { 237 | height: 5px; 238 | background: var(--color-main); 239 | margin: 0 -20px; 240 | width: calc(calc(100% + 40px) * 0); 241 | } 242 | .content-progress-small { 243 | border-radius: 10px; 244 | margin: 0 -10px; 245 | display: none; 246 | } 247 | .content-body { 248 | max-height: calc(100vh - 120px); 249 | overflow-x: hidden; 250 | overflow-y: scroll; 251 | padding: 10px 15px 25px 0; 252 | width: 100%; 253 | margin: -10px 0 5px 10px; 254 | flex: 1; 255 | overscroll-behavior: contain; 256 | } 257 | .comment-body::-webkit-scrollbar { 258 | background-color: transparent !important; 259 | } 260 | .content-body > div:last-child { 261 | margin-bottom: 0 !important; 262 | } 263 | .content-body > div { 264 | border-radius: 7px; 265 | padding: 10px 20px; 266 | cursor: pointer; 267 | display: flex; 268 | } 269 | .content-body > div > a { 270 | color: var(--color-font); 271 | text-decoration: none; 272 | } 273 | .content-body > div.lvo:hover { 274 | background: var(--color-card-1); 275 | } 276 | .content-body > div.lvo.select { 277 | background: var(--color-main); 278 | } 279 | .content-body > div.lvo.select > a { 280 | color: var(--color-font-r); 281 | } 282 | .content-body > div.lvt { 283 | background: var(--color-card-2); 284 | transition: all .1s; 285 | transform: scaleY(1); 286 | transform-origin: top center; 287 | border-radius: 0; 288 | padding: 5px 20px; 289 | } 290 | .content-body > div.lvt.rad-top { 291 | border-radius: 7px 7px 0 0; 292 | } 293 | .content-body > div.lvt.rad-bot { 294 | border-radius: 0 0 7px 7px; 295 | } 296 | .content-body > div.lvt > div { 297 | width: 15px; 298 | } 299 | .content-body > div.lvt.setsmall { 300 | height: 0; 301 | transform: scaleY(0); 302 | padding: 0; 303 | margin-bottom: 0; 304 | } 305 | .content-body > div.lvt.select { 306 | background: var(--color-card-2); 307 | } 308 | .content-body > div.lvt.select > div { 309 | width: 5px; 310 | background-color: var(--color-main); 311 | border-radius: 7px; 312 | margin: 3px 10px 3px 0; 313 | } 314 | .li-a-show { 315 | border-left: 7px solid var(--color-main) !important; 316 | background: var(--color-card-1); 317 | } 318 | 319 | .article-main { 320 | color: var(--color-font); 321 | padding: 20px; 322 | } 323 | .article-main img { 324 | max-width: 90%; 325 | max-height: 90%; 326 | margin: 10px 0 10px 50%; 327 | transform: translate(-50%); 328 | border-radius: 7px; 329 | /*border: 3px solid var(--color-card);*/ 330 | /*outline: 3px solid var(--color-main);*/ 331 | cursor: pointer; 332 | } 333 | .article-main h1, 334 | .article-main h2, 335 | .article-main h3, 336 | .article-main h4, 337 | .article-main h5, 338 | .article-main h6 { 339 | color: var(--color-main); 340 | line-height: 1.5rem; 341 | margin-top: 20px; 342 | } 343 | .article-main h1 { 344 | border-bottom: 1px solid var(--color-card-2); 345 | padding-bottom: 10px; 346 | } 347 | .article-main h1:before, 348 | .article-main h2:before, 349 | .article-main h3:before, 350 | .article-main h4:before, 351 | .article-main h5:before { 352 | color: var(--color-font-2); 353 | opacity: 0.2; 354 | position: absolute; 355 | margin-left: -40px; 356 | transition: color .5s, opacity .5s; 357 | } 358 | .article-main-h-in-view:before { 359 | color: var(--color-main) !important; 360 | opacity: 0.5 !important; 361 | } 362 | .article-main h1:after, 363 | .article-main h2:after, 364 | .article-main h3:after { 365 | content: "#"; 366 | color: var(--color-font-2); 367 | float: right; 368 | opacity: 0.3; 369 | transition: color .5s, opacity .5s; 370 | } 371 | .article-main h1.select:before, 372 | .article-main h2.select:before, 373 | .article-main h3.select:before, 374 | .article-main h4.select:before, 375 | .article-main h5.select:before, 376 | .article-main h1.select:after, 377 | .article-main h2.select:after, 378 | .article-main h3.select:after { 379 | color: var(--color-main); 380 | opacity: 0.7; 381 | } 382 | .article-main h1 { 383 | font-size: 1.5rem; 384 | } 385 | .article-main h1:before { 386 | content: "H1"; 387 | } 388 | .article-main h2 { 389 | font-size: 1.3rem; 390 | } 391 | .article-main h2:before { 392 | content: "H2"; 393 | } 394 | .article-main h3 { 395 | font-size: 1.25rem; 396 | } 397 | .article-main h3:before { 398 | content: "H3"; 399 | } 400 | .article-main h4 { 401 | font-size: 1.125rem; 402 | } 403 | .article-main h4:before { 404 | content: "H4"; 405 | } 406 | .article-main h5 { 407 | font-size: 1rem; 408 | } 409 | .article-main h5:before { 410 | content: "H5"; 411 | } 412 | .article-main h6 { 413 | font-size: 0.875rem; 414 | } 415 | .article-main a { 416 | color: inherit; 417 | font-weight: 600; 418 | text-decoration: revert; 419 | } 420 | .article-main blockquote { 421 | background: var(--color-card); 422 | padding: 10px; 423 | border-radius: 7px; 424 | border-left: 7px solid var(--color-main); 425 | } 426 | .article-main blockquote > p { 427 | margin-bottom: 0; 428 | } 429 | .article-main abbr { 430 | text-decoration: underline wavy; 431 | text-decoration-color: var(--color-font-2); 432 | } 433 | .article-main table { 434 | background: var(--color-card-1); 435 | border-radius: 7px; 436 | overflow: hidden; 437 | margin-bottom: 10px; 438 | } 439 | .article-main table > thead { 440 | background: var(--color-card-2); 441 | } 442 | .article-main table td, 443 | .article-main table th { 444 | padding: 10px; 445 | } 446 | .katex-html { 447 | display: none; 448 | } 449 | 450 | .code-toolbar { 451 | display: flex; 452 | flex-direction: column-reverse; 453 | margin-bottom: 20px; 454 | max-width: calc(100vw - 40px); 455 | } 456 | .code-toolbar > pre { 457 | margin: 0.5rem 0 0 0 !important; 458 | } 459 | .code-toolbar > .toolbar { 460 | position: unset !important; 461 | display: flex; 462 | flex-direction: row; 463 | background: var(--color-card-1); 464 | margin-bottom: -8px; 465 | border-radius: 7px 7px 0 0; 466 | padding: 10px; 467 | opacity: 1 !important; 468 | z-index: auto !important; 469 | } 470 | .code-toolbar > .toolbar div:first-child { 471 | flex: 1; 472 | } 473 | .code-toolbar > .toolbar div:first-child span { 474 | border-radius: 7px !important; 475 | padding: 8px 20px !important; 476 | color: var(--color-font) !important; 477 | } 478 | .code-toolbar > .toolbar div:first-child span:before { 479 | content: '✏️'; 480 | color: transparent; 481 | text-shadow: 0 0 0 var(--color-main); 482 | margin-right: 10px; 483 | } 484 | .code-toolbar > .toolbar div:last-child button { 485 | background: var(--color-card-1) !important; 486 | color: var(--color-font) !important; 487 | transition: background .3s; 488 | height: 30px; 489 | width: 90px; 490 | } 491 | .code-toolbar > .toolbar div:last-child button:hover { 492 | background: var(--color-card) !important; 493 | opacity: 0.7; 494 | } 495 | .line-numbers-rows > span:before { 496 | color: var(--color-font); 497 | } 498 | .line-numbers .line-numbers-rows { 499 | border-right: none; 500 | left: 0 !important; 501 | background: var(--color-card-1) !important; 502 | height: 100%; 503 | padding-top: 10px; 504 | } 505 | 506 | .end-info { 507 | background: var(--color-card); 508 | border-radius: 7px; 509 | display: flex; 510 | flex-direction: column; 511 | padding: 20px; 512 | color: var(--color-font); 513 | } 514 | 515 | .more-card { 516 | display: flex; 517 | margin-bottom: 20px; 518 | margin-top: 10vh; 519 | } 520 | .more-card > div:first-child { 521 | overflow: hidden; 522 | min-width: 300px; 523 | width: 30%; 524 | display: none; 525 | flex-direction: column; 526 | align-items: center; 527 | background: var(--color-card); 528 | color: var(--color-font-1); 529 | border-radius: 7px; 530 | padding: 20px 40px; 531 | margin-right: 60px; 532 | justify-content: center; 533 | } 534 | .more-card > div:first-child a { 535 | text-align: center; 536 | width: 100%; 537 | color: var(--color-font); 538 | display: block; 539 | white-space: nowrap; 540 | overflow: hidden; 541 | text-overflow: ellipsis; 542 | } 543 | .more-card > div:first-child > span:nth-child(1) { 544 | font-size: 2rem; 545 | font-weight: 600; 546 | } 547 | .more-card > div:first-child > span:nth-child(2) { 548 | font-size: 5rem; 549 | color: var(--color-font-2); 550 | opacity: 0.3; 551 | margin-top: -40px; 552 | font-weight: 100; 553 | } 554 | .more-card > div:first-child > hr { 555 | width: 100%; 556 | background-color: var(--color-font-2); 557 | opacity: 0.5; 558 | } 559 | .more-card > div:first-child > div { 560 | flex: 1; 561 | } 562 | .more-card > div:first-child > div.fov { 563 | display: flex; 564 | width: calc(100% + 80px); 565 | background: var(--color-card-1); 566 | border-radius: 0 0 7px 7px; 567 | padding: 10px 20px; 568 | margin: 30px -20px -20px -20px; 569 | } 570 | .more-card > div:first-child > div.fov > span { 571 | font-size: 0.8rem; 572 | display: flex; 573 | overflow: hidden; 574 | } 575 | .more-card > div:first-child > div.fov > div { 576 | flex: 1; 577 | min-width: 3rem; 578 | } 579 | .more-card > div:last-child { 580 | flex: 1; 581 | } 582 | 583 | .comment-send-card { 584 | background: var(--color-card); 585 | margin-bottom: 20px; 586 | border-radius: 7px; 587 | padding: 30px; 588 | } 589 | .comment-send-card > div:first-child { 590 | color: var(--color-font); 591 | margin-left: 70px; 592 | } 593 | .comment-send-card > div:first-child a { 594 | color: var(--color-font-1); 595 | text-decoration: underline; 596 | cursor: pointer; 597 | } 598 | .comment-send-card > div:last-child { 599 | display: flex; 600 | margin-top: 5px; 601 | } 602 | .comment-send-card > div:last-child > img { 603 | width: 45px; 604 | height: 45px; 605 | border-radius: 50%; 606 | border: 2px solid var(--color-main); 607 | outline: 5px solid var(--color-card-2); 608 | margin-top: 5px; 609 | } 610 | .comment-send-card > div:last-child > div { 611 | flex: 1; 612 | display: flex; 613 | flex-direction: column; 614 | align-items: stretch; 615 | margin-left: 20px; 616 | } 617 | .comment-send-card > div:last-child > div > label { 618 | height: 200px !important; 619 | border-radius: 7px 7px 0 0; 620 | margin-bottom: 0; 621 | } 622 | .comment-send-card > div:last-child > div > div:first-child { 623 | background: var(--color-card-1); 624 | padding: 20px 10px 10px 10px; 625 | border-radius: 7px 7px 0 0; 626 | border-left: 6px solid var(--color-card-2); 627 | margin: 0 1px -4px; 628 | display: flex; 629 | flex-direction: row; 630 | } 631 | .comment-send-card > div:last-child > div > div:first-child input { 632 | width: calc(100% / 3 - 10px); 633 | margin: 0 10px; 634 | background: var(--color-card-2); 635 | border: 0; 636 | height: 35px; 637 | border-radius: 7px; 638 | padding-left: 20px; 639 | } 640 | .comment-send-card > div:last-child > div > div:last-child { 641 | background: var(--color-card-1); 642 | padding: 10px; 643 | border-left: 6px solid var(--color-card-2); 644 | border-radius: 0 0 7px 7px; 645 | margin: -2px 1px 0 1px; 646 | display: flex; 647 | flex-direction: row-reverse; 648 | } 649 | .comment-send-card > div:last-child > div > div > button { 650 | width: 100px; 651 | } 652 | 653 | .comment-body { 654 | margin-top: -20px; 655 | border-radius: 7px; 656 | margin-bottom: 20px; 657 | padding: 0 30px 30px 30px; 658 | background: var(--color-card); 659 | } 660 | 661 | .comment-main { 662 | display: flex; 663 | background: var(--color-card-1); 664 | border-radius: 7px; 665 | padding: 20px; 666 | margin-left: 65px; 667 | margin-bottom: 10px; 668 | transition: transform .3s, opacity .3s; 669 | flex-wrap: wrap; 670 | flex: 1; 671 | } 672 | .comment-main > div[class=comment-main] { 673 | padding: 0; 674 | } 675 | .comment-main img[name="avater"] { 676 | width: 45px; 677 | height: 45px; 678 | border-radius: 50%; 679 | border: 2px solid var(--color-main); 680 | outline: 5px solid var(--color-card-2); 681 | margin-top: 5px; 682 | } 683 | .comment-body-body { 684 | flex: 1; 685 | margin-left: 20px; 686 | } 687 | .comment-body-body p { 688 | margin-bottom: 5px; 689 | } 690 | .comment-body-body > p { 691 | font-weight: bold; 692 | margin-top: 10px; 693 | } 694 | .comment-body-control { 695 | width: 100%; 696 | display: flex; 697 | flex-direction: row-reverse; 698 | margin-top: 10px; 699 | } 700 | .comment-body-control > div { 701 | background: var(--color-main); 702 | fill: var(--color-font-r); 703 | color: var(--color-font-r); 704 | padding: 5px 20px; 705 | border-radius: 7px; 706 | font-size: 0.9rem; 707 | cursor: pointer; 708 | } 709 | .comment-body-control > div svg { 710 | height: 1rem; 711 | margin-right: 5px; 712 | } 713 | .comment-replay { 714 | margin-left: 65px; 715 | padding: 0; 716 | } 717 | 718 | .comment-tags { 719 | display: flex; 720 | margin-bottom: 17px; 721 | margin-top: -2px; 722 | margin-left: 10px; 723 | } 724 | .comment-tags > div { 725 | padding: 0 10px 3px 10px; 726 | margin-right: 5px; 727 | margin-bottom: 5px; 728 | border-radius: 4rem; 729 | border: 1px solid var(--color-main); 730 | } 731 | .comment-tags > div > a { 732 | color: var(--color-font); 733 | font-size: 10px; 734 | } 735 | .comment-tags-sm { 736 | margin-bottom: 0; 737 | height: 30px; 738 | display: none; 739 | } 740 | .comment-tags-sm > div { 741 | border: 1px solid var(--color-card); 742 | margin-bottom: 0; 743 | } 744 | .comment-tags-sm > div > a { 745 | color: var(--color-font-r); 746 | } 747 | 748 | .image-view { 749 | display: none; 750 | } 751 | .viewer-canvas { 752 | background-color: rgba(var(--color-bg-rgb), 0.5); 753 | } 754 | .viewer-canvas > img { 755 | border-radius: 7px; 756 | } 757 | .viewer-title, 758 | .viewer-title:hover { 759 | color: var(--color-font-1) !important; 760 | } 761 | .viewer-toolbar > ul > li { 762 | width: 40px !important; 763 | height: 40px !important; 764 | background: var(--color-card-2) !important; 765 | border-radius: 7px !important; 766 | margin: 5px !important; 767 | display: flex !important; 768 | flex-direction: row !important; 769 | align-items: center !important; 770 | justify-content: center !important; 771 | } 772 | .viewer-toolbar > ul > li:hover { 773 | background: var(--color-card-1) !important; 774 | } 775 | .viewer-toolbar > ul > li:focus { 776 | border: 0 !important; 777 | } 778 | .viewer-navbar { 779 | background: transparent !important; 780 | } 781 | .viewer-list > li { 782 | border-bottom: 2px solid var(--color-main) !important; 783 | margin: 0 2px !important; 784 | } 785 | .viewer-list > .viewer-active { 786 | transition: width .3s; 787 | width: 50px; 788 | } 789 | 790 | .article-main code { 791 | background: var(--color-main) !important; 792 | display: inline-block !important; 793 | color: var(--color-font-r) !important; 794 | padding: 0 10px !important; 795 | margin: 0 10px -7px !important; 796 | border-radius: 7px; 797 | font-family: 'monospace' !important; 798 | overflow-x: scroll; 799 | } 800 | .article-main code::-webkit-scrollbar { 801 | display: none; 802 | } 803 | .article-main pre:not([class*=language-]) > code { 804 | padding: 10px 20px !important; 805 | width: calc(100% - 20px); 806 | } 807 | .article-main pre[class*=language-] > code { 808 | font-family: sans-serif,monospace,"Fira Code" !important; 809 | background-origin: content-box !important; 810 | background: var(--color-card) !important; 811 | background-attachment: local !important; 812 | padding: 10px 20px 10px 4em !important; 813 | border-radius: 0 0 7px 7px !important; 814 | background-size: 3em 3em !important; 815 | color: var(--color-font) !important; 816 | display: block !important; 817 | margin: 0 !important; 818 | font-size: 0.9rem; 819 | } 820 | .line-numbers .line-numbers-rows { 821 | border-right: 0 !important; 822 | } 823 | 824 | @media (max-width: 992px) { 825 | footer { 826 | width: calc(100% - 30px) !important; 827 | margin: 15px !important; 828 | } 829 | .body { 830 | padding: 0 10px !important; 831 | } 832 | 833 | .top-bar { 834 | --height: 13rem; 835 | background-size: cover !important; 836 | margin: 5rem 0 20px 0; 837 | border-radius: 7px; 838 | } 839 | .top-bar > div:last-child { 840 | width: calc(100% - 20px); 841 | margin-top: 5rem; 842 | } 843 | .top-bar-title p { 844 | font-size: 1rem; 845 | } 846 | .top-bar-title span { 847 | font-size: 0.8rem; 848 | } 849 | 850 | .article-main { 851 | padding: 0; 852 | } 853 | .main > div:last-child { 854 | width: 0; 855 | } 856 | .article-controller.hid { 857 | transform: translate(0px, -40px); 858 | display: flex !important; 859 | } 860 | .code-toolbar { 861 | max-width: unset; 862 | } 863 | .post-controller > svg:first-child { 864 | display: none; 865 | } 866 | .main-right { 867 | width: 0 !important; 868 | } 869 | .main-card { 870 | margin-top: 65px; 871 | } 872 | .content { 873 | box-shadow: 0 0 10px var(--color-shader); 874 | transform: translateY(-60px); 875 | transition: transform .2s; 876 | margin-top: 100vh; 877 | margin-left: 15%; 878 | position: fixed; 879 | height: 400px; 880 | z-index: 20; 881 | width: 70%; 882 | left: 0; 883 | top: 0; 884 | } 885 | .content.show { 886 | transform: translateY(-420px) !important; 887 | } 888 | .content.nb { 889 | transform: translateY(-53px); 890 | } 891 | .content-progress-small { 892 | display: block; 893 | } 894 | .content.show > div.content-progress-small { 895 | display: none !important; 896 | } 897 | .content.hidden { 898 | transform: translateY(0); 899 | } 900 | .content > div:first-child > svg { 901 | display: block; 902 | } 903 | .more-card > div:first-child { 904 | margin-right: 0; 905 | width: 100%; 906 | } 907 | .more-card > div:last-child { 908 | display: none; 909 | } 910 | 911 | .article-info-view { 912 | margin: 0; 913 | display: block; 914 | } 915 | .article-info { 916 | width: 100%; 917 | } 918 | .article-title > div { 919 | display: block; 920 | } 921 | .comment-tags-df { 922 | display: none; 923 | } 924 | .comment-tags-sm { 925 | display: flex; 926 | } 927 | .article-title svg { 928 | width: 70px; 929 | } 930 | .article-controller > div { 931 | margin-right: 0; 932 | } 933 | } -------------------------------------------------------------------------------- /src/css/article/view_card.css: -------------------------------------------------------------------------------- 1 | .view-card { 2 | border-bottom: 3px solid transparent; 3 | margin: 5px 5px 0 5px; 4 | transition: border .3s; 5 | } 6 | .view-card:hover { 7 | border-bottom: 3px solid var(--color-main); 8 | } 9 | 10 | .github-card { 11 | display: flex; 12 | align-items: center; 13 | } 14 | 15 | .github-card > img { 16 | margin: 0 0 0 25px; 17 | max-height: unset; 18 | max-width: unset; 19 | height: 50px; 20 | width: 50px; 21 | } 22 | 23 | .github-card > div.name { 24 | flex-direction: column; 25 | overflow: hidden; 26 | display: flex; 27 | flex: 1; 28 | } 29 | .github-card > div.name > a > svg { 30 | display: inline-block; 31 | margin-right: 5px; 32 | fill: var(--color-font); 33 | } 34 | .github-card > div.name > span { 35 | text-decoration: none !important; 36 | color: var(--color-font-1); 37 | font-weight: normal; 38 | white-space: nowrap; 39 | font-size: 0.8rem; 40 | } 41 | .github-card > div.name > div.topics { 42 | display: flex; 43 | flex-wrap: wrap; 44 | } 45 | .github-card > div.name > div.topics > span { 46 | background: var(--color-main); 47 | color: var(--color-font-r); 48 | border-radius: 100px; 49 | padding: 2px 15px; 50 | margin-right: 5px; 51 | margin-top: 3px; 52 | font-size: 0.8rem; 53 | font-weight: 200; 54 | } 55 | 56 | .og-card { 57 | display: flex; 58 | } 59 | .og-card > img { 60 | max-height: 100%; 61 | margin: 0 20px 0 5px; 62 | transform: unset; 63 | cursor: default; 64 | } 65 | .og-card a { 66 | text-decoration: underline !important; 67 | color: var(--color-font-1); 68 | margin-bottom: 5px; 69 | font-size: 0.8rem; 70 | font-weight: 400; 71 | } 72 | /* .og-card a::before { 73 | text-align: center; 74 | content: '🔗'; 75 | color: transparent; 76 | text-shadow: 0 0 0 var(--color-font-1); 77 | } */ 78 | .og-card p { 79 | font-size: 0.9rem; 80 | font-weight: bold; 81 | margin: 0; 82 | } 83 | .og-card span { 84 | color: var(--color-font-1); 85 | font-weight: 500; 86 | margin-top: 10px; 87 | display: block; 88 | padding: 0 10px; 89 | border-left: var(--color-main) solid 4px; 90 | border-radius: 3px; 91 | } -------------------------------------------------------------------------------- /src/css/color/append-dark.css: -------------------------------------------------------------------------------- 1 | .article-main pre[class*=language-] > code { 2 | background-image: linear-gradient(transparent 50%,rgba(121,121,121,.05) 50%) !important; 3 | } -------------------------------------------------------------------------------- /src/css/color/append-light.css: -------------------------------------------------------------------------------- 1 | .article-main pre[class*=language-] > code { 2 | background-image: linear-gradient(transparent 50%,rgba(69,142,209,.05) 50%) !important; 3 | } 4 | .viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before { 5 | filter: invert(100%); 6 | } -------------------------------------------------------------------------------- /src/css/color/prism-dark.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.29.0 2 | https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+basic+c+csharp+cpp+css-extras+diff+docker+git+ignore+ini+java+javadoc+javadoclike+jsdoc+json+json5+jsonp+kotlin+latex+log+lua+makefile+markdown+markup-templating+mongodb+nginx+objectivec+php+phpdoc+php-extras+powershell+python+renpy+rust+sql+typescript+typoscript+vim+visual-basic+wiki+yaml&plugins=line-numbers+autolinker+show-language+inline-color+toolbar+copy-to-clipboard+match-braces+treeview */ 3 | code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green} 4 | pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right} 5 | .token a{color:inherit} 6 | div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none} 7 | span.inline-color-wrapper{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=);background-position:center;background-size:110%;display:inline-block;height:1.333ch;width:1.333ch;margin:0 .333ch;box-sizing:border-box;border:1px solid #fff;outline:1px solid rgba(0,0,0,.5);overflow:hidden}span.inline-color{display:block;height:120%;width:120%} 8 | .token.punctuation.brace-hover,.token.punctuation.brace-selected{outline:solid 1px}.rainbow-braces .token.punctuation.brace-level-1,.rainbow-braces .token.punctuation.brace-level-5,.rainbow-braces .token.punctuation.brace-level-9{color:#e50;opacity:1}.rainbow-braces .token.punctuation.brace-level-10,.rainbow-braces .token.punctuation.brace-level-2,.rainbow-braces .token.punctuation.brace-level-6{color:#0b3;opacity:1}.rainbow-braces .token.punctuation.brace-level-11,.rainbow-braces .token.punctuation.brace-level-3,.rainbow-braces .token.punctuation.brace-level-7{color:#26f;opacity:1}.rainbow-braces .token.punctuation.brace-level-12,.rainbow-braces .token.punctuation.brace-level-4,.rainbow-braces .token.punctuation.brace-level-8{color:#e0e;opacity:1} 9 | .token.treeview-part .entry-line{position:relative;text-indent:-99em;display:inline-block;vertical-align:top;width:1.2em}.token.treeview-part .entry-line:before,.token.treeview-part .line-h:after{content:"";position:absolute;top:0;left:50%;width:50%;height:100%}.token.treeview-part .line-h:before,.token.treeview-part .line-v:before{border-left:1px solid #ccc}.token.treeview-part .line-v-last:before{height:50%;border-left:1px solid #ccc;border-bottom:1px solid #ccc}.token.treeview-part .line-h:after{height:50%;border-bottom:1px solid #ccc}.token.treeview-part .entry-name{position:relative;display:inline-block;vertical-align:top}.token.treeview-part .entry-name.dotfile{opacity:.5}@font-face{font-family:PrismTreeview;src:url(data:application/font-woff;base64,d09GRgABAAAAAAgYAAsAAAAAEGAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFY1UkH9Y21hcAAAAYQAAAB/AAACCtvO7yxnbHlmAAACBAAAA+MAAAlACm1VqmhlYWQAAAXoAAAAKgAAADZfxj5jaGhlYQAABhQAAAAYAAAAJAFbAMFobXR4AAAGLAAAAA4AAAA0CGQAAGxvY2EAAAY8AAAAHAAAABwM9A9CbWF4cAAABlgAAAAfAAAAIAEgAHZuYW1lAAAGeAAAATcAAAJSfUrk+HBvc3QAAAewAAAAZgAAAIka0DSfeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGRYyjiBgZWBgaGQoRZISkLpUAYOBj0GBiYGVmYGrCAgzTWFweEV4ysehs1ArgDDFgZGIA3CDAB2tQjAAHic7ZHLEcMwCESfLCz/VEoKSEE5parURxMOC4c0Ec283WGFdABgBXrwCAzam4bOK9KWeefM3Hhmjyn3ed+hTRq1pS7Ra/HjYGPniHcXMy4G/zNTP7/KW5HTXArkvdBW3ArN19dCG/NRIN8K5HuB/CiQn4U26VeBfBbML9NEH78AeJyVVc1u20YQ3pn905JcSgr/YsuSDTEg3cR1bFEkYyS1HQcQ2jQF2hot6vYSoECKnnPLA/SWUy9NTr31Bfp+6azsNI0SGiolzu7ODnfn+2Z2lnHG3rxhr9nfLGKbLGesncAYYnUHpsVnMG/uwyzNdFIVd6HI6twp8+R3LpT4TSglLoTHwwJgG2/dFvKrl9yI507/p5CCq4LTxB/PlPjkFaMHnWB/0S9je7RTPS+utnGtom1T2q5pk/e3H0M1S18rsXAL7wgpxQuhAmteGGvNjmcfGXuwnFNOPCXxeOGmnjrBLWNyBeNtVq2Hs03yus1aPS3mzSyNVSfu588iW1Q93x/4fjcHn+5EkS2tMxr4xIRa8ese+4L9uKZnxEqs8+ldyN9atU02a5t5uQ8hZGms1QTKpaKYqnipiNNOAIeIADC0JNEOYY+jtSgFoOchiAjRGFACpUTRje8bwIYWGCDEgENY8MEu9bnCYCdAxftoNg0KiSpUtPaHcanYwzXRu6T4r40b5npal3V7UHWCPJW9niyl1vIHgoujEXZjudBkeWkOeMQBRmbEPhKzij1i52t6/TadL+3q7H0U1eq4E8cG4gIIwQLx8VX7ToPXgPrehVc5QXHR7gMSmwjKfaYAP4KvZV+yn9bE18y2IY37LvtyrSg3i7ZK++B603ndlg/gBJpZRsfpBI6hyiaQ6FjlnThz8lAC3LgBIMnXDOAXxBQ4SIgiEhx2AcGCAwAhwjXRpCQms42bwAUt75BvAwgONzdgOfWEwzk4Ylzj4mz+5YEzzXzWX9aNlk7ot65y5QnBHsNlm6zDTu7sspRqG4V+fgJ1lVBZ07Nm7s5nemo3Lf3PO7iwtnroQ5/YDGwPRUip6fV6L+27p+wCHwSvPs85UnHqId8NAn5IBsKdv95KrL9m31Gsf2a/rluDslk1y1J9GE+LUmmVT/OyOHaFKGnapt2H5XeJTmKd6qYNoVVZOy+pWzr7rMip3ndG/4mQSoUcMbAqG/YNIAdXhkAqTVruXhocSKN0iS4Rwj7vSS4fcF/La07BfeQSuRAcFeW+9igjwPhhYPpGCBCBHhxiKMyFMFT7ziRH7RtfIWdiha+TdW+Rqs7bLHdN2ZJIKl0um0x3op9saYr0REeRdj09pl43pMzz4tjztrY8L4o8bzT+oLY27PR/eFtXs/YY5vtwB5Iqad14eYN0ujveMaGWqkdU3TKbQSC5Uvxaf4fA7SAQ3r2tEfIhd4duld91bwMisjqBw22orthNcroXl7KqO1329HBgAexgoCfGAwiDPoBnriki3lmNojrzvD0tjo6E3vPYP6E2BMIAeJxjYGRgYADiY8t3FsTz23xl4GbYzIAB/v9nWM6wBcjgYGAC8QH+QQhZAAB4nGNgZGBg2MzAACeXMzAyoAJeADPyAh14nGNgAILNpGEA0fgIZQAAAAAAAAA2AHIAvgE+AZgCCAKMAv4DlgPsBEYEoHicY2BkYGDgZchi4GQAASYg5gJCBob/YD4DABTSAZcAeJx9kU1uwjAQhV/4qwpqhdSqi67cTTeVEmBXDgBbhBD7AHYISuLUMSD2PUdP0HNwjp6i676k3qQS9Ujjb968mYUNoI8zPJTHw02Vy9PAFatfbpLuHbfIT47b6MF33KH+6riLF0wc93CHN27wWtdUHvHuuIFbfDhuUv903CKfHbfxgC/HHerfjrtYen3HPTx7ambiIl0YKQ+xPM5ltE9CU9NqxVKaItaZGPqDmj6VmTShlRuxOoniEI2sVUIZnYqJzqxMEi1yo3dybf2ttfk4CJTT/bVOMYNBjAIpFiTJOLCWOGLOHGGPBCE7l32XO0tmw04MjQwCQ7774B//lDmrZkJY3hvOrHBiLuiJMKJqoVgrejQ3CP5Yubt0JwxNJa96Oypr6j621VSOMQKG+uP36eKmHylcb0MAeJxtwdEOgjAMBdBeWEFR/Mdl7bTJtMsygc/nwVfPoYF+QP+tGDAigDFhxgVXLLjhjhUPCtmKTtmLaGN7x6dy/Io5bybqoevRQ3LRObb0sk3HKpn1SFqW6ru26vbpYfcmRCccJhqsAAA=) format("woff")}.token.treeview-part .entry-name:before{content:"\ea01";font-family:PrismTreeview;font-size:inherit;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:2.5ex;display:inline-block}.token.treeview-part .entry-name.dir:before{content:"\ea02"}.token.treeview-part .entry-name.ext-bmp:before,.token.treeview-part .entry-name.ext-eps:before,.token.treeview-part .entry-name.ext-gif:before,.token.treeview-part .entry-name.ext-jpe:before,.token.treeview-part .entry-name.ext-jpeg:before,.token.treeview-part .entry-name.ext-jpg:before,.token.treeview-part .entry-name.ext-png:before,.token.treeview-part .entry-name.ext-svg:before,.token.treeview-part .entry-name.ext-tiff:before{content:"\ea03"}.token.treeview-part .entry-name.ext-cfg:before,.token.treeview-part .entry-name.ext-conf:before,.token.treeview-part .entry-name.ext-config:before,.token.treeview-part .entry-name.ext-csv:before,.token.treeview-part .entry-name.ext-ini:before,.token.treeview-part .entry-name.ext-log:before,.token.treeview-part .entry-name.ext-md:before,.token.treeview-part .entry-name.ext-nfo:before,.token.treeview-part .entry-name.ext-txt:before{content:"\ea06"}.token.treeview-part .entry-name.ext-asp:before,.token.treeview-part .entry-name.ext-aspx:before,.token.treeview-part .entry-name.ext-c:before,.token.treeview-part .entry-name.ext-cc:before,.token.treeview-part .entry-name.ext-cpp:before,.token.treeview-part .entry-name.ext-cs:before,.token.treeview-part .entry-name.ext-css:before,.token.treeview-part .entry-name.ext-h:before,.token.treeview-part .entry-name.ext-hh:before,.token.treeview-part .entry-name.ext-htm:before,.token.treeview-part .entry-name.ext-html:before,.token.treeview-part .entry-name.ext-jav:before,.token.treeview-part .entry-name.ext-java:before,.token.treeview-part .entry-name.ext-js:before,.token.treeview-part .entry-name.ext-php:before,.token.treeview-part .entry-name.ext-rb:before,.token.treeview-part .entry-name.ext-xml:before{content:"\ea07"}.token.treeview-part .entry-name.ext-7z:before,.token.treeview-part .entry-name.ext-bz2:before,.token.treeview-part .entry-name.ext-bz:before,.token.treeview-part .entry-name.ext-gz:before,.token.treeview-part .entry-name.ext-rar:before,.token.treeview-part .entry-name.ext-tar:before,.token.treeview-part .entry-name.ext-tgz:before,.token.treeview-part .entry-name.ext-zip:before{content:"\ea08"}.token.treeview-part .entry-name.ext-aac:before,.token.treeview-part .entry-name.ext-au:before,.token.treeview-part .entry-name.ext-cda:before,.token.treeview-part .entry-name.ext-flac:before,.token.treeview-part .entry-name.ext-mp3:before,.token.treeview-part .entry-name.ext-oga:before,.token.treeview-part .entry-name.ext-ogg:before,.token.treeview-part .entry-name.ext-wav:before,.token.treeview-part .entry-name.ext-wma:before{content:"\ea04"}.token.treeview-part .entry-name.ext-avi:before,.token.treeview-part .entry-name.ext-flv:before,.token.treeview-part .entry-name.ext-mkv:before,.token.treeview-part .entry-name.ext-mov:before,.token.treeview-part .entry-name.ext-mp4:before,.token.treeview-part .entry-name.ext-mpeg:before,.token.treeview-part .entry-name.ext-mpg:before,.token.treeview-part .entry-name.ext-ogv:before,.token.treeview-part .entry-name.ext-webm:before{content:"\ea05"}.token.treeview-part .entry-name.ext-pdf:before{content:"\ea09"}.token.treeview-part .entry-name.ext-xls:before,.token.treeview-part .entry-name.ext-xlsx:before{content:"\ea0a"}.token.treeview-part .entry-name.ext-doc:before,.token.treeview-part .entry-name.ext-docm:before,.token.treeview-part .entry-name.ext-docx:before{content:"\ea0c"}.token.treeview-part .entry-name.ext-pps:before,.token.treeview-part .entry-name.ext-ppt:before,.token.treeview-part .entry-name.ext-pptx:before{content:"\ea0b"} 10 | -------------------------------------------------------------------------------- /src/css/color/prism-light.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.29.0 2 | https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+bash+basic+c+csharp+cpp+css-extras+diff+docker+git+ignore+ini+java+javadoc+javadoclike+jsdoc+json+json5+jsonp+kotlin+latex+log+lua+makefile+markdown+markup-templating+mongodb+nginx+objectivec+php+phpdoc+php-extras+powershell+python+renpy+rust+sql+typescript+typoscript+vim+visual-basic+wiki+yaml&plugins=line-numbers+autolinker+show-language+inline-color+toolbar+copy-to-clipboard+match-braces+treeview */ 3 | code[class*=language-],pre[class*=language-]{color:#000;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{position:relative;margin:.5em 0;overflow:visible;padding:1px}pre[class*=language-]>code{position:relative;z-index:1;border-left:10px solid #358ccb;box-shadow:-1px 0 0 0 #358ccb,0 0 0 1px #dfdfdf;background-color:#fdfdfd;background-image:linear-gradient(transparent 50%,rgba(69,142,209,.04) 50%);background-size:3em 3em;background-origin:content-box;background-attachment:local}code[class*=language-]{max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:#fdfdfd;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:1em}:not(pre)>code[class*=language-]{position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,.1);display:inline;white-space:normal}pre[class*=language-]:after,pre[class*=language-]:before{content:'';display:block;position:absolute;bottom:.75em;left:.18em;width:40%;height:20%;max-height:13em;box-shadow:0 13px 8px #979797;-webkit-transform:rotate(-2deg);-moz-transform:rotate(-2deg);-ms-transform:rotate(-2deg);-o-transform:rotate(-2deg);transform:rotate(-2deg)}pre[class*=language-]:after{right:.75em;left:auto;-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-ms-transform:rotate(2deg);-o-transform:rotate(2deg);transform:rotate(2deg)}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7d8b99}.token.punctuation{color:#5f6364}.token.boolean,.token.constant,.token.deleted,.token.function-name,.token.number,.token.property,.token.symbol,.token.tag{color:#c92c2c}.token.attr-name,.token.builtin,.token.char,.token.function,.token.inserted,.token.selector,.token.string{color:#2f9c0a}.token.entity,.token.operator,.token.url,.token.variable{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.class-name,.token.keyword{color:#1990b8}.token.important,.token.regex{color:#e90}.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,.5)}.token.important{font-weight:400}.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.7}@media screen and (max-width:767px){pre[class*=language-]:after,pre[class*=language-]:before{bottom:14px;box-shadow:none}}pre[class*=language-].line-numbers.line-numbers{padding-left:0}pre[class*=language-].line-numbers.line-numbers code{padding-left:3.8em}pre[class*=language-].line-numbers.line-numbers .line-numbers-rows{left:0}pre[class*=language-][data-line]{padding-top:0;padding-bottom:0;padding-left:0}pre[data-line] code{position:relative;padding-left:4em}pre .line-highlight{margin-top:0} 4 | pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right} 5 | .token a{color:inherit} 6 | div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none} 7 | span.inline-color-wrapper{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=);background-position:center;background-size:110%;display:inline-block;height:1.333ch;width:1.333ch;margin:0 .333ch;box-sizing:border-box;border:1px solid #fff;outline:1px solid rgba(0,0,0,.5);overflow:hidden}span.inline-color{display:block;height:120%;width:120%} 8 | .token.punctuation.brace-hover,.token.punctuation.brace-selected{outline:solid 1px}.rainbow-braces .token.punctuation.brace-level-1,.rainbow-braces .token.punctuation.brace-level-5,.rainbow-braces .token.punctuation.brace-level-9{color:#e50;opacity:1}.rainbow-braces .token.punctuation.brace-level-10,.rainbow-braces .token.punctuation.brace-level-2,.rainbow-braces .token.punctuation.brace-level-6{color:#0b3;opacity:1}.rainbow-braces .token.punctuation.brace-level-11,.rainbow-braces .token.punctuation.brace-level-3,.rainbow-braces .token.punctuation.brace-level-7{color:#26f;opacity:1}.rainbow-braces .token.punctuation.brace-level-12,.rainbow-braces .token.punctuation.brace-level-4,.rainbow-braces .token.punctuation.brace-level-8{color:#e0e;opacity:1} 9 | .token.treeview-part .entry-line{position:relative;text-indent:-99em;display:inline-block;vertical-align:top;width:1.2em}.token.treeview-part .entry-line:before,.token.treeview-part .line-h:after{content:"";position:absolute;top:0;left:50%;width:50%;height:100%}.token.treeview-part .line-h:before,.token.treeview-part .line-v:before{border-left:1px solid #ccc}.token.treeview-part .line-v-last:before{height:50%;border-left:1px solid #ccc;border-bottom:1px solid #ccc}.token.treeview-part .line-h:after{height:50%;border-bottom:1px solid #ccc}.token.treeview-part .entry-name{position:relative;display:inline-block;vertical-align:top}.token.treeview-part .entry-name.dotfile{opacity:.5}@font-face{font-family:PrismTreeview;src:url(data:application/font-woff;base64,d09GRgABAAAAAAgYAAsAAAAAEGAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFY1UkH9Y21hcAAAAYQAAAB/AAACCtvO7yxnbHlmAAACBAAAA+MAAAlACm1VqmhlYWQAAAXoAAAAKgAAADZfxj5jaGhlYQAABhQAAAAYAAAAJAFbAMFobXR4AAAGLAAAAA4AAAA0CGQAAGxvY2EAAAY8AAAAHAAAABwM9A9CbWF4cAAABlgAAAAfAAAAIAEgAHZuYW1lAAAGeAAAATcAAAJSfUrk+HBvc3QAAAewAAAAZgAAAIka0DSfeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGRYyjiBgZWBgaGQoRZISkLpUAYOBj0GBiYGVmYGrCAgzTWFweEV4ysehs1ArgDDFgZGIA3CDAB2tQjAAHic7ZHLEcMwCESfLCz/VEoKSEE5parURxMOC4c0Ec283WGFdABgBXrwCAzam4bOK9KWeefM3Hhmjyn3ed+hTRq1pS7Ra/HjYGPniHcXMy4G/zNTP7/KW5HTXArkvdBW3ArN19dCG/NRIN8K5HuB/CiQn4U26VeBfBbML9NEH78AeJyVVc1u20YQ3pn905JcSgr/YsuSDTEg3cR1bFEkYyS1HQcQ2jQF2hot6vYSoECKnnPLA/SWUy9NTr31Bfp+6azsNI0SGiolzu7ODnfn+2Z2lnHG3rxhr9nfLGKbLGesncAYYnUHpsVnMG/uwyzNdFIVd6HI6twp8+R3LpT4TSglLoTHwwJgG2/dFvKrl9yI507/p5CCq4LTxB/PlPjkFaMHnWB/0S9je7RTPS+utnGtom1T2q5pk/e3H0M1S18rsXAL7wgpxQuhAmteGGvNjmcfGXuwnFNOPCXxeOGmnjrBLWNyBeNtVq2Hs03yus1aPS3mzSyNVSfu588iW1Q93x/4fjcHn+5EkS2tMxr4xIRa8ese+4L9uKZnxEqs8+ldyN9atU02a5t5uQ8hZGms1QTKpaKYqnipiNNOAIeIADC0JNEOYY+jtSgFoOchiAjRGFACpUTRje8bwIYWGCDEgENY8MEu9bnCYCdAxftoNg0KiSpUtPaHcanYwzXRu6T4r40b5npal3V7UHWCPJW9niyl1vIHgoujEXZjudBkeWkOeMQBRmbEPhKzij1i52t6/TadL+3q7H0U1eq4E8cG4gIIwQLx8VX7ToPXgPrehVc5QXHR7gMSmwjKfaYAP4KvZV+yn9bE18y2IY37LvtyrSg3i7ZK++B603ndlg/gBJpZRsfpBI6hyiaQ6FjlnThz8lAC3LgBIMnXDOAXxBQ4SIgiEhx2AcGCAwAhwjXRpCQms42bwAUt75BvAwgONzdgOfWEwzk4Ylzj4mz+5YEzzXzWX9aNlk7ot65y5QnBHsNlm6zDTu7sspRqG4V+fgJ1lVBZ07Nm7s5nemo3Lf3PO7iwtnroQ5/YDGwPRUip6fV6L+27p+wCHwSvPs85UnHqId8NAn5IBsKdv95KrL9m31Gsf2a/rluDslk1y1J9GE+LUmmVT/OyOHaFKGnapt2H5XeJTmKd6qYNoVVZOy+pWzr7rMip3ndG/4mQSoUcMbAqG/YNIAdXhkAqTVruXhocSKN0iS4Rwj7vSS4fcF/La07BfeQSuRAcFeW+9igjwPhhYPpGCBCBHhxiKMyFMFT7ziRH7RtfIWdiha+TdW+Rqs7bLHdN2ZJIKl0um0x3op9saYr0REeRdj09pl43pMzz4tjztrY8L4o8bzT+oLY27PR/eFtXs/YY5vtwB5Iqad14eYN0ujveMaGWqkdU3TKbQSC5Uvxaf4fA7SAQ3r2tEfIhd4duld91bwMisjqBw22orthNcroXl7KqO1329HBgAexgoCfGAwiDPoBnriki3lmNojrzvD0tjo6E3vPYP6E2BMIAeJxjYGRgYADiY8t3FsTz23xl4GbYzIAB/v9nWM6wBcjgYGAC8QH+QQhZAAB4nGNgZGBg2MzAACeXMzAyoAJeADPyAh14nGNgAILNpGEA0fgIZQAAAAAAAAA2AHIAvgE+AZgCCAKMAv4DlgPsBEYEoHicY2BkYGDgZchi4GQAASYg5gJCBob/YD4DABTSAZcAeJx9kU1uwjAQhV/4qwpqhdSqi67cTTeVEmBXDgBbhBD7AHYISuLUMSD2PUdP0HNwjp6i676k3qQS9Ujjb968mYUNoI8zPJTHw02Vy9PAFatfbpLuHbfIT47b6MF33KH+6riLF0wc93CHN27wWtdUHvHuuIFbfDhuUv903CKfHbfxgC/HHerfjrtYen3HPTx7ambiIl0YKQ+xPM5ltE9CU9NqxVKaItaZGPqDmj6VmTShlRuxOoniEI2sVUIZnYqJzqxMEi1yo3dybf2ttfk4CJTT/bVOMYNBjAIpFiTJOLCWOGLOHGGPBCE7l32XO0tmw04MjQwCQ7774B//lDmrZkJY3hvOrHBiLuiJMKJqoVgrejQ3CP5Yubt0JwxNJa96Oypr6j621VSOMQKG+uP36eKmHylcb0MAeJxtwdEOgjAMBdBeWEFR/Mdl7bTJtMsygc/nwVfPoYF+QP+tGDAigDFhxgVXLLjhjhUPCtmKTtmLaGN7x6dy/Io5bybqoevRQ3LRObb0sk3HKpn1SFqW6ru26vbpYfcmRCccJhqsAAA=) format("woff")}.token.treeview-part .entry-name:before{content:"\ea01";font-family:PrismTreeview;font-size:inherit;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:2.5ex;display:inline-block}.token.treeview-part .entry-name.dir:before{content:"\ea02"}.token.treeview-part .entry-name.ext-bmp:before,.token.treeview-part .entry-name.ext-eps:before,.token.treeview-part .entry-name.ext-gif:before,.token.treeview-part .entry-name.ext-jpe:before,.token.treeview-part .entry-name.ext-jpeg:before,.token.treeview-part .entry-name.ext-jpg:before,.token.treeview-part .entry-name.ext-png:before,.token.treeview-part .entry-name.ext-svg:before,.token.treeview-part .entry-name.ext-tiff:before{content:"\ea03"}.token.treeview-part .entry-name.ext-cfg:before,.token.treeview-part .entry-name.ext-conf:before,.token.treeview-part .entry-name.ext-config:before,.token.treeview-part .entry-name.ext-csv:before,.token.treeview-part .entry-name.ext-ini:before,.token.treeview-part .entry-name.ext-log:before,.token.treeview-part .entry-name.ext-md:before,.token.treeview-part .entry-name.ext-nfo:before,.token.treeview-part .entry-name.ext-txt:before{content:"\ea06"}.token.treeview-part .entry-name.ext-asp:before,.token.treeview-part .entry-name.ext-aspx:before,.token.treeview-part .entry-name.ext-c:before,.token.treeview-part .entry-name.ext-cc:before,.token.treeview-part .entry-name.ext-cpp:before,.token.treeview-part .entry-name.ext-cs:before,.token.treeview-part .entry-name.ext-css:before,.token.treeview-part .entry-name.ext-h:before,.token.treeview-part .entry-name.ext-hh:before,.token.treeview-part .entry-name.ext-htm:before,.token.treeview-part .entry-name.ext-html:before,.token.treeview-part .entry-name.ext-jav:before,.token.treeview-part .entry-name.ext-java:before,.token.treeview-part .entry-name.ext-js:before,.token.treeview-part .entry-name.ext-php:before,.token.treeview-part .entry-name.ext-rb:before,.token.treeview-part .entry-name.ext-xml:before{content:"\ea07"}.token.treeview-part .entry-name.ext-7z:before,.token.treeview-part .entry-name.ext-bz2:before,.token.treeview-part .entry-name.ext-bz:before,.token.treeview-part .entry-name.ext-gz:before,.token.treeview-part .entry-name.ext-rar:before,.token.treeview-part .entry-name.ext-tar:before,.token.treeview-part .entry-name.ext-tgz:before,.token.treeview-part .entry-name.ext-zip:before{content:"\ea08"}.token.treeview-part .entry-name.ext-aac:before,.token.treeview-part .entry-name.ext-au:before,.token.treeview-part .entry-name.ext-cda:before,.token.treeview-part .entry-name.ext-flac:before,.token.treeview-part .entry-name.ext-mp3:before,.token.treeview-part .entry-name.ext-oga:before,.token.treeview-part .entry-name.ext-ogg:before,.token.treeview-part .entry-name.ext-wav:before,.token.treeview-part .entry-name.ext-wma:before{content:"\ea04"}.token.treeview-part .entry-name.ext-avi:before,.token.treeview-part .entry-name.ext-flv:before,.token.treeview-part .entry-name.ext-mkv:before,.token.treeview-part .entry-name.ext-mov:before,.token.treeview-part .entry-name.ext-mp4:before,.token.treeview-part .entry-name.ext-mpeg:before,.token.treeview-part .entry-name.ext-mpg:before,.token.treeview-part .entry-name.ext-ogv:before,.token.treeview-part .entry-name.ext-webm:before{content:"\ea05"}.token.treeview-part .entry-name.ext-pdf:before{content:"\ea09"}.token.treeview-part .entry-name.ext-xls:before,.token.treeview-part .entry-name.ext-xlsx:before{content:"\ea0a"}.token.treeview-part .entry-name.ext-doc:before,.token.treeview-part .entry-name.ext-docm:before,.token.treeview-part .entry-name.ext-docx:before{content:"\ea0c"}.token.treeview-part .entry-name.ext-pps:before,.token.treeview-part .entry-name.ext-ppt:before,.token.treeview-part .entry-name.ext-pptx:before{content:"\ea0b"} 10 | -------------------------------------------------------------------------------- /src/css/comments.css: -------------------------------------------------------------------------------- 1 | .comment-bar { 2 | background: var(--color-main); 3 | border-radius: 20px; 4 | margin: 10px 0; 5 | height: 20px; 6 | } 7 | 8 | .comment-respond-body { 9 | margin-top: -3px; 10 | } 11 | .comment-respond-body > form > p { 12 | padding: 0 30px; 13 | } 14 | .comment-respond-body > form > p.cinput > textarea { 15 | background: var(--color-card-1); 16 | border: 0; 17 | border-radius: 7px; 18 | color: var(--color-font-1); 19 | padding: 20px; 20 | width: 100%; 21 | } 22 | .comment-respond-body > form > p.csubmit { 23 | display: flex; 24 | flex-direction: row-reverse; 25 | } 26 | .comment-respond-body > form > p.csubmit > button { 27 | padding: 0 20px; 28 | } 29 | .comment-respond-body > form > p.csubmit > a { 30 | margin-right: 10px; 31 | background: var(--color-card-1); 32 | border-radius: 7px; 33 | padding: 5px 20px; 34 | color: var(--color-font); 35 | height: inherit; 36 | } 37 | .comments-list .respond.comment-respond { 38 | border: 0; 39 | } 40 | .comments-list .respond.comment-respond > div.comment-respond-body { 41 | border: 2px solid var(--color-card-1); 42 | padding: 20px 0 0 0; 43 | } 44 | .comments-list .respond.comment-respond > div.comment-respond-body:hover { 45 | box-shadow: none !important; 46 | } 47 | 48 | .comment-login-info span { 49 | font-size: 1.1rem; 50 | font-weight: bold; 51 | flex: 1; 52 | } 53 | .comment-login-info.login { 54 | box-shadow: none !important; 55 | background: transparent; 56 | align-items: center; 57 | padding: 10px 20px; 58 | display: flex; 59 | } 60 | .comment-login-info.login img { 61 | outline: 3px solid var(--color-main); 62 | border: 1px solid var(--color-card); 63 | border-radius: 100%; 64 | height: 35px; 65 | width: 35px; 66 | } 67 | .comment-login-info.login > div { 68 | flex-direction: column; 69 | margin-right: 10px; 70 | text-align: end; 71 | display: flex; 72 | } 73 | .comment-login-info.login > div a { 74 | color: var(--color-font-2); 75 | font-size: 0.8rem; 76 | } 77 | .comment-login-info.login > div a.name { 78 | color: var(--color-font); 79 | font-weight: bold; 80 | font-size: 1rem; 81 | } 82 | .comment-login-info.unlogin > div { 83 | margin: 30px 20px 20px 20px; 84 | flex-wrap: wrap; 85 | display: flex; 86 | } 87 | .comment-login-info.unlogin > div > div { 88 | margin-bottom: 10px; 89 | display: flex; 90 | width: 100%; 91 | } 92 | .comment-login-info.unlogin > div p { 93 | width: 100%; 94 | } 95 | .comment-login-info.unlogin p { 96 | margin-bottom: 0; 97 | padding: 0 10px; 98 | } 99 | .comment-login-info.unlogin input { 100 | border-radius: 7px; 101 | background: var(--color-card-1); 102 | border: 0; 103 | padding: 10px 15px; 104 | width: 100%; 105 | } 106 | 107 | .comments-list { 108 | margin-top: 20px; 109 | margin-top: 20px; 110 | display: flex; 111 | flex-direction: column; 112 | align-items: center; 113 | } 114 | .comments-list > span { 115 | color: var(--color-font-r); 116 | background: var(--color-main); 117 | border-radius: 99px; 118 | padding: 5px 10px; 119 | } 120 | .comments-list ol, 121 | .comments-list li { 122 | list-style: none; 123 | } 124 | .comments-list > ol { 125 | width: 100%; 126 | padding: 0; 127 | } 128 | .comments-list > ol > li { 129 | background: var(--color-card) !important; 130 | border: 0 !important; 131 | padding: 0; 132 | } 133 | 134 | /* 对默认评论列表的一些 CSS 覆盖 */ 135 | .comments-list > ol > li:first-child { 136 | margin-top: 15px; 137 | } 138 | .comments-list > ol > li { 139 | margin-bottom: 15px; 140 | margin-top: 0; 141 | } 142 | .comments-list > ol > li > div.comment-author { 143 | background: var(--color-card-1); 144 | border-radius: 7px 7px 0 0; 145 | margin-bottom: 0; 146 | padding: 10px 20px 0 20px; 147 | } 148 | .comments-list > ol > li > div.comment-meta { 149 | background: var(--color-card-1); 150 | border-radius: 0 0 7px 7px; 151 | } 152 | .comment-meta { 153 | padding: 0 20px 10px 20px; 154 | margin-top: -15px; 155 | } 156 | .comments-list > ol > li > div.comment-meta > a { 157 | margin-left: 75px; 158 | } 159 | .comment-meta > a { 160 | color: var(--color-font-1); 161 | font-size: 0.8rem; 162 | margin-left: 55px; 163 | } 164 | .comment-reply { 165 | margin-top: calc(-2rem - 20px); 166 | } 167 | .comment-reply > a { 168 | color: var(--color-font-1); 169 | font-size: 0.9rem; 170 | padding: 5px 25px; 171 | text-align: right; 172 | width: 100%; 173 | display: block; 174 | } 175 | .comment-children { 176 | border-top: 2px solid var(--color-card-1); 177 | border-radius: 7px; 178 | margin-top: 20px; 179 | } 180 | .comment-children > ol > li { 181 | background: var(--color-card) !important; 182 | border: 0 !important; 183 | margin: 0; 184 | padding-right: 0; 185 | padding-bottom: 10px; 186 | } 187 | .comments-list > ol > li > div.comment-author .avatar { 188 | border: 2px solid var(--color-card); 189 | outline: 3px solid var(--color-main); 190 | } 191 | .comment-author .avatar { 192 | margin-top: 10px; 193 | margin-right: 20px; 194 | border-radius: 100%; 195 | } 196 | .comment-author cite { 197 | color: var(--color-main); 198 | font-style: normal; 199 | font-size: 1.1rem; 200 | } 201 | .comment-author cite > a { 202 | color: var(--color-main); 203 | } 204 | .comments-list > ol > li > div.comment-content { 205 | padding: 20px 50px; 206 | } 207 | .comment-content { 208 | color: var(--color-font); 209 | padding: 10px 50px; 210 | } 211 | 212 | @media (max-width: 992px) { 213 | .comment-respond-body { 214 | padding: 10px; 215 | } 216 | } -------------------------------------------------------------------------------- /src/css/components/about.css: -------------------------------------------------------------------------------- 1 | .ab-card { 2 | margin-top: -100px; 3 | flex-direction: row; 4 | flex-wrap: wrap; 5 | display: flex; 6 | position: relative; 7 | z-index: 1; 8 | } 9 | .ab-card > div.says { 10 | flex: 1; 11 | } 12 | 13 | .ab-base { 14 | margin-right: 20px; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | max-width: 30%; 19 | padding: 40px 20px; 20 | } 21 | .ab-base img { 22 | border-radius: 100%; 23 | transform: none; 24 | height: 60px; 25 | width: 60px; 26 | margin: 0; 27 | } 28 | .ab-base p#ab-name { 29 | color: var(--color-main); 30 | font-weight: bold; 31 | font-size: 1.2rem; 32 | margin-top: 10px; 33 | margin-bottom: 0; 34 | } 35 | .ab-base p#ab-mail { 36 | color: var(--color-font-2); 37 | font-size: 0.8rem; 38 | } 39 | .ab-base span#ab-context { 40 | font-size: 0.9rem; 41 | text-align: center; 42 | } 43 | .ab-base hr { 44 | border-top: 1px solid var(--color-card-2); 45 | height: 1px; 46 | width: 100%; 47 | } 48 | .ab-base > div#ab-gpg { 49 | color: var(--color-font-2); 50 | font-size: 0.9rem; 51 | display: flex; 52 | } 53 | .ab-base > div#ab-gpg a { 54 | background: var(--color-main); 55 | color: var(--color-font-r); 56 | border-radius: 100px; 57 | font-weight: bold; 58 | padding: 3px 10px; 59 | font-size: 0.7rem; 60 | } 61 | 62 | @media (max-width: 992px) { 63 | .ab-card { 64 | flex-direction: column; 65 | } 66 | .ab-base { 67 | margin-bottom: 20px; 68 | margin-right: 0; 69 | max-width: 100%; 70 | width: 100%; 71 | } 72 | } -------------------------------------------------------------------------------- /src/css/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | html { 5 | overflow-x: hidden; 6 | scroll-behavior: smooth; 7 | } 8 | body { 9 | background-color: var(--color-bg) !important; 10 | height: 100%; 11 | display: flex; 12 | flex-direction: column; 13 | color: var(--color-font); 14 | } 15 | a { 16 | color: var(--color-font); 17 | } 18 | 19 | code { 20 | font-family: 'Fira Code', monospace !important; 21 | } 22 | 23 | footer a { 24 | text-decoration: underline !important; 25 | color: var(--color-main) !important; 26 | } 27 | 28 | .body { 29 | flex: 1; 30 | } 31 | 32 | .nav-bar { 33 | display: flex; 34 | flex-direction: column; 35 | box-shadow: 0 0 5px var(--color-shader); 36 | margin-top: 20px; 37 | border-radius: 7px; 38 | background: var(--color-card); 39 | margin-bottom: 20px; 40 | } 41 | 42 | .main-bar { 43 | transition: transform .3s; 44 | padding-left: 30px; 45 | z-index: 10; 46 | } 47 | 48 | .top-bar { 49 | --height:60vh; 50 | height: var(--height); 51 | background-size: 100%, auto !important; 52 | } 53 | 54 | .top-bar > div:first-child { 55 | width: 100%; 56 | height: 100%; 57 | background: var(--color-bg); 58 | opacity: 0.5; 59 | } 60 | 61 | .top-bar-title { 62 | height: 100%; 63 | display: flex; 64 | justify-content: center; 65 | align-items: center; 66 | flex-direction: column; 67 | padding: 10px; 68 | width: calc(100% - 5px); 69 | } 70 | .top-bar-title p { 71 | font-size: 2rem; 72 | font-weight: bold; 73 | color: var(--color-font-1); 74 | margin-bottom: 5px; 75 | } 76 | .top-bar-title span { 77 | font-size: 1rem; 78 | color: var(--color-font-1); 79 | } 80 | @media (max-width: 992px) { 81 | .nav-bar { 82 | margin-top: 0; 83 | border-radius: 0; 84 | } 85 | } 86 | 87 | .avatar { 88 | cursor: pointer; 89 | } 90 | .avatar > svg { 91 | width: 33px; 92 | height: 33px; 93 | padding: 8px; 94 | fill: var(--color-font-2); 95 | opacity: 0.5; 96 | } 97 | 98 | .bar-info { 99 | display: flex; 100 | max-width: 250px; 101 | overflow-x: hidden; 102 | flex-direction: row-reverse; 103 | } 104 | .bar-info > div { 105 | margin-left: 5px; 106 | } 107 | .bar-info svg { 108 | cursor: pointer; 109 | min-width: 33px; 110 | height: 33px; 111 | fill: var(--color-font-2); 112 | margin-top: 3px; 113 | padding: 9px; 114 | } 115 | .bar-info svg:hover { 116 | fill: var(--color-font-1); 117 | } 118 | 119 | .bar-search { 120 | height: 35px; 121 | font-size: 15px; 122 | margin-top: 3px; 123 | margin-left: 10px; 124 | transition: width .3s; 125 | border: 0 !important; 126 | margin-right: 10px !important; 127 | border-radius: 7px !important; 128 | background: var(--color-card-1); 129 | 130 | padding: 0 10px !important; 131 | width: 200px !important; 132 | } 133 | .bar-search.hidden { 134 | padding: 0 !important; 135 | margin: 0 !important; 136 | width: 0 !important; 137 | } 138 | 139 | .pin { 140 | overflow: hidden; 141 | display: flex; 142 | flex-direction: row; 143 | margin: 20px 0; 144 | padding: 5px; 145 | } 146 | .pin::-webkit-scrollbar { 147 | height: 0; 148 | } 149 | .pin > div:hover .pin-img { 150 | transform: translate(0); 151 | } 152 | .pin > div { 153 | min-width: calc(100% / 2 - 10px); 154 | display: flex; 155 | flex-direction: row; 156 | height: 180px; 157 | padding: 0; 158 | margin-right: 20px; 159 | overflow: hidden; 160 | } 161 | .pin-img { 162 | height: 100%; 163 | border-radius: 7px 50% 50% 7px; 164 | min-width: 180px; 165 | max-width: 180px; 166 | transform: translate(-20px); 167 | transition: transform 0.3s; 168 | background-size: auto 100% !important; 169 | background-position: 75%!important; 170 | } 171 | .pin > div > div { 172 | flex: 1; 173 | padding: 20px; 174 | overflow: hidden; 175 | } 176 | .pin > div > div > a { 177 | font-weight: bold; 178 | margin-bottom: 5px; 179 | color: var(--color-font); 180 | } 181 | .pin > div > div > a > svg { 182 | height: 1rem; 183 | display: inline-block; 184 | margin-right: 10px; 185 | fill: var(--color-font-1); 186 | } 187 | .pin > div > div > div { 188 | padding: 0; 189 | height: 4.9rem; 190 | margin-bottom: 10px; 191 | overflow: hidden; 192 | text-overflow: ellipsis; 193 | } 194 | .pin > div > div > div > span { 195 | font-size: .9rem; 196 | color: var(--color-font-2); 197 | } 198 | .pin > div > div > div img { 199 | max-height: 25px; 200 | max-width: 25px; 201 | overflow: hidden; 202 | border-radius: 50%; 203 | margin-right: 10px; 204 | } 205 | .pin > div > div > div a { 206 | font-size: 0.9rem; 207 | color: var(--color-font-2); 208 | opacity: 0.8; 209 | } 210 | 211 | .art-list { 212 | display: flex; 213 | flex-direction: column; 214 | margin-bottom: 20px; 215 | margin-top: 40px; 216 | } 217 | .art-body { 218 | display: flex; 219 | flex-direction: row; 220 | align-items: stretch; 221 | height: 40vh; 222 | margin-bottom: 20px; 223 | } 224 | .art-body.right { 225 | flex-direction: row-reverse; 226 | } 227 | .art-body:hover > div:last-child { 228 | border-bottom: 2px solid var(--color-main); 229 | } 230 | .art-body:hover > div:first-child div { 231 | transform: rotate(6deg); 232 | } 233 | .art-body > div:first-child { 234 | min-width: 35vh; 235 | min-height: 35vh; 236 | border-radius: 7px; 237 | background: var(--color-main); 238 | margin: calc(5vh / 2); 239 | background: var(--color-card-2); 240 | } 241 | .art-body > div:first-child div { 242 | height: 35vh; 243 | width: 35vh; 244 | background: var(--color-card-2); 245 | border-radius: 7px; 246 | transition: all .3s; 247 | background-color: var(--color-card) !important; 248 | } 249 | .art-body > div:last-child { 250 | color: var(--color-font); 251 | margin-left: 60px; 252 | margin-right: 30px; 253 | background: var(--color-card); 254 | border-radius: 7px; 255 | padding: 20px; 256 | border-bottom: 2px solid transparent; 257 | transition: border .3s; 258 | flex: 1; 259 | } 260 | 261 | .art-body > div:last-child div:first-child { 262 | background: var(--color-main); 263 | height: 40px; 264 | margin: 0 -20px 20px -40px; 265 | border-radius: 2px 0 0 2px; 266 | } 267 | .art-body > div:last-child div:first-child svg { 268 | height: 40px; 269 | float: right; 270 | transform: translateX(30px); 271 | } 272 | .art-body > div:last-child > div:not(:first-child) { 273 | height: calc(40vh - 3rem - 165px); 274 | overflow: hidden; 275 | margin: 0 10px 20px; 276 | } 277 | .art-body > div:last-child > a { 278 | font-size: 1.1rem; 279 | font-weight: bold; 280 | line-height: 1.5rem; 281 | border-left: 1.4rem solid var(--color-main); 282 | padding-left: 10px; 283 | color: var(--color-font); 284 | margin-bottom: 10px; 285 | display: inline-block; 286 | white-space: nowrap; 287 | } 288 | .art-body > div:last-child > div > span { 289 | color: var(--color-font-2); 290 | overflow-wrap: anywhere; 291 | } 292 | .art-body > div:last-child > div:last-child { 293 | height: auto; 294 | overflow: auto; 295 | display: flex; 296 | flex-direction: row; 297 | align-items: center; 298 | } 299 | .art-body > div:last-child > div:last-child img { 300 | width: 40px; 301 | height: 40px; 302 | overflow: hidden; 303 | border-radius: 50%; 304 | border: 2px solid var(--color-main); 305 | outline: 6px solid var(--color-card-2); 306 | margin: 6px 20px 6px 6px; 307 | } 308 | .art-body > div:last-child > div:last-child div.info { 309 | font-size: 0.9rem; 310 | color: var(--color-font-1); 311 | display: flex; 312 | flex-direction: column; 313 | justify-content: center; 314 | flex: 1; 315 | } 316 | .art-body > div:last-child > div:last-child div.category span a { 317 | color: var(--color-font-2); 318 | font-size: 0.8rem; 319 | } 320 | .art-body > div:last-child > div:last-child div.category svg { 321 | margin-left: 5px; 322 | fill: var(--color-font-1); 323 | height: 0.9rem; 324 | } 325 | 326 | .say-body { 327 | display: flex; 328 | flex-direction: row; 329 | align-items: center; 330 | margin: 0 30px 20px; 331 | } 332 | .say-body:hover div:nth-child(2) { 333 | margin-left: 0; 334 | border-right: 2px solid var(--color-main); 335 | } 336 | .say-body > div:nth-child(1) { 337 | width: 50px; 338 | background: var(--color-main); 339 | height: 35px; 340 | border-radius: 4px 0 0 4px; 341 | text-align: center; 342 | } 343 | .say-body > div:nth-child(1) svg { 344 | fill: var(--color-font-r); 345 | height: calc(100% - 20px); 346 | margin: 10px; 347 | } 348 | .say-body > div:nth-child(2) { 349 | background: var(--color-card); 350 | height: 60px; 351 | border-radius: 7px; 352 | flex: 1; 353 | display: flex; 354 | align-items: center; 355 | padding: 0 20px; 356 | margin-left: -40px; 357 | border-right: 2px solid transparent; 358 | transition: margin .3s, border .3s; 359 | } 360 | .say-body > div:nth-child(2) span { 361 | color: var(--color-font-2); 362 | margin-right: 20px; 363 | } 364 | .say-body > div:nth-child(2) span:first-child { 365 | color: var(--color-font-1); 366 | flex: 1; 367 | white-space: nowrap; 368 | text-overflow: ellipsis; 369 | overflow: hidden; 370 | } 371 | .say-body > div:nth-child(2) span:first-child span { 372 | margin-right: 0; 373 | color: var(--color-main); 374 | } 375 | .say-body > div:nth-child(2) img { 376 | width: 30px; 377 | height: 30px; 378 | overflow: hidden; 379 | border-radius: 50%; 380 | border: 2px solid var(--color-main); 381 | outline: 6px solid var(--color-card-2); 382 | } 383 | 384 | .controller { 385 | display: flex; 386 | align-items: center; 387 | justify-content: center; 388 | margin-bottom: 40px; 389 | } 390 | .controller button { 391 | width: 40px; 392 | height: 40px; 393 | background: var(--color-card); 394 | transition: background .3s; 395 | padding: 15px; 396 | } 397 | .controller button:hover { 398 | background: var(--color-main); 399 | } 400 | .controller button:hover svg { 401 | fill: var(--color-font-r); 402 | } 403 | .controller button > svg { 404 | margin-top: -15px; 405 | fill: var(--color-font-1); 406 | } 407 | .controller > div { 408 | background: var(--color-card); 409 | border-radius: 7px; 410 | height: 40px; 411 | padding: 0 40px; 412 | margin: 0 10px; 413 | line-height: 40px; 414 | font-weight: bold; 415 | color: var(--color-font); 416 | } 417 | 418 | .no-found-card { 419 | display: flex; 420 | flex-direction: column; 421 | align-items: center; 422 | width: fit-content; 423 | margin: 0 auto; 424 | padding: 30px 40px; 425 | margin-top: calc(50% - 80px); 426 | transform: translateY(-50%); 427 | } 428 | .no-found-card > svg { 429 | fill: var(--color-font); 430 | width: 45px; 431 | margin-bottom: 5px; 432 | } 433 | .no-found-card > span { 434 | color: var(--color-main); 435 | font-weight: bold; 436 | font-size: 1.2rem; 437 | } 438 | .no-found-card > a { 439 | color: var(--color-font-1); 440 | font-size: 0.8rem; 441 | } 442 | .no-found-card > a:last-child { 443 | margin-top: 20px; 444 | background: var(--color-main); 445 | color: var(--color-font-r); 446 | border-radius: 7px; 447 | padding: 5px 80px; 448 | } 449 | 450 | @media (max-width: 992px) { 451 | .pin { 452 | flex-wrap: wrap; 453 | } 454 | .pin > div { 455 | min-width: 100%; 456 | margin-bottom: 10px; 457 | } 458 | .top-bar { 459 | background-size: cover; 460 | } 461 | .avatar { 462 | margin-left: -35px; 463 | } 464 | .avatar svg { 465 | display: none; 466 | } 467 | .bar-right { 468 | display: flex; 469 | flex-direction: column-reverse; 470 | align-content: flex-start; 471 | } 472 | .bar-info { 473 | margin-top: 20px; 474 | margin-left: -10px; 475 | } 476 | .search-icon { 477 | display: none; 478 | } 479 | } 480 | @media (max-width: 768px) { 481 | .art-body { 482 | height: 37vh; 483 | } 484 | .art-body > div:first-child { 485 | display: none; 486 | } 487 | .art-body > div:last-child { 488 | overflow: hidden; 489 | margin: 0; 490 | } 491 | .art-body > div:last-child div:first-child { 492 | margin: -20px -20px 20px -20px; 493 | border-radius: 2px; 494 | } 495 | .art-body > div:last-child div:first-child svg { 496 | display: none; 497 | } 498 | } -------------------------------------------------------------------------------- /src/css/others.css: -------------------------------------------------------------------------------- 1 | .archive-title { 2 | margin-bottom: 30px; 3 | } 4 | .archive-title > div.title { 5 | display: flex; 6 | align-items: center; 7 | flex-direction: column; 8 | } 9 | .archive-title > div.title > span { 10 | color: var(--color-font-2); 11 | font-size: 0.8rem; 12 | opacity: 0.7; 13 | } 14 | .archive-title > div.title > span > span { 15 | color: var(--color-main); 16 | font-size: 1.6rem; 17 | margin: 0 10px; 18 | } 19 | /* .archive-title > div.bg-left { 20 | width: calc(100px + 10%); 21 | background: var(--color-main); 22 | margin: -200px 0 -200px -100px; 23 | transform: rotate(30deg); 24 | border: 10px solid var(--color-card-2); 25 | } 26 | .archive-title > div.bg-right { 27 | width: calc(100px + 10%); 28 | background: var(--color-main); 29 | margin: -200px -100px -200px 0; 30 | transform: rotate(30deg); 31 | border: 10px solid var(--color-card-2); 32 | } */ -------------------------------------------------------------------------------- /src/css/page.css: -------------------------------------------------------------------------------- 1 | .friend-pan { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | 6 | .friend-card { 7 | width: calc(1 / 3 * 100%); 8 | margin-top: 0; 9 | margin-bottom: 5px; 10 | height: 120px; 11 | } 12 | .friend-card > div { 13 | width: 100%; 14 | margin-right: 0; 15 | } 16 | 17 | .pin > div { 18 | height: 115px; 19 | } 20 | .pin-img { 21 | min-width: 115px; 22 | max-width: 115px; 23 | transform: translate(-10px); 24 | } 25 | 26 | @media (max-width: 992px) { 27 | .friend-card { 28 | width: 100%; 29 | } 30 | } -------------------------------------------------------------------------------- /src/font-awesome/HELP-US-OUT.txt: -------------------------------------------------------------------------------- 1 | I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project, 2 | Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome, 3 | comprehensive icon sets or copy and paste your own. 4 | 5 | Please. Check it out. 6 | 7 | -Dave Gandy 8 | -------------------------------------------------------------------------------- /src/font-awesome/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/src/font-awesome/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/font-awesome/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/src/font-awesome/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/font-awesome/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/src/font-awesome/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/font-awesome/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/src/font-awesome/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/font-awesome/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Stapxs/typecho-theme-bcui/14738ca520f7f81fad26eecca759e0fc57603ab1/src/font-awesome/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/font-awesome/less/animated.less: -------------------------------------------------------------------------------- 1 | // Animated Icons 2 | // -------------------------- 3 | 4 | .@{fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | .@{fa-css-prefix}-pulse { 10 | -webkit-animation: fa-spin 1s infinite steps(8); 11 | animation: fa-spin 1s infinite steps(8); 12 | } 13 | 14 | @-webkit-keyframes fa-spin { 15 | 0% { 16 | -webkit-transform: rotate(0deg); 17 | transform: rotate(0deg); 18 | } 19 | 100% { 20 | -webkit-transform: rotate(359deg); 21 | transform: rotate(359deg); 22 | } 23 | } 24 | 25 | @keyframes fa-spin { 26 | 0% { 27 | -webkit-transform: rotate(0deg); 28 | transform: rotate(0deg); 29 | } 30 | 100% { 31 | -webkit-transform: rotate(359deg); 32 | transform: rotate(359deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/font-awesome/less/bordered-pulled.less: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em @fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .@{fa-css-prefix}-pull-left { float: left; } 11 | .@{fa-css-prefix}-pull-right { float: right; } 12 | 13 | .@{fa-css-prefix} { 14 | &.@{fa-css-prefix}-pull-left { margin-right: .3em; } 15 | &.@{fa-css-prefix}-pull-right { margin-left: .3em; } 16 | } 17 | 18 | /* Deprecated as of 4.4.0 */ 19 | .pull-right { float: right; } 20 | .pull-left { float: left; } 21 | 22 | .@{fa-css-prefix} { 23 | &.pull-left { margin-right: .3em; } 24 | &.pull-right { margin-left: .3em; } 25 | } 26 | -------------------------------------------------------------------------------- /src/font-awesome/less/core.less: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/font-awesome/less/fixed-width.less: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .@{fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /src/font-awesome/less/font-awesome.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables.less"; 7 | @import "mixins.less"; 8 | @import "path.less"; 9 | @import "core.less"; 10 | @import "larger.less"; 11 | @import "fixed-width.less"; 12 | @import "list.less"; 13 | @import "bordered-pulled.less"; 14 | @import "animated.less"; 15 | @import "rotated-flipped.less"; 16 | @import "stacked.less"; 17 | @import "icons.less"; 18 | @import "screen-reader.less"; 19 | -------------------------------------------------------------------------------- /src/font-awesome/less/larger.less: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .@{fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .@{fa-css-prefix}-2x { font-size: 2em; } 11 | .@{fa-css-prefix}-3x { font-size: 3em; } 12 | .@{fa-css-prefix}-4x { font-size: 4em; } 13 | .@{fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /src/font-awesome/less/list.less: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: @fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .@{fa-css-prefix}-li { 11 | position: absolute; 12 | left: -@fa-li-width; 13 | width: @fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.@{fa-css-prefix}-lg { 17 | left: (-@fa-li-width + (4em / 14)); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/font-awesome/less/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | .fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | 14 | .fa-icon-rotate(@degrees, @rotation) { 15 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; 16 | -webkit-transform: rotate(@degrees); 17 | -ms-transform: rotate(@degrees); 18 | transform: rotate(@degrees); 19 | } 20 | 21 | .fa-icon-flip(@horiz, @vert, @rotation) { 22 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)"; 23 | -webkit-transform: scale(@horiz, @vert); 24 | -ms-transform: scale(@horiz, @vert); 25 | transform: scale(@horiz, @vert); 26 | } 27 | 28 | 29 | // Only display content to screen readers. A la Bootstrap 4. 30 | // 31 | // See: http://a11yproject.com/posts/how-to-hide-content/ 32 | 33 | .sr-only() { 34 | position: absolute; 35 | width: 1px; 36 | height: 1px; 37 | padding: 0; 38 | margin: -1px; 39 | overflow: hidden; 40 | clip: rect(0,0,0,0); 41 | border: 0; 42 | } 43 | 44 | // Use in conjunction with .sr-only to only display content when it's focused. 45 | // 46 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 47 | // 48 | // Credit: HTML5 Boilerplate 49 | 50 | .sr-only-focusable() { 51 | &:active, 52 | &:focus { 53 | position: static; 54 | width: auto; 55 | height: auto; 56 | margin: 0; 57 | overflow: visible; 58 | clip: auto; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/font-awesome/less/path.less: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); 7 | src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), 8 | url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), 9 | url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), 10 | url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), 11 | url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /src/font-awesome/less/rotated-flipped.less: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } 5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } 6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } 7 | 8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } 9 | .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .@{fa-css-prefix}-rotate-90, 15 | :root .@{fa-css-prefix}-rotate-180, 16 | :root .@{fa-css-prefix}-rotate-270, 17 | :root .@{fa-css-prefix}-flip-horizontal, 18 | :root .@{fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /src/font-awesome/less/screen-reader.less: -------------------------------------------------------------------------------- 1 | // Screen Readers 2 | // ------------------------- 3 | 4 | .sr-only { .sr-only(); } 5 | .sr-only-focusable { .sr-only-focusable(); } 6 | -------------------------------------------------------------------------------- /src/font-awesome/less/stacked.less: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .@{fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .@{fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .@{fa-css-prefix}-inverse { color: @fa-inverse; } 21 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_animated.scss: -------------------------------------------------------------------------------- 1 | // Spinning Icons 2 | // -------------------------- 3 | 4 | .#{$fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | .#{$fa-css-prefix}-pulse { 10 | -webkit-animation: fa-spin 1s infinite steps(8); 11 | animation: fa-spin 1s infinite steps(8); 12 | } 13 | 14 | @-webkit-keyframes fa-spin { 15 | 0% { 16 | -webkit-transform: rotate(0deg); 17 | transform: rotate(0deg); 18 | } 19 | 100% { 20 | -webkit-transform: rotate(359deg); 21 | transform: rotate(359deg); 22 | } 23 | } 24 | 25 | @keyframes fa-spin { 26 | 0% { 27 | -webkit-transform: rotate(0deg); 28 | transform: rotate(0deg); 29 | } 30 | 100% { 31 | -webkit-transform: rotate(359deg); 32 | transform: rotate(359deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_bordered-pulled.scss: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em $fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .#{$fa-css-prefix}-pull-left { float: left; } 11 | .#{$fa-css-prefix}-pull-right { float: right; } 12 | 13 | .#{$fa-css-prefix} { 14 | &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } 15 | &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } 16 | } 17 | 18 | /* Deprecated as of 4.4.0 */ 19 | .pull-right { float: right; } 20 | .pull-left { float: left; } 21 | 22 | .#{$fa-css-prefix} { 23 | &.pull-left { margin-right: .3em; } 24 | &.pull-right { margin-left: .3em; } 25 | } 26 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_core.scss: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_fixed-width.scss: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .#{$fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_larger.scss: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .#{$fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .#{$fa-css-prefix}-2x { font-size: 2em; } 11 | .#{$fa-css-prefix}-3x { font-size: 3em; } 12 | .#{$fa-css-prefix}-4x { font-size: 4em; } 13 | .#{$fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_list.scss: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: $fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .#{$fa-css-prefix}-li { 11 | position: absolute; 12 | left: -$fa-li-width; 13 | width: $fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.#{$fa-css-prefix}-lg { 17 | left: -$fa-li-width + (4em / 14); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | @mixin fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | 14 | @mixin fa-icon-rotate($degrees, $rotation) { 15 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; 16 | -webkit-transform: rotate($degrees); 17 | -ms-transform: rotate($degrees); 18 | transform: rotate($degrees); 19 | } 20 | 21 | @mixin fa-icon-flip($horiz, $vert, $rotation) { 22 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; 23 | -webkit-transform: scale($horiz, $vert); 24 | -ms-transform: scale($horiz, $vert); 25 | transform: scale($horiz, $vert); 26 | } 27 | 28 | 29 | // Only display content to screen readers. A la Bootstrap 4. 30 | // 31 | // See: http://a11yproject.com/posts/how-to-hide-content/ 32 | 33 | @mixin sr-only { 34 | position: absolute; 35 | width: 1px; 36 | height: 1px; 37 | padding: 0; 38 | margin: -1px; 39 | overflow: hidden; 40 | clip: rect(0,0,0,0); 41 | border: 0; 42 | } 43 | 44 | // Use in conjunction with .sr-only to only display content when it's focused. 45 | // 46 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 47 | // 48 | // Credit: HTML5 Boilerplate 49 | 50 | @mixin sr-only-focusable { 51 | &:active, 52 | &:focus { 53 | position: static; 54 | width: auto; 55 | height: auto; 56 | margin: 0; 57 | overflow: visible; 58 | clip: auto; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_path.scss: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); 7 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), 8 | url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), 9 | url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), 10 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), 11 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_rotated-flipped.scss: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } 7 | 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } 9 | .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .#{$fa-css-prefix}-rotate-90, 15 | :root .#{$fa-css-prefix}-rotate-180, 16 | :root .#{$fa-css-prefix}-rotate-270, 17 | :root .#{$fa-css-prefix}-flip-horizontal, 18 | :root .#{$fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_screen-reader.scss: -------------------------------------------------------------------------------- 1 | // Screen Readers 2 | // ------------------------- 3 | 4 | .sr-only { @include sr-only(); } 5 | .sr-only-focusable { @include sr-only-focusable(); } 6 | -------------------------------------------------------------------------------- /src/font-awesome/scss/_stacked.scss: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; } 21 | -------------------------------------------------------------------------------- /src/font-awesome/scss/font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables"; 7 | @import "mixins"; 8 | @import "path"; 9 | @import "core"; 10 | @import "larger"; 11 | @import "fixed-width"; 12 | @import "list"; 13 | @import "bordered-pulled"; 14 | @import "animated"; 15 | @import "rotated-flipped"; 16 | @import "stacked"; 17 | @import "icons"; 18 | @import "screen-reader"; 19 | -------------------------------------------------------------------------------- /src/js/article.js: -------------------------------------------------------------------------------- 1 | let viewer 2 | let nowOnh = null 3 | 4 | document.addEventListener("DOMContentLoaded", () => { 5 | const meta = document.createElement('meta') 6 | meta.setAttribute('name', 'referrer') 7 | meta.setAttribute('content', 'no-referrer') 8 | document.head.appendChild(meta) 9 | // 初始化图片查看器 10 | // 遍历获取文档中的所有图片 11 | const viewBody = document.getElementById('imageView') 12 | const doms = document.getElementById('article-main').getElementsByTagName('img') 13 | for(let i=0; i { 30 | const dom = document.getElementById(item.dataset.id) 31 | if(dom !== null) { 32 | io.observe(document.getElementById(item.dataset.id)) 33 | } 34 | }) 35 | 36 | // 解析一些有必要的链接预览 37 | createLinkView() 38 | }) 39 | 40 | // 图片点击事件 41 | function viewImage(id) { 42 | viewer.view(Number(id.split('-')[1])) 43 | } 44 | 45 | // 页面滚动事件 46 | window.onscroll = function() { 47 | // 处理顶栏 48 | const endHeight = getElementTop(document.getElementById("end-info")) 49 | const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 50 | if(scrollTop >= 80 && scrollTop <= endHeight && window.onView !== true) { 51 | changeBar() 52 | document.getElementById("main-bar").style.transform = "translate(0, -60px)" 53 | document.getElementById("article-bar").classList.add('hid'); 54 | document.getElementById("nav").style.borderBottom = "3px solid var(--color-main)"; 55 | document.getElementById("nav-controller").style.display = "flex" 56 | } else if((scrollTop < 80 || scrollTop > endHeight ) && window.onView === true) { 57 | changeBar() 58 | document.getElementById("main-bar").style.transform = "translate(0)" 59 | document.getElementById("article-bar").classList.remove('hid'); 60 | document.getElementById("nav").style.borderBottom = "3px solid transparent"; 61 | document.getElementById("nav-controller").style.display = "none" 62 | } 63 | 64 | // 计算阅读进度 65 | const artTop = getElementTop(document.getElementById("article-main")) 66 | let percent = (scrollTop - artTop) / (endHeight - document.body.clientHeight) 67 | if(percent > 1) { 68 | percent = 1 69 | } 70 | if(percent < 0) { 71 | percent = 0 72 | } 73 | const progressBar = document.getElementById("content-progress") 74 | const progressBarSm = document.getElementById("content-progress-small") 75 | if(progressBar && progressBarSm) { 76 | progressBar.style.width = "calc(calc(100% + 40px) * " + percent + ")" 77 | progressBarSm.style.width = "calc(calc(100% + 15px) * " + percent + ")" 78 | } 79 | 80 | // 窄布局下的目录处理 81 | if(scrollTop >= 80) { 82 | content.classList.remove('hidden') 83 | } else { 84 | content.classList.remove('show') 85 | content.classList.add('hidden') 86 | } 87 | if(scrollTop > endHeight) { 88 | content.classList.add('nb') 89 | } else { 90 | content.classList.remove('nb') 91 | } 92 | } 93 | 94 | // H 标签自动亮起相关逻辑 95 | let io = new IntersectionObserver(hInView, { 96 | rootMargin: '0px 0px -80% 0px' 97 | }) 98 | function hInView (event) { 99 | const info = event[0] 100 | const sender = info.target 101 | // 进入 102 | if(info.isIntersecting) { 103 | sender.classList.add('select') 104 | showhList(info.target.id, true) 105 | nowOnh = info.target.id 106 | } else { 107 | sender.classList.remove('select') 108 | } 109 | } 110 | 111 | function barController() { 112 | const endHeight = getElementTop(document.getElementById("end-info")) 113 | const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 114 | if(scrollTop > 80 && scrollTop < endHeight) { 115 | changeBar() 116 | document.getElementById("nav").style.marginTop = "0" 117 | } 118 | } 119 | 120 | function changeBar() { 121 | if (window.onView === undefined || window.onView === false) { 122 | window.onView = true 123 | document.getElementById("nav").style.marginTop = "0" 124 | document.getElementById("nav").style.borderRadius = "0 0 7px 7px" 125 | document.getElementById("nav").style.transform = "translate(0, calc(-100% - 20px))" 126 | document.getElementById("nav-controller").style.margin = "30px auto 0" 127 | document.getElementById("nav-controller").style.opacity = "1" 128 | 129 | // 如果导航栏是展开的（在窄布局下），就顺便把它关了 130 | const navbarNavAltMarkup = document.getElementById("navbarNavAltMarkup") 131 | if(navbarNavAltMarkup && navbarNavAltMarkup.classList.contains('show')) { 132 | document.getElementById("navbarNavAltMarkupButton").click() 133 | } 134 | 135 | // document.getElementById("content").style.top = "20px" 136 | } else { 137 | window.onView = false 138 | document.getElementById("nav").style.marginTop = "20px" 139 | document.getElementById("nav").style.borderRadius = "7px" 140 | document.getElementById("nav").style.transform = "translate(0)" 141 | document.getElementById("nav-controller").style.margin = "-10px auto 0" 142 | document.getElementById("nav-controller").style.opacity = "0" 143 | 144 | // document.getElementById("content").style.top = "80px" 145 | } 146 | } 147 | 148 | function getElementTop (el) { 149 | let actualTop = el.offsetTop; 150 | let current = el.offsetParent; 151 | while (current !== null) { 152 | actualTop += current.offsetTop 153 | current = current.offsetParent 154 | } 155 | return actualTop 156 | } 157 | 158 | // 创建目录 159 | function createTOC () { 160 | // 检索 DOM 161 | const tags = [ 'H1', 'H2', 'H3', 'H4', 'H5' ] 162 | const doms = document.getElementById('article-main').getElementsByTagName('*') 163 | let show = [] 164 | let min = 6 165 | for (i = 0; i < doms.length; i++) { 166 | const name = doms[i].nodeName 167 | if(tags.indexOf(name) >= 0) { 168 | if(min > tags.indexOf(doms[i].nodeName) + 1) { 169 | min = tags.indexOf(doms[i].nodeName) + 1 170 | } 171 | show.push(doms[i]) 172 | } 173 | } 174 | // 创建目录 175 | if(show.length > 0) { 176 | const div = document.createElement('div') 177 | div.id = 'content-body' 178 | div.className = 'content-body' 179 | div.onmouseleave = function() { 180 | showhList(nowOnh, true) 181 | } 182 | // PS：用于记录上一个目录项的等级 183 | let last = 0 184 | for (i = 0; i < show.length; i++) { 185 | const item = show[i] 186 | const level = tags.indexOf(item.nodeName) - min + 2 187 | // 只构建两层 188 | if(level <= 2) { 189 | // 构建目录项 190 | const body = document.createElement('div') 191 | body.dataset.id = item.id 192 | body.onclick = function() { 193 | document.location.href = '#' + item.id 194 | } 195 | const a = document.createElement('a') 196 | a.innerText = item.innerText 197 | a.href = '#' + item.id 198 | const divSelect = document.createElement('div') 199 | // PS：第一个如果不是最高级就不显示，直到遇到第一个最高级 200 | if(last == 0 && level != 1) { 201 | body.style.display = 'none' 202 | break 203 | } 204 | if(level == 1) { 205 | body.className = 'lvo' 206 | body.onmouseover = function() { 207 | showhList(nowOnh, true) 208 | showhList(item.id, false, true) 209 | } 210 | } 211 | if(level == 2) { 212 | body.className = 'lvt setsmall' 213 | } 214 | last = level 215 | // 添加 216 | body.appendChild(divSelect) 217 | body.appendChild(a) 218 | div.appendChild(body) 219 | } 220 | } 221 | // 遍历 div，标记一些样式 222 | const childrens = div.children 223 | for(i = 0; i < childrens.length; i++) { 224 | // 给所有的 lvo 的下一个 lvt 添加 rad-top，上一个 lvt 增加 rad-bot 225 | if(childrens[i].className.indexOf('lvo') >= 0) { 226 | if(childrens[i+1] && childrens[i+1].className.indexOf('lvt') >= 0) { 227 | childrens[i+1].classList.add('rad-top') 228 | } 229 | if(childrens[i-1] && childrens[i-1].className.indexOf('lvt') >= 0) { 230 | childrens[i-1].classList.add('rad-bot') 231 | } 232 | } 233 | } 234 | // 添加 235 | document.getElementById('content').append(div) 236 | // 创建进度条 237 | const bar = document.createElement('div') 238 | bar.className = 'content-progress' 239 | bar.id = 'content-progress' 240 | document.getElementById('content').append(bar) 241 | // 显示 242 | changeContent() 243 | } 244 | } 245 | 246 | function changeContent() { 247 | const body = document.getElementById("main-right") 248 | if(body.style.width === "0px") { 249 | body.style.width = "300px" 250 | body.style.overflow = "unset" 251 | } else { 252 | body.style.width = "0px" 253 | body.style.overflow = "hidden" 254 | } 255 | } 256 | 257 | function showContent() { 258 | const content = document.getElementById('content') 259 | if(window.getComputedStyle(content, null)['position'] == 'fixed') { 260 | if(content.classList.contains('show')) { 261 | content.classList.remove('show') 262 | } else { 263 | content.classList.add('show') 264 | } 265 | } 266 | } 267 | 268 | function createLinkView() { 269 | const doms = document.getElementById('article-main').getElementsByTagName('a') 270 | for (i = 0; i < doms.length; i++) { 271 | const item = doms[i] 272 | const link = item.href 273 | 274 | // 下面这段主要用来判断链接是不是混在文本里的 275 | const childNodes = item.parentNode.childNodes 276 | // 寻找 item 在 childNodes 里的位置 277 | let index = -1 278 | for (j = 0; j < childNodes.length; j++) { 279 | if (childNodes[j] == item) { 280 | index = j 281 | break 282 | } 283 | } 284 | // 判断它的前后是不是 #text 285 | const prevNode = childNodes[index - 1] 286 | const nextNode = childNodes[index + 1] 287 | const isPrevText = prevNode && prevNode.nodeName === '#text' 288 | const isNextText = nextNode && nextNode.nodeName === '#text' 289 | 290 | if (item.parentNode.nodeName == 'P' && !isNextText && !isPrevText) { 291 | const regList = { 292 | github: /^https:\/\/github\.com\/[a-zA-Z0-9_-]+\/[a-zA-Z0-9_.-]+$/g, 293 | bilibili: /^https:\/\/www\.bilibili\.com\/video\/[a-zA-Z0-9_-]+$/g 294 | } 295 | 296 | for (regName in regList) { 297 | if (regList[regName].test(link)) { 298 | console.log('预览链接：' + link) 299 | loadView(regName, link, item) 300 | } 301 | } 302 | } 303 | } 304 | } 305 | 306 | function showhList(id, updateAll, hover = false) { 307 | const list = document.getElementById('content-body').childNodes 308 | let passHidden = 0 309 | for(let i=0; i= 0) { 317 | // H2 需要向前寻找它的 H1 318 | // 同时将路过的 H2 全部展开 319 | for(let j=i-1; j>=0; j--) { 320 | if(list[j].className.indexOf('lvo') >= 0) { 321 | list[j].classList.add('select') 322 | break // 找到了就可以退出了 323 | } else { 324 | // 插入到 lvoList 的前面 325 | lvoList.unshift(list[j]) 326 | } 327 | } 328 | } 329 | // 向下寻找 H1 将路过的 H2 展开 330 | for (let j = i + 1; j < list.length; j++) { 331 | if (list[j].className.indexOf('lvo') >= 0) { 332 | break 333 | } else { 334 | // 插入到 lvoList 的后面 335 | lvoList.push(list[j]) 336 | // 统计个数以跳过下面的循环 337 | passHidden++ 338 | } 339 | } 340 | for(let j=0; j= 0) { 347 | item.classList.remove('hover-show') 348 | if (passHidden != 0) { 349 | passHidden-- 350 | } else { 351 | item.classList.add('setsmall') 352 | } 353 | } 354 | } 355 | } 356 | } 357 | } -------------------------------------------------------------------------------- /src/js/components/about.js: -------------------------------------------------------------------------------- 1 | let end = content.indexOf('=== end-about ===') 2 | if(end > 0) { 3 | end += `=== end-about ===`.length 4 | // 将正文内容插入到 content 后面 5 | const contentDom = document.createElement('div') 6 | contentDom.innerHTML = content.substring(end) 7 | document.getElementById('about-content').appendChild(contentDom) 8 | // 处理 info 9 | let info = content.substring(0, end).replace(/<[^>]*>/g, '').replace(`=== end-about ===`, '') 10 | const txt = document.createElement('div') 11 | txt.innerHTML = info 12 | info = JSON.parse(txt.innerText) 13 | console.log(info) 14 | // 将 info 填入对应 id 的 dom 中 15 | for (var name in info) { 16 | const item = info[name] 17 | if(typeof item == 'object') { 18 | switch(item.type) { 19 | // 直接插入 HTML 20 | case 'HTML': document.getElementById(name).innerHTML = item.value; break 21 | // 将 id 为 value 的 dom 挪到这儿 22 | case 'Context': { 23 | const move = document.getElementById(item.value) 24 | document.getElementById(name).innerText = '' 25 | document.getElementById(name).appendChild(move) 26 | break 27 | } 28 | } 29 | } else { 30 | document.getElementById(name).innerText = item 31 | } 32 | } 33 | 34 | } else { 35 | console.log('没有在正文中找到关于信息 ……') 36 | } -------------------------------------------------------------------------------- /src/js/components/links.js: -------------------------------------------------------------------------------- 1 | // 获取正文中的所有 ul 2 | const list = document.getElementById('main').getElementsByTagName('article')[0].getElementsByTagName('ul') 3 | for(let i=0; i 0) { 11 | text = text.split('|') 12 | // 将字符串处理为友链卡片 13 | // Chuhelan|https://www.chuhelan.com|/usr/uploads/2020/03/4234082537.jpg|这是初荷岚的个人博客，里面记载了一些无聊的东西 14 | /* 15 |
16 |
17 |
18 |
19 | 林槐语录 20 |
2021年05月这是01月到05月的，因为直接加进API了不记得具体日期了『人类的一切道德文明似乎都有虚伪的成分，但这恰恰是人和动物最大的一个区别。』——罗翔BV1Df4y1S7tB『就像你过去所做的
21 |
22 |
23 |
24 | */ 25 | const card = document.createElement('div') 26 | card.className = 'pin friend-card' 27 | const main = document.createElement('div') 28 | main.className = 'ss-card' 29 | const info = document.createElement('div') 30 | const img = document.createElement('div') 31 | img.className = 'pin-img' 32 | img.style.background = 'url(' + text[2] + ')' 33 | const title = document.createElement('a') 34 | title.href = text[1] 35 | title.target = '_blank' 36 | title.innerText = text[0] 37 | const says = document.createElement('div') 38 | const says1 = document.createElement('span') 39 | says1.innerText = text[3] 40 | says.appendChild(says1) 41 | info.appendChild(title) 42 | info.appendChild(says) 43 | main.appendChild(img) 44 | main.appendChild(info) 45 | card.appendChild(main) 46 | pan.appendChild(card) 47 | } 48 | } 49 | // 处理 ul 50 | if(pan.children.length > 0) { 51 | const parent = list[i].parentNode 52 | parent.insertBefore(pan, list[i]) 53 | list[i].style.display = 'none' 54 | } 55 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | // 获取语录 3 | const anaBody = document.getElementById('ana') 4 | if (anaBody) { 5 | const url = anaBody.dataset.ana 6 | // 判断 url 是不是 http://、https:// 开头的 7 | if (url.indexOf('http://') === 0 || url.indexOf('https://') === 0) { 8 | fetch(anaBody.dataset.ana) 9 | .then(response => { 10 | if (response.ok) { 11 | return response.text() 12 | } 13 | return '' 14 | }) 15 | .then(data => { 16 | anaBody.innerText = data.replace(/[\r\n]/g, '') 17 | }) 18 | } else { 19 | anaBody.innerText = url 20 | } 21 | } 22 | // 绑定一些事件 23 | document.getElementById('search-icon').addEventListener('click', () => { 24 | const search = document.getElementById('search-input') 25 | // 如果它有 hidden 就去掉，否则加回去 26 | if (search.classList.contains('hidden')) { 27 | search.classList.remove('hidden') 28 | } else { 29 | search.classList.add('hidden') 30 | } 31 | }) 32 | }) 33 | 34 | function showSearch() { 35 | 36 | } 37 | 38 | function jumpTo(url, newPage = false) { 39 | if(newPage) { 40 | window.open(url) 41 | } else { 42 | window.location.href = url 43 | } 44 | } -------------------------------------------------------------------------------- /src/js/katex/auto-render.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var a={};return function(){n.d(a,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,a=0,i=e.length;n0&&(a.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=i.test(d)?d:e.slice(t[l].left.length,n);a.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&a.push({type:"text",data:e}),a},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var a=document.createDocumentFragment(),i=0;i 16 | 17 |
18 | ${data['og:url'] ? data['og:url'] : url} 19 |

${data['og:title']}

20 | ${data['og:description'] ? '' + data['og:description'] + '' : ''} 21 |
22 |
23 | ` 24 | }, 25 | error: function (e) { 26 | console.log(e) 27 | } 28 | }) 29 | } 30 | 31 | function viewGithub(info, dom) { 32 | $.ajax({ 33 | url: 'https://api.github.com/repos/' + info, 34 | success: function (data) { 35 | let topics = '' 36 | for(let i = 0; i < data.topics.length; i++) { 37 | topics += `${data.topics[i]}` 38 | } 39 | dom.style.textDecoration = 'none' 40 | dom.target = '_black' 41 | dom.innerHTML = ` 42 |
43 | 44 |
45 | 46 | 47 | ${data.full_name} 48 | 49 | ${data.description} 50 |
${topics}
51 |
52 |
53 | ` 54 | }, 55 | error: function (e) { 56 | console.log(e) 57 | } 58 | }) 59 | } -------------------------------------------------------------------------------- /src/js/viewerjs/viewer.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Viewer.js v1.11.4 3 | * https://fengyuanchen.github.io/viewerjs 4 | * 5 | * Copyright 2015-present Chen Fengyuan 6 | * Released under the MIT license 7 | * 8 | * Date: 2023-07-23T07:45:51.236Z 9 | */ 10 | 11 | .viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before { 12 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC"); 13 | background-repeat: no-repeat; 14 | background-size: 280px; 15 | color: transparent; 16 | display: block; 17 | font-size: 0; 18 | height: 20px; 19 | line-height: 0; 20 | width: 20px; 21 | } 22 | 23 | .viewer-zoom-in::before { 24 | background-position: 0 0; 25 | content: "Zoom In"; 26 | } 27 | 28 | .viewer-zoom-out::before { 29 | background-position: -20px 0; 30 | content: "Zoom Out"; 31 | } 32 | 33 | .viewer-one-to-one::before { 34 | background-position: -40px 0; 35 | content: "One to One"; 36 | } 37 | 38 | .viewer-reset::before { 39 | background-position: -60px 0; 40 | content: "Reset"; 41 | } 42 | 43 | .viewer-prev::before { 44 | background-position: -80px 0; 45 | content: "Previous"; 46 | } 47 | 48 | .viewer-play::before { 49 | background-position: -100px 0; 50 | content: "Play"; 51 | } 52 | 53 | .viewer-next::before { 54 | background-position: -120px 0; 55 | content: "Next"; 56 | } 57 | 58 | .viewer-rotate-left::before { 59 | background-position: -140px 0; 60 | content: "Rotate Left"; 61 | } 62 | 63 | .viewer-rotate-right::before { 64 | background-position: -160px 0; 65 | content: "Rotate Right"; 66 | } 67 | 68 | .viewer-flip-horizontal::before { 69 | background-position: -180px 0; 70 | content: "Flip Horizontal"; 71 | } 72 | 73 | .viewer-flip-vertical::before { 74 | background-position: -200px 0; 75 | content: "Flip Vertical"; 76 | } 77 | 78 | .viewer-fullscreen::before { 79 | background-position: -220px 0; 80 | content: "Enter Full Screen"; 81 | } 82 | 83 | .viewer-fullscreen-exit::before { 84 | background-position: -240px 0; 85 | content: "Exit Full Screen"; 86 | } 87 | 88 | .viewer-close::before { 89 | background-position: -260px 0; 90 | content: "Close"; 91 | } 92 | 93 | .viewer-container { 94 | bottom: 0; 95 | direction: ltr; 96 | font-size: 0; 97 | left: 0; 98 | line-height: 0; 99 | overflow: hidden; 100 | position: absolute; 101 | right: 0; 102 | -webkit-tap-highlight-color: transparent; 103 | top: 0; 104 | -ms-touch-action: none; 105 | touch-action: none; 106 | -webkit-touch-callout: none; 107 | -webkit-user-select: none; 108 | -moz-user-select: none; 109 | -ms-user-select: none; 110 | user-select: none; 111 | } 112 | 113 | .viewer-container::-moz-selection, .viewer-container *::-moz-selection { 114 | background-color: transparent; 115 | } 116 | 117 | .viewer-container::selection, 118 | .viewer-container *::selection { 119 | background-color: transparent; 120 | } 121 | 122 | .viewer-container:focus { 123 | outline: 0; 124 | } 125 | 126 | .viewer-container img { 127 | display: block; 128 | height: auto; 129 | max-height: none !important; 130 | max-width: none !important; 131 | min-height: 0 !important; 132 | min-width: 0 !important; 133 | width: 100%; 134 | } 135 | 136 | .viewer-canvas { 137 | bottom: 0; 138 | left: 0; 139 | overflow: hidden; 140 | position: absolute; 141 | right: 0; 142 | top: 0; 143 | } 144 | 145 | .viewer-canvas > img { 146 | height: auto; 147 | margin: 15px auto; 148 | max-width: 90% !important; 149 | width: auto; 150 | } 151 | 152 | .viewer-footer { 153 | bottom: 0; 154 | left: 0; 155 | overflow: hidden; 156 | position: absolute; 157 | right: 0; 158 | text-align: center; 159 | } 160 | 161 | .viewer-navbar { 162 | background-color: rgba(0, 0, 0, 50%); 163 | overflow: hidden; 164 | } 165 | 166 | .viewer-list { 167 | box-sizing: content-box; 168 | height: 50px; 169 | margin: 0; 170 | overflow: hidden; 171 | padding: 1px 0; 172 | } 173 | 174 | .viewer-list > li { 175 | color: transparent; 176 | cursor: pointer; 177 | float: left; 178 | font-size: 0; 179 | height: 50px; 180 | line-height: 0; 181 | opacity: 0.5; 182 | overflow: hidden; 183 | transition: opacity 0.15s; 184 | width: 30px; 185 | } 186 | 187 | .viewer-list > li:focus, 188 | .viewer-list > li:hover { 189 | opacity: 0.75; 190 | } 191 | 192 | .viewer-list > li:focus { 193 | outline: 0; 194 | } 195 | 196 | .viewer-list > li + li { 197 | margin-left: 1px; 198 | } 199 | 200 | .viewer-list > .viewer-loading { 201 | position: relative; 202 | } 203 | 204 | .viewer-list > .viewer-loading::after { 205 | border-width: 2px; 206 | height: 20px; 207 | margin-left: -10px; 208 | margin-top: -10px; 209 | width: 20px; 210 | } 211 | 212 | .viewer-list > .viewer-active, 213 | .viewer-list > .viewer-active:focus, 214 | .viewer-list > .viewer-active:hover { 215 | opacity: 1; 216 | } 217 | 218 | .viewer-player { 219 | background-color: #000; 220 | bottom: 0; 221 | cursor: none; 222 | display: none; 223 | left: 0; 224 | position: absolute; 225 | right: 0; 226 | top: 0; 227 | z-index: 1; 228 | } 229 | 230 | .viewer-player > img { 231 | left: 0; 232 | position: absolute; 233 | top: 0; 234 | } 235 | 236 | .viewer-toolbar > ul { 237 | display: inline-block; 238 | margin: 0 auto 5px; 239 | overflow: hidden; 240 | padding: 6px 3px; 241 | } 242 | 243 | .viewer-toolbar > ul > li { 244 | background-color: rgba(0, 0, 0, 50%); 245 | border-radius: 50%; 246 | cursor: pointer; 247 | float: left; 248 | height: 24px; 249 | overflow: hidden; 250 | transition: background-color 0.15s; 251 | width: 24px; 252 | } 253 | 254 | .viewer-toolbar > ul > li:focus, 255 | .viewer-toolbar > ul > li:hover { 256 | background-color: rgba(0, 0, 0, 80%); 257 | } 258 | 259 | .viewer-toolbar > ul > li:focus { 260 | box-shadow: 0 0 3px #fff; 261 | outline: 0; 262 | position: relative; 263 | z-index: 1; 264 | } 265 | 266 | .viewer-toolbar > ul > li::before { 267 | margin: 2px; 268 | } 269 | 270 | .viewer-toolbar > ul > li + li { 271 | margin-left: 1px; 272 | } 273 | 274 | .viewer-toolbar > ul > .viewer-small { 275 | height: 18px; 276 | margin-bottom: 3px; 277 | margin-top: 3px; 278 | width: 18px; 279 | } 280 | 281 | .viewer-toolbar > ul > .viewer-small::before { 282 | margin: -1px; 283 | } 284 | 285 | .viewer-toolbar > ul > .viewer-large { 286 | height: 30px; 287 | margin-bottom: -3px; 288 | margin-top: -3px; 289 | width: 30px; 290 | } 291 | 292 | .viewer-toolbar > ul > .viewer-large::before { 293 | margin: 5px; 294 | } 295 | 296 | .viewer-tooltip { 297 | background-color: rgba(0, 0, 0, 80%); 298 | border-radius: 10px; 299 | color: #fff; 300 | display: none; 301 | font-size: 12px; 302 | height: 20px; 303 | left: 50%; 304 | line-height: 20px; 305 | margin-left: -25px; 306 | margin-top: -10px; 307 | position: absolute; 308 | text-align: center; 309 | top: 50%; 310 | width: 50px; 311 | } 312 | 313 | .viewer-title { 314 | color: #ccc; 315 | display: inline-block; 316 | font-size: 12px; 317 | line-height: 1.2; 318 | margin: 5px 5%; 319 | max-width: 90%; 320 | min-height: 14px; 321 | opacity: 0.8; 322 | overflow: hidden; 323 | text-overflow: ellipsis; 324 | transition: opacity 0.15s; 325 | white-space: nowrap; 326 | } 327 | 328 | .viewer-title:hover { 329 | opacity: 1; 330 | } 331 | 332 | .viewer-button { 333 | -webkit-app-region: no-drag; 334 | background-color: rgba(0, 0, 0, 50%); 335 | border-radius: 50%; 336 | cursor: pointer; 337 | height: 80px; 338 | overflow: hidden; 339 | position: absolute; 340 | right: -40px; 341 | top: -40px; 342 | transition: background-color 0.15s; 343 | width: 80px; 344 | } 345 | 346 | .viewer-button:focus, 347 | .viewer-button:hover { 348 | background-color: rgba(0, 0, 0, 80%); 349 | } 350 | 351 | .viewer-button:focus { 352 | box-shadow: 0 0 3px #fff; 353 | outline: 0; 354 | } 355 | 356 | .viewer-button::before { 357 | bottom: 15px; 358 | left: 15px; 359 | position: absolute; 360 | } 361 | 362 | .viewer-fixed { 363 | position: fixed; 364 | } 365 | 366 | .viewer-open { 367 | overflow: hidden; 368 | } 369 | 370 | .viewer-show { 371 | display: block; 372 | } 373 | 374 | .viewer-hide { 375 | display: none; 376 | } 377 | 378 | .viewer-backdrop { 379 | background-color: rgba(0, 0, 0, 50%); 380 | } 381 | 382 | .viewer-invisible { 383 | visibility: hidden; 384 | } 385 | 386 | .viewer-move { 387 | cursor: move; 388 | cursor: grab; 389 | } 390 | 391 | .viewer-fade { 392 | opacity: 0; 393 | } 394 | 395 | .viewer-in { 396 | opacity: 1; 397 | } 398 | 399 | .viewer-transition { 400 | transition: all 0.3s; 401 | } 402 | 403 | @keyframes viewer-spinner { 404 | 0% { 405 | transform: rotate(0deg); 406 | } 407 | 408 | 100% { 409 | transform: rotate(360deg); 410 | } 411 | } 412 | 413 | .viewer-loading::after { 414 | animation: viewer-spinner 1s linear infinite; 415 | border: 4px solid rgba(255, 255, 255, 10%); 416 | border-left-color: rgba(255, 255, 255, 50%); 417 | border-radius: 50%; 418 | content: ""; 419 | display: inline-block; 420 | height: 40px; 421 | left: 50%; 422 | margin-left: -20px; 423 | margin-top: -20px; 424 | position: absolute; 425 | top: 50%; 426 | width: 40px; 427 | z-index: 1; 428 | } 429 | 430 | @media (max-width: 767px) { 431 | .viewer-hide-xs-down { 432 | display: none; 433 | } 434 | } 435 | 436 | @media (max-width: 991px) { 437 | .viewer-hide-sm-down { 438 | display: none; 439 | } 440 | } 441 | 442 | @media (max-width: 1199px) { 443 | .viewer-hide-md-down { 444 | display: none; 445 | } 446 | } 447 | --------------------------------------------------------------------------------