├── img ├── cove3r.jpg ├── cover.jpg ├── cover1.jpg ├── cover2.jpg ├── cover4.jpg ├── kongou.png ├── cover-big.jpg └── background.jpg ├── fonts ├── materialdesignicons-webfont.eot ├── materialdesignicons-webfont.ttf ├── materialdesignicons-webfont.woff └── materialdesignicons-webfont.woff2 ├── footer.php ├── LICENSE ├── sidebar.php ├── README.md ├── header.php ├── page.php ├── post.php ├── archive.php ├── index.php ├── functions.php ├── comments.php ├── js ├── noframework.waypoints.min.js ├── o.js └── pjax.js └── css ├── w.less ├── w_bg.css └── w.css /img/cove3r.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/img/cove3r.jpg -------------------------------------------------------------------------------- /img/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/img/cover.jpg -------------------------------------------------------------------------------- /img/cover1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/img/cover1.jpg -------------------------------------------------------------------------------- /img/cover2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/img/cover2.jpg -------------------------------------------------------------------------------- /img/cover4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/img/cover4.jpg -------------------------------------------------------------------------------- /img/kongou.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/img/kongou.png -------------------------------------------------------------------------------- /img/cover-big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/img/cover-big.jpg -------------------------------------------------------------------------------- /img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/img/background.jpg -------------------------------------------------------------------------------- /fonts/materialdesignicons-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/fonts/materialdesignicons-webfont.eot -------------------------------------------------------------------------------- /fonts/materialdesignicons-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/fonts/materialdesignicons-webfont.ttf -------------------------------------------------------------------------------- /fonts/materialdesignicons-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/fonts/materialdesignicons-webfont.woff -------------------------------------------------------------------------------- /fonts/materialdesignicons-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archeb/LightWhite/HEAD/fonts/materialdesignicons-webfont.woff2 -------------------------------------------------------------------------------- /footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 | Theme LightWhite Made by Archeb With 7 |
自豪地使用Typecho 由Anodelic Cloud提供主机服务 8 |
9 |
10 | © 2014 - 2018 options->title(); ?> 11 |
博客已经运行了 12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /sidebar.php: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 51 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LightWhite 2 | ### 一个Typecho单栏主题 3 | 4 | 这个主题叫做LightWhite，还在继续完善中，如果喜欢请Star+Watch获取更新。（更新日志在最后） 5 | 6 | 目前还有一些小组件待加入，希望有大佬移植到WordPress/Hexo上让更多人能用到 7 | 8 | 预览站点：https://qwq.moe/ 9 | 10 | ### 主题特点 11 | 12 | - **响应式单栏主题** 反正响应式现在已经是标配了吧 13 | - **预览图** GitHub版本暂未更新 后面会跟着音乐组件一起加 14 | - **pjax** 标配，不多BB 15 | - **代码高亮** 还是标配...唉都是标配我写出来干嘛（凑字数 16 | - **友链样式模板** 反正我觉得做的还是可以的，用法直接参考 https://qwq.moe/links.html 的HTML结构就行 17 | - **ajax加载继续阅读** 少女折寿中...可以让访客无需离开文章列表页就读完文章，也可以评论，我觉得挺方便 18 | - **说说** 适合发表一些短文字，反正就跟空间/微博一样用呗 19 | 20 | 21 | ### 使用说明 22 | 23 | - 修改博客已运行时间 请到o.js:4把1419043380000改为你开始时间的毫秒数 http://tool.chinaz.com/Tools/unixtime.aspx 记得选毫秒 24 | - 请到img目录中修改你希望修改的顶部图片，按我原来的比例，分辨率建议不低于原图 25 | - 说说使用方法：创建一个新分类名称为“说说”，然后把文章添加到该分类中即可，模板会自动识别 26 | - 友链有单独样式 27 | 28 |
29 | 30 | 31 |
32 |
博客名字
33 |
博客描述
34 | 35 | 36 |
37 | 38 | ### 自定义字段说明 39 | 40 | | 字段名 | 字段值 | 输入示例 | 备注 | 41 | |--------------|----------------------|----------------------|--------------------------------------------------| 42 | | previewImage | 文章封面预览图的地址 | http://xxx.xxx/a.jpg | | 43 | | icon         | MDI图标类名         | mdi-xxxx             | **仅适用于独立页面** 参考 https://cdn.materialdesignicons.com/2.0.46/ | 44 | 45 | 以上自定义字段在v1.3版本中会自动显示在编辑/撰写文章页面中，按页面说明填写即可，上表仅供参考 46 | 47 | ### 注意事项 48 | 49 | - 请到js/o.js中修改或删除我的百度统计代码，并建议修改footer.php中的部分内容（我是说Powered By xxx那些 愿意支持我的请不要删掉版权） 50 | - 请到 设置-评论 中关闭\[检查评论来源页URL\]和\[开启反垃圾保护\] 否则首页的继续阅读无法正常评论 51 | - APlayer虽然引用了但是样式还没写好所以注释掉了 别盲目去除注释，不然很丑...到时候写好了会更新 52 | 53 | ### 引用和感谢 54 | 55 | - Pjax https://github.com/MoOx/pjax 非常强大的Pjax组件，无依赖，自动识别更改 56 | - highlight.js https://highlightjs.org/ 代码高亮，大家都懂，主题用的是vs2015 57 | - Animate.css https://daneden.github.io/animate.css/ 又是一个人尽皆知的css，挺好用的，虽然只用到了一个效果，后面release了主题会考虑压缩一下 58 | - Material Design Icons https://materialdesignicons.com/ 用MDI图标的感觉，比用官方好多了！用了MDI个个都好看，数量又多，我超喜欢用MDI的！ 59 | 60 | ### 真·更新日志 61 | 62 | #### v1.3.1 63 | 64 | - 修复了可能存在的说说日期问题 65 | - 稍微修改了说说样式（分割线） 66 | 67 | #### v1.3 68 | 69 | - 添加发表「说说」功能 70 | - 基本支持加密文章功能 71 | - 修复FireFox兼容（FF57测试通过），感谢胖次群的各位 72 | - 添加撰写新文章/修改文章时统计字数功能 73 | - 修复了评论的一些bug 74 | - 各种细节优化，CSS超过1000行了！ 75 | 76 | #### v1.2 77 | 78 | - 减轻了特效强度 79 | - 更好的封面预览图 80 | - 自定义字段设置现在可以自动显示在编辑/撰写文章页面中，无需手动输入 81 | - 添加了基本的分类目录查看 82 | - 修复pjax和浮动导航栏的一些bug 83 | - 修复了在首页展开评论时，无法回复别人的bug 84 | 85 | #### v1.1 86 | 87 | - 文章/评论ajax加载，页面pjax加载 88 | - 添加了许多图标 89 | - 添加浮动导航栏 90 | 91 | #### v1.0 92 | 93 | - 正式出炉，GitHub首次提交 94 | -------------------------------------------------------------------------------- /header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | <?php $this->archiveTitle(array( 10 | 'category' => _t('分类 %s 下的文章'), 11 | 'search' => _t('包含关键字 %s 的文章'), 12 | 'tag' => _t('标签 %s 下的文章'), 13 | 'author' => _t('%s 发布的文章') 14 | ), '', ' - '); ?><?php $this->options->title(); ?> 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 |
options->title(); ?>
34 |
options->description(); ?>
35 |
36 |
37 |
38 |
39 |  主页 40 | widget('Widget_Contents_Page_List')->to($pages); ?> 41 | next()): ?> 42 |
 · 
43 | fields->icon && $pages->fields->icon!==""){ ?> title(); ?> 44 | 45 |
46 |
47 |
48 |
49 |
50 |
51 |
-------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | need('header.php'); 7 | ?> 8 |
9 | next()): ?> 10 |
11 |
12 | 13 |
14 |
date->format('d'); ?>
15 |
date->format('F'),0,3); ?>
16 |
17 |
18 | 19 | title(); ?> 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 |
31 |
32 | fields->previewImage && $this->fields->previewImage!==""): ?> 33 | 34 | 35 |
36 |
37 |
38 |
title(); ?>
39 |
40 | author(); ?> 41 |   categories)) ?> 42 |
43 |
44 | 45 |
46 | 47 | 48 |
49 | 50 | title(); ?> 51 |
52 | author(); ?> 53 |   categories)) ?> 54 |
55 |
56 | 57 |
58 | content('继续阅读'); ?> 59 |
60 |
61 | need('comments.php'); ?> 62 |
63 | 64 |
65 |
66 | 67 |
68 | need('footer.php'); ?> -------------------------------------------------------------------------------- /post.php: -------------------------------------------------------------------------------- 1 | 7 | 8 | <?php $this->archiveTitle(array( 9 | 'category' => _t('分类 %s 下的文章'), 10 | 'search' => _t('包含关键字 %s 的文章'), 11 | 'tag' => _t('标签 %s 下的文章'), 12 | 'author' => _t('%s 发布的文章') 13 | ), '', ' - '); ?><?php $this->options->title(); ?> 14 | 15 | content('继续阅读'); 17 | $this->need('comments.php'); 18 | die(); 19 | } 20 | 21 | $this -> need('header.php'); 22 | ?> 23 |
24 | next()): ?> 25 |
26 |
27 |
28 |
date->format('d'); ?>
29 |
date->format('F'),0,3); ?>
30 |
31 | 32 |
33 | 34 | title(); ?> 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 |
47 | fields->previewImage && $this->fields->previewImage!==""): ?> 48 | 49 |
50 |
51 |
52 |
title(); ?>
53 |
54 | author(); ?> 55 |   categories)) ?> 56 |
57 |
58 | 59 |
60 | 61 | 62 |
63 | 64 | title(); ?> 65 |
66 | author(); ?> 67 |   categories)) ?> 68 |
69 |
70 | 71 |
72 | content('继续阅读'); ?> 73 |
74 |
75 | need('comments.php'); ?> 76 |
77 |
78 |
79 | 80 |
81 | need('footer.php'); ?> -------------------------------------------------------------------------------- /archive.php: -------------------------------------------------------------------------------- 1 | need('header.php'); 5 | ?> 6 |
7 |
archiveTitle(array( 8 | 'category' => _t('分类 %s 下的文章'), 9 | 'search' => _t('包含关键字 %s 的文章'), 10 | 'tag' => _t('标签 %s 下的文章'), 11 | 'author' => _t('%s 发布的文章') 12 | ), '', ''); ?>
13 | next()): ?> 14 |
15 |
16 |
17 |
date->format('d'); ?>
18 |
date->format('F'),0,3); ?>
19 |
20 | fields->previewImage)): ?> 21 |
22 | 23 | title(); ?> 24 |
25 | 26 |
27 | 28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 |
37 | fields->previewImage)): ?> 38 | 39 |
40 |
41 |
42 |
title(); ?>
43 |
44 | author(); ?> 45 |   '.$v['name'].'';},$this->categories) ?> 46 |
47 |
48 | 49 |
50 | 51 | 52 |
53 | 54 | title(); ?> 55 |
56 | author(); ?> 57 |   categories)) ?> 58 |
59 |
60 | 61 |
62 | content(); 64 | if(strpos($this->text, '')){ 65 | echo "

permalink}\" class=\"mdi\" title=\"{$this->title}\"> 继续阅读

"; 66 | }else{ 67 | echo "

permalink}\" class=\"mdi\" title=\"{$this->title}\"> 展开评论

"; 68 | } 69 | ?> 70 |
71 |
72 | 73 |
74 |
75 |
76 | 77 | pageNav('', ''); ?> 78 |
79 | need('footer.php'); ?> -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | need('header.php'); 17 | ?> 18 |
19 | next()): 22 | global $isShuoshuo; 23 | $isShuoshuo=false; 24 | array_map(function($v){global $isShuoshuo;if($v['name']=="说说"){$isShuoshuo=true;};},$this->categories); 25 | if($isShuoshuo===true){ 26 | $LastIsShuoshuo=true; 27 | ?> 28 |
29 |
30 | 35 | 36 |
37 |
38 |
39 | author->gravatar(50); ?> 40 |
41 |
42 |
43 | @author(); ?>：excerpt; ?> 44 |
45 |
46 |
47 |
48 |
49 | 50 |
"> 51 |
52 |
53 |
date->format('d'); ?>
54 |
date->format('F'),0,3); ?>
55 |
56 | fields->previewImage): ?> 57 |
58 | 59 | title(); ?> 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | 73 |
74 |
75 |
76 | fields->previewImage && $this->fields->previewImage!==""): ?> 77 | 78 | 79 |
80 |
81 |
82 |
title(); ?>
83 |
84 | author(); ?> 85 |   '.$v['name'].'';},$this->categories) ?> 86 |
87 |
88 | 89 |
90 | 91 | 92 |
93 | 94 | title(); ?> 95 |
96 | author(); ?> 97 |   categories)) ?> 98 |
99 |
100 | 101 |
102 | excerpt; 104 | if(strpos($this->text, '')){ 105 | echo "

permalink}\" class=\"mdi\" title=\"{$this->title}\"> 继续阅读

"; 106 | }else{ 107 | echo "

permalink}\" class=\"mdi\" title=\"{$this->title}\"> 展开评论

"; 108 | } 109 | ?> 110 |
111 |
112 | 113 |
114 |
115 |
116 | 117 | pageNav('', ''); ?> 118 |
119 | need('footer.php'); ?> -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | bottom = array('words', 'entry'); 3 | Typecho_Plugin::factory('admin/write-page.php')->bottom = array('words', 'entry'); 4 | class words { 5 | public static function entry() 6 | { 7 | ?> 8 | 11 | 14 | 32 | 36 | 37 | 40 | 45 | addItem($previewImage); 48 | if($_SERVER['SCRIPT_NAME']=="/admin/write-page.php"){ 49 | $icon = new Typecho_Widget_Helper_Form_Element_Text('icon', NULL, NULL, "图标", "在此填入MDI图标类名，将会显示在导航栏中。类名参考"); 50 | $layout->addItem($icon); 51 | } 52 | } -------------------------------------------------------------------------------- /comments.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 75 | authorId) { 78 | if ($comments->authorId == $comments->ownerId) { 79 | $commentClass .= ' comment-by-author'; 80 | } else { 81 | $commentClass .= ' comment-by-user'; 82 | } 83 | } 84 | 85 | $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent'; 86 | ?> 87 | 88 |
  • 98 |
    99 |
    100 |
    101 | gravatar('55', ''); ?> 102 |
    103 |
    104 |
    105 | author(); ?>date('Y-m-d H:i'); ?>theId)[1]; ?>);"> 106 |
    107 |
    108 | content(); ?> 109 |
    110 |
    111 |
    112 |
    113 | children) { ?> 114 |
    115 | threadedComments($options); ?> 116 |
    117 | 118 |
    • 119 | 120 | 121 |
    122 |

    123 | comments()->to($comments); ?> 124 | have()): ?> 125 | 126 | listComments(); ?> 127 | 128 | pageNav('« 前一页', '后一页 »'); ?> 129 | 130 | 131 | 132 | allow('comment')): ?> 133 |
    134 |
    发送失败 可能是您的发言太频繁或联系方式有误
    135 |
    136 |
    137 | user->hasLogin()): ?> 138 |

    user->screenName(); ?>. »

    139 | 140 | 141 | 142 | 143 | 144 | options->commentsRequireMail): ?> required /> 145 | options->commentsRequireURL): ?> required /> 146 | 147 |
    148 |

    149 | 150 |

    151 |

    152 | 153 |

    154 | cancelReply(); ?> 155 | 156 | 157 |

    158 | 159 |
    160 |
    161 | 162 |

    163 | 164 |
    165 | -------------------------------------------------------------------------------- /js/noframework.waypoints.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | Waypoints - 4.0.1 3 | Copyright © 2011-2016 Caleb Troughton 4 | Licensed under the MIT license. 5 | https://github.com/imakewebthings/waypoints/blob/master/licenses.txt 6 | */ 7 | !function(){"use strict";function t(n){if(!n)throw new Error("No options passed to Waypoint constructor");if(!n.element)throw new Error("No element option passed to Waypoint constructor");if(!n.handler)throw new Error("No handler option passed to Waypoint constructor");this.key="waypoint-"+e,this.options=t.Adapter.extend({},t.defaults,n),this.element=this.options.element,this.adapter=new t.Adapter(this.element),this.callback=n.handler,this.axis=this.options.horizontal?"horizontal":"vertical",this.enabled=this.options.enabled,this.triggerPoint=null,this.group=t.Group.findOrCreate({name:this.options.group,axis:this.axis}),this.context=t.Context.findOrCreateByElement(this.options.context),t.offsetAliases[this.options.offset]&&(this.options.offset=t.offsetAliases[this.options.offset]),this.group.add(this),this.context.add(this),i[this.key]=this,e+=1}var e=0,i={};t.prototype.queueTrigger=function(t){this.group.queueTrigger(this,t)},t.prototype.trigger=function(t){this.enabled&&this.callback&&this.callback.apply(this,t)},t.prototype.destroy=function(){this.context.remove(this),this.group.remove(this),delete i[this.key]},t.prototype.disable=function(){return this.enabled=!1,this},t.prototype.enable=function(){return this.context.refresh(),this.enabled=!0,this},t.prototype.next=function(){return this.group.next(this)},t.prototype.previous=function(){return this.group.previous(this)},t.invokeAll=function(t){var e=[];for(var n in i)e.push(i[n]);for(var o=0,r=e.length;r>o;o++)e[o][t]()},t.destroyAll=function(){t.invokeAll("destroy")},t.disableAll=function(){t.invokeAll("disable")},t.enableAll=function(){t.Context.refreshAll();for(var e in i)i[e].enabled=!0;return this},t.refreshAll=function(){t.Context.refreshAll()},t.viewportHeight=function(){return window.innerHeight||document.documentElement.clientHeight},t.viewportWidth=function(){return document.documentElement.clientWidth},t.adapters=[],t.defaults={context:window,continuous:!0,enabled:!0,group:"default",horizontal:!1,offset:0},t.offsetAliases={"bottom-in-view":function(){return this.context.innerHeight()-this.adapter.outerHeight()},"right-in-view":function(){return this.context.innerWidth()-this.adapter.outerWidth()}},window.Waypoint=t}(),function(){"use strict";function t(t){window.setTimeout(t,1e3/60)}function e(t){this.element=t,this.Adapter=o.Adapter,this.adapter=new this.Adapter(t),this.key="waypoint-context-"+i,this.didScroll=!1,this.didResize=!1,this.oldScroll={x:this.adapter.scrollLeft(),y:this.adapter.scrollTop()},this.waypoints={vertical:{},horizontal:{}},t.waypointContextKey=this.key,n[t.waypointContextKey]=this,i+=1,o.windowContext||(o.windowContext=!0,o.windowContext=new e(window)),this.createThrottledScrollHandler(),this.createThrottledResizeHandler()}var i=0,n={},o=window.Waypoint,r=window.onload;e.prototype.add=function(t){var e=t.options.horizontal?"horizontal":"vertical";this.waypoints[e][t.key]=t,this.refresh()},e.prototype.checkEmpty=function(){var t=this.Adapter.isEmptyObject(this.waypoints.horizontal),e=this.Adapter.isEmptyObject(this.waypoints.vertical),i=this.element==this.element.window;t&&e&&!i&&(this.adapter.off(".waypoints"),delete n[this.key])},e.prototype.createThrottledResizeHandler=function(){function t(){e.handleResize(),e.didResize=!1}var e=this;this.adapter.on("resize.waypoints",function(){e.didResize||(e.didResize=!0,o.requestAnimationFrame(t))})},e.prototype.createThrottledScrollHandler=function(){function t(){e.handleScroll(),e.didScroll=!1}var e=this;this.adapter.on("scroll.waypoints",function(){(!e.didScroll||o.isTouch)&&(e.didScroll=!0,o.requestAnimationFrame(t))})},e.prototype.handleResize=function(){o.Context.refreshAll()},e.prototype.handleScroll=function(){var t={},e={horizontal:{newScroll:this.adapter.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.adapter.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};for(var i in e){var n=e[i],o=n.newScroll>n.oldScroll,r=o?n.forward:n.backward;for(var s in this.waypoints[i]){var l=this.waypoints[i][s];if(null!==l.triggerPoint){var a=n.oldScroll=l.triggerPoint,p=a&&h,u=!a&&!h;(p||u)&&(l.queueTrigger(r),t[l.group.id]=l.group)}}}for(var d in t)t[d].flushTriggers();this.oldScroll={x:e.horizontal.newScroll,y:e.vertical.newScroll}},e.prototype.innerHeight=function(){return this.element==this.element.window?o.viewportHeight():this.adapter.innerHeight()},e.prototype.remove=function(t){delete this.waypoints[t.axis][t.key],this.checkEmpty()},e.prototype.innerWidth=function(){return this.element==this.element.window?o.viewportWidth():this.adapter.innerWidth()},e.prototype.destroy=function(){var t=[];for(var e in this.waypoints)for(var i in this.waypoints[e])t.push(this.waypoints[e][i]);for(var n=0,o=t.length;o>n;n++)t[n].destroy()},e.prototype.refresh=function(){var t,e=this.element==this.element.window,i=e?void 0:this.adapter.offset(),n={};this.handleScroll(),t={horizontal:{contextOffset:e?0:i.left,contextScroll:e?0:this.oldScroll.x,contextDimension:this.innerWidth(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:e?0:i.top,contextScroll:e?0:this.oldScroll.y,contextDimension:this.innerHeight(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};for(var r in t){var s=t[r];for(var l in this.waypoints[r]){var a,h,p,u,d,f=this.waypoints[r][l],c=f.options.offset,w=f.triggerPoint,y=0,g=null==w;f.element!==f.element.window&&(y=f.adapter.offset()[s.offsetProp]),"function"==typeof c?c=c.apply(f):"string"==typeof c&&(c=parseFloat(c),f.options.offset.indexOf("%")>-1&&(c=Math.ceil(s.contextDimension*c/100))),a=s.contextScroll-s.contextOffset,f.triggerPoint=Math.floor(y+a-c),h=w=s.oldScroll,u=h&&p,d=!h&&!p,!g&&u?(f.queueTrigger(s.backward),n[f.group.id]=f.group):!g&&d?(f.queueTrigger(s.forward),n[f.group.id]=f.group):g&&s.oldScroll>=f.triggerPoint&&(f.queueTrigger(s.forward),n[f.group.id]=f.group)}}return o.requestAnimationFrame(function(){for(var t in n)n[t].flushTriggers()}),this},e.findOrCreateByElement=function(t){return e.findByElement(t)||new e(t)},e.refreshAll=function(){for(var t in n)n[t].refresh()},e.findByElement=function(t){return n[t.waypointContextKey]},window.onload=function(){r&&r(),e.refreshAll()},o.requestAnimationFrame=function(e){var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||t;i.call(window,e)},o.Context=e}(),function(){"use strict";function t(t,e){return t.triggerPoint-e.triggerPoint}function e(t,e){return e.triggerPoint-t.triggerPoint}function i(t){this.name=t.name,this.axis=t.axis,this.id=this.name+"-"+this.axis,this.waypoints=[],this.clearTriggerQueues(),n[this.axis][this.name]=this}var n={vertical:{},horizontal:{}},o=window.Waypoint;i.prototype.add=function(t){this.waypoints.push(t)},i.prototype.clearTriggerQueues=function(){this.triggerQueues={up:[],down:[],left:[],right:[]}},i.prototype.flushTriggers=function(){for(var i in this.triggerQueues){var n=this.triggerQueues[i],o="up"===i||"left"===i;n.sort(o?e:t);for(var r=0,s=n.length;s>r;r+=1){var l=n[r];(l.options.continuous||r===n.length-1)&&l.trigger([i])}}this.clearTriggerQueues()},i.prototype.next=function(e){this.waypoints.sort(t);var i=o.Adapter.inArray(e,this.waypoints),n=i===this.waypoints.length-1;return n?null:this.waypoints[i+1]},i.prototype.previous=function(e){this.waypoints.sort(t);var i=o.Adapter.inArray(e,this.waypoints);return i?this.waypoints[i-1]:null},i.prototype.queueTrigger=function(t,e){this.triggerQueues[e].push(t)},i.prototype.remove=function(t){var e=o.Adapter.inArray(t,this.waypoints);e>-1&&this.waypoints.splice(e,1)},i.prototype.first=function(){return this.waypoints[0]},i.prototype.last=function(){return this.waypoints[this.waypoints.length-1]},i.findOrCreate=function(t){return n[t.axis][t.name]||new i(t)},o.Group=i}(),function(){"use strict";function t(t){return t===t.window}function e(e){return t(e)?e:e.defaultView}function i(t){this.element=t,this.handlers={}}var n=window.Waypoint;i.prototype.innerHeight=function(){var e=t(this.element);return e?this.element.innerHeight:this.element.clientHeight},i.prototype.innerWidth=function(){var e=t(this.element);return e?this.element.innerWidth:this.element.clientWidth},i.prototype.off=function(t,e){function i(t,e,i){for(var n=0,o=e.length-1;o>n;n++){var r=e[n];i&&i!==r||t.removeEventListener(r)}}var n=t.split("."),o=n[0],r=n[1],s=this.element;if(r&&this.handlers[r]&&o)i(s,this.handlers[r][o],e),this.handlers[r][o]=[];else if(o)for(var l in this.handlers)i(s,this.handlers[l][o]||[],e),this.handlers[l][o]=[];else if(r&&this.handlers[r]){for(var a in this.handlers[r])i(s,this.handlers[r][a],e);this.handlers[r]={}}},i.prototype.offset=function(){if(!this.element.ownerDocument)return null;var t=this.element.ownerDocument.documentElement,i=e(this.element.ownerDocument),n={top:0,left:0};return this.element.getBoundingClientRect&&(n=this.element.getBoundingClientRect()),{top:n.top+i.pageYOffset-t.clientTop,left:n.left+i.pageXOffset-t.clientLeft}},i.prototype.on=function(t,e){var i=t.split("."),n=i[0],o=i[1]||"__default",r=this.handlers[o]=this.handlers[o]||{},s=r[n]=r[n]||[];s.push(e),this.element.addEventListener(n,e)},i.prototype.outerHeight=function(e){var i,n=this.innerHeight();return e&&!t(this.element)&&(i=window.getComputedStyle(this.element),n+=parseInt(i.marginTop,10),n+=parseInt(i.marginBottom,10)),n},i.prototype.outerWidth=function(e){var i,n=this.innerWidth();return e&&!t(this.element)&&(i=window.getComputedStyle(this.element),n+=parseInt(i.marginLeft,10),n+=parseInt(i.marginRight,10)),n},i.prototype.scrollLeft=function(){var t=e(this.element);return t?t.pageXOffset:this.element.scrollLeft},i.prototype.scrollTop=function(){var t=e(this.element);return t?t.pageYOffset:this.element.scrollTop},i.extend=function(){function t(t,e){if("object"==typeof t&&"object"==typeof e)for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}for(var e=Array.prototype.slice.call(arguments),i=1,n=e.length;n>i;i++)t(e[0],e[i]);return e[0]},i.inArray=function(t,e,i){return null==e?-1:e.indexOf(t,i)},i.isEmptyObject=function(t){for(var e in t)return!1;return!0},n.adapters.push({name:"noframework",Adapter:i}),n.Adapter=i}(); -------------------------------------------------------------------------------- /css/w.less: -------------------------------------------------------------------------------- 1 | @bg-white-hover:#fafafa; 2 | @bg-white-active:#eaeaea; 3 | @fr-gray:#636363; 4 | *{ 5 | font-family: sans-serif; 6 | font-weight: 300; 7 | box-sizing: border-box; 8 | } 9 | a{ 10 | text-decoration: none; 11 | color:inherit; 12 | } 13 | li{ 14 | list-style: none; 15 | } 16 | html{ 17 | width:~'calc(100% + 13px)'; 18 | overflow-x:hidden; 19 | } 20 | body{ 21 | margin:0; 22 | background-color:white; 23 | } 24 | .cover-filter{ 25 | position: absolute; 26 | width:100vw; 27 | min-height:200px; 28 | height:40vh; 29 | background: linear-gradient(to bottom, transparent 99%, white); 30 | } 31 | .cover{ 32 | width:100vw; 33 | min-height:200px; 34 | height:40vh; 35 | background-size:cover; 36 | overflow:hidden; 37 | background-image:url(../img/cover.jpg); 38 | display: flex; 39 | flex-direction: column; 40 | justify-content: flex-end; 41 | .middle{ 42 | color:white; 43 | text-shadow: 1px 1px 10px #1d1d1d; 44 | .info{ 45 | padding-left:25%; 46 | display:flex; 47 | .avatar{ 48 | padding-right: 19px; 49 | border-right: 1.5px solid rgba(255, 255, 255, 0.75); 50 | img{ 51 | border-radius:50%; 52 | box-shadow:1px 1px 3px #505050; 53 | } 54 | } 55 | .texts{ 56 | margin-left:18px; 57 | .title{ 58 | font-size:55px; 59 | } 60 | .description{ 61 | margin-left:3px; 62 | font-size:20px; 63 | color:rgba(255,255,255,0.85); 64 | } 65 | } 66 | } 67 | .nav{ 68 | margin-bottom:1px; 69 | display:flex; 70 | margin-top:20px; 71 | padding-left:~'calc(25% + 130px)'; 72 | background-color:rgba(0,0,0,0.3); 73 | .dot{ 74 | padding:15px 0; 75 | } 76 | .item{ 77 | padding:15px; 78 | transition:background-color 0.5s; 79 | &:hover{ 80 | background-color:rgba(0,0,0,0.5); 81 | } 82 | } 83 | } 84 | } 85 | } 86 | .article-list{ 87 | padding:~'20px calc(25% + 64px)'; 88 | box-sizing:border-box; 89 | display:flex; 90 | flex-direction: column; 91 | .article{ 92 | margin-bottom:50px; 93 | display:flex; 94 | .tooltip{ 95 | padding-top:5px; 96 | 97 | .date{ 98 | display:flex; 99 | padding:3px 25px 3px 10px; 100 | flex-direction: column; 101 | transition:background-color 0.5s, transform 0.15s; 102 | background-color:@bg-white-hover; 103 | border-right:solid 1px @bg-white-hover; 104 | align-items: center; 105 | .day{ 106 | font-size:25px; 107 | } 108 | .month{ 109 | font-size:15px; 110 | } 111 | &:hover{ 112 | background-color:@bg-white-hover; 113 | } 114 | &:active{ 115 | background-color:@bg-white-active; 116 | transform:scale(0.95); 117 | } 118 | } 119 | .article-mobile-title{ 120 | display:none; 121 | } 122 | .font-control{ 123 | display:flex; 124 | padding:6px 25px 6px 10px; 125 | flex-direction: column; 126 | transition:background-color 0.5s, transform 0.15s; 127 | border-right:solid 1px @bg-white-hover; 128 | align-items: center; 129 | &:hover{ 130 | background-color:@bg-white-hover; 131 | } 132 | .mdi:before{ 133 | font-size:28px; 134 | } 135 | &:active{ 136 | background-color:@bg-white-active; 137 | transform:scale(0.95); 138 | } 139 | } 140 | .go-comment{ 141 | display:flex; 142 | padding:8px 25px 8px 10px; 143 | flex-direction: column; 144 | transition:background-color 0.5s, transform 0.15s; 145 | border-right:solid 1px @bg-white-hover; 146 | align-items: center; 147 | &:hover{ 148 | background-color:@bg-white-hover; 149 | } 150 | .mdi:before{ 151 | font-size:24px; 152 | } 153 | &:active{ 154 | background-color:@bg-white-active; 155 | transform:scale(0.95); 156 | } 157 | } 158 | .go-share{ 159 | display:flex; 160 | padding:8px 25px 8px 10px; 161 | flex-direction: column; 162 | transition:background-color 0.5s, transform 0.15s; 163 | border-right:solid 1px @bg-white-hover; 164 | align-items: center; 165 | &:hover{ 166 | background-color:@bg-white-hover; 167 | } 168 | .mdi:before{ 169 | font-size:24px; 170 | } 171 | &:active{ 172 | background-color:@bg-white-active; 173 | transform:scale(0.95); 174 | } 175 | } 176 | padding-right:5px; 177 | } 178 | .article-main{ 179 | width: ~'calc(100% - 57px)'; 180 | padding-left:10px; 181 | .article-title{ 182 | font-size:35px; 183 | padding:0 0 2px; 184 | border-bottom:solid 1px @bg-white-active; 185 | .article-meta{ 186 | margin-top:7px; 187 | font-size:14px; 188 | color:@fr-gray; 189 | } 190 | } 191 | .article-content{ 192 | line-height: 1.9em; 193 | word-break: break-all; 194 | font-size: 15px; 195 | *{ 196 | max-width:100%; 197 | } 198 | p>*{ 199 | max-width:100%; 200 | } 201 | p>code{ 202 | white-space: nowrap; 203 | padding: 2px 5px; 204 | font-size: 13px; 205 | background-color: #fffff0; 206 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 207 | } 208 | } 209 | .more{ 210 | display:flex; 211 | flex-direction: column; 212 | align-items: flex-end; 213 | a{ 214 | padding:3px 15px; 215 | font-size:16px; 216 | color:black; 217 | border-right:solid 1px #e3e3e3; 218 | transition:background-color 0.3s,color 0.3s,transform 0.15s,border-color 0.3s; 219 | &:hover{ 220 | background-color:black; 221 | color:white; 222 | border-right:solid 1px black; 223 | } 224 | &:active{ 225 | transform:scale(0.96); 226 | } 227 | } 228 | } 229 | 230 | } 231 | } 232 | } 233 | .footer{ 234 | display: flex; 235 | flex-direction: row; 236 | justify-content: space-between; 237 | .info-left{ 238 | padding: 5px 20px; 239 | border-left:1px solid #d1d1d1; 240 | } 241 | .info-right{ 242 | padding: 5px 20px; 243 | border-right:1px solid #d1d1d1; 244 | } 245 | } 246 | #comments{ 247 | margin-top:30px; 248 | border-top: solid 1px #eaeaea; 249 | transition:opacity 0.3s; 250 | .comment-author span .avatar{ 251 | border-radius:50%; 252 | margin-bottom: -10px; 253 | } 254 | .comment-container{ 255 | display:flex; 256 | } 257 | .comment-author-info{ 258 | margin-left:10px; 259 | width:100%; 260 | } 261 | .comment-author-name{ 262 | padding: 5px 8px 6px; 263 | font-size: 12px; 264 | color: white; 265 | background-color: black; 266 | } 267 | .comment-time{ 268 | margin-left:-5px; 269 | padding: 4px 8px 5px; 270 | font-size: 12px; 271 | border: 1px solid black; 272 | } 273 | .comment-reply{ 274 | padding: 4px 8px 5px; 275 | font-size: 12px; 276 | cursor: pointer; 277 | } 278 | .comment-content{ 279 | font-size:14px; 280 | word-break: break-all; 281 | } 282 | .comment-list{ 283 | padding:0; 284 | margin:0; 285 | } 286 | 287 | &>.comment-list>li{ 288 | list-style: none; 289 | padding:15px 0px 5px; 290 | } 291 | .comment-children li{ 292 | padding-top:10px; 293 | } 294 | 295 | &>.comment-list>li>.comment-children>.comment-list>li{ 296 | list-style: none; 297 | padding:15px 0 5px 40px; 298 | margin-left:30px; 299 | border-left: 1px solid #d9d9d9; 300 | } 301 | .comment-element > .respond{ 302 | background:transparent!important; 303 | color:inherit!important; 304 | & > *{ 305 | padding: 0; 306 | } 307 | & > form > *{ 308 | padding:0; 309 | } 310 | } 311 | .comment-info{ 312 | display:flex; 313 | input{ 314 | width:100%; 315 | border:none; 316 | -webkit-appearance:none; 317 | outline: none; 318 | font-size:14px; 319 | color:#6d6d6d; 320 | padding:5px; 321 | background-color:transparent; 322 | transition:background-color 0.5s,border-color 0.5s, color 0.5s; 323 | border-bottom: solid 1px rgba(212, 212, 212, 0.4); 324 | &:hover{ 325 | color:black; 326 | border-color: black; 327 | } 328 | &:focus{ 329 | color:#black; 330 | border-color: black; 331 | } 332 | } 333 | } 334 | .avatar{ 335 | border: 1px solid #eaeaea; 336 | border-radius:50%; 337 | } 338 | 339 | .textarea{ 340 | width:100%; 341 | resize: none; 342 | max-width:100%; 343 | padding: 20px; 344 | box-sizing: border-box; 345 | border:none; 346 | -webkit-appearance:none; 347 | padding:0; 348 | outline: none; 349 | font-size:14px; 350 | padding:5px; 351 | font-size:14px; 352 | padding:5px; 353 | background-color:transparent; 354 | color:#6d6d6d; 355 | transition:background-color 0.5s,border-color 0.5s, color 0.5s; 356 | border-bottom: solid 1px rgba(212, 212, 212, 0.4); 357 | &:hover{ 358 | border-color:black; 359 | color:black; 360 | } 361 | &:focus{ 362 | color:#d4d4d4; 363 | border-color: black; 364 | color:black; 365 | } 366 | } 367 | .respond{ 368 | color: black; 369 | font-size:14px; 370 | #mail{ 371 | margin:0 10px; 372 | } 373 | .warning_tip{ 374 | background-color:#bb0909; 375 | color:white; 376 | padding:5px 8px; 377 | opacity:0; 378 | height:0; 379 | transition:opacity 0.5s; 380 | text-align: center; 381 | } 382 | .submit{ 383 | padding:5px 10px; 384 | font-size:13px; 385 | color: black; 386 | border: none; 387 | outline: none; 388 | border-right:solid 1px #e3e3e3; 389 | cursor: pointer; 390 | transition:background-color 0.3s,color 0.3s,transform 0.15s,border-color 0.3s; 391 | &:hover{ 392 | background-color: rgba(0,0,0,0.1); 393 | background-color:black; 394 | color:white; 395 | border-right:solid 1px black; 396 | } 397 | &:active{ 398 | transform:scale(0.95); 399 | } 400 | } 401 | #cancel-comment-reply-link{ 402 | padding:5px 10px; 403 | font-size:13px; 404 | color: black; 405 | border: none; 406 | outline: none; 407 | border-left:solid 1px #e3e3e3; 408 | cursor: pointer; 409 | transition:background-color 0.3s,color 0.3s,transform 0.15s,border-color 0.3s; 410 | &:hover{ 411 | background-color: rgba(0,0,0,0.1); 412 | background-color:black; 413 | color:white; 414 | border-left:solid 1px black; 415 | } 416 | &:active{ 417 | transform:scale(0.95); 418 | } 419 | } 420 | } 421 | } 422 | 423 | .page-navigator{ 424 | display: flex; 425 | padding:0; 426 | justify-content: center; 427 | li{ 428 | display:inline-block; 429 | padding: 5px 10px; 430 | color: #2a2a2a; 431 | border-bottom: solid 1px #dfdfdf; 432 | transition:color 0.5s,border-color 0.5s,background-color 0.5s; 433 | &:hover{ 434 | color:black; 435 | border-color:black; 436 | } 437 | &:active{ 438 | color:white; 439 | background-color:black; 440 | border-color:black; 441 | } 442 | } 443 | .prev a{ 444 | font: normal normal normal 24px/1 "Material Design Icons"; 445 | font-size: 17px; 446 | } 447 | .next a{ 448 | font: normal normal normal 24px/1 "Material Design Icons"; 449 | font-size: 17px; 450 | } 451 | } 452 | .friends{ 453 | display:flex; 454 | flex-wrap: wrap; 455 | .a-friend{ 456 | display:flex; 457 | margin:10px 10px 0 0; 458 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 459 | padding:10px; 460 | transition:box-shadow 0.2s, transform 0.2s; 461 | &:hover{ 462 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 463 | } 464 | &:active{ 465 | transform:scale(0.97); 466 | } 467 | .blog-avatar{ 468 | background-color:white; 469 | border-radius: 50%; 470 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 471 | width:50px; 472 | height:50px; 473 | } 474 | .text-container{ 475 | margin-left:10px; 476 | .name{ 477 | font-size: 15px; 478 | } 479 | .description{ 480 | font-size:12.5px; 481 | } 482 | } 483 | } 484 | } 485 | code{ 486 | font-family:~' Consolas,"Open Sans", Helvetica, Tahoma, Arial, "Microsoft YaHei Light", STXihei, 华文细黑, SimSun, 宋体, Heiti, 黑体, sans-serif'; 487 | font-size: 14px; 488 | } 489 | ::-webkit-scrollbar { 490 | width: 13px; 491 | background-color: transparent; 492 | } 493 | ::-webkit-scrollbar-thumb { 494 | background-color: rgba(0, 0, 0, 0.4); 495 | transition:background-color 0.3s; 496 | } 497 | ::-webkit-scrollbar-thumb:hover { 498 | background-color: rgba(0, 0, 0, 0.55); 499 | } 500 | ::-webkit-scrollbar-thumb:active { 501 | background-color: rgba(0, 0, 0, 0.65); 502 | } 503 | @media(max-width:1919px){ 504 | .cover .middle .info { 505 | padding-left: 20%; 506 | } 507 | .cover .middle .nav{ 508 | padding-left:~'calc(20% + 130px)'; 509 | } 510 | .article-list{ 511 | padding:~'20px calc(20% + 64px)'; 512 | } 513 | } 514 | @media(max-width:1480px){ 515 | .cover .middle .info { 516 | padding-left: 15%; 517 | } 518 | .cover .middle .nav{ 519 | padding-left:~'calc(15% + 130px)'; 520 | } 521 | .article-list{ 522 | padding:~'20px calc(15% + 64px)'; 523 | } 524 | } 525 | @media(max-width:1300px){ 526 | .cover .middle .info { 527 | padding-left: 12%; 528 | } 529 | .cover .middle .nav{ 530 | padding-left:~'calc(12% + 130px)'; 531 | } 532 | .article-list{ 533 | padding:~'20px calc(12% + 64px)'; 534 | } 535 | } 536 | @media(max-width:1100px){ 537 | .cover .middle .info { 538 | padding-left: 8%; 539 | } 540 | .cover .middle .nav{ 541 | padding-left:~'calc(8% + 130px)'; 542 | } 543 | .article-list{ 544 | padding:~'20px calc(8% + 64px)'; 545 | } 546 | } 547 | @media(max-width:768px){ /* 从这里开始算移动端 */ 548 | html { 549 | width:initial; 550 | overflow-x: hidden; 551 | } 552 | .cover .middle .info { 553 | padding-left: 0; 554 | display: flex; 555 | flex-direction: column; 556 | align-items: center; 557 | } 558 | .cover .middle .nav{ 559 | padding-left:0; 560 | display: flex; 561 | margin-top:5px; 562 | justify-content: center; 563 | } 564 | .cover .middle .info .texts{ 565 | margin-left:0; 566 | display: flex; 567 | flex-direction: column; 568 | align-items: center; 569 | } 570 | .cover .middle .info .texts .title{ 571 | font-size:28px; 572 | } 573 | .cover .middle .info .texts .description{ 574 | font-size:16px; 575 | } 576 | .article-list{ 577 | padding:20px 0; 578 | } 579 | .cover .middle .info .avatar { 580 | padding-right: 0px; 581 | border-right:none; 582 | } 583 | .article-list .article{ 584 | flex-direction: column; 585 | align-items: center; 586 | } 587 | .article-list .article .tooltip{ 588 | display:flex; 589 | padding: 0 20px 0 40px; 590 | width:100%; 591 | } 592 | .article-list .article .article-main{ 593 | padding:0 10px; 594 | } 595 | .article-mobile-title{ 596 | display:flex!important; 597 | font-size: 25px; 598 | flex-direction: row; 599 | align-items: center; 600 | margin-left:10px; 601 | } 602 | .font-control,.go-comment,.go-share{ 603 | display:none!important; 604 | } 605 | .article-list .article .article-main .article-title a{ 606 | display:none; 607 | } 608 | .article-list .article .article-main .article-content{ 609 | font-size:14px; 610 | } 611 | .article-list .article .article-main .more a{ 612 | font-size:15px; 613 | } 614 | .footer{ 615 | font-size:14px; 616 | } 617 | #comments > .comment-list > li > .comment-children > .comment-list > li{ 618 | padding:0; 619 | border:none; 620 | margin:0; 621 | } 622 | .cover-filter{ 623 | height:260px!important; 624 | } 625 | .cover{ 626 | height:260px!important; 627 | } 628 | } -------------------------------------------------------------------------------- /css/w_bg.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme: LightWhite 3 | Author: Archeb 4 | HomePage: https://qwq.moe/ 5 | Project: https://github.com/Archeb/LightWhite 6 | Descr: A simple theme for typecho 7 | Date: 2017-12-09 8 | 9 | Thank you for using my theme~ 10 | */ 11 | 12 | * { 13 | font-family: "Microsoft YaHei Light"; 14 | font-weight: 300; 15 | box-sizing: border-box; 16 | } 17 | .mdi{ 18 | display: inline-block; 19 | font-family:"Material Design Icons","Microsoft YaHei Light"; 20 | font-size: inherit; 21 | text-rendering: auto; 22 | line-height: inherit; 23 | -webkit-font-smoothing: antialiased; 24 | } 25 | h1,h2,h3,h4,h5,h6,h7,b,strong{ 26 | font-weight: 400; 27 | } 28 | a { 29 | text-decoration: none; 30 | color: inherit; 31 | } 32 | li { 33 | list-style: none; 34 | } 35 | html { 36 | width: calc(100% + 13px); 37 | overflow-x: hidden; 38 | } 39 | body { 40 | margin: 0; 41 | background-color: white; 42 | } 43 | .cover-filter { 44 | display:none; 45 | position: absolute; 46 | width: 100vw; 47 | min-height: 200px; 48 | height: 40vh; 49 | background: linear-gradient(to bottom, transparent 99%, white); 50 | } 51 | .cover { 52 | width: 100vw; 53 | z-index:-1; 54 | height: 100vh; 55 | background-size: cover; 56 | position: fixed; 57 | overflow: hidden; 58 | background-image: url(https://qwq.moe/usr/themes/LightWhite/img/cover-big.jpg?v2); 59 | display: flex; 60 | flex-direction: column; 61 | justify-content: flex-end; 62 | } 63 | .cover .middle { 64 | display:none; 65 | color: white; 66 | text-shadow: 1px 1px 10px #1d1d1d; 67 | } 68 | .cover .middle .info { 69 | padding-left: 25%; 70 | display: flex; 71 | } 72 | .cover .middle .info .avatar { 73 | padding-right: 19px; 74 | border-right: 1.5px solid rgba(255, 255, 255, 0.75); 75 | } 76 | .cover .middle .info .avatar img { 77 | border-radius: 50%; 78 | box-shadow: 1px 1px 3px #505050; 79 | } 80 | .cover .middle .info .texts { 81 | margin-left: 18px; 82 | } 83 | .cover .middle .info .texts .title { 84 | font-size: 55px; 85 | } 86 | .cover .middle .info .texts .description { 87 | margin-left: 3px; 88 | font-size: 20px; 89 | color: rgba(255, 255, 255, 0.85); 90 | } 91 | .cover .middle .nav { 92 | margin-bottom: 1px; 93 | display: flex; 94 | margin-top: 20px; 95 | padding-left: calc(25% + 130px); 96 | background-color: rgba(0, 0, 0, 0.3); 97 | } 98 | .cover .middle .nav .dot { 99 | padding: 15px 0; 100 | } 101 | .cover .middle .nav .item { 102 | padding: 15px; 103 | transition: background-color 0.5s; 104 | } 105 | .cover .middle .nav .item:hover { 106 | background-color: rgba(0, 0, 0, 0.5); 107 | } 108 | .article-list { 109 | margin: 0 calc(25% + 64px); 110 | background-color:rgba(255,255,255,0.8); 111 | box-sizing: border-box; 112 | display: flex; 113 | flex-direction: column; 114 | } 115 | .article-list .singlepage{ 116 | margin-bottom:0!important; 117 | } 118 | .article-list .article { 119 | margin-bottom: 50px; 120 | display: flex; 121 | opacity:0; 122 | transition:opacity 0.5s; 123 | } 124 | .article-list .article .tooltip { 125 | padding-top: 5px; 126 | padding-right: 5px; 127 | } 128 | .article-list .article .tooltip .date { 129 | display: flex; 130 | padding: 3px 25px 3px 10px; 131 | flex-direction: column; 132 | transition: background-color 0.5s, transform 0.15s; 133 | background-color: #fafafa; 134 | border-right: solid 1px #fafafa; 135 | align-items: center; 136 | } 137 | .article-list .article .tooltip .date .day { 138 | font-size: 25px; 139 | } 140 | .article-list .article .tooltip .date .month { 141 | font-size: 15px; 142 | } 143 | .article-list .article .tooltip .date:hover { 144 | background-color: #fafafa; 145 | } 146 | .article-list .article .tooltip .date:active { 147 | background-color: #eaeaea; 148 | transform: scale(0.95); 149 | } 150 | .article-list .article .tooltip .article-mobile-title { 151 | display: none; 152 | } 153 | .article-list .article .tooltip .font-control { 154 | display: flex; 155 | padding: 6px 25px 6px 10px; 156 | flex-direction: column; 157 | transition: background-color 0.5s, transform 0.15s; 158 | border-right: solid 1px #fafafa; 159 | align-items: center; 160 | } 161 | .article-list .article .tooltip .font-control:hover { 162 | background-color: #fafafa; 163 | } 164 | .article-list .article .tooltip .font-control .mdi:before { 165 | font-size: 28px; 166 | } 167 | .article-list .article .tooltip .font-control:active { 168 | background-color: #eaeaea; 169 | transform: scale(0.95); 170 | } 171 | .article-list .article .tooltip .go-comment { 172 | display: flex; 173 | padding: 8px 25px 8px 10px; 174 | flex-direction: column; 175 | transition: background-color 0.5s, transform 0.15s; 176 | border-right: solid 1px #fafafa; 177 | align-items: center; 178 | } 179 | .article-list .article .tooltip .go-comment:hover { 180 | background-color: #fafafa; 181 | } 182 | .article-list .article .tooltip .go-comment .mdi:before { 183 | font-size: 24px; 184 | } 185 | .article-list .article .tooltip .go-comment:active { 186 | background-color: #eaeaea; 187 | transform: scale(0.95); 188 | } 189 | .article-list .article .tooltip .go-share { 190 | display: flex; 191 | padding: 8px 25px 8px 10px; 192 | flex-direction: column; 193 | transition: background-color 0.5s, transform 0.15s; 194 | border-right: solid 1px #fafafa; 195 | align-items: center; 196 | } 197 | .article-list .article .tooltip .go-share:hover { 198 | background-color: #fafafa; 199 | } 200 | .article-list .article .tooltip .go-share .mdi:before { 201 | font-size: 24px; 202 | } 203 | .article-list .article .tooltip .go-share:active { 204 | background-color: #eaeaea; 205 | transform: scale(0.95); 206 | } 207 | .article-list .article .article-main { 208 | width: calc(100% - 57px); 209 | padding-left: 10px; 210 | } 211 | .article-list .article .article-main .preview-image-container{ 212 | margin-top:5px; 213 | overflow:hidden; 214 | } 215 | .article-list .article .article-main .preview-image-container .preview-image{ 216 | background-size:cover; 217 | z-index: 9; 218 | transition:transform 0.25s; 219 | transform: scale(1.05); 220 | height:300px; 221 | } 222 | .article-list .article .article-main .preview-image-container .preview-image-title{ 223 | color: #3a3a3a; 224 | z-index: 10; 225 | padding: 10px; 226 | background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); 227 | font-size: 35px; 228 | margin-top: -100px; 229 | transform: scale(1); 230 | } 231 | .article-list .article .article-main .preview-image-container .preview-image-title-content{ 232 | white-space: nowrap; 233 | overflow: hidden; 234 | text-overflow: ellipsis; 235 | color:white; 236 | text-shadow: 1px 1px 10px #696969; 237 | } 238 | 239 | .article-list .article .article-main .preview-image-container .preview-image:active{ 240 | transform: scale(1); 241 | } 242 | .article-list .article .article-main .preview-image-container .preview-image-meta{ 243 | margin-top:10px; 244 | color: white; 245 | z-index: 10; 246 | font-size: 14px; 247 | transform: scale(1); 248 | } 249 | .article-list .article .article-main .preview-image-container .preview-image:meta{ 250 | transform: scale(1); 251 | } 252 | .article-list .article .article-main .article-title { 253 | font-size: 35px; 254 | padding: 0 0 2px; 255 | border-bottom: solid 1px #eaeaea; 256 | } 257 | 258 | .article-list .article .article-main .article-title .article-meta { 259 | margin-top: 7px; 260 | font-size: 14px; 261 | color: #636363; 262 | } 263 | .article-list .article .article-main .article-content { 264 | line-height: 1.9em; 265 | word-break: break-all; 266 | font-size: 15px; 267 | } 268 | 269 | .article-list .article .article-main .article-content li { 270 | list-style:initial; 271 | } 272 | .article-list .article .article-main .article-content a { 273 | color:#8a2be2; 274 | } 275 | .article-list .article .article-main .article-content p > * { 276 | max-width: 100%; 277 | } 278 | .article-list .article .article-main .article-content p > code { 279 | white-space: nowrap; 280 | padding: 2px 5px; 281 | font-size: 13px; 282 | background-color: #fffff0; 283 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 284 | } 285 | .article-list .article .article-main .more { 286 | display: flex; 287 | flex-direction: column; 288 | align-items: flex-end; 289 | } 290 | .article-list .article .article-main .more a { 291 | padding: 3px 15px; 292 | font-size: 16px; 293 | color: black!important; 294 | border-right: solid 1px #e3e3e3; 295 | transition: background-color 0.3s, color 0.3s, transform 0.15s, border-color 0.3s; 296 | } 297 | .article-list .article .article-main .more a:hover { 298 | background-color: black; 299 | color: white!important; 300 | border-right: solid 1px black; 301 | } 302 | .article-list .article .article-main .more a:active { 303 | transform: scale(0.96); 304 | } 305 | .footer { 306 | display: flex; 307 | flex-direction: row; 308 | justify-content: space-between; 309 | opacity:0; 310 | transition:opacity 0.5s; 311 | } 312 | .footer .info-left { 313 | padding: 5px 20px; 314 | border-left: 1px solid #d1d1d1; 315 | } 316 | .footer .info-right { 317 | padding: 5px 20px; 318 | border-right: 1px solid #d1d1d1; 319 | } 320 | #comments { 321 | margin-top: 30px; 322 | transition: opacity 0.3s; 323 | } 324 | #comments #comments-head{ 325 | border-bottom: solid 1px #eaeaea; 326 | } 327 | #comments a{ 328 | color:inherit; 329 | } 330 | #comments .comment-author span .avatar { 331 | border-radius: 50%; 332 | margin-bottom: -10px; 333 | } 334 | #comments .comment-container { 335 | display: flex; 336 | } 337 | #comments .comment-author-info { 338 | margin-left: 10px; 339 | width: 100%; 340 | } 341 | #comments .comment-author-name { 342 | padding: 5px 8px 6px; 343 | font-size: 12px; 344 | color: white; 345 | background-color: black; 346 | } 347 | #comments .comment-time { 348 | padding: 4px 8px 5px; 349 | font-size: 12px; 350 | border: 1px solid black; 351 | } 352 | #comments .comment-reply { 353 | padding: 4px 8px 5px; 354 | font-size: 12px; 355 | cursor: pointer; 356 | } 357 | #comments .comment-content { 358 | font-size: 14px; 359 | word-break: break-all; 360 | } 361 | #comments .comment-list { 362 | padding: 0; 363 | margin: 0; 364 | } 365 | #comments li{ 366 | list-style:none; 367 | } 368 | #comments > .comment-list > li { 369 | list-style: none; 370 | padding: 15px 0px 5px; 371 | } 372 | #comments .comment-children li { 373 | padding-top: 10px; 374 | } 375 | #comments > .comment-list > li > .comment-children > .comment-list > li { 376 | list-style: none; 377 | padding: 15px 0 5px 40px; 378 | margin-left: 30px; 379 | border-left: 1px solid #d9d9d9; 380 | } 381 | #comments .comment-element > .respond { 382 | background: transparent!important; 383 | color: inherit!important; 384 | } 385 | #comments .comment-element > .respond > * { 386 | padding: 0; 387 | } 388 | #comments .comment-element > .respond > form > * { 389 | padding: 0; 390 | } 391 | #comments .comment-info { 392 | display: flex; 393 | } 394 | #comments .comment-info .mdi:before { 395 | border-bottom: solid 1px rgba(212, 212, 212, 0.4); 396 | 397 | padding: 0 8px; 398 | height: calc(100% - 1px); 399 | align-items: center; 400 | display: flex; 401 | } 402 | #comments .comment-info input { 403 | width: 100%; 404 | border: none; 405 | 406 | -webkit-appearance: none; 407 | outline: none; 408 | font-size: 14px; 409 | color: #6d6d6d; 410 | padding: 5px; 411 | background-color: transparent; 412 | transition: background-color 0.5s, border-color 0.5s, color 0.5s; 413 | border-bottom: solid 1px rgba(212, 212, 212, 0.4); 414 | } 415 | #comments .comment-info input:hover { 416 | color: black; 417 | border-color: black; 418 | } 419 | #comments .comment-info input:focus { 420 | color: black; 421 | border-color: black; 422 | } 423 | #comments .avatar { 424 | border: 1px solid #eaeaea; 425 | border-radius: 50%; 426 | } 427 | #comments .textarea { 428 | width: 100%; 429 | resize: none; 430 | max-width: 100%; 431 | padding: 20px; 432 | box-sizing: border-box; 433 | border: none; 434 | -webkit-appearance: none; 435 | padding: 0; 436 | outline: none; 437 | font-size: 14px; 438 | padding: 5px; 439 | background-color: transparent; 440 | color: #6d6d6d; 441 | transition: background-color 0.5s, border-color 0.5s, color 0.5s; 442 | border-bottom: solid 1px rgba(212, 212, 212, 0.4); 443 | background-image:url(../img/kongou.png?v3); 444 | background-repeat: no-repeat; 445 | background-position: right bottom; 446 | } 447 | #comments .textarea:hover { 448 | border-color: black; 449 | color: black; 450 | } 451 | #comments .textarea:focus { 452 | border-color: black; 453 | color: black; 454 | } 455 | #comments .respond { 456 | color: black; 457 | font-size: 14px; 458 | } 459 | #comments .respond .warning_tip { 460 | background-color: #bb0909; 461 | color: white; 462 | padding: 5px 8px; 463 | opacity: 0; 464 | height: 0; 465 | transition: opacity 0.5s; 466 | text-align: center; 467 | } 468 | #comments .respond .submit { 469 | padding: 5px 10px; 470 | font-size: 13px; 471 | color: black; 472 | border: none; 473 | outline: none; 474 | border-right: solid 1px #e3e3e3; 475 | cursor: pointer; 476 | transition: background-color 0.3s, color 0.3s, transform 0.15s, border-color 0.3s; 477 | } 478 | #comments .respond .submit:hover { 479 | background-color: rgba(0, 0, 0, 0.1); 480 | background-color: black; 481 | color: white; 482 | border-right: solid 1px black; 483 | } 484 | #comments .respond .submit:active { 485 | transform: scale(0.95); 486 | } 487 | #comments .respond #cancel-comment-reply-link { 488 | padding: 5px 10px; 489 | font-size: 13px; 490 | color: black; 491 | border: none; 492 | outline: none; 493 | border-left: solid 1px #e3e3e3; 494 | cursor: pointer; 495 | transition: background-color 0.3s, color 0.3s, transform 0.15s, border-color 0.3s; 496 | } 497 | #comments .respond #cancel-comment-reply-link:hover { 498 | background-color: rgba(0, 0, 0, 0.1); 499 | background-color: black; 500 | color: white; 501 | border-left: solid 1px black; 502 | } 503 | #comments .respond #cancel-comment-reply-link:active { 504 | transform: scale(0.95); 505 | } 506 | .page-navigator { 507 | display: flex; 508 | padding: 0; 509 | justify-content: center; 510 | opacity:0; 511 | transition:opacity 0.5s; 512 | } 513 | .page-navigator li { 514 | display: inline-block; 515 | } 516 | .page-navigator a { 517 | padding: 5px 10px; 518 | color: #2a2a2a; 519 | border-bottom: solid 1px #dfdfdf; 520 | transition: color 0.5s, border-color 0.5s, background-color 0.5s; 521 | } 522 | .page-navigator li span { 523 | padding: 5px 10px; 524 | color: #2a2a2a; 525 | border-bottom: solid 1px #dfdfdf; 526 | transition: color 0.5s, border-color 0.5s, background-color 0.5s; 527 | } 528 | .page-navigator .current a{ 529 | color: white; 530 | background-color: black; 531 | border-color: black; 532 | } 533 | .page-navigator .current:hover{ 534 | color: white; 535 | } 536 | .page-navigator a:hover { 537 | color: black; 538 | border-color: black; 539 | } 540 | .page-navigator a:active { 541 | color: white; 542 | background-color: black; 543 | border-color: black; 544 | } 545 | .page-navigator .prev a { 546 | font: normal normal normal 24px/1 "Material Design Icons"; 547 | font-size: 21px; 548 | } 549 | .page-navigator .next a { 550 | font: normal normal normal 24px/1 "Material Design Icons"; 551 | font-size: 21px; 552 | } 553 | .friends { 554 | display: flex; 555 | flex-wrap: wrap; 556 | } 557 | .friends .a-friend { 558 | display: flex; 559 | margin: 10px 10px 0 0; 560 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 561 | padding: 10px; 562 | transition: box-shadow 0.2s, transform 0.2s; 563 | } 564 | .friends .a-friend:hover { 565 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 566 | } 567 | .friends .a-friend:active { 568 | transform: scale(0.97); 569 | } 570 | .friends .a-friend .blog-avatar { 571 | background-color: white; 572 | border-radius: 50%; 573 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 574 | width: 50px; 575 | height: 50px; 576 | } 577 | .friends .a-friend .text-container { 578 | margin-left: 10px; 579 | } 580 | .friends .a-friend .text-container .name { 581 | font-size: 15px; 582 | } 583 | .friends .a-friend .text-container .description { 584 | font-size: 12.5px; 585 | } 586 | code { 587 | font-family: Consolas,"Open Sans", Helvetica, Tahoma, Arial, "Microsoft YaHei Light", STXihei, 华文细黑, SimSun, 宋体, Heiti, 黑体, sans-serif; 588 | font-size: 14px; 589 | } 590 | ::-webkit-scrollbar { 591 | width: 13px; 592 | background-color: transparent; 593 | } 594 | ::-webkit-scrollbar-thumb { 595 | background-color: rgba(0, 0, 0, 0.4); 596 | transition: background-color 0.3s; 597 | } 598 | ::-webkit-scrollbar-thumb:hover { 599 | background-color: rgba(0, 0, 0, 0.55); 600 | } 601 | ::-webkit-scrollbar-thumb:active { 602 | background-color: rgba(0, 0, 0, 0.65); 603 | } 604 | @media (max-width: 1919px) { 605 | .cover .middle .info { 606 | padding-left: 20%; 607 | } 608 | .cover .middle .nav { 609 | padding-left: calc(20% + 130px); 610 | } 611 | .article-list { 612 | margin: 0 calc(20% + 64px); 613 | } 614 | } 615 | @media (max-width: 1480px) { 616 | .cover .middle .info { 617 | padding-left: 15%; 618 | } 619 | .cover .middle .nav { 620 | padding-left: calc(15% + 130px); 621 | } 622 | .article-list { 623 | margin: 0 calc(15% + 64px); 624 | } 625 | } 626 | @media (max-width: 1300px) { 627 | .cover .middle .info { 628 | padding-left: 12%; 629 | } 630 | .cover .middle .nav { 631 | padding-left: calc(12% + 130px); 632 | } 633 | .article-list { 634 | margin: 0 calc(12% + 64px); 635 | } 636 | } 637 | @media (max-width: 1100px) { 638 | .cover .middle .info { 639 | padding-left: 8%; 640 | } 641 | .cover .middle .nav { 642 | padding-left: calc(8% + 130px); 643 | } 644 | .article-list { 645 | margin: 0 calc(8% + 64px); 646 | } 647 | } 648 | @media (max-width: 768px) { 649 | /* 从这里开始算移动端 */ 650 | html { 651 | width: initial; 652 | overflow-x: hidden; 653 | } 654 | .cover .middle .info { 655 | padding-left: 0; 656 | display: flex; 657 | flex-direction: column; 658 | align-items: center; 659 | } 660 | .cover .middle .nav { 661 | padding-left: 0; 662 | display: flex; 663 | margin-top: 5px; 664 | justify-content: center; 665 | } 666 | .cover .middle .info .texts { 667 | margin-left: 0; 668 | display: flex; 669 | flex-direction: column; 670 | align-items: center; 671 | } 672 | .cover .middle .info .texts .title { 673 | font-size: 28px; 674 | } 675 | .cover .middle .info .texts .description { 676 | font-size: 16px; 677 | } 678 | .article-list { 679 | margin: 20px 0; 680 | } 681 | .cover .middle .info .avatar { 682 | padding-right: 0px; 683 | border-right: none; 684 | } 685 | .article-list .article { 686 | flex-direction: column; 687 | align-items: center; 688 | } 689 | .article-list .article .tooltip { 690 | display: flex; 691 | padding: 0 20px 0 40px; 692 | width: 100%; 693 | } 694 | .article-list .article .article-main { 695 | padding: 0 10px; 696 | } 697 | .article-mobile-title { 698 | display: flex!important; 699 | font-size: 25px; 700 | flex-direction: row; 701 | align-items: center; 702 | margin-left: 10px; 703 | } 704 | .font-control, 705 | .go-comment, 706 | .go-share { 707 | display: none!important; 708 | } 709 | .article-list .article .article-main .article-title a { 710 | display: none; 711 | } 712 | .article-list .article .article-main .article-content { 713 | font-size: 14px; 714 | } 715 | .article-list .article .article-main .more a { 716 | font-size: 15px; 717 | } 718 | .footer { 719 | font-size: 14px; 720 | } 721 | #comments > .comment-list > li > .comment-children > .comment-list > li { 722 | padding: 0; 723 | border: none; 724 | margin: 0; 725 | } 726 | .cover-filter { 727 | height: 260px!important; 728 | } 729 | .cover { 730 | height: 260px!important; 731 | } 732 | } -------------------------------------------------------------------------------- /js/o.js: -------------------------------------------------------------------------------- 1 | var navOffsetTop; 2 | setInterval(function() { 3 | var date3= new Date((new Date().getTime()) - 1419043380000); 4 | var days=Math.floor(date3/(24*3600*1000)) 5 | var leave1=date3%(24*3600*1000) 6 | var hours=Math.floor(leave1/(3600*1000)) 7 | var leave2=leave1%(3600*1000) 8 | var minutes=Math.floor(leave2/(60*1000)) 9 | var leave3=leave2%(60*1000) 10 | var seconds=Math.round(leave3/1000) 11 | document.querySelector("#run-time").innerHTML=(days+"天"+hours+"小时"+minutes+"分钟"+seconds+"秒") 12 | } , 1000); 13 | 14 | document.addEventListener('DOMContentLoaded',function(){ 15 | checkElementFade(); 16 | var _hmt = _hmt || []; 17 | (function() { 18 | var hm = document.createElement("script"); 19 | hm.src = "https://hm.baidu.com/hm.js?136ddc5fd444ca501e348fd4f3c3dae8"; 20 | var s = document.getElementsByTagName("script")[0]; 21 | s.parentNode.insertBefore(hm, s); 22 | })(); 23 | pjax = new Pjax({ elements:["a[pjax]",".page-navigator a"],selectors: [".article-list"],scrollTo:true}); 24 | initProtectArticle(); 25 | initReadMore(); 26 | initComment(); 27 | /* var ap = new APlayer({ 28 | element: document.getElementById('aplayer'), 29 | narrow: false, 30 | autoplay: false, 31 | showlrc: 0, 32 | mutex: true, 33 | theme: '#FFFFFF', 34 | mode: 'order', 35 | preload: 'metadata', 36 | listmaxheight: '513px', 37 | music: [ 38 | { 39 | title: '回レ！雪月花', 40 | author: '原田ひとみ / 茅野愛衣 / 小倉唯', 41 | url: 'https://api.imjad.cn/cloudmusic/?type=song&id=28018274&br=128000&raw=1', 42 | pic: 'https://p1.music.126.net/UrbsnGXM8_cc3nLd3Ru3zw==/18541064580889962.jpg' 43 | }, 44 | { 45 | title: '恋爱サーキュレーション', 46 | author: '花澤香菜', 47 | url: 'https://api.imjad.cn/cloudmusic/?type=song&id=579954&br=128000&raw=1', 48 | pic: 'https://p1.music.126.net/hWrYLdhzF4waj4WL1dFPmg==/642114790633458.jpg' 49 | }, 50 | ] 51 | }); 52 | document.querySelector('.aplayer-list').classList.add('aplayer-list-hide'); */ 53 | 54 | document.addEventListener('pjax:success',function(){ 55 | checkElementFade(); 56 | initProtectArticle(); 57 | initComment(); 58 | initReadMore(); 59 | var codeBlocks=document.querySelectorAll('pre code'); 60 | [].forEach.call(codeBlocks, function(e){ 61 | 　　hljs.highlightBlock(e); 62 | }); 63 | }); 64 | 65 | var _hmt = _hmt || []; 66 | (function() { 67 | var hm = document.createElement("script"); 68 | hm.src = "https://hm.baidu.com/hm.js?136ddc5fd444ca501e348fd4f3c3dae8"; 69 | var s = document.getElementsByTagName("script")[0]; 70 | s.parentNode.insertBefore(hm, s); 71 | })(); 72 | 73 | var codeBlocks=document.querySelectorAll('pre code'); 74 | [].forEach.call(codeBlocks, function(e){ 75 | 　　hljs.highlightBlock(e); 76 | }); 77 | 78 | }); 79 | 80 | document.addEventListener('scroll',checkElementFade); 81 | setTimeout(function() {document.addEventListener('scroll',checkTopbarShow);}, 1500); 82 | function initComment(){ 83 | var sendCommentElement=document.querySelector('#submit-comment'); 84 | if(sendCommentElement){ 85 | sendCommentElement.addEventListener('click',function(e){ 86 | //主题支持到IE11 所以没用fetch 87 | document.querySelector('.warning_tip').style.height="0"; 88 | document.querySelector('.warning_tip').style.opacity="0"; 89 | e.target.innerHTML=" 提交中"; 90 | var form = document.querySelector('form'); 91 | var data = new FormData(form); 92 | var req = new XMLHttpRequest(); 93 | req.open('POST', form.action, true); 94 | req.send(data); 95 | req.onreadystatechange = function(){ 96 | if(req.readyState == 4){ 97 | if(req.status == 200){ 98 | if(req.responseText.indexOf("Error")!=-1){ 99 | document.querySelector('.warning_tip').style.height="auto"; 100 | document.querySelector('.warning_tip').style.opacity="1"; 101 | document.querySelector('.warning_tip').style.backgroundColor="#bb0909"; 102 | document.querySelector('.warning_tip').innerHTML="发送失败 可能是您的发言太频繁或联系方式有误"; 103 | document.querySelector('.submit').innerHTML=" 提交评论"; 104 | }else{ 105 | document.querySelector('.warning_tip').style.height="auto"; 106 | document.querySelector('.warning_tip').style.opacity="1"; 107 | document.querySelector('.warning_tip').style.backgroundColor="green"; 108 | document.querySelector('.warning_tip').innerHTML="发送成功"; 109 | document.querySelector('.submit').innerHTML=" 提交评论"; 110 | var e = document.createElement('li'); 111 | e.innerHTML = ''; 112 | e.className="comment-body comment-parent comment-odd"; 113 | document.querySelector('.comment-list').append(e); 114 | } 115 | }else{ 116 | 117 | } 118 | } 119 | } 120 | }); 121 | } 122 | } 123 | function initReadMore(){ 124 | var readMoreLink=document.querySelectorAll('.more a'); 125 | [].forEach.call(readMoreLink, function(e){ 126 | e.addEventListener('click',function(e){ 127 | e.preventDefault(); 128 | var stxt=e.target.parentNode.parentNode; 129 | e.target.text=" 少女折寿中..."; 130 | if(e.target.protectedArticle==true){ 131 | var form = e.target.parentNode.parentNode.querySelector('form.protected'); 132 | var data = new FormData(form); 133 | var req = new XMLHttpRequest(); 134 | req.open('POST', form.action, true); 135 | req.send(data); 136 | req.onreadystatechange = function(){ 137 | if(req.readyState == 4 && req.status == 200){ 138 | if(req.responseText.indexOf("错误")==-1){ 139 | loadMoreArticle(stxt,e); 140 | }else{ 141 | alert('密码错误！'); 142 | e.target.text=" 解锁文章"; 143 | return; 144 | } 145 | } 146 | } 147 | }else{ 148 | loadMoreArticle(stxt,e); 149 | } 150 | 151 | 　　}) 152 | }); 153 | } 154 | function loadMoreArticle(stxt,e){ 155 | var req = new XMLHttpRequest(); 156 | req.open('GET',e.target.href + "?ajaxload", true); 157 | req.send(); 158 | req.onreadystatechange = function(){ 159 | if(req.readyState == 4){ 160 | if(req.status == 200){ 161 | stxt.innerHTML=req.responseText; 162 | loadCommentReply(stxt.querySelector('.respond')); 163 | var codeBlocks=stxt.querySelectorAll('pre code'); 164 | [].forEach.call(codeBlocks, function(e){ 165 | 　　hljs.highlightBlock(e); 166 | }); 167 | var sendCommentElement=stxt.querySelector('#submit-comment'); 168 | if(sendCommentElement){ 169 | sendCommentElement.addEventListener('click',function(e){ 170 | //主题支持到IE11 所以没用fetch 171 | stxt.querySelector('.warning_tip').style.height="0"; 172 | stxt.querySelector('.warning_tip').style.opacity="0"; 173 | stxt.querySelector('.submit').innerHTML=" 提交中"; 174 | var form = stxt.querySelector('form'); 175 | var data = new FormData(form); 176 | var req = new XMLHttpRequest(); 177 | req.open('POST', form.action, true); 178 | req.send(data); 179 | req.onreadystatechange = function(){ 180 | if(req.readyState == 4){ 181 | if(req.status == 200){ 182 | if(req.responseText.indexOf("Error")!=-1){ 183 | stxt.querySelector('.warning_tip').style.height="auto"; 184 | stxt.querySelector('.warning_tip').style.opacity="1"; 185 | stxt.querySelector('.warning_tip').style.backgroundColor="#bb0909"; 186 | stxt.querySelector('.warning_tip').innerHTML="发送失败 可能是您的发言太频繁或联系方式有误"; 187 | stxt.querySelector('.submit').innerHTML=" 提交评论"; 188 | }else{ 189 | stxt.querySelector('.warning_tip').style.height="auto"; 190 | stxt.querySelector('.warning_tip').style.opacity="1"; 191 | stxt.querySelector('.warning_tip').style.backgroundColor="green"; 192 | stxt.querySelector('.warning_tip').innerHTML="发送成功"; 193 | stxt.querySelector('.submit').innerHTML=" 提交评论"; 194 | var e = stxt.createElement('li'); 195 | e.innerHTML = ''; 196 | e.className="comment-body comment-parent comment-odd"; 197 | stxt.querySelector('.comment-list').append(e); 198 | } 199 | }else{ 200 | } 201 | } 202 | } 203 | }); 204 | } 205 | }else{ 206 | } 207 | } 208 | } 209 | } 210 | function checkElementFade(){ 211 | var articleElements=document.querySelectorAll('.article,.page-navigator,.footer,.shuoshuo'); 212 | [].forEach.call(articleElements, function(e){ 213 | if(e.getBoundingClientRect().top < window.innerHeight){ 214 | e.style.opacity="1"; 215 | e.classList.add("animated"); 216 | e.classList.add("fadeInUp"); 217 | }; 218 | }); 219 | } 220 | function checkTopbarShow(e){ 221 | var navElement = document.querySelector('.nav'); 222 | 223 | if(!navOffsetTop){navOffsetTop=navElement.offsetParent.offsetTop+navElement.offsetTop} 224 | if (window.scrollY >= navOffsetTop){ 225 | navElement.classList.add('FloatNav'); 226 | document.querySelector('.middle').className="middle"; 227 | document.querySelector('.info').style.paddingBottom="51px"; 228 | }else{ 229 | navElement.classList.remove('FloatNav'); 230 | document.querySelector('.info').style.paddingBottom="0"; 231 | } 232 | } 233 | function biggerFont(targetid){ 234 | var target=document.querySelector('#' + targetid); 235 | target.style.fontSize= (target.style.fontSize=='') ? '15px' : target.style.fontSize; 236 | target.style.fontSize=(parseInt(target.style.fontSize)+1) + "px"; 237 | } 238 | 239 | function initProtectArticle(){ 240 | var protectedArticles=document.querySelectorAll('form.protected'); 241 | [].forEach.call(protectedArticles, function(e){ 242 | 　　e.querySelector('input[name=protectPassword]').placeholder="输入密码以解锁..."; 243 | 　　e.parentNode.querySelector('.more>a').innerHTML=" 解锁文章"; 244 | 　　e.parentNode.querySelector('.more>a').protectedArticle=true; 245 | }); 246 | } 247 | 248 | String.prototype.MD5 = function (bit) 249 | { 250 | var sMessage = this; 251 | function RotateLeft(lValue, iShiftBits) { return (lValue<>>(32-iShiftBits)); } 252 | function AddUnsigned(lX,lY) 253 | { 254 | var lX4,lY4,lX8,lY8,lResult; 255 | lX8 = (lX & 0x80000000); 256 | lY8 = (lY & 0x80000000); 257 | lX4 = (lX & 0x40000000); 258 | lY4 = (lY & 0x40000000); 259 | lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF); 260 | if (lX4 & lY4) return (lResult ^ 0x80000000 ^ lX8 ^ lY8); 261 | if (lX4 | lY4) 262 | { 263 | if (lResult & 0x40000000) return (lResult ^ 0xC0000000 ^ lX8 ^ lY8); 264 | else return (lResult ^ 0x40000000 ^ lX8 ^ lY8); 265 | } else return (lResult ^ lX8 ^ lY8); 266 | } 267 | function F(x,y,z) { return (x & y) | ((~x) & z); } 268 | function G(x,y,z) { return (x & z) | (y & (~z)); } 269 | function H(x,y,z) { return (x ^ y ^ z); } 270 | function I(x,y,z) { return (y ^ (x | (~z))); } 271 | function FF(a,b,c,d,x,s,ac) 272 | { 273 | a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac)); 274 | return AddUnsigned(RotateLeft(a, s), b); 275 | } 276 | function GG(a,b,c,d,x,s,ac) 277 | { 278 | a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac)); 279 | return AddUnsigned(RotateLeft(a, s), b); 280 | } 281 | function HH(a,b,c,d,x,s,ac) 282 | { 283 | a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac)); 284 | return AddUnsigned(RotateLeft(a, s), b); 285 | } 286 | function II(a,b,c,d,x,s,ac) 287 | { 288 | a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac)); 289 | return AddUnsigned(RotateLeft(a, s), b); 290 | } 291 | function ConvertToWordArray(sMessage) 292 | { 293 | var lWordCount; 294 | var lMessageLength = sMessage.length; 295 | var lNumberOfWords_temp1=lMessageLength + 8; 296 | var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64; 297 | var lNumberOfWords = (lNumberOfWords_temp2+1)*16; 298 | var lWordArray=Array(lNumberOfWords-1); 299 | var lBytePosition = 0; 300 | var lByteCount = 0; 301 | while ( lByteCount < lMessageLength ) 302 | { 303 | lWordCount = (lByteCount-(lByteCount % 4))/4; 304 | lBytePosition = (lByteCount % 4)*8; 305 | lWordArray[lWordCount] = (lWordArray[lWordCount] | (sMessage.charCodeAt(lByteCount)<>>29; 313 | return lWordArray; 314 | } 315 | function WordToHex(lValue) 316 | { 317 | var WordToHexValue="",WordToHexValue_temp="",lByte,lCount; 318 | for (lCount = 0;lCount<=3;lCount++) 319 | { 320 | lByte = (lValue>>>(lCount*8)) & 255; 321 | WordToHexValue_temp = "0" + lByte.toString(16); 322 | WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2); 323 | } 324 | return WordToHexValue; 325 | } 326 | var x=Array(); 327 | var k,AA,BB,CC,DD,a,b,c,d 328 | var S11=7, S12=12, S13=17, S14=22; 329 | var S21=5, S22=9 , S23=14, S24=20; 330 | var S31=4, S32=11, S33=16, S34=23; 331 | var S41=6, S42=10, S43=15, S44=21; 332 | // Steps 1 and 2. Append padding bits and length and convert to words 333 | x = ConvertToWordArray(sMessage); 334 | // Step 3. Initialise 335 | a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476; 336 | // Step 4. Process the message in 16-word blocks 337 | for (k=0;k) 89 | var htmlRegex = /]+>/gi 90 | var htmlAttribsRegex = /\s?[a-z:]+(?:\=(?:\'|\")[^\'\">]+(?:\'|\"))*/gi 91 | var matches = html.match(htmlRegex) 92 | if (matches && matches.length) { 93 | matches = matches[0].match(htmlAttribsRegex) 94 | if (matches.length) { 95 | matches.shift() 96 | matches.forEach(function(htmlAttrib) { 97 | var attr = htmlAttrib.trim().split("=") 98 | if (attr.length === 1) { 99 | tmpEl.documentElement.setAttribute(attr[0], true) 100 | } 101 | else { 102 | tmpEl.documentElement.setAttribute(attr[0], attr[1].slice(1, -1)) 103 | } 104 | }) 105 | } 106 | } 107 | 108 | tmpEl.documentElement.innerHTML = html 109 | this.log("load content", tmpEl.documentElement.attributes, tmpEl.documentElement.innerHTML.length) 110 | 111 | // Clear out any focused controls before inserting new page contents. 112 | // we clear focus on non form elements 113 | if (document.activeElement && !document.activeElement.value) { 114 | try { 115 | document.activeElement.blur() 116 | } catch (e) { } 117 | } 118 | 119 | // try { 120 | this.switchSelectors(this.options.selectors, tmpEl, document, options) 121 | 122 | // FF bug: Won’t autofocus fields that are inserted via JS. 123 | // This behavior is incorrect. So if theres no current focus, autofocus 124 | // the last field. 125 | // 126 | // http://www.w3.org/html/wg/drafts/html/master/forms.html 127 | var autofocusEl = Array.prototype.slice.call(document.querySelectorAll("[autofocus]")).pop() 128 | if (autofocusEl && document.activeElement !== autofocusEl) { 129 | autofocusEl.focus(); 130 | } 131 | 132 | // execute scripts when DOM have been completely updated 133 | this.options.selectors.forEach(function(selector) { 134 | forEachEls(document.querySelectorAll(selector), function(el) { 135 | executeScripts(el) 136 | }) 137 | }) 138 | // } 139 | // catch(e) { 140 | // if (this.options.debug) { 141 | // this.log("Pjax switch fail: ", e) 142 | // } 143 | // this.switchFallback(tmpEl, document) 144 | // } 145 | }, 146 | 147 | doRequest: _dereq_("./lib/request.js"), 148 | 149 | loadUrl: function(href, options) { 150 | this.log("load href", href, options) 151 | 152 | trigger(document, "pjax:send", options); 153 | 154 | // Do the request 155 | this.doRequest(href, function(html) { 156 | // Fail if unable to load HTML via AJAX 157 | if (html === false) { 158 | trigger(document,"pjax:complete pjax:error", options) 159 | 160 | return 161 | } 162 | 163 | // Clear out any focused controls before inserting new page contents. 164 | document.activeElement.blur() 165 | 166 | try { 167 | this.loadContent(html, options) 168 | } 169 | catch (e) { 170 | if (!this.options.debug) { 171 | if (console && console.error) { 172 | console.error("Pjax switch fail: ", e) 173 | } 174 | this.latestChance(href) 175 | return 176 | } 177 | else { 178 | throw e 179 | } 180 | } 181 | if (options.history) { 182 | 183 | if (this.firstrun) { 184 | this.lastUid = this.maxUid = newUid() 185 | this.firstrun = false 186 | window.history.replaceState({ 187 | url: window.location.href, 188 | title: document.title, 189 | uid: this.maxUid 190 | }, 191 | document.title) 192 | } 193 | 194 | // Update browser history 195 | this.lastUid = this.maxUid = newUid() 196 | window.history.pushState({ 197 | url: href, 198 | title: options.title, 199 | uid: this.maxUid 200 | }, 201 | options.title, 202 | href) 203 | } 204 | 205 | this.forEachSelectors(function(el) { 206 | this.parseDOM(el) 207 | }, this) 208 | 209 | // Fire Events 210 | trigger(document,"pjax:complete pjax:success", options) 211 | 212 | options.analytics() 213 | 214 | // Scroll page to top on new page load 215 | if (options.scrollTo !== false) { 216 | window.scrollTo({"behavior": "smooth", "top":document.querySelector('.cover').offsetHeight-53}) 217 | } 218 | }.bind(this)) 219 | } 220 | } 221 | 222 | Pjax.isSupported = _dereq_("./lib/is-supported.js"); 223 | 224 | //arguably could do `if( require("./lib/is-supported.js")()) {` but that might be a little to simple 225 | if (Pjax.isSupported()) { 226 | module.exports = Pjax 227 | } 228 | // if there isn’t required browser functions, returning stupid api 229 | else { 230 | var stupidPjax = function() {} 231 | for (var key in Pjax.prototype) { 232 | if (Pjax.prototype.hasOwnProperty(key) && typeof Pjax.prototype[key] === "function") { 233 | stupidPjax[key] = stupidPjax 234 | } 235 | } 236 | 237 | module.exports = stupidPjax 238 | } 239 | 240 | },{"./lib/clone.js":2,"./lib/events/on.js":4,"./lib/events/trigger.js":5,"./lib/execute-scripts.js":6,"./lib/foreach-els.js":7,"./lib/foreach-selectors.js":8,"./lib/is-supported.js":9,"./lib/proto/attach-link.js":11,"./lib/proto/get-elements.js":12,"./lib/proto/log.js":13,"./lib/proto/parse-dom.js":14,"./lib/proto/parse-options.js":16,"./lib/proto/refresh.js":17,"./lib/reload.js":18,"./lib/request.js":19,"./lib/switches-selectors.js":20,"./lib/uniqueid.js":22}],2:[function(_dereq_,module,exports){ 241 | module.exports = function(obj) { 242 | if (null === obj || "object" != typeof obj) { 243 | return obj 244 | } 245 | var copy = obj.constructor() 246 | for (var attr in obj) { 247 | if (obj.hasOwnProperty(attr)) { 248 | copy[attr] = obj[attr] 249 | } 250 | } 251 | return copy 252 | } 253 | 254 | },{}],3:[function(_dereq_,module,exports){ 255 | module.exports = function(el) { 256 | // console.log("going to execute script", el) 257 | 258 | var code = (el.text || el.textContent || el.innerHTML || "") 259 | var head = document.querySelector("head") || document.documentElement 260 | var script = document.createElement("script") 261 | 262 | if (code.match("document.write")) { 263 | if (console && console.log) { 264 | console.log("Script contains document.write. Can’t be executed correctly. Code skipped ", el) 265 | } 266 | return false 267 | } 268 | 269 | script.type = "text/javascript" 270 | try { 271 | script.appendChild(document.createTextNode(code)) 272 | } 273 | catch (e) { 274 | // old IEs have funky script nodes 275 | script.text = code 276 | } 277 | 278 | // execute 279 | head.insertBefore(script, head.firstChild) 280 | head.removeChild(script) // avoid pollution 281 | 282 | return true 283 | } 284 | 285 | },{}],4:[function(_dereq_,module,exports){ 286 | var forEachEls = _dereq_("../foreach-els") 287 | 288 | module.exports = function(els, events, listener, useCapture) { 289 | events = (typeof events === "string" ? events.split(" ") : events) 290 | 291 | events.forEach(function(e) { 292 | forEachEls(els, function(el) { 293 | el.addEventListener(e, listener, useCapture) 294 | }) 295 | }) 296 | } 297 | 298 | },{"../foreach-els":7}],5:[function(_dereq_,module,exports){ 299 | var forEachEls = _dereq_("../foreach-els") 300 | 301 | module.exports = function(els, events, opts) { 302 | events = (typeof events === "string" ? events.split(" ") : events) 303 | 304 | events.forEach(function(e) { 305 | var event // = new CustomEvent(e) // doesn't everywhere yet 306 | event = document.createEvent("HTMLEvents") 307 | event.initEvent(e, true, true) 308 | event.eventName = e 309 | if (opts) { 310 | Object.keys(opts).forEach(function(key) { 311 | event[key] = opts[key] 312 | }) 313 | } 314 | 315 | forEachEls(els, function(el) { 316 | var domFix = false 317 | if (!el.parentNode && el !== document && el !== window) { 318 | // THANKS YOU IE (9/10//11 concerned) 319 | // dispatchEvent doesn't work if element is not in the dom 320 | domFix = true 321 | document.body.appendChild(el) 322 | } 323 | el.dispatchEvent(event) 324 | if (domFix) { 325 | el.parentNode.removeChild(el) 326 | } 327 | }) 328 | }) 329 | } 330 | 331 | },{"../foreach-els":7}],6:[function(_dereq_,module,exports){ 332 | var forEachEls = _dereq_("./foreach-els") 333 | var evalScript = _dereq_("./eval-script") 334 | // Finds and executes scripts (used for newly added elements) 335 | // Needed since innerHTML does not run scripts 336 | module.exports = function(el) { 337 | // console.log("going to execute scripts for ", el) 338 | forEachEls(el.querySelectorAll("script"), function(script) { 339 | if (!script.type || script.type.toLowerCase() === "text/javascript") { 340 | if (script.parentNode) { 341 | script.parentNode.removeChild(script) 342 | } 343 | evalScript(script) 344 | } 345 | }) 346 | } 347 | 348 | },{"./eval-script":3,"./foreach-els":7}],7:[function(_dereq_,module,exports){ 349 | /* global HTMLCollection: true */ 350 | 351 | module.exports = function(els, fn, context) { 352 | if (els instanceof HTMLCollection || els instanceof NodeList || els instanceof Array) { 353 | return Array.prototype.forEach.call(els, fn, context) 354 | } 355 | // assume simple dom element 356 | return fn.call(context, els) 357 | } 358 | 359 | },{}],8:[function(_dereq_,module,exports){ 360 | var forEachEls = _dereq_("./foreach-els") 361 | 362 | module.exports = function(selectors, cb, context, DOMcontext) { 363 | DOMcontext = DOMcontext || document 364 | selectors.forEach(function(selector) { 365 | forEachEls(DOMcontext.querySelectorAll(selector), cb, context) 366 | }) 367 | } 368 | 369 | },{"./foreach-els":7}],9:[function(_dereq_,module,exports){ 370 | module.exports = function() { 371 | // Borrowed wholesale from https://github.com/defunkt/jquery-pjax 372 | return window.history && 373 | window.history.pushState && 374 | window.history.replaceState && 375 | // pushState isn’t reliable on iOS until 5. 376 | !navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]\D|WebApps\/.+CFNetwork)/) 377 | } 378 | 379 | },{}],10:[function(_dereq_,module,exports){ 380 | if (!Function.prototype.bind) { 381 | Function.prototype.bind = function(oThis) { 382 | if (typeof this !== "function") { 383 | // closest thing possible to the ECMAScript 5 internal IsCallable function 384 | throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable") 385 | } 386 | 387 | var aArgs = Array.prototype.slice.call(arguments, 1) 388 | var that = this 389 | var Fnoop = function() {} 390 | var fBound = function() { 391 | return that.apply(this instanceof Fnoop && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))) 392 | } 393 | 394 | Fnoop.prototype = this.prototype 395 | fBound.prototype = new Fnoop() 396 | 397 | return fBound 398 | } 399 | } 400 | 401 | },{}],11:[function(_dereq_,module,exports){ 402 | _dereq_("../polyfills/Function.prototype.bind") 403 | 404 | var on = _dereq_("../events/on") 405 | var clone = _dereq_("../clone") 406 | 407 | var attrClick = "data-pjax-click-state" 408 | var attrKey = "data-pjax-keyup-state" 409 | 410 | var linkAction = function(el, event) { 411 | // Don’t break browser special behavior on links (like page in new window) 412 | if (event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { 413 | el.setAttribute(attrClick, "modifier") 414 | return 415 | } 416 | 417 | // we do test on href now to prevent unexpected behavior if for some reason 418 | // user have href that can be dynamically updated 419 | 420 | // Ignore external links. 421 | if (el.protocol !== window.location.protocol || el.host !== window.location.host) { 422 | el.setAttribute(attrClick, "external") 423 | return 424 | } 425 | 426 | // Ignore click if we are on an anchor on the same page 427 | if (el.pathname === window.location.pathname && el.hash.length > 0) { 428 | el.setAttribute(attrClick, "anchor-present") 429 | return 430 | } 431 | 432 | // Ignore anchors on the same page (keep native behavior) 433 | if (el.hash && el.href.replace(el.hash, "") === window.location.href.replace(location.hash, "")) { 434 | el.setAttribute(attrClick, "anchor") 435 | return 436 | } 437 | 438 | // Ignore empty anchor "foo.html#" 439 | if (el.href === window.location.href.split("#")[0] + "#") { 440 | el.setAttribute(attrClick, "anchor-empty") 441 | return 442 | } 443 | 444 | event.preventDefault() 445 | 446 | // don’t do "nothing" if user try to reload the page by clicking the same link twice 447 | if ( 448 | this.options.currentUrlFullReload && 449 | el.href === window.location.href.split("#")[0] 450 | ) { 451 | el.setAttribute(attrClick, "reload") 452 | this.reload() 453 | return 454 | } 455 | 456 | el.setAttribute(attrClick, "load") 457 | this.loadUrl(el.href, clone(this.options)) 458 | } 459 | 460 | var isDefaultPrevented = function(event) { 461 | return event.defaultPrevented || event.returnValue === false; 462 | } 463 | 464 | module.exports = function(el) { 465 | var that = this 466 | 467 | on(el, "click", function(event) { 468 | if (isDefaultPrevented(event)) { 469 | return 470 | } 471 | 472 | linkAction.call(that, el, event) 473 | }) 474 | 475 | on(el, "keyup", function(event) { 476 | if (isDefaultPrevented(event)) { 477 | return 478 | } 479 | 480 | // Don’t break browser special behavior on links (like page in new window) 481 | if (event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { 482 | el.setAttribute(attrKey, "modifier") 483 | return 484 | } 485 | 486 | if (event.keyCode == 13) { 487 | linkAction.call(that, el, event) 488 | } 489 | }.bind(this)) 490 | } 491 | 492 | },{"../clone":2,"../events/on":4,"../polyfills/Function.prototype.bind":10}],12:[function(_dereq_,module,exports){ 493 | module.exports = function(el) { 494 | return el.querySelectorAll(this.options.elements) 495 | } 496 | 497 | },{}],13:[function(_dereq_,module,exports){ 498 | module.exports = function() { 499 | if (this.options.debug && console) { 500 | if (typeof console.log === "function") { 501 | console.log.apply(console, arguments); 502 | } 503 | // ie is weird 504 | else if (console.log) { 505 | console.log(arguments); 506 | } 507 | } 508 | } 509 | 510 | },{}],14:[function(_dereq_,module,exports){ 511 | var forEachEls = _dereq_("../foreach-els") 512 | 513 | var parseElement = _dereq_("./parse-element") 514 | 515 | module.exports = function(el) { 516 | forEachEls(this.getElements(el), parseElement, this) 517 | } 518 | 519 | },{"../foreach-els":7,"./parse-element":15}],15:[function(_dereq_,module,exports){ 520 | module.exports = function(el) { 521 | switch (el.tagName.toLowerCase()) { 522 | case "a": 523 | // only attach link if el does not already have link attached 524 | if (!el.hasAttribute('data-pjax-click-state')) { 525 | this.attachLink(el) 526 | } 527 | break 528 | 529 | case "form": 530 | //throw "Pjax doesnt support
    yet." 531 | break 532 | 533 | default: 534 | throw "Pjax can only be applied on or submit" 535 | } 536 | } 537 | 538 | },{}],16:[function(_dereq_,module,exports){ 539 | /* global _gaq: true, ga: true */ 540 | 541 | module.exports = function(options){ 542 | this.options = options 543 | this.options.elements = this.options.elements || "a[href], form[action]" 544 | this.options.selectors = this.options.selectors || ["title", ".js-Pjax"] 545 | this.options.switches = this.options.switches || {} 546 | this.options.switchesOptions = this.options.switchesOptions || {} 547 | this.options.history = this.options.history || true 548 | this.options.analytics = this.options.analytics || function() { 549 | // options.backward or options.foward can be true or undefined 550 | // by default, we do track back/foward hit 551 | // https://productforums.google.com/forum/#!topic/analytics/WVwMDjLhXYk 552 | if (window._gaq) { 553 | _gaq.push(["_trackPageview"]) 554 | } 555 | if (window.ga) { 556 | ga("send", "pageview", {page: location.pathname, title: document.title}) 557 | } 558 | } 559 | this.options.scrollTo = (typeof this.options.scrollTo === 'undefined') ? 0 : this.options.scrollTo; 560 | this.options.cacheBust = (typeof this.options.cacheBust === 'undefined') ? true : this.options.cacheBust 561 | this.options.debug = this.options.debug || false 562 | 563 | // we can’t replace body.outerHTML or head.outerHTML 564 | // it create a bug where new body or new head are created in the dom 565 | // if you set head.outerHTML, a new body tag is appended, so the dom get 2 body 566 | // & it break the switchFallback which replace head & body 567 | if (!this.options.switches.head) { 568 | this.options.switches.head = this.switchElementsAlt 569 | } 570 | if (!this.options.switches.body) { 571 | this.options.switches.body = this.switchElementsAlt 572 | } 573 | if (typeof options.analytics !== "function") { 574 | options.analytics = function() {} 575 | } 576 | } 577 | },{}],17:[function(_dereq_,module,exports){ 578 | module.exports = function(el) { 579 | this.parseDOM(el || document) 580 | } 581 | 582 | },{}],18:[function(_dereq_,module,exports){ 583 | module.exports = function() { 584 | window.location.reload() 585 | } 586 | 587 | },{}],19:[function(_dereq_,module,exports){ 588 | module.exports = function(location, callback) { 589 | var request = new XMLHttpRequest() 590 | 591 | request.onreadystatechange = function() { 592 | if (request.readyState === 4) { 593 | if (request.status === 200) { 594 | callback(request.responseText, request) 595 | } 596 | else { 597 | callback(null, request) 598 | } 599 | } 600 | } 601 | 602 | // Add a timestamp as part of the query string if cache busting is enabled 603 | if (this.options.cacheBust) { 604 | location += (!/[?&]/.test(location) ? "?" : "&") + new Date().getTime() 605 | } 606 | 607 | request.open("GET", location, true) 608 | request.setRequestHeader("X-Requested-With", "XMLHttpRequest") 609 | request.send(null) 610 | return request 611 | } 612 | 613 | },{}],20:[function(_dereq_,module,exports){ 614 | var forEachEls = _dereq_("./foreach-els") 615 | 616 | var defaultSwitches = _dereq_("./switches") 617 | 618 | module.exports = function(switches, switchesOptions, selectors, fromEl, toEl, options) { 619 | selectors.forEach(function(selector) { 620 | var newEls = fromEl.querySelectorAll(selector) 621 | var oldEls = toEl.querySelectorAll(selector) 622 | if (this.log) { 623 | this.log("Pjax switch", selector, newEls, oldEls) 624 | } 625 | if (newEls.length !== oldEls.length) { 626 | // forEachEls(newEls, function(el) { 627 | // this.log("newEl", el, el.outerHTML) 628 | // }, this) 629 | // forEachEls(oldEls, function(el) { 630 | // this.log("oldEl", el, el.outerHTML) 631 | // }, this) 632 | throw "DOM doesn’t look the same on new loaded page: ’" + selector + "’ - new " + newEls.length + ", old " + oldEls.length 633 | } 634 | 635 | forEachEls(newEls, function(newEl, i) { 636 | var oldEl = oldEls[i] 637 | if (this.log) { 638 | this.log("newEl", newEl, "oldEl", oldEl) 639 | } 640 | if (switches[selector]) { 641 | switches[selector].bind(this)(oldEl, newEl, options, switchesOptions[selector]) 642 | } 643 | else { 644 | defaultSwitches.outerHTML.bind(this)(oldEl, newEl, options) 645 | } 646 | }, this) 647 | }, this) 648 | } 649 | 650 | },{"./foreach-els":7,"./switches":21}],21:[function(_dereq_,module,exports){ 651 | var on = _dereq_("./events/on.js") 652 | // var off = require("./lib/events/on.js") 653 | // var trigger = require("./lib/events/trigger.js") 654 | 655 | 656 | module.exports = { 657 | outerHTML: function(oldEl, newEl) { 658 | oldEl.outerHTML = newEl.outerHTML 659 | this.onSwitch() 660 | }, 661 | 662 | innerHTML: function(oldEl, newEl) { 663 | oldEl.innerHTML = newEl.innerHTML 664 | oldEl.className = newEl.className 665 | this.onSwitch() 666 | }, 667 | 668 | sideBySide: function(oldEl, newEl, options, switchOptions) { 669 | var forEach = Array.prototype.forEach 670 | var elsToRemove = [] 671 | var elsToAdd = [] 672 | var fragToAppend = document.createDocumentFragment() 673 | // height transition are shitty on safari 674 | // so commented for now (until I found something ?) 675 | // var relevantHeight = 0 676 | var animationEventNames = "animationend webkitAnimationEnd MSAnimationEnd oanimationend" 677 | var animatedElsNumber = 0 678 | var sexyAnimationEnd = function(e) { 679 | if (e.target != e.currentTarget) { 680 | // end triggered by an animation on a child 681 | return 682 | } 683 | 684 | animatedElsNumber-- 685 | if (animatedElsNumber <= 0 && elsToRemove) { 686 | elsToRemove.forEach(function(el) { 687 | // browsing quickly can make the el 688 | // already removed by last page update ? 689 | if (el.parentNode) { 690 | el.parentNode.removeChild(el) 691 | } 692 | }) 693 | 694 | elsToAdd.forEach(function(el) { 695 | el.className = el.className.replace(el.getAttribute("data-pjax-classes"), "") 696 | el.removeAttribute("data-pjax-classes") 697 | // Pjax.off(el, animationEventNames, sexyAnimationEnd, true) 698 | }) 699 | 700 | elsToAdd = null // free memory 701 | elsToRemove = null // free memory 702 | 703 | // assume the height is now useless (avoid bug since there is overflow hidden on the parent) 704 | // oldEl.style.height = "auto" 705 | 706 | // this is to trigger some repaint (example: picturefill) 707 | this.onSwitch() 708 | // Pjax.trigger(window, "scroll") 709 | } 710 | }.bind(this) 711 | 712 | // Force height to be able to trigger css animation 713 | // here we get the relevant height 714 | // oldEl.parentNode.appendChild(newEl) 715 | // relevantHeight = newEl.getBoundingClientRect().height 716 | // oldEl.parentNode.removeChild(newEl) 717 | // oldEl.style.height = oldEl.getBoundingClientRect().height + "px" 718 | 719 | switchOptions = switchOptions || {} 720 | 721 | forEach.call(oldEl.childNodes, function(el) { 722 | elsToRemove.push(el) 723 | if (el.classList && !el.classList.contains("js-Pjax-remove")) { 724 | // for fast switch, clean element that just have been added, & not cleaned yet. 725 | if (el.hasAttribute("data-pjax-classes")) { 726 | el.className = el.className.replace(el.getAttribute("data-pjax-classes"), "") 727 | el.removeAttribute("data-pjax-classes") 728 | } 729 | el.classList.add("js-Pjax-remove") 730 | if (switchOptions.callbacks && switchOptions.callbacks.removeElement) { 731 | switchOptions.callbacks.removeElement(el) 732 | } 733 | if (switchOptions.classNames) { 734 | el.className += " " + switchOptions.classNames.remove + " " + (options.backward ? switchOptions.classNames.backward : switchOptions.classNames.forward) 735 | } 736 | animatedElsNumber++ 737 | on(el, animationEventNames, sexyAnimationEnd, true) 738 | } 739 | }) 740 | 741 | forEach.call(newEl.childNodes, function(el) { 742 | if (el.classList) { 743 | var addClasses = "" 744 | if (switchOptions.classNames) { 745 | addClasses = " js-Pjax-add " + switchOptions.classNames.add + " " + (options.backward ? switchOptions.classNames.forward : switchOptions.classNames.backward) 746 | } 747 | if (switchOptions.callbacks && switchOptions.callbacks.addElement) { 748 | switchOptions.callbacks.addElement(el) 749 | } 750 | el.className += addClasses 751 | el.setAttribute("data-pjax-classes", addClasses) 752 | elsToAdd.push(el) 753 | fragToAppend.appendChild(el) 754 | animatedElsNumber++ 755 | on(el, animationEventNames, sexyAnimationEnd, true) 756 | } 757 | }) 758 | 759 | // pass all className of the parent 760 | oldEl.className = newEl.className 761 | oldEl.appendChild(fragToAppend) 762 | 763 | // oldEl.style.height = relevantHeight + "px" 764 | } 765 | } 766 | 767 | },{"./events/on.js":4}],22:[function(_dereq_,module,exports){ 768 | module.exports = (function() { 769 | var counter = 0 770 | return function() { 771 | var id = ("pjax" + (new Date().getTime())) + "_" + counter 772 | counter++ 773 | return id 774 | } 775 | })() 776 | 777 | },{}]},{},[1]) 778 | (1) 779 | }); -------------------------------------------------------------------------------- /css/w.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme: LightWhite 3 | Author: Archeb 4 | HomePage: https://qwq.moe/ 5 | Project: https://github.com/Archeb/LightWhite 6 | Descr: A simple theme for typecho 7 | Date: 2017-12-09 8 | 9 | Thank you for using my theme~ 10 | */ 11 | 12 | * { 13 | font-family: "Microsoft YaHei"; 14 | font-weight: 300; 15 | box-sizing: border-box; 16 | } 17 | .mdi{ 18 | display: inline-block; 19 | font-family:"Material Design Icons","Microsoft YaHei Light"; 20 | font-size: inherit; 21 | text-rendering: auto; 22 | line-height: inherit; 23 | -webkit-font-smoothing: antialiased; 24 | } 25 | h1,h2,h3,h4,h5,h6,h7,b,strong{ 26 | font-weight: 400; 27 | } 28 | a { 29 | text-decoration: none; 30 | color: inherit; 31 | } 32 | li { 33 | list-style: none; 34 | } 35 | html { 36 | width: calc(100% + 13px); 37 | overflow-x: hidden; 38 | } 39 | body { 40 | margin: 0; 41 | background-color: white; 42 | } 43 | hr { 44 | width: 30%; 45 | transition:width ease-in-out 1s,border-color 0.3s; 46 | border:0.5px solid #dadada; 47 | } 48 | hr:hover{ 49 | width:50%; 50 | border-color:black; 51 | } 52 | .cover { 53 | width: 100vw; 54 | min-height: 200px; 55 | height: 50vh; 56 | box-shadow: 0 0 5px rgba(0,0,0,.2); 57 | background-size: cover; 58 | overflow: hidden; 59 | background-image: url(https://qwq.moe/usr/themes/LightWhite/img/cover.jpg?v3); 60 | display: flex; 61 | flex-direction: column; 62 | justify-content: flex-end; 63 | } 64 | .cover .middle { 65 | color: white; 66 | z-index:10; 67 | text-shadow: 1px 1px 10px #1d1d1d; 68 | } 69 | .cover .middle .info { 70 | padding-left: 25%; 71 | display: flex; 72 | } 73 | .cover .middle .info .avatar { 74 | padding-right: 19px; 75 | border-right: 1.5px solid rgba(255, 255, 255, 0.75); 76 | } 77 | .cover .middle .info .avatar img { 78 | border-radius: 50%; 79 | box-shadow: 1px 1px 3px #505050; 80 | } 81 | .cover .middle .info .texts { 82 | margin-left: 18px; 83 | } 84 | .cover .middle .info .texts .title { 85 | font-size: 55px; 86 | } 87 | .cover .middle .info .texts .description { 88 | margin-left: 3px; 89 | font-size: 20px; 90 | color: rgba(255, 255, 255, 0.85); 91 | } 92 | .cover .middle .nav { 93 | box-shadow: 0 0 5px rgba(0,0,0,.2); 94 | display: flex; 95 | margin-top: 20px; 96 | transition:background-color 0.5s,color 0.5s; 97 | padding-left: calc(25% + 130px); 98 | padding-right: calc(25% + 60px); 99 | justify-content: space-between; 100 | background-color: rgba(0, 0, 0, 0.3); 101 | 102 | } 103 | .cover .middle .nav .nav_left{ 104 | display:flex; 105 | } 106 | .cover .middle .nav .nav_right{ 107 | display:flex; 108 | } 109 | .cover .middle .FloatNav { 110 | display: flex; 111 | margin-top: 0!important; 112 | background-color: white!important; 113 | color:black!important; 114 | text-shadow:none; 115 | box-shadow: 0 0 5px rgba(0,0,0,.2); 116 | width:100vw; 117 | position:fixed; 118 | top:0; 119 | } 120 | .cover .middle .FloatNav .nav_left{ 121 | margin-left:2px; 122 | } 123 | .cover .middle .FloatNav .item{ 124 | border-bottom: 2px solid white; 125 | transition: background-color 0.5s,border-color 0.5s!important; 126 | } 127 | .cover .middle .FloatNav .item:hover{ 128 | border-color: black; 129 | color:black; 130 | box-shadow: none!important; 131 | transition: all 0.5s,color 0.2s!important; 132 | background-color:white!important; 133 | } 134 | .cover .middle .FloatNav .item:active{ 135 | border-color: black; 136 | box-shadow: 0 0 5px rgba(0,0,0,.2); 137 | color:white; 138 | background-color:black!important; 139 | } 140 | .cover .middle .nav .dot { 141 | padding: 15px 0; 142 | } 143 | .cover .middle .nav .item { 144 | padding: 15px; 145 | border-bottom: 2px solid transparent; 146 | transition: background-color 0.5s,border-color 0.5s; 147 | } 148 | .cover .middle .nav .item:hover { 149 | background-color: rgba(0, 0, 0, 0.5); 150 | box-shadow: 0 0 5px rgba(0,0,0,.2); 151 | } 152 | .cover .middle .nav .item:active { 153 | background-color: black; 154 | 155 | } 156 | .article-list { 157 | margin-top:30px; 158 | padding: 20px calc(25% + 64px); 159 | box-sizing: border-box; 160 | display: flex; 161 | flex-direction: column; 162 | } 163 | .article-list .border-top{ 164 | border-top:1px solid #eaeaea; 165 | padding-top:20px; 166 | } 167 | .article-list .archive-title{ 168 | background-color: #68d268; 169 | box-shadow: 0 0 5px rgba(0,0,0,.2); 170 | color: white; 171 | padding: 5px 8px; 172 | justify-content: center; 173 | transition: opacity 0.5s; 174 | } 175 | .singlepage{ 176 | margin-bottom:0!important; 177 | margin-top:0!important; 178 | } 179 | .article-list .shuoshuo .content p{ 180 | display: inline; 181 | } 182 | .article-list .shuoshuo .author-info img{ 183 | box-shadow: 0 0 5px rgba(0,0,0,0.2); 184 | border-radius:50%; 185 | } 186 | .article-list .shuoshuo .shuoshuo-meta{ 187 | border-top:1px solid #eaeaea; 188 | text-align:center; 189 | } 190 | .article-list .shuoshuo .shuoshuo-meta:before { 191 | position: absolute; 192 | margin: -13px -73px; 193 | transition:color 0.5s; 194 | color: #a2a2a2; 195 | background-color: white; 196 | padding: 0 10px; 197 | } 198 | .article-list .shuoshuo .shuoshuo-meta:hover::before { 199 | color:black; 200 | } 201 | .article-list .shuoshuo-container{ 202 | padding:20px 10px 15px; 203 | display:flex; 204 | } 205 | .article-list .shuoshuo .content-container{ 206 | margin-left:15px; 207 | } 208 | .article-list .shuoshuo a{ 209 | color: #8a2be2; 210 | } 211 | .article-list .article { 212 | margin-bottom: 50px; 213 | display: flex; 214 | opacity:0; 215 | transition:opacity 0.5s; 216 | } 217 | .article-list .article .tooltip { 218 | padding-top: 5px; 219 | padding-right: 5px; 220 | } 221 | .article-list .article .tooltip .date { 222 | display: flex; 223 | padding: 3px 25px 3px 10px; 224 | flex-direction: column; 225 | transition: background-color 0.5s, transform 0.15s; 226 | background-color: #fafafa; 227 | border-right: solid 1px #fafafa; 228 | align-items: center; 229 | } 230 | .article-list .article .tooltip .date .day { 231 | font-size: 25px; 232 | } 233 | .article-list .article .tooltip .date .month { 234 | font-size: 15px; 235 | } 236 | .article-list .article .tooltip .date:hover { 237 | background-color: #fafafa; 238 | } 239 | .article-list .article .tooltip .date:active { 240 | background-color: #eaeaea; 241 | transform: scale(0.95); 242 | } 243 | .article-list .article .tooltip .article-mobile-title { 244 | display: none; 245 | } 246 | .article-list .article .tooltip .font-control { 247 | display: flex; 248 | padding: 6px 25px 6px 10px; 249 | flex-direction: column; 250 | transition: background-color 0.5s, transform 0.15s; 251 | border-right: solid 1px #fafafa; 252 | align-items: center; 253 | } 254 | .article-list .article .tooltip .font-control:hover { 255 | background-color: #fafafa; 256 | } 257 | .article-list .article .tooltip .font-control .mdi:before { 258 | font-size: 28px; 259 | } 260 | .article-list .article .tooltip .font-control:active { 261 | background-color: #eaeaea; 262 | transform: scale(0.95); 263 | } 264 | .article-list .article .tooltip .go-comment { 265 | display: flex; 266 | padding: 8px 25px 8px 10px; 267 | flex-direction: column; 268 | transition: background-color 0.5s, transform 0.15s; 269 | border-right: solid 1px #fafafa; 270 | align-items: center; 271 | } 272 | .article-list .article .tooltip .go-comment:hover { 273 | background-color: #fafafa; 274 | } 275 | .article-list .article .tooltip .go-comment .mdi:before { 276 | font-size: 24px; 277 | } 278 | .article-list .article .tooltip .go-comment:active { 279 | background-color: #eaeaea; 280 | transform: scale(0.95); 281 | } 282 | .article-list .article .tooltip .go-share { 283 | display: flex; 284 | padding: 8px 25px 8px 10px; 285 | flex-direction: column; 286 | transition: background-color 0.5s, transform 0.15s; 287 | border-right: solid 1px #fafafa; 288 | align-items: center; 289 | } 290 | .article-list .article .tooltip .go-share:hover { 291 | background-color: #fafafa; 292 | } 293 | .article-list .article .tooltip .go-share .mdi:before { 294 | font-size: 24px; 295 | } 296 | .article-list .article .tooltip .go-share:active { 297 | background-color: #eaeaea; 298 | transform: scale(0.95); 299 | } 300 | .article-list .article .tooltip .go-tip { 301 | display: flex; 302 | padding: 8px 25px 8px 10px; 303 | flex-direction: column; 304 | transition: background-color 0.5s, transform 0.15s; 305 | border-right: solid 1px #fafafa; 306 | align-items: center; 307 | } 308 | .article-list .article .tooltip .go-tip:hover { 309 | background-color: #fafafa; 310 | } 311 | .article-list .article .tooltip .go-tip .mdi:before { 312 | font-size: 24px; 313 | } 314 | .article-list .article .tooltip .go-tip6:active { 315 | background-color: #eaeaea; 316 | transform: scale(0.95); 317 | } 318 | .article-list .article .article-main { 319 | width: calc(100% - 57px); 320 | padding-left: 10px; 321 | } 322 | .article-list .article .article-main .preview-image-container{ 323 | margin-top:5px; 324 | overflow:hidden; 325 | box-shadow: 0 0 5px rgba(0,0,0,.2); 326 | } 327 | .article-list .article .article-main .preview-image-container .preview-image{ 328 | background-size:cover; 329 | z-index: 9; 330 | transition:transform 0.25s; 331 | transform: scale(1.05); 332 | height:300px; 333 | } 334 | .article-list .article .article-main .preview-image-container .preview-image-title{ 335 | color: #3a3a3a; 336 | z-index: 10; 337 | padding: 10px; 338 | background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); 339 | font-size: 35px; 340 | margin-top: -100px; 341 | transform: scale(1); 342 | } 343 | .article-list .article .article-main .preview-image-container .preview-image-title-content{ 344 | white-space: nowrap; 345 | overflow: hidden; 346 | text-overflow: ellipsis; 347 | color:white; 348 | text-shadow: 1px 1px 10px #696969; 349 | } 350 | 351 | .article-list .article .article-main .preview-image-container .preview-image:active{ 352 | transform: scale(1); 353 | } 354 | .article-list .article .article-main .preview-image-container .preview-image-meta{ 355 | margin-top:10px; 356 | color: white; 357 | z-index: 10; 358 | font-size: 14px; 359 | display: flex; 360 | align-items: center; 361 | transform: scale(1); 362 | } 363 | .article-list .article .article-main .preview-image-container .preview-image-meta .tag-item{ 364 | margin: 0 5px; 365 | font-size: 13px; 366 | padding: 2px 5px; 367 | transition:background-color 0.5s; 368 | box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); 369 | border-radius: 1.5px; 370 | background-color: rgba(157, 139, 139, 0.4); 371 | } 372 | .article-list .article .article-main .preview-image-container .preview-image-meta .tag-item:hover{ 373 | background-color: rgba(157, 139, 139, 0.7); 374 | } 375 | .article-list .article .article-main .article-title { 376 | font-size: 35px; 377 | padding: 0 0 2px; 378 | border-bottom: solid 1px #eaeaea; 379 | } 380 | 381 | .article-list .article .article-main .article-title .article-meta { 382 | margin-top: 7px; 383 | font-size: 14px; 384 | color: #636363; 385 | } 386 | .article-list .article .article-main .article-content { 387 | line-height: 1.9em; 388 | word-break: break-all; 389 | font-size: 15px; 390 | 391 | } 392 | .article-list .article .article-main .article-content p.word{ 393 | display:none; 394 | } 395 | .article-list .article .article-main .article-content input.submit{ 396 | display:none; 397 | } 398 | .article-list .article .article-main .article-content p input[name=protectPassword]{ 399 | width: 100%; 400 | width: 100%; 401 | resize: none; 402 | max-width: 100%; 403 | box-sizing: border-box; 404 | border: none; 405 | -webkit-appearance: none; 406 | outline: none; 407 | font-size: 20px; 408 | text-align: center; 409 | padding: 10px 0; 410 | background-color: rgba(212, 212, 212, 0.4); 411 | color: #6d6d6d; 412 | } 413 | .article-list .article .article-main .article-content li { 414 | list-style:initial; 415 | } 416 | .article-list .article .article-main .article-content a { 417 | color:#8a2be2; 418 | } 419 | .article-list .article .article-main .article-content p > * { 420 | max-width: 100%; 421 | } 422 | .article-list .article .article-main .article-content p > code { 423 | white-space: nowrap; 424 | padding: 2px 5px; 425 | font-size: 13px; 426 | background-color: #fffff0; 427 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 428 | } 429 | .article-list .article .article-main .more { 430 | display: flex; 431 | flex-direction: column; 432 | align-items: flex-end; 433 | } 434 | .article-list .article .article-main .more a { 435 | padding: 3px 15px; 436 | font-size: 16px; 437 | color: black!important; 438 | border-right: solid 1px #e3e3e3; 439 | box-shadow: 0 0 5px transparent; 440 | transition: all 0.3s; 441 | } 442 | .article-list .article .article-main .more a:hover { 443 | background-color: black; 444 | color: white!important; 445 | box-shadow: 0 0 5px rgba(0,0,0,.2); 446 | border-right: solid 1px black; 447 | } 448 | .article-list .article .article-main .more a:active { 449 | transform: scale(0.96); 450 | } 451 | .footer { 452 | display: flex; 453 | margin-top:0; 454 | flex-direction: row; 455 | font-size:14px; 456 | justify-content: space-between; 457 | opacity:0; 458 | transition:opacity 0.5s; 459 | } 460 | .footer a{ 461 | color:#d3a3ff; 462 | transition:color 0.5s; 463 | } 464 | .footer a:hover{ 465 | color:#8a2be2; 466 | } 467 | .footer .info-left { 468 | transition: color 0.5s; 469 | color: #949494; 470 | padding: 5px 20px; 471 | border-left: 1px solid #d1d1d1; 472 | } 473 | .footer .info-right { 474 | text-align: right; 475 | color: #949494; 476 | transition: color 0.5s; 477 | padding: 5px 20px; 478 | border-right: 1px solid #d1d1d1; 479 | } 480 | .footer .info-right:hover { 481 | color:black; 482 | } 483 | .footer .info-left:hover { 484 | color:black; 485 | } 486 | #comments { 487 | margin-top: 30px; 488 | transition: opacity 0.3s; 489 | line-height: 1.4em; 490 | } 491 | #comments #comments-head{ 492 | border-bottom: solid 1px #eaeaea; 493 | line-height: 1.9em; 494 | } 495 | #comments a{ 496 | color:inherit; 497 | } 498 | #comments .comment-author span .avatar { 499 | border-radius: 50%; 500 | box-shadow: 0 0 5px rgba(0,0,0,.15); 501 | margin-bottom: -10px; 502 | } 503 | #comments .comment-container { 504 | display: flex; 505 | } 506 | #comments .comment-author-info { 507 | margin-left: 10px; 508 | width: 100%; 509 | } 510 | #comments .comment-author-name { 511 | padding: 5px 8px 6px; 512 | font-size: 12px; 513 | color: white; 514 | background-color: black; 515 | box-shadow: 0 0 5px rgba(0,0,0,.2); 516 | } 517 | #comments .comment-time { 518 | padding: 4px 8px 5px; 519 | font-size: 12px; 520 | border: 1px solid black; 521 | box-shadow: 0 0 5px rgba(0,0,0,.15); 522 | } 523 | #comments .comment-reply { 524 | padding: 4px 8px 5px; 525 | font-size: 12px; 526 | cursor: pointer; 527 | } 528 | #comments .comment-content { 529 | font-size: 14px; 530 | word-break: break-all; 531 | } 532 | #comments .comment-list { 533 | padding: 0; 534 | margin: 0; 535 | } 536 | #comments li{ 537 | list-style:none; 538 | } 539 | #comments > .comment-list > li { 540 | list-style: none; 541 | padding: 15px 0px 5px; 542 | } 543 | #comments .comment-children li { 544 | padding-top: 10px; 545 | } 546 | #comments > .comment-list > li > .comment-children > .comment-list > li { 547 | list-style: none; 548 | padding: 15px 0 5px 40px; 549 | margin-left: 30px; 550 | border-left: 1px solid #d9d9d9; 551 | } 552 | #comments .comment-element > .respond { 553 | background: transparent!important; 554 | color: inherit!important; 555 | } 556 | #comments .comment-element > .respond > * { 557 | padding: 0; 558 | } 559 | #comments .comment-element > .respond > form > * { 560 | padding: 0; 561 | } 562 | #comments .comment-info { 563 | display: flex; 564 | } 565 | #comments .comment-info .mdi:before { 566 | border-bottom: solid 1px rgba(212, 212, 212, 0.4); 567 | 568 | padding: 0 8px; 569 | height: calc(100% - 1px); 570 | align-items: center; 571 | display: flex; 572 | } 573 | #comments .comment-info input { 574 | width: 100%; 575 | border: none; 576 | 577 | -webkit-appearance: none; 578 | outline: none; 579 | font-size: 14px; 580 | color: #6d6d6d; 581 | padding: 5px; 582 | background-color: transparent; 583 | transition: background-color 0.5s, border-color 0.5s, color 0.5s; 584 | border-bottom: solid 1px rgba(212, 212, 212, 0.4); 585 | } 586 | #comments .comment-info input:hover { 587 | color: black; 588 | border-color: black; 589 | } 590 | #comments .comment-info input:focus { 591 | color: black; 592 | border-color: black; 593 | } 594 | #comments .avatar { 595 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 596 | border-radius: 50%; 597 | } 598 | #comments .textarea { 599 | width: 100%; 600 | resize: none; 601 | max-width: 100%; 602 | padding: 20px; 603 | box-sizing: border-box; 604 | border: none; 605 | -webkit-appearance: none; 606 | padding: 0; 607 | outline: none; 608 | font-size: 14px; 609 | padding: 5px; 610 | background-color: transparent; 611 | color: #6d6d6d; 612 | transition: background-color 0.5s, border-color 0.5s, color 0.5s; 613 | border-bottom: solid 1px rgba(212, 212, 212, 0.4); 614 | background-image:url(../img/kongou.png?v3); 615 | background-repeat: no-repeat; 616 | background-position: right bottom; 617 | } 618 | #comments .textarea:hover { 619 | border-color: black; 620 | color: black; 621 | } 622 | #comments .textarea:focus { 623 | border-color: black; 624 | color: black; 625 | } 626 | #comments .respond { 627 | color: black; 628 | font-size: 14px; 629 | } 630 | #comments .respond .warning_tip { 631 | background-color: #bb0909; 632 | color: white; 633 | padding: 5px 8px; 634 | opacity: 0; 635 | box-shadow: 0 0 5px rgba(0,0,0,.2); 636 | height: 0; 637 | transition: opacity 0.5s; 638 | text-align: center; 639 | } 640 | #comments .respond .submit { 641 | padding: 5px 10px; 642 | font-size: 13px; 643 | color: black; 644 | border: none; 645 | outline: none; 646 | border-right: solid 1px #e3e3e3; 647 | cursor: pointer; 648 | box-shadow: 0 0 5px transparent; 649 | transition:all 0.3s; 650 | } 651 | #comments .respond .submit:hover { 652 | background-color: rgba(0, 0, 0, 0.1); 653 | box-shadow: 0 0 5px rgba(0,0,0,.2); 654 | background-color: black; 655 | color: white; 656 | border-right: solid 1px black; 657 | } 658 | #comments .respond .submit:active { 659 | transform: scale(0.95); 660 | } 661 | #comments .respond #cancel-comment-reply-link { 662 | padding: 5px 10px; 663 | font-size: 13px; 664 | color: black; 665 | border: none; 666 | outline: none; 667 | border-left: solid 1px #e3e3e3; 668 | cursor: pointer; 669 | transition: background-color 0.3s, color 0.3s, transform 0.15s, border-color 0.3s; 670 | } 671 | #comments .respond #cancel-comment-reply-link:hover { 672 | background-color: rgba(0, 0, 0, 0.1); 673 | background-color: black; 674 | color: white; 675 | border-left: solid 1px black; 676 | } 677 | #comments .respond #cancel-comment-reply-link:active { 678 | transform: scale(0.95); 679 | } 680 | #cancel-comment-reply-link:before{ 681 | content: '\f5e9 '; 682 | font-family:"Material Design Icons","Microsoft YaHei Light"; 683 | } 684 | .page-navigator { 685 | display: flex; 686 | padding: 0; 687 | justify-content: center; 688 | opacity:0; 689 | transition:opacity 0.5s; 690 | } 691 | .page-navigator li { 692 | display: inline-block; 693 | } 694 | .page-navigator a { 695 | padding: 5px 13px; 696 | color: #2a2a2a; 697 | border-bottom: solid 1px #dfdfdf; 698 | transition: all 0.5s; 699 | } 700 | .page-navigator li span { 701 | padding: 5px 10px; 702 | color: #2a2a2a; 703 | border-bottom: solid 1px #dfdfdf; 704 | transition: all 0.5s; 705 | } 706 | .page-navigator .current a{ 707 | color: white; 708 | box-shadow: 0 0 5px rgba(0,0,0,.2); 709 | background-color: black; 710 | border-color: black; 711 | } 712 | .page-navigator .current a:hover{ 713 | color: white!important; 714 | } 715 | .page-navigator a:hover { 716 | color: black; 717 | border-color: black; 718 | } 719 | .page-navigator a:active { 720 | color: white; 721 | background-color: black; 722 | box-shadow: 0 0 5px rgba(0,0,0,.2); 723 | border-color: black; 724 | } 725 | .page-navigator .prev a { 726 | font: normal normal normal 24px/1 "Material Design Icons"; 727 | font-size: 21px; 728 | } 729 | .page-navigator .next a { 730 | font: normal normal normal 24px/1 "Material Design Icons"; 731 | font-size: 21px; 732 | } 733 | .friends { 734 | display: flex; 735 | flex-wrap: wrap; 736 | } 737 | .friends .a-friend { 738 | display: flex; 739 | margin: 10px 10px 0 0; 740 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 741 | padding: 10px; 742 | transition: box-shadow 0.2s, transform 0.2s; 743 | } 744 | .friends .a-friend:hover { 745 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 746 | } 747 | .friends .a-friend:active { 748 | transform: scale(0.97); 749 | } 750 | .friends .a-friend .blog-avatar { 751 | background-color: white; 752 | border-radius: 50%; 753 | width: 50px; 754 | height: 50px; 755 | } 756 | .friends .a-friend .text-container { 757 | margin-left: 10px; 758 | } 759 | .friends .a-friend .text-container .name { 760 | font-size: 15px; 761 | } 762 | .friends .a-friend .text-container .description { 763 | font-size: 12.5px; 764 | } 765 | .aplayer{ 766 | box-shadow: none!important; 767 | } 768 | .aplayer-withlist.aplayer .aplayer-info{ 769 | border-bottom:none!important; 770 | } 771 | .aplayer .aplayer-info .aplayer-controller{ 772 | display:none!important; 773 | } 774 | code,code *{ 775 | font-family: Consolas, "Microsoft YaHei Light"; 776 | font-size: 14px; 777 | } 778 | ::-webkit-scrollbar { 779 | width: 13px; 780 | background-color: transparent; 781 | } 782 | ::-webkit-scrollbar-thumb { 783 | background-color: rgba(0, 0, 0, 0.4); 784 | transition: background-color 0.3s; 785 | } 786 | ::-webkit-scrollbar-thumb:hover { 787 | background-color: rgba(0, 0, 0, 0.55); 788 | } 789 | ::-webkit-scrollbar-thumb:active { 790 | background-color: rgba(0, 0, 0, 0.65); 791 | } 792 | @media (max-width: 1919px) { 793 | .cover .middle .info { 794 | padding-left: 20%; 795 | } 796 | .cover .middle .nav { 797 | padding-left: calc(20% + 130px); 798 | padding-right: calc(20% + 60px); 799 | } 800 | .article-list { 801 | padding: 20px calc(20% + 64px); 802 | } 803 | } 804 | @media (max-width: 1480px) { 805 | .cover .middle .info { 806 | padding-left: 15%; 807 | } 808 | .cover .middle .nav { 809 | padding-left: calc(15% + 130px); 810 | padding-right: calc(15% + 60px); 811 | } 812 | .article-list { 813 | padding: 20px calc(15% + 64px); 814 | } 815 | } 816 | @media (max-width: 1300px) { 817 | .cover .middle .info { 818 | padding-left: 12%; 819 | } 820 | .cover .middle .nav { 821 | padding-left: calc(12% + 130px); 822 | padding-right: calc(12% + 60px); 823 | } 824 | .article-list { 825 | padding: 20px calc(12% + 64px); 826 | } 827 | } 828 | @media (max-width: 1100px) { 829 | .cover .middle .info { 830 | padding-left: 8%; 831 | } 832 | .cover .middle .nav { 833 | padding-left: calc(8% + 130px); 834 | padding-right: calc(8% + 60px); 835 | } 836 | .article-list { 837 | padding: 20px calc(8% + 64px); 838 | } 839 | } 840 | @media (max-width: 768px) { 841 | /* 从这里开始算移动端 */ 842 | html { 843 | width: initial; 844 | overflow-x: hidden; 845 | } 846 | .cover .middle .info { 847 | padding-left: 0; 848 | display: flex; 849 | flex-direction: column; 850 | align-items: center; 851 | } 852 | .cover .middle .nav { 853 | padding-left: 0; 854 | padding-right: 0; 855 | display: flex; 856 | margin-top: 5px; 857 | justify-content: center; 858 | } 859 | .cover .middle .info .texts { 860 | margin-left: 0; 861 | display: flex; 862 | flex-direction: column; 863 | align-items: center; 864 | } 865 | .cover .middle .info .texts .title { 866 | font-size: 28px; 867 | } 868 | .cover .middle .info .texts .description { 869 | font-size: 16px; 870 | } 871 | .article-list { 872 | padding: 20px 0; 873 | } 874 | .archive-title{ 875 | margin:0 20px 20px; 876 | margin-bottom:20px!important; 877 | } 878 | .cover .middle .info .avatar { 879 | padding-right: 0px; 880 | border-right: none; 881 | } 882 | .cover .middle .nav .item{ 883 | font-size: 14px; 884 | padding: 15px 5px; 885 | } 886 | .article-list .article { 887 | flex-direction: column; 888 | align-items: center; 889 | } 890 | 891 | .article-list .article .tooltip { 892 | display: flex; 893 | padding: 0 20px; 894 | width: 100%; 895 | } 896 | .article-list .article .article-main { 897 | width:100%; 898 | padding: 0 20px; 899 | } 900 | .article-mobile-title { 901 | display: flex!important; 902 | font-size: 25px; 903 | flex-direction: row; 904 | align-items: center; 905 | margin-left: 10px; 906 | } 907 | .font-control, 908 | .go-comment, 909 | .go-share { 910 | display: none!important; 911 | } 912 | .article-list .article .article-main .article-title a { 913 | display: none; 914 | } 915 | .article-list .article .article-main .article-content { 916 | font-size: 14px; 917 | } 918 | .article-list .article .article-main .more a { 919 | font-size: 15px; 920 | } 921 | .article-list .article .article-main .preview-image-container{ 922 | margin-left: -20px; 923 | width: 100vw; 924 | margin-top: -60px; 925 | } 926 | .article-list .article .article-main .preview-image-container .preview-image{ 927 | height:250px; 928 | } 929 | .article-list .article .article-main .preview-image-container .preview-image-title-content{ 930 | font-size:25px; 931 | } 932 | #comments > .comment-list > li > .comment-children > .comment-list > li { 933 | padding: 15px 15px 0; 934 | margin-left:15px; 935 | } 936 | #comments .comment-content{ 937 | font-size:13px; 938 | } 939 | #comments .avatar{ 940 | height:40px; 941 | width:40px; 942 | } 943 | .cover-filter { 944 | height: 260px!important; 945 | } 946 | .cover { 947 | height: 260px!important; 948 | } 949 | .page-navigator{ 950 | margin:0 20px; 951 | } 952 | .footer{ 953 | flex-direction: column!important; 954 | } 955 | .info-left{ 956 | border-left:none!important; 957 | text-align: center; 958 | } 959 | .info-right{ 960 | border-right:none!important; 961 | text-align: center!important; 962 | } 963 | } 964 | table thead{ 965 | background-color: #e6e6e6; 966 | color: black; 967 | } 968 | table thead tr th{ 969 | font-weight: 400; 970 | } 971 | table tbody tr td{ 972 | border-bottom: 1px solid #d4d4d4; 973 | transition:background-color 0.5s; 974 | padding:5px 10px; 975 | } 976 | table tbody tr td:hover{ 977 | background-color:#fafafa; 978 | } 979 | .animated { 980 | -webkit-animation-duration: 1s; 981 | animation-duration: 1s; 982 | -webkit-animation-fill-mode: both; 983 | animation-fill-mode: both; 984 | } 985 | 986 | @-webkit-keyframes fadeInUp { 987 | from { 988 | opacity: 0; 989 | -webkit-transform: translate3d(0, 25%, 0); 990 | transform: translate3d(0, 25%, 0); 991 | } 992 | 993 | to { 994 | opacity: 1; 995 | -webkit-transform: none; 996 | transform: none; 997 | } 998 | } 999 | 1000 | @keyframes fadeInUp { 1001 | from { 1002 | opacity: 0; 1003 | -webkit-transform: translate3d(0, 25%, 0); 1004 | transform: translate3d(0, 25%, 0); 1005 | } 1006 | 1007 | to { 1008 | opacity: 1; 1009 | -webkit-transform: none; 1010 | transform: none; 1011 | } 1012 | } 1013 | 1014 | .fadeInUp { 1015 | -webkit-animation-name: fadeInUp; 1016 | animation-name: fadeInUp; 1017 | } --------------------------------------------------------------------------------