added 88x31 buttons to main page
This commit is contained in:
32
src/lib/components/indie-button.svelte
Normal file
32
src/lib/components/indie-button.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { type IndieButton } from "./indie-button";
|
||||
|
||||
let {
|
||||
button
|
||||
}: {
|
||||
button: IndieButton;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<a class="button" href="{button.link}">
|
||||
<img src="/common/buttons/{button.img}" alt="{button.alt}">
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.button {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
transition: scale var(--duration-animation) var(--anim-curve);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
scale: 1.2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.button img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
43
src/lib/components/indie-button.ts
Normal file
43
src/lib/components/indie-button.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
export interface IndieButton {
|
||||
img: string;
|
||||
alt: string;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export let buttons: IndieButton[] = [
|
||||
{
|
||||
img: "flag-progress.png",
|
||||
alt: "A button showing the progress pride flag.",
|
||||
},
|
||||
{
|
||||
img: "gnu-linux.gif",
|
||||
alt: "A button with the Linux penguin and the text 'Made on GNU/Linux'.",
|
||||
},
|
||||
{
|
||||
img: "iso8601.png",
|
||||
alt: "A button with the text 'ISO 8601 YYYY-MM-DD'.",
|
||||
link: "https://www.iso8601.com/",
|
||||
},
|
||||
{
|
||||
img: "notbyai.png",
|
||||
alt: "A button with the text 'created by a human, not by AI' and a smiley next to it.",
|
||||
},
|
||||
{
|
||||
img: "queercoded.png",
|
||||
alt: "A button with the text \"you're telling me a queer coded this\" on a rainbow background.",
|
||||
},
|
||||
{
|
||||
img: "madewithsveltekit.gif",
|
||||
alt: "A red button with the text 'MADE WITH SVELTEKIT'.",
|
||||
link: "https://svelte.dev",
|
||||
},
|
||||
{
|
||||
img: "sexno.png",
|
||||
alt: "A button with the text 'SEX? NO.' on a white background with a blue border.",
|
||||
link: "https://youtu.be/J4i0tuoYBG0?t=176",
|
||||
},
|
||||
{
|
||||
img: "trans-rights-now.png",
|
||||
alt: "A button with the text 'TRANS RIGHTS NOW!' next to a trans flag.",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user