mirror of
https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git
synced 2026-07-03 15:41:26 +00:00
update footer
This commit is contained in:
parent
d76f371c72
commit
20d185adb7
6 changed files with 91 additions and 14 deletions
1
public/images/email.svg
Normal file
1
public/images/email.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M957.1 183.2c-0.2-0.4-0.3-0.8-0.5-1.2-0.7-1.7-1.6-3.3-2.5-4.8-0.3-0.5-0.7-1.1-1-1.6-0.5-0.8-1.1-1.6-1.6-2.3-0.2-0.3-0.4-0.6-0.7-0.9-0.4-0.6-0.9-1.1-1.4-1.7-0.5-0.5-1-1.1-1.5-1.6-2.3-2.4-4.9-4.6-7.7-6.4-0.7-0.4-1.4-0.9-2.1-1.3-2.8-1.7-5.9-3-9-4l-0.6-0.2c-0.5-0.2-1.1-0.3-1.7-0.4-3.7-1-7.6-1.5-11.4-1.5H106.7l-0.9 0.1h-0.2C82.2 157 64 176.6 64.1 200.1c0 12.2 5 23.9 13.8 32.3l404.8 404.8c18 17.6 46.7 17.7 64.8 0.2l323.3-323.3v468.6h-717V648.2c0-24.7-20.1-44.8-44.8-44.8-24.7 0-44.8 20.1-44.8 44.8v179.3c0 24.7 20.1 44.8 44.8 44.8h806.6c24.7 0 44.8-20.1 44.8-44.8V200.1c-0.1-5.8-1.2-11.5-3.3-16.9z m-442 359.7l-298-298h596l-298 298z" fill="" /><path d="M108.9 513.8c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-24.7-20.1-44.8-44.8-44.8-24.7 0-44.8 20.1-44.8 44.8V469c0 24.7 20 44.8 44.8 44.8z" fill="" /></svg>
|
||||
|
After Width: | Height: | Size: 994 B |
1
public/images/github-outline-7.svg
Normal file
1
public/images/github-outline-7.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg class="svg-icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M692.906667 938.666667a42.666667 42.666667 0 0 1-42.666667-42.666667v-110.933333a91.733333 91.733333 0 0 0-23.04-70.826667 42.666667 42.666667 0 0 1 26.026667-71.253333C757.333333 630.613333 853.333333 597.333333 853.333333 416.853333a170.666667 170.666667 0 0 0-28.586666-94.72 117.333333 117.333333 0 0 1-17.493334-87.893333 158.293333 158.293333 0 0 0 0-60.16 326.4 326.4 0 0 0-89.173333 46.506667 42.666667 42.666667 0 0 1-35.84 6.4 433.066667 433.066667 0 0 0-235.52 0 42.666667 42.666667 0 0 1-35.84-6.4 315.733333 315.733333 0 0 0-90.026667-46.506667 150.186667 150.186667 0 0 0 0 60.16 121.173333 121.173333 0 0 1-18.346666 88.746667 173.653333 173.653333 0 0 0-28.586667 95.146666c0 165.973333 80.213333 210.346667 200.533333 225.706667a42.666667 42.666667 0 0 1 34.986667 28.16 42.666667 42.666667 0 0 1-8.96 42.666667 87.893333 87.893333 0 0 0-23.466667 66.56V896a42.666667 42.666667 0 0 1-85.333333 0v-24.32a256 256 0 0 1-224.853333-89.173333 166.4 166.4 0 0 0-49.493334-37.546667 42.666667 42.666667 0 1 1 21.333334-82.773333 210.346667 210.346667 0 0 1 85.333333 58.026666c42.666667 42.666667 85.333333 80.213333 166.4 64.853334a165.973333 165.973333 0 0 1 9.813333-67.413334c-87.893333-22.186667-213.333333-85.333333-213.333333-298.666666a256 256 0 0 1 42.666667-142.08 36.266667 36.266667 0 0 0 5.546666-26.453334 242.773333 242.773333 0 0 1 14.08-136.96 42.666667 42.666667 0 0 1 26.88-24.32c14.506667-4.266667 66.56-12.8 165.12 51.2a518.826667 518.826667 0 0 1 242.773334 0c98.56-64 150.613333-55.893333 164.693333-51.2a42.666667 42.666667 0 0 1 26.88 24.32 243.626667 243.626667 0 0 1 14.08 137.386667 32 32 0 0 0 4.693333 24.32 256 256 0 0 1 42.666667 142.506667c0 216.32-124.586667 279.04-213.333333 298.666666a182.613333 182.613333 0 0 1 9.386666 71.253334V896a42.666667 42.666667 0 0 1-40.106666 42.666667z" /></svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -20,6 +20,7 @@ const blocks: string[] = Array.from({ length: blockCount }, (_, i) => {
|
|||
title={`Build ${safeHash}`}
|
||||
aria-label={`Build ${safeHash}`}
|
||||
>
|
||||
<div class="build-hint">Astro Build</div>
|
||||
{
|
||||
blocks.map((color: string) => (
|
||||
<span class="build-block" style={`background:${color}`} />
|
||||
|
|
@ -28,15 +29,19 @@ const blocks: string[] = Array.from({ length: blockCount }, (_, i) => {
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.build-hint {
|
||||
margin-right: 5px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.build-hash {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
/* vertical-align: middle; */
|
||||
}
|
||||
|
||||
.build-block {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,19 +7,79 @@ const t = getTranslations(lang);
|
|||
---
|
||||
|
||||
<footer class="footer">
|
||||
<p set:html={t.footer.githubIntro} />
|
||||
<p set:html={t.footer.repoIntro} />
|
||||
<a
|
||||
href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
|
||||
class="github"
|
||||
aria-label="GitHub repository"></a>
|
||||
<a href="mailto:cloverta@petalmail.com" class="email" aria-label="Email"></a>
|
||||
<p class="footer-content-pc">
|
||||
© 2026 ClovertaTheTrilobita · <a
|
||||
href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
|
||||
>Source code</a
|
||||
> licensed under MIT. Content rights reserved.
|
||||
<!-- <code class="build-commit">{commit.slice(0, 7)}</code> -->
|
||||
</p>
|
||||
|
||||
<div class="footer-content-mobile">
|
||||
<p>© 2026 ClovertaTheTrilobita</p>
|
||||
<p>Content rights reserved.</p>
|
||||
</div>
|
||||
|
||||
<BuildHashBlocks />
|
||||
<code class="build-commit">{commit.slice(0, 7)}</code>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.github {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #1f2328;
|
||||
-webkit-mask: url("/images/github-outline-7.svg") no-repeat center / contain;
|
||||
mask: url("/images/github-outline-7.svg") no-repeat center / contain;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.email {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #1f2328;
|
||||
-webkit-mask: url("/images/email.svg") no-repeat center / contain;
|
||||
mask: url("/images/email.svg") no-repeat center / contain;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.5rem;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.github:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.email:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
:global(html.dark .github) {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
:global(html.dark .email) {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 1rem;
|
||||
padding: 1.5rem 0 0;
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.9;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
|
|
@ -38,14 +98,14 @@ const t = getTranslations(lang);
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0.4rem 0;
|
||||
.footer-content-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #7fb3ff;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
.footer p {
|
||||
margin: 0.4rem 0;
|
||||
font-size: 0.8rem;
|
||||
/* display: inline-flex; */
|
||||
}
|
||||
|
||||
:global(.dark) .footer::before {
|
||||
|
|
@ -57,4 +117,14 @@ const t = getTranslations(lang);
|
|||
transparent 42px 56px
|
||||
);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.footer-content-pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-content-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
'· <a href="https://blog.cloudti.de/">Parsifal\'s Blog</a>',
|
||||
"· And some other websites whose names I have unfortunately forgotten",
|
||||
"Thank you for your ideas and passion!",
|
||||
"In addition, this blog is fully open source. You can find its source code through the link in the footer.",
|
||||
"In addition, this blog is open source under MIT License. You can find its source code through the link in the footer.",
|
||||
]
|
||||
},
|
||||
tags: {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
'· <a href="https://blog.cloudti.de/">Parsifal\'s Blog</a>',
|
||||
"· 还有一些已经忘记名字的网站",
|
||||
"谢谢你们的想法和热情！",
|
||||
"此外，这个博客完全开源，你可以从页脚的链接处获取它的源代码。",
|
||||
"此外，这个博客的源码使用 MIT 协议开源，你可以从页脚的链接处获取它的源代码。",
|
||||
]
|
||||
},
|
||||
tags: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue