trafficlunar/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: catppuccin webring link

Browse source
This commit is contained in:
trafficlunar 2025-11-14 23:12:48 +00:00
parent 15dfd08c20
commit f1df452d02
5 changed files with 39 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/catppuccin.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 104 KiB

1
src/assets/icons/arrow-left.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M3.283 10.94a1.5 1.5 0 0 0 0 2.12l5.656 5.658a1.5 1.5 0 1 0 2.122-2.122L7.965 13.5H19.5a1.5 1.5 0 0 0 0-3H7.965l3.096-3.096a1.5 1.5 0 1 0-2.122-2.121z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 805 B

1
src/assets/icons/arrow-right.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="m15.06 5.283l5.657 5.657a1.5 1.5 0 0 1 0 2.12l-5.656 5.658a1.5 1.5 0 0 1-2.122-2.122l3.096-3.096H4.5a1.5 1.5 0 0 1 0-3h11.535L12.94 7.404a1.5 1.5 0 0 1 2.122-2.121Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 819 B

29
src/components/Webring.astro Normal file
View file

@ -0,0 +1,29 @@
---
import ArrowRightIcon from "../assets/icons/arrow-right.svg";
import ArrowLeftIcon from "../assets/icons/arrow-left.svg";
---
<div class="w-full flex justify-center items-center">
<a href="https://ctp-webr.ing/trafficlunar/previous">
<ArrowLeftIcon
class="size-10.5 p-2 origin-right hover:scale-110 transition-all duration-300"
style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
/>
</a>
<a data-tooltip="Catppuccin Webring" href="https://ctp-webr.ing/">
<img
src="catppuccin.png"
alt="catppuccin webring"
class="size-12 opacity-65 hover:scale-110 transition-all duration-300"
style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
/>
</a>
<a href="https://ctp-webr.ing/trafficlunar/next">
<ArrowRightIcon
class="size-10.5 p-2 origin-left hover:scale-110 transition-all duration-300"
style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
/>
</a>
</div>

11
src/layouts/Layout.astro
View file

@ -7,6 +7,7 @@ import "../style.css";
import Socials from "../components/Socials.astro";
import Clock from "../components/Clock.svelte";
import Online from "../components/Online.svelte";
import Webring from "../components/Webring.astro";
import Header from "../components/Header.svelte";
import Footer from "../components/Footer.astro";
@ -39,19 +40,23 @@ import Lunar from "../assets/lunar.svg";
<Lunar class="absolute top-8 right-8 size-12 animate-avoid hover:animate-running not-hover:animate-pause" />
<div class="max-w-4xl w-full grid grid-cols-5 gap-4 py-8 max-[60rem]:grid-cols-1">
<div class="flex flex-col items-center gap-8 max-[60rem]:flex-row max-[60rem]:justify-center flex-wrap" transition:persist>
<div
class="flex flex-col max-[32rem]:flex-row lg:flex-col items-center gap-6 sm:gap-8 lg:gap-8 justify-center md:justify-start"
transition:persist
>
<a href="/">
<img
src="/pfp.png"
alt="profile picture"
class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40"
class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40 max-w-40"
/>
</a>
<div class="flex flex-col flex-wrap justify-center w-full max-[60rem]:flex-row max-[60rem]:mt-0 max-[60rem]:gap-2">
<div class="flex flex-row sm:flex-row lg:flex-col flex-wrap justify-center items-start gap-2 sm:gap-3 lg:gap-0 w-auto lg:w-full lg:max-w-40">
<Socials />
<Clock client:only />
<Online client:only />
<Webring />
</div>
</div>