mirror of
https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git
synced 2026-07-03 23:51:26 +00:00
Compare commits
No commits in common. "fca3815abd283134bb60a443ba171b8676f6b5a7" and "737d8c5b511fedf3d1c05d0b3ad5ba4561f8e8bc" have entirely different histories.
fca3815abd
...
737d8c5b51
4 changed files with 12 additions and 54 deletions
|
|
@ -31,8 +31,6 @@ const data = Astro.props;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-bottom: 1.7rem;
|
|
||||||
padding-top: 1.7rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-link {
|
.post-link {
|
||||||
|
|
@ -55,18 +53,7 @@ const data = Astro.props;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-title {
|
.post-title {
|
||||||
font-family:
|
font-family: "Maple Mono", "Maple Mono CN";
|
||||||
sans-serif,
|
|
||||||
system-ui,
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
"Segoe UI",
|
|
||||||
Roboto,
|
|
||||||
Oxygen,
|
|
||||||
Ubuntu,
|
|
||||||
Cantarell,
|
|
||||||
"Open Sans",
|
|
||||||
"Helvetica Neue";
|
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1.34rem;
|
font-size: 1.34rem;
|
||||||
|
|
|
||||||
|
|
@ -95,11 +95,11 @@ const {
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
border: #a7a7a7 1.5px solid;
|
border: #a7a7a7 2px solid;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: rgba(255, 255, 255, 0.92);
|
background: rgba(255, 255, 255, 0.92);
|
||||||
color: #222;
|
color: #222;
|
||||||
/* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -151,12 +151,12 @@ const {
|
||||||
|
|
||||||
#theme-toggle-fab,
|
#theme-toggle-fab,
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
/* opacity: 0; */
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transform: translateY(150px);
|
transform: translateY(10px);
|
||||||
transition:
|
transition:
|
||||||
opacity 0.2s ease,
|
opacity 0.2s ease,
|
||||||
transform 0.27s ease,
|
transform 0.2s ease,
|
||||||
visibility 0.2s ease;
|
visibility 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,6 @@ const t = getTranslations(lang);
|
||||||
description={frontmatter.description}
|
description={frontmatter.description}
|
||||||
image={frontmatter.image?.url}
|
image={frontmatter.image?.url}
|
||||||
>
|
>
|
||||||
<div id="reading-progress" aria-hidden="true"></div>
|
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
class="back-button"
|
class="back-button"
|
||||||
|
|
@ -131,39 +130,11 @@ const t = getTranslations(lang);
|
||||||
backButton.dataset.bound = "true";
|
backButton.dataset.bound = "true";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const updateProgress = () => {
|
|
||||||
const doc = document.documentElement;
|
|
||||||
const scrollTop = window.scrollY || doc.scrollTop;
|
|
||||||
const scrollHeight = doc.scrollHeight - window.innerHeight;
|
|
||||||
|
|
||||||
const progress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
|
|
||||||
|
|
||||||
const bar = document.getElementById("reading-progress");
|
|
||||||
if (bar) {
|
|
||||||
bar.style.width = `${Math.min(progress, 100)}%`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
updateProgress();
|
|
||||||
window.addEventListener("scroll", updateProgress, { passive: true });
|
|
||||||
window.addEventListener("resize", updateProgress);
|
|
||||||
initFloatingActions();
|
initFloatingActions();
|
||||||
document.addEventListener("astro:page-load", initFloatingActions);
|
document.addEventListener("astro:page-load", initFloatingActions);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#reading-progress {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
width: 0;
|
|
||||||
height: 3px;
|
|
||||||
background: #5a89ff;
|
|
||||||
transition: width 0.08s linear;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button {
|
.back-button {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 1.25rem;
|
top: 1.25rem;
|
||||||
|
|
@ -175,18 +146,18 @@ const t = getTranslations(lang);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: #285ee9 1.5px solid;
|
border: #285ee9 2px solid;
|
||||||
background: rgba(255, 255, 255, 0.92);
|
background: rgba(255, 255, 255, 0.92);
|
||||||
color: #222;
|
color: #222;
|
||||||
/* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
|
||||||
backdrop-filter: blur(6px);
|
backdrop-filter: blur(6px);
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transform: translateY(-80px);
|
transform: translateY(10px);
|
||||||
/* opacity: 0; */
|
opacity: 0;
|
||||||
transition:
|
transition:
|
||||||
opacity 0.2s ease,
|
opacity 0.2s ease,
|
||||||
transform 0.27s ease,
|
transform 0.2s ease,
|
||||||
visibility 0.2s ease;
|
visibility 0.2s ease;
|
||||||
box-shadow 0.2s ease,
|
box-shadow 0.2s ease,
|
||||||
background 0.2s ease,
|
background 0.2s ease,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue