Added 88x31 buttons
This commit is contained in:
Timothy Rogers
parent
8d244d1770
commit
ee17ee2158
2 changed files with 263 additions and 26 deletions
259
src/pages/shrines/buttons.astro
Normal file
259
src/pages/shrines/buttons.astro
Normal file
|
|
@ -0,0 +1,259 @@
|
||||||
|
---
|
||||||
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="88x31 Buttons - Hack13">
|
||||||
|
<main class="container mx-auto px-4 py-8">
|
||||||
|
<h1 class="text-3xl font-bold mb-8 text-pink-500">88x31 Buttons</h1>
|
||||||
|
|
||||||
|
<p class="text-gray-900">
|
||||||
|
I have grown quite fond of the 88x31 buttons. I have used them on my site now for a bit, but I really wanted to update my button and
|
||||||
|
try to have a bit more fun with it. So here are a few different versions of the button I made, and I am looking for friends and
|
||||||
|
others who are interested in doing button site exchanges. This way I can help join the promotion of returning to the old days of
|
||||||
|
sharing personal sites vs a social media link only... or just a simple card site.
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<p class="text-gray-900">
|
||||||
|
If you are interested in doing a button site exchange, please contact me via email at <a href="mailto:88x31@hack13.dev" class="underline">88x31@hack13.dev</a>
|
||||||
|
or send me a message on the Fediverse <a href="https://cyberfurz.social/@hack13" class="underline">@hack13@cyberfurz.social</a>.
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<div class="grid gap-8">
|
||||||
|
<!-- Pink Button Section -->
|
||||||
|
<div class="bg-pink-200 border-purple-400 border-4 rounded-md p-6">
|
||||||
|
<h2 class="text-xl font-semibold mb-4 text-pink-500">Hack13 Pink</h2>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<!-- GIF Version -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-medium text-pink-500">GIF Version</h3>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<img
|
||||||
|
src="https://storj.hack13.download/cdn/buttons/hack13-pink.gif"
|
||||||
|
alt="Hack13 Pink Button (GIF)"
|
||||||
|
width="88"
|
||||||
|
height="31"
|
||||||
|
class="border border-purple-400 rounded"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="https://storj.hack13.download/cdn/buttons/hack13-pink.gif"
|
||||||
|
download
|
||||||
|
class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Download GIF
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<textarea
|
||||||
|
readonly
|
||||||
|
class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
|
||||||
|
>{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/hack13-pink.gif" alt="Hack13 Pink Button" width="88" height="31"></a>`}</textarea>
|
||||||
|
<button
|
||||||
|
onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
|
||||||
|
class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- WebP Version -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-medium text-pink-500">WebP Version</h3>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<img
|
||||||
|
src="https://storj.hack13.download/cdn/buttons/hack13-pink.webp"
|
||||||
|
alt="Hack13 Pink Button (WebP)"
|
||||||
|
width="88"
|
||||||
|
height="31"
|
||||||
|
class="border border-purple-400 rounded"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="https://storj.hack13.download/cdn/buttons/hack13-pink.webp"
|
||||||
|
download
|
||||||
|
class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Download WebP
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<textarea
|
||||||
|
readonly
|
||||||
|
class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
|
||||||
|
>{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/hack13-pink.webp" alt="Hack13 Pink Button" width="88" height="31"></a>`}</textarea>
|
||||||
|
<button
|
||||||
|
onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
|
||||||
|
class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Alt Button Section -->
|
||||||
|
<div class="bg-pink-200 border-purple-400 border-4 rounded-md p-6">
|
||||||
|
<h2 class="text-xl font-semibold mb-4 text-pink-500">Hack13 Alt</h2>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<!-- GIF Version -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-medium text-pink-500">GIF Version</h3>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<img
|
||||||
|
src="https://storj.hack13.download/cdn/buttons/hack13-alt.gif"
|
||||||
|
alt="Hack13 Alt Button (GIF)"
|
||||||
|
width="88"
|
||||||
|
height="31"
|
||||||
|
class="border border-purple-400 rounded"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="https://storj.hack13.download/cdn/buttons/hack13-alt.gif"
|
||||||
|
download
|
||||||
|
class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Download GIF
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<textarea
|
||||||
|
readonly
|
||||||
|
class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
|
||||||
|
>{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/hack13-alt.gif" alt="Hack13 Alt Button" width="88" height="31"></a>`}</textarea>
|
||||||
|
<button
|
||||||
|
onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
|
||||||
|
class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- WebP Version -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-medium text-pink-500">WebP Version</h3>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<img
|
||||||
|
src="https://storj.hack13.download/cdn/buttons/hack13-alt.webp"
|
||||||
|
alt="Hack13 Alt Button (WebP)"
|
||||||
|
width="88"
|
||||||
|
height="31"
|
||||||
|
class="border border-purple-400 rounded"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="https://storj.hack13.download/cdn/buttons/hack13-alt.webp"
|
||||||
|
download
|
||||||
|
class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Download WebP
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<textarea
|
||||||
|
readonly
|
||||||
|
class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
|
||||||
|
>{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/hack13-alt.webp" alt="Hack13 Alt Button" width="88" height="31"></a>`}</textarea>
|
||||||
|
<button
|
||||||
|
onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
|
||||||
|
class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Two Version Button Section -->
|
||||||
|
<div class="bg-pink-200 border-purple-400 border-4 rounded-md p-6">
|
||||||
|
<h2 class="text-xl font-semibold mb-4 text-pink-500">Two Version Button</h2>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<!-- GIF Version -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-medium text-pink-500">GIF Version</h3>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<img
|
||||||
|
src="https://storj.hack13.download/cdn/buttons/two-version-btn.gif"
|
||||||
|
alt="Two Version Button (GIF)"
|
||||||
|
width="88"
|
||||||
|
height="31"
|
||||||
|
class="border border-purple-400 rounded"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="https://storj.hack13.download/cdn/buttons/two-version-btn.gif"
|
||||||
|
download
|
||||||
|
class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Download GIF
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<textarea
|
||||||
|
readonly
|
||||||
|
class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
|
||||||
|
>{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/two-version-btn.gif" alt="Two Version Button" width="88" height="31"></a>`}</textarea>
|
||||||
|
<button
|
||||||
|
onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
|
||||||
|
class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- WebP Version -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-medium text-pink-500">WebP Version</h3>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<img
|
||||||
|
src="https://storj.hack13.download/cdn/buttons/two-version-btn.webp"
|
||||||
|
alt="Two Version Button (WebP)"
|
||||||
|
width="88"
|
||||||
|
height="31"
|
||||||
|
class="border border-purple-400 rounded"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="https://storj.hack13.download/cdn/buttons/two-version-btn.webp"
|
||||||
|
download
|
||||||
|
class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Download WebP
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<textarea
|
||||||
|
readonly
|
||||||
|
class="w-full px-3 py-2 bg-pink-100 dark:bg-pink-900 rounded text-sm font-mono h-20 resize-none border-2 border-purple-400"
|
||||||
|
>{`<a href="https://hack13.dev"><img src="https://storj.hack13.download/cdn/buttons/two-version-btn.webp" alt="Two Version Button" width="88" height="31"></a>`}</textarea>
|
||||||
|
<button
|
||||||
|
onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
|
||||||
|
class="absolute right-2 top-2 px-2 py-1 bg-pink-500 text-white rounded text-sm hover:bg-pink-600 transition-colors"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Add click handlers for copy buttons
|
||||||
|
document.querySelectorAll('button').forEach(button => {
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
const textarea = this.previousElementSibling as HTMLTextAreaElement;
|
||||||
|
navigator.clipboard.writeText(textarea.value);
|
||||||
|
|
||||||
|
// Visual feedback
|
||||||
|
const originalText = this.textContent;
|
||||||
|
this.textContent = 'Copied!';
|
||||||
|
setTimeout(() => {
|
||||||
|
this.textContent = originalText;
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -3,14 +3,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Shrines">
|
<Layout title="Shrines">
|
||||||
<div class="text-center mb-4">
|
|
||||||
<img
|
|
||||||
src="/images/sparkle-divider.gif"
|
|
||||||
alt="sparkly divider"
|
|
||||||
class="mx-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-3xl font-bold text-center mb-4 font-comic">
|
<h1 class="text-3xl font-bold text-center mb-4 font-comic">
|
||||||
✨ Shrines To My Favorites ✨
|
✨ Shrines To My Favorites ✨
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -19,23 +11,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
This page sections out places I have a fondness for or used to have a huge
|
This page sections out places I have a fondness for or used to have a huge
|
||||||
love for.
|
love for.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="flex justify-center">
|
||||||
<div class="text-center">
|
<button class="bg-pink-500 text-white px-4 py-2 rounded-md">
|
||||||
<img
|
<a href="/shrines/buttons">88x31 Buttons</a>
|
||||||
src="/images/under-construction.gif"
|
</button>
|
||||||
alt="Under Construction"
|
|
||||||
class="mx-auto mb-2"
|
|
||||||
/>
|
|
||||||
<p class="text-purple-600 animate-pulse">
|
|
||||||
🚧 This shrine is under construction! 🚧
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center mt-4">
|
|
||||||
<img
|
|
||||||
src="/images/sparkle-divider.gif"
|
|
||||||
alt="sparkly divider"
|
|
||||||
class="mx-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue