style(landing-page): force dark theme (#181)
* style(landing-page): force dark theme * fix(landing-page): wrong title and url
This commit is contained in:
Ayo Ayco
GitHub
parent
47c0b5e90e
commit
205d1f27b2
4 changed files with 10 additions and 105 deletions
|
|
@ -2,11 +2,11 @@ import tailwind from "@astrojs/tailwind";
|
|||
import { defineConfig } from "astro/config";
|
||||
|
||||
export default defineConfig({
|
||||
site: "https://astro-moon-landing.netlify.app/",
|
||||
site: "https://astro-reactive.dev",
|
||||
integrations: [tailwind()],
|
||||
vite: {
|
||||
ssr: {
|
||||
external: ["@11ty/eleventy-img", "svgo"],
|
||||
external: ["svgo"],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import { Icon } from "astro-icon";
|
||||
import ThemeSwitcher from "~/components/theme-switcher.astro";
|
||||
// import ThemeSwitcher from "~/components/theme-switcher.astro";
|
||||
|
||||
const socials = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const description =
|
|||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
|
||||
<title>Astro Reactive Library</title>
|
||||
<title>Astro Reactive</title>
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- fonts -->
|
||||
|
|
@ -52,6 +52,7 @@ const description =
|
|||
<!-- initialize theme -->
|
||||
<script is:inline>
|
||||
const themeSaved = localStorage.getItem("theme");
|
||||
const forceTheme = "dark";
|
||||
|
||||
if (themeSaved) {
|
||||
document.documentElement.dataset.theme = themeSaved;
|
||||
|
|
@ -66,9 +67,10 @@ const description =
|
|||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (event) => {
|
||||
if (!localStorage.getItem("theme")) {
|
||||
document.documentElement.dataset.theme = event.matches
|
||||
? "dark"
|
||||
: "light";
|
||||
document.documentElement.dataset.theme = forceTheme;
|
||||
// event.matches
|
||||
// ? "dark"
|
||||
// : "light";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -76,7 +78,7 @@ const description =
|
|||
<body
|
||||
class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white"
|
||||
>
|
||||
<Splash client:build />
|
||||
<Splash client:load />
|
||||
<!--AstroSection /-->
|
||||
<Header />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,6 @@ import Copynpm from "~/components/copynpm.astro";
|
|||
---
|
||||
|
||||
<section class="h-screen flex flex-col astro relative">
|
||||
<div id="starfield" class="absolute -z-10 inset-0">
|
||||
<canvas id="starfield-canvas"></canvas>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-col-reverse justify-end h-full content-center grid pt-0"
|
||||
>
|
||||
|
|
@ -36,100 +33,6 @@ import Copynpm from "~/components/copynpm.astro";
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const COUNT = 800;
|
||||
const SPEED = 0.3;
|
||||
|
||||
class Star {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
xPrev: number;
|
||||
yPrev: number;
|
||||
|
||||
constructor(x = 0, y = 0, z = 0) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.z = z;
|
||||
this.xPrev = x;
|
||||
this.yPrev = y;
|
||||
}
|
||||
|
||||
update(width: number, height: number, speed: number) {
|
||||
this.xPrev = this.x;
|
||||
this.yPrev = this.y;
|
||||
this.z += speed * 0.0675;
|
||||
this.x += this.x * (speed * 0.0225) * this.z;
|
||||
this.y += this.y * (speed * 0.0225) * this.z;
|
||||
if (
|
||||
this.x > width / 2 ||
|
||||
this.x < -width / 2 ||
|
||||
this.y > height / 2 ||
|
||||
this.y < -height / 2
|
||||
) {
|
||||
this.x = Math.random() * width - width / 2;
|
||||
this.y = Math.random() * height - height / 2;
|
||||
this.xPrev = this.x;
|
||||
this.yPrev = this.y;
|
||||
this.z = 0;
|
||||
}
|
||||
}
|
||||
|
||||
draw(ctx: CanvasRenderingContext2D) {
|
||||
ctx.lineWidth = this.z;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(this.x, this.y);
|
||||
ctx.lineTo(this.xPrev, this.yPrev);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
|
||||
let rafId = 0;
|
||||
|
||||
const canvas: HTMLCanvasElement = document.querySelector("#starfield-canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
const container = document.querySelector("#starfield");
|
||||
const resizeObserver = new ResizeObserver(setup);
|
||||
resizeObserver.observe(container);
|
||||
|
||||
function setup() {
|
||||
rafId > 0 && cancelAnimationFrame(rafId);
|
||||
const { clientWidth: width, clientHeight: height } = container;
|
||||
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = width * dpr;
|
||||
canvas.height = height * dpr;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
for (const star of stars) {
|
||||
star.x = Math.random() * width - width / 2;
|
||||
star.y = Math.random() * height - height / 2;
|
||||
star.z = 0;
|
||||
}
|
||||
|
||||
ctx.translate(width / 2, height / 2);
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
|
||||
ctx.strokeStyle = "white";
|
||||
rafId = requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
function frame() {
|
||||
const { clientWidth: width, clientHeight: height } = container;
|
||||
|
||||
for (const star of stars) {
|
||||
star.update(width, height, SPEED);
|
||||
star.draw(ctx);
|
||||
}
|
||||
|
||||
ctx.fillRect(-width / 2, -height / 2, width, height);
|
||||
rafId = requestAnimationFrame(frame);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes float {
|
||||
0% {
|
||||
|
|
|
|||
Loading…
Reference in a new issue