DerGrumpf/cyper-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styled everything and build the skeleton

Browse Source
This commit is contained in:
DerGrumpf
2026-06-07 15:20:01 +02:00
parent 826565c922
commit 87dab6e5a1
22 changed files with 1381 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cyperpunk.de/src/components/Sidebar.astro
+55 -18
View File
@@ -1,24 +1,61 @@
---
const links = [
{ label: "github", href: "https://github.com/DerGrumpf", icon: "/github.png" },
{ label: "gitea", href: "https://git.cyperpunk.de", icon: "/git.png" },
{ label: "instagram", href: "https://www.instagram.com/dergrumpf/", icon: "/instagram.png" },
{ label: "matrix", href: "https://matrix.to/#/@dergrumpf:cyperpunk.de", icon: "/matrix.png" },
{ label: "spotify", href: "https://open.spotify.com/user/fackthatshiet?si=d502739d787e497e", icon: "/spotify.png" },
{ label: "rss", href: "/rss.xml", icon: "/rss.png" },
];
---
<div id="sidebar-inner" class="flex flex-col h-full px-4 py-6 gap-6 w-56 bg-ctp-mantle border-r border-ctp-surface">
<div id="sidebar-inner">
<div id="profile">
<div id="avatar">CP</div>
<div id="profile-name">Phil Keier | DerGrumpf</div>
<div id="profile-tagline">Media Scientist, Programmer, Linux Enthutiast</div>
</div>
<div id="sidebar-links">
<a href="https://git.cyperpunk.de">gitea</a>
<a href="/rss.xml">rss</a>
</div>
<div id="sidebar-topics">
<span class="section-label">topics</span>
<div id="tags">
<span class="tag">Blog</span>
<span class="tag">Git Projects</span>
<span class="tag">Matrix</span>
<div id="profile" class="flex flex-col items-center gap-2 text-center">
<img src="/avatar.jpg" alt="Phil Keier" class="w-full rounded-full object-cover" />
<div id="profile-name" class="px-4">
<div class="text-ctp-text text-xl font-bold">Phil Keier</div>
<div class="text-ctp-subtext text-lg text-sm">DerGrumpf</div>
</div>
<div id="profile-tagline" class="text-ctp-subtext text-xs leading-snug">
Media Scientist, Programmer, Linux Enthusiast
</div>
</div>
<div id="sidebar-links" class="flex flex-wrap gap-2 justify-center">
{links.map((link) => (
<a href={link.href} class="flex items-center gap-2 text-ctp-subtext hover:text-ctp-accent text-sm transition-colors">
<img src={link.icon} alt={link.label} class="w-8 h-8 icon-mono" />
</a>
))}
</div>
<div id="sidebar-topics" class="flex flex-col gap-2">
<span class="section-label text-ctp-overlay text-xs uppercase tracking-widest">topics</span>
<div id="tags" class="flex flex-wrap gap-1">
<span class="tag text-xs px-2 py-0.5 rounded-full bg-ctp-surface text-ctp-subtext hover:text-ctp-accent hover:bg-ctp-overlay cursor-pointer transition-colors">Blog</span>
<span class="tag text-xs px-2 py-0.5 rounded-full bg-ctp-surface text-ctp-subtext hover:text-ctp-accent hover:bg-ctp-overlay cursor-pointer transition-colors">Git Projects</span>
<span class="tag text-xs px-2 py-0.5 rounded-full bg-ctp-surface text-ctp-subtext hover:text-ctp-accent hover:bg-ctp-overlay cursor-pointer transition-colors">Matrix</span>
</div>
</div>
<div id="theme-switcher" class="flex gap-2 mt-auto pt-4 border-t border-ctp-surface justify-center">
<button data-flavor="mocha" class="theme-dot w-4 h-4 rounded-full bg-[#cba6f7] hover:scale-125 transition-transform" title="Mocha"></button>
<button data-flavor="macchiato" class="theme-dot w-4 h-4 rounded-full bg-[#c6a0f6] hover:scale-125 transition-transform" title="Macchiato"></button>
<button data-flavor="frappe" class="theme-dot w-4 h-4 rounded-full bg-[#ca9ee6] hover:scale-125 transition-transform" title="Frappé"></button>
<button data-flavor="latte" class="theme-dot w-4 h-4 rounded-full bg-[#8839ef] hover:scale-125 transition-transform" title="Latte"></button>
</div>
</div>
<script>
const saved = localStorage.getItem('ctp-theme') ?? 'mocha';
document.documentElement.setAttribute('data-theme', saved);
document.querySelectorAll('.theme-dot').forEach(btn => {
btn.addEventListener('click', () => {
const flavor = btn.getAttribute('data-flavor');
document.documentElement.setAttribute('data-theme', flavor);
localStorage.setItem('ctp-theme', flavor);
});
});
</script>