Hare/blog.hareworks.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

It is now possible to display #1

Merged
Hare merged 24 commits from develop into master 2024-08-26 18:55:10 +09:00
Conversation 0 Commits 24 Files Changed 46 +75 -52
2 changed files with 75 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 02f0f318eb - Show all commits

84
src/lib/components/cursor.svelte
View File

@ -1,52 +1,52 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
let cursor: HTMLDivElement; let cursor: HTMLDivElement;
type position = { type position = {
x: number; x: number;
y: number; y: number;
}; };
let disabled = false; let disabled = false;
let rawPosition: position = { x: 0, y: -100 }; let rawPosition: position = { x: 0, y: -100 };
let position: position = { x: 0, y: 0 }; let position: position = { x: 0, y: 0 };
onMount(() => { onMount(() => {
window.addEventListener('mousemove', (e) => { window.addEventListener('mousemove', (e) => {
rawPosition = { x: e.clientX, y: e.clientY }; rawPosition = { x: e.clientX, y: e.clientY };
}); });
window.addEventListener('touchstart', (e) => { window.addEventListener('touchstart', (e) => {
cursor.style.display = 'none'; cursor.style.display = 'none';
disabled = true; disabled = true;
}); });
const loop = () => { const loop = () => {
if (disabled) return; if (disabled) return;
position.x += (rawPosition.x - position.x) / 12; position.x += (rawPosition.x - position.x) / 12;
position.y += (rawPosition.y - position.y) / 12; position.y += (rawPosition.y - position.y) / 12;
cursor.style.top = `${position.y}px`; cursor.style.top = `${position.y}px`;
cursor.style.left = `${position.x}px`; cursor.style.left = `${position.x}px`;
cursor.style.rotate = `rotate(${position.x}deg)`; cursor.style.rotate = `rotate(${position.x}deg)`;
requestAnimationFrame(loop); requestAnimationFrame(loop);
}; };
loop(); loop();
}); });
</script> </script>
<div class="cursor" bind:this={cursor} /> <div class="cursor" bind:this={cursor}></div>
<style lang="scss"> <style lang="scss">
.cursor { .cursor {
position: fixed; position: fixed;
top: -100px; top: -100px;
left: 0px; left: 0px;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background: #ffffff; background: #ffffff;
pointer-events: none; pointer-events: none;
z-index: 999; z-index: 999;
mix-blend-mode: difference; mix-blend-mode: difference;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
</style> </style>

43
src/routes/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types'; import type { PageData } from './$types';
// import Cursor from '$lib/components/cursor.svelte'; import Cursor from '$lib/components/cursor.svelte';
import Footer from '$lib/components/footer.svelte'; import Footer from '$lib/components/footer.svelte';
import FormattedDate from '$lib/components/formatted_date.svelte'; import FormattedDate from '$lib/components/formatted_date.svelte';
@ -90,7 +90,14 @@
<ul> <ul>
{#each data.recent as post} {#each data.recent as post}
<li> <li>
<a href={post.link}>{post.title} - {post.date}</a> <a
href={post.link}
on:mouseenter={(e) =>
(e.target as HTMLAnchorElement).style.setProperty(
'--mouse-position',
`${e.offsetX}px`
)}>{post.title}</a
>
</li> </li>
{/each} {/each}
</ul> </ul>
@ -107,6 +114,7 @@
</div> </div>
<Footer /> <Footer />
</main> </main>
<Cursor />
</div> </div>
<style lang="scss"> <style lang="scss">
@ -121,7 +129,7 @@
width: 100vw; width: 100vw;
height: 100dvh; height: 100dvh;
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
overflow: auto; overflow: hidden;
} }
.controls { .controls {
position: fixed; position: fixed;
@ -142,6 +150,8 @@
color: white; color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
> div { > div {
margin: 10px 0; margin: 10px 0;
} }
@ -250,6 +260,26 @@
} }
a { a {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
text-decoration: none;
border-bottom: 1px solid var(--line-primary);
color: white;
box-sizing: border-box;
--mouse-position: 0;
&::after {
content: ' ';
position: absolute;
bottom: 0;
left: var(--mouse-position);
right: calc(100% - var(--mouse-position));
height: 1px;
background-color: white;
transition: 0.2s ease-in-out;
transition-property: left right;
}
&:hover::after {
left: 0px;
right: 0px;
}
} }
button { button {
font-size: 1rem; font-size: 1rem;
@ -285,13 +315,6 @@
} }
} }
a {
text-decoration: none;
border-bottom: 1px solid var(--line-primary);
color: white;
box-sizing: border-box;
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
main { main {
width: 100%; width: 100%;