Rewrite website as a Hyprland desktop
This commit is contained in:
SirBlob committed
1 parent
7c52779cf6
commit
3065ad6092
197 files changed
+5609
-17779
No files matched your search
@@ -0,0 +1,184 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import type { Project, ProjectCategory } from '#lib/content';
|
||||
import LinkButton from '#lib/components/ui/LinkButton.svelte';
|
||||
import Tag from '#lib/components/ui/Tag.svelte';
|
||||
|
||||
let { project, category }: { project: Project; category: ProjectCategory } = $props();
|
||||
|
||||
const linkButtons = $derived(
|
||||
[
|
||||
{ href: project.links.demo, label: 'View Demo', icon: 'mdi:open-in-new' },
|
||||
{ href: project.links.package, label: 'View Package', icon: 'mdi:package-variant' },
|
||||
{ href: project.links.code, label: 'View Code', icon: 'mdi:github' },
|
||||
{ href: project.links.devpost, label: 'Devpost', icon: 'simple-icons:devpost' },
|
||||
{ href: project.links.article, label: 'Article', icon: 'mdi:newspaper-variant-outline' }
|
||||
].filter((button) => button.href)
|
||||
);
|
||||
</script>
|
||||
|
||||
<article class="project-entry" class:has-image={!!project.image}>
|
||||
<h2 class="project-title">{project.name}</h2>
|
||||
|
||||
{#if project.image}
|
||||
<img class="project-image" src={project.image} alt={project.name} loading="lazy" />
|
||||
{/if}
|
||||
|
||||
<div class="project-body">
|
||||
<div class="badges">
|
||||
<span class="badge category"><Icon icon={category.icon} width="15" /> {category.title}</span>
|
||||
{#if project.featured}
|
||||
<span class="badge featured">Featured</span>
|
||||
{/if}
|
||||
{#if project.version}
|
||||
<span class="badge version">v{project.version}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if project.event}
|
||||
<div class="event">
|
||||
{project.event.name}{#if project.event.year}<span class="muted"> ({project.event.year})</span>{/if}
|
||||
</div>
|
||||
{#if project.event.university}
|
||||
<div class="muted">{project.event.university}{project.event.location ? `, ${project.event.location}` : ''}</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if project.organization}
|
||||
<div class="event">{project.organization}</div>
|
||||
{/if}
|
||||
{#if project.period}
|
||||
<div class="muted">{project.period}</div>
|
||||
{/if}
|
||||
|
||||
{#if project.description}
|
||||
<p>{project.description}</p>
|
||||
{/if}
|
||||
|
||||
{#each project.awards ?? [] as award (award.track)}
|
||||
<div class="award"><Icon icon="mdi:trophy" width="16" /> {award.place} - {award.track}</div>
|
||||
{/each}
|
||||
|
||||
{#if project.tags.length}
|
||||
<div class="tags">
|
||||
{#each project.tags as tag, index (tag)}
|
||||
<Tag label={tag} colorIndex={index} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if project.demoMayBeOffline}
|
||||
<div class="warning"><Icon icon="mdi:alert" width="16" /> Demo may be unavailable</div>
|
||||
{/if}
|
||||
|
||||
{#if linkButtons.length}
|
||||
<div class="buttons">
|
||||
{#each linkButtons as button (button.label)}
|
||||
<LinkButton href={button.href!} icon={button.icon}>{button.label}</LinkButton>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.project-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem 1.25rem;
|
||||
padding: 1rem 0 1.5rem;
|
||||
border-top: 1px dashed color-mix(in srgb, var(--foreground) 25%, transparent);
|
||||
}
|
||||
|
||||
.project-entry.has-image {
|
||||
grid-template-columns: minmax(180px, 320px) 1fr;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
max-height: 220px;
|
||||
object-fit: contain;
|
||||
background: var(--dark-background);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
}
|
||||
|
||||
.project-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.badges,
|
||||
.tags,
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0 0.45rem;
|
||||
color: var(--background);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.category {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.featured {
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
.version {
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.event {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.award {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--orange);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@container (max-width: 700px) {
|
||||
.project-entry.has-image {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { projectCategories } from '#lib/content';
|
||||
|
||||
const chipColors = ['magenta', 'orange', 'green', 'cyan'];
|
||||
</script>
|
||||
|
||||
<nav class="project-nav">
|
||||
<a href="/projects" class:active={page.url.pathname === '/projects'} style="--chip-color: var(--accent)">~/projects</a>
|
||||
{#each projectCategories as category, index (category.id)}
|
||||
<a
|
||||
href="/projects/{category.id}"
|
||||
class:active={page.url.pathname === `/projects/${category.id}`}
|
||||
style="--chip-color: var(--{chipColors[index % chipColors.length]})">{category.title}</a
|
||||
>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.project-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.05rem 0.55rem;
|
||||
border: 1px solid var(--chip-color);
|
||||
color: var(--chip-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a.active {
|
||||
background: var(--chip-color);
|
||||
color: var(--background);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user