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">
|
||||
<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">
|
||||
✨ Shrines To My Favorites ✨
|
||||
</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
|
||||
love for.
|
||||
</p>
|
||||
|
||||
<div class="text-center">
|
||||
<img
|
||||
src="/images/under-construction.gif"
|
||||
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 class="flex justify-center">
|
||||
<button class="bg-pink-500 text-white px-4 py-2 rounded-md">
|
||||
<a href="/shrines/buttons">88x31 Buttons</a>
|
||||
</button>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue