080600
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
function animate() {
|
||||
const animateElements = document.querySelectorAll('.animate')
|
||||
|
||||
animateElements.forEach((element, index) => {
|
||||
setTimeout(() => {
|
||||
element.classList.add('show')
|
||||
}, index * 150)
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", animate)
|
||||
function animate() {
|
||||
const animateElements = document.querySelectorAll('.animate')
|
||||
|
||||
animateElements.forEach((element, index) => {
|
||||
setTimeout(() => {
|
||||
element.classList.add('show')
|
||||
}, index * 150)
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", animate)
|
||||
document.addEventListener("astro:after-swap", animate)
|
||||
@@ -1,96 +1,96 @@
|
||||
|
||||
function generateParticles(n) {
|
||||
let value = `${getRandom(2560)}px ${getRandom(2560)}px #000`;
|
||||
for (let i = 2; i <= n; i++) {
|
||||
value += `, ${getRandom(2560)}px ${getRandom(2560)}px #000`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function generateStars(n) {
|
||||
let value = `${getRandom(2560)}px ${getRandom(2560)}px #fff`;
|
||||
for (let i = 2; i <= n; i++) {
|
||||
value += `, ${getRandom(2560)}px ${getRandom(2560)}px #fff`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function getRandom(max) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
|
||||
function initBG() {
|
||||
const particlesSmall = generateParticles(1000);
|
||||
const particlesMedium = generateParticles(500);
|
||||
const particlesLarge = generateParticles(250);
|
||||
const particles1 = document.getElementById('particles1');
|
||||
const particles2 = document.getElementById('particles2');
|
||||
const particles3 = document.getElementById('particles3');
|
||||
|
||||
if (particles1) {
|
||||
particles1.style.cssText = `
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesSmall};
|
||||
animation: animStar 50s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
if (particles2) {
|
||||
particles2.style.cssText = `
|
||||
width: 1.5px;
|
||||
height: 1.5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesMedium};
|
||||
animation: animateParticle 100s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
if (particles3) {
|
||||
particles3.style.cssText = `
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesLarge};
|
||||
animation: animateParticle 150s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
const starsSmall = generateStars(1000);
|
||||
const starsMedium = generateStars(500);
|
||||
const starsLarge = generateStars(250);
|
||||
const stars1 = document.getElementById('stars1');
|
||||
const stars2 = document.getElementById('stars2');
|
||||
const stars3 = document.getElementById('stars3');
|
||||
|
||||
if (stars1) {
|
||||
stars1.style.cssText = `
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsSmall};
|
||||
`;
|
||||
}
|
||||
|
||||
if (stars2) {
|
||||
stars2.style.cssText = `
|
||||
width: 1.5px;
|
||||
height: 1.5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsMedium};
|
||||
`;
|
||||
}
|
||||
|
||||
if (stars3) {
|
||||
stars3.style.cssText = `
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsLarge};
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('astro:after-swap', initBG);
|
||||
|
||||
function generateParticles(n) {
|
||||
let value = `${getRandom(2560)}px ${getRandom(2560)}px #000`;
|
||||
for (let i = 2; i <= n; i++) {
|
||||
value += `, ${getRandom(2560)}px ${getRandom(2560)}px #000`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function generateStars(n) {
|
||||
let value = `${getRandom(2560)}px ${getRandom(2560)}px #fff`;
|
||||
for (let i = 2; i <= n; i++) {
|
||||
value += `, ${getRandom(2560)}px ${getRandom(2560)}px #fff`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function getRandom(max) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
|
||||
function initBG() {
|
||||
const particlesSmall = generateParticles(1000);
|
||||
const particlesMedium = generateParticles(500);
|
||||
const particlesLarge = generateParticles(250);
|
||||
const particles1 = document.getElementById('particles1');
|
||||
const particles2 = document.getElementById('particles2');
|
||||
const particles3 = document.getElementById('particles3');
|
||||
|
||||
if (particles1) {
|
||||
particles1.style.cssText = `
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesSmall};
|
||||
animation: animStar 50s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
if (particles2) {
|
||||
particles2.style.cssText = `
|
||||
width: 1.5px;
|
||||
height: 1.5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesMedium};
|
||||
animation: animateParticle 100s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
if (particles3) {
|
||||
particles3.style.cssText = `
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${particlesLarge};
|
||||
animation: animateParticle 150s linear infinite;
|
||||
`;
|
||||
}
|
||||
|
||||
const starsSmall = generateStars(1000);
|
||||
const starsMedium = generateStars(500);
|
||||
const starsLarge = generateStars(250);
|
||||
const stars1 = document.getElementById('stars1');
|
||||
const stars2 = document.getElementById('stars2');
|
||||
const stars3 = document.getElementById('stars3');
|
||||
|
||||
if (stars1) {
|
||||
stars1.style.cssText = `
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsSmall};
|
||||
`;
|
||||
}
|
||||
|
||||
if (stars2) {
|
||||
stars2.style.cssText = `
|
||||
width: 1.5px;
|
||||
height: 1.5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsMedium};
|
||||
`;
|
||||
}
|
||||
|
||||
if (stars3) {
|
||||
stars3.style.cssText = `
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
box-shadow: ${starsLarge};
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('astro:after-swap', initBG);
|
||||
initBG();
|
||||
@@ -1,10 +1,10 @@
|
||||
function onScroll() {
|
||||
const header = document.getElementById("header")
|
||||
if (window.scrollY > 0) {
|
||||
header.classList.add("scrolled")
|
||||
} else {
|
||||
header.classList.remove("scrolled")
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("scroll", onScroll)
|
||||
function onScroll() {
|
||||
const header = document.getElementById("header")
|
||||
if (window.scrollY > 0) {
|
||||
header.classList.add("scrolled")
|
||||
} else {
|
||||
header.classList.remove("scrolled")
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("scroll", onScroll)
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
function changeTheme() {
|
||||
const element = document.documentElement
|
||||
const theme = element.classList.contains("dark") ? "light" : "dark"
|
||||
|
||||
const css = document.createElement("style")
|
||||
|
||||
css.appendChild(
|
||||
document.createTextNode(
|
||||
`* {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
transition: none !important;
|
||||
}`,
|
||||
),
|
||||
)
|
||||
document.head.appendChild(css)
|
||||
|
||||
if (theme === "dark") {
|
||||
element.classList.add("dark")
|
||||
} else {
|
||||
element.classList.remove("dark")
|
||||
}
|
||||
|
||||
window.getComputedStyle(css).opacity
|
||||
document.head.removeChild(css)
|
||||
localStorage.theme = theme
|
||||
}
|
||||
|
||||
function preloadTheme() {
|
||||
const theme = (() => {
|
||||
const userTheme = localStorage.theme
|
||||
|
||||
if (userTheme === "light" || userTheme === "dark") {
|
||||
return userTheme
|
||||
} else {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
|
||||
}
|
||||
})()
|
||||
|
||||
const element = document.documentElement
|
||||
|
||||
if (theme === "dark") {
|
||||
element.classList.add("dark")
|
||||
} else {
|
||||
element.classList.remove("dark")
|
||||
}
|
||||
|
||||
localStorage.theme = theme
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
function initializeThemeButtons() {
|
||||
const headerThemeButton = document.getElementById("header-theme-button")
|
||||
const drawerThemeButton = document.getElementById("drawer-theme-button")
|
||||
headerThemeButton?.addEventListener("click", changeTheme)
|
||||
drawerThemeButton?.addEventListener("click", changeTheme)
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", initializeThemeButtons)
|
||||
initializeThemeButtons()
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", preloadTheme)
|
||||
|
||||
preloadTheme()
|
||||
function changeTheme() {
|
||||
const element = document.documentElement
|
||||
const theme = element.classList.contains("dark") ? "light" : "dark"
|
||||
|
||||
const css = document.createElement("style")
|
||||
|
||||
css.appendChild(
|
||||
document.createTextNode(
|
||||
`* {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
transition: none !important;
|
||||
}`,
|
||||
),
|
||||
)
|
||||
document.head.appendChild(css)
|
||||
|
||||
if (theme === "dark") {
|
||||
element.classList.add("dark")
|
||||
} else {
|
||||
element.classList.remove("dark")
|
||||
}
|
||||
|
||||
window.getComputedStyle(css).opacity
|
||||
document.head.removeChild(css)
|
||||
localStorage.theme = theme
|
||||
}
|
||||
|
||||
function preloadTheme() {
|
||||
const theme = (() => {
|
||||
const userTheme = localStorage.theme
|
||||
|
||||
if (userTheme === "light" || userTheme === "dark") {
|
||||
return userTheme
|
||||
} else {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
|
||||
}
|
||||
})()
|
||||
|
||||
const element = document.documentElement
|
||||
|
||||
if (theme === "dark") {
|
||||
element.classList.add("dark")
|
||||
} else {
|
||||
element.classList.remove("dark")
|
||||
}
|
||||
|
||||
localStorage.theme = theme
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
function initializeThemeButtons() {
|
||||
const headerThemeButton = document.getElementById("header-theme-button")
|
||||
const drawerThemeButton = document.getElementById("drawer-theme-button")
|
||||
headerThemeButton?.addEventListener("click", changeTheme)
|
||||
drawerThemeButton?.addEventListener("click", changeTheme)
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", initializeThemeButtons)
|
||||
initializeThemeButtons()
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", preloadTheme)
|
||||
|
||||
preloadTheme()
|
||||
|
||||
Reference in New Issue
Block a user