nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化页脚图片尺寸及垂直居中排版对齐

Browse Source
This commit is contained in:
User
2026-03-13 14:07:38 +08:00
parent b6ab334f7d
commit c0bd8e7556
6 changed files with 391 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
footer.html Normal file
View File

@@ -0,0 +1,279 @@
<style>
.footer-badges {
--footer-font-size: 12px;
font-family: "Open Sans", "Microsoft YaHei", "PingFang SC", sans-serif;
font-size: var(--footer-font-size);
line-height: 1.35;
text-align: center;
padding: 5px 0;
margin-top: 30px;
}
.footer-badges * {
margin-bottom: 0px;
}
.badge-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 0px;
align-items: center;
justify-content: center;
}
.badge-row:last-child {
margin-bottom: 0;
}
.badge-item {
display: inline-flex;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.badge-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.badge-subject {
background: linear-gradient(135deg, #5a5a5a, #4a4a4a);
color: #fff;
padding: 4px 12px;
font-weight: 600;
white-space: nowrap;
font-size: inherit;
letter-spacing: 0.5px;
}
.badge-value {
padding: 4px 12px;
color: #fff;
font-weight: 500;
white-space: nowrap;
font-size: inherit;
}
.bg-green {
background: linear-gradient(135deg, #4caf50, #388e3c);
position: relative;
overflow: hidden;
}
.bg-green::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.footer-badges a {
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
vertical-align: middle;
}
.footer-badges a:hover {
text-decoration: none;
color: inherit !important;
}
.badge-value a {
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.badge-value img,
.footer-badges a img {
height: 1.4em;
width: auto;
object-fit: contain;
filter: brightness(1.1);
border-radius: 2px;
transform: translateY(-1px);
}
.footer-badges img[alt="又拍云"] {
height: 1.8em;
}
.footer-badges img[alt^="CC"] {
height: 1.6em;
}
.badge-subject i {
font-size: 1.1em;
vertical-align: -0.1em;
margin-right: 4px;
}
.plain-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1.5;
margin-bottom: 0px;
text-align: center;
}
.plain-row > span {
display: contents;
}
.plain-row .separator {
display: none;
}
.plain-row:last-child {
margin-bottom: 0;
}
.runtime-row {
margin-bottom: 0px;
}
.beian-row {
font-size: inherit;
margin-bottom: 0px;
}
.report-row {
font-size: inherit;
margin-bottom: 0px;
}
@media (max-width: 768px) {
.footer-badges {
font-size: var(--footer-font-size);
padding: 15px 10px;
}
.badge-row {
gap: 8px;
margin-bottom: 12px;
}
.badge-item {
flex-direction: column;
border-radius: 6px;
}
.badge-subject,
.badge-value {
padding: 4px 10px;
font-size: 11px;
}
.plain-row {
line-height: 1.6;
}
}
@media (max-width: 480px) and (orientation: portrait) {
.footer-badges {
font-size: var(--footer-font-size);
}
.badge-item {
width: 100%;
max-width: 280px;
}
}
.footer-badges .copyright-row .heimu a {
color: #252525 !important;
transition: inherit;
}
.footer-badges .copyright-row .heimu:hover a,
.footer-badges .copyright-row .heimu:active a {
color: #fff !important;
transition: inherit;
}
</style>
<div class="footer-badges">
<span class="huhua" title="博君一笑，不必照单全收XD">“既没有编程，也没有小记，什么神人网站”</span>
<div class="badge-row runtime-row">
<div class="badge-item" title="懒狗说是，建站这么久屁都没几个">
<div class="badge-subject">
<i class="fa fa-clock-o"></i>这个BYD网站历经迁移、数据丢失，已经运行了
</div>
<div class="badge-value bg-green">
<span id="blog_running_days">1145</span>天
<span id="blog_running_hours">14</span>小时
<span id="blog_running_mins">19</span>分钟
<span id="blog_running_secs">19</span>秒
</div>
</div>
</div>
<div class="plain-row beian-row">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2025392543号-1</a>
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=44180202000805" target="_blank" rel="noopener noreferrer">
<img src="https://blog.cartol.top/images/beian.png" alt="公安备案">粤公网安备44180202000805号
</a>
<a href="https://icp.gov.moe/?keyword=20250727" target="_blank" rel="noopener noreferrer">
<img src="https://blog.cartol.top/images/moeicp.png" alt="萌ICP备案">萌ICP备20250727号
</a>
</div>
<div class="plain-row report-row">
<a href="https://www.12377.cn" target="_blank" rel="noopener noreferrer">
<img src="https://blog.cartol.top/images/12377.png" alt="举报中心">违法和不良信息举报
</a>
<a href="https://blog.cartol.top/privacy/" target="_blank" rel="noopener noreferrer">隐私政策</a>
<a href="https://blog.cartol.top/disclaimer/" target="_blank" rel="noopener noreferrer">免责声明</a>
</div>
<div class="badge-row">
<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" rel="noopener noreferrer">
本网站由<img src="/images/upyun.png" alt="又拍云">提供 CDN 加速/云存储服务
</a>
</div>
<div class="plain-row copyright-row">
<span>
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener noreferrer">
<img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" alt="CC BY-NC-SA 4.0">
</a>
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener noreferrer">
文章内容采用 CC BY-NC-SA 4.0 许可
</a>
<span class="heimu" title="你知道的太多了">
黑幕样式抄自<a href="http://zh.moegirl.org/MediaWiki:Common.css" target="_blank" rel="noopener noreferrer">萌娘百科</a>
</span>
</span>
</div>
<div class="plain-row copyright-row">
<span>&copy; <span id="copyright-years">2022-2025</span>.
<a href="https://blog.cartol.top/" target="_blank" rel="noopener noreferrer">编程小记</a> All Rights Reserved.
</span>
</div>
</div>