侧边栏壁纸
博主头像
iColak's Blog博主等级

人生来来往往,来日并不方长

  • 累计撰写 106 篇文章
  • 累计创建 31 个标签
  • 累计收到 382 条评论

目 录CONTENT

文章目录

Typecho小头图美化版式优化,优化夜间模式

苏维歌
2022-05-12 / 2 评论 / 0 点赞 / 11 阅读 / 3392 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-07-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

效果如本站

之前根据听闻blog教程进行修改,发现在夜间模式下有些问题,故进行了一些优化。

[post cid="335" cover="https://blog.static.icolak.com/typecho/2022/05/03/handsomelogo.png"/]
记得备份
handsome/libs/Content.php文件中[collapse status="false" title="点击展开"]

[/collapse]替换为:
[collapse status="false" title="点击展开"]

[/collapse]设置外观→开发者设置→自定义CSS,填入以下css样式:
[collapse status="false" title="点击展开"]

/*小头图版式美化*/
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#8abcd1;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}
html.theme-dark .tt-small-blur .tt-blur-img{background-color:#212121;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(0.3);filter:blur(1.275rem) brightness(0.3);}
html.theme-dark .tt-small-blur .post-meta h2,html.theme-dark .tt-small-blur .post-meta p{text-shadow:none;color:#adabab;letter-spacing:.09rem;}

[/collapse]

0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin
  3. QQ打赏

    qrcode qq

评论区