added 88x31 buttons to main page

This commit is contained in:
2026-03-14 22:22:39 +01:00
parent 8c00b77d4e
commit 3c47cbe581
11 changed files with 130 additions and 28 deletions

View File

@@ -7,6 +7,8 @@
import { posts as blogPosts } from "./blog/posts";
import { entries as updateEntries } from "./meta/updates/updates";
import UpdateEntry from "$lib/components/update-entry.svelte";
import IndieButton from "$lib/components/indie-button.svelte";
import { buttons } from "$lib/components/indie-button";
let latestDevlogDate = devlogPosts[0].post.date;
let latestBlogDate = blogPosts[0].post.date;
@@ -98,34 +100,44 @@
<GalleryRow entries={galleryTopRow} />
<GalleryRow entries={galleryBottomRow} />
<hr>
<div class="split-container">
<div class="webring-container">
<h4 class="update-header">webrings</h4>
<div class="webring">
<iframe title="bucket webring" id="bucket-webring" style="width: 100%; height: 3rem; border: none;" src="https://webring.bucketfish.me/embed.html?name=denizk0461"></iframe>
</div>
<div class="webring-container">
<div class="webring">
<iframe title="bucket webring" id="bucket-webring" style="width: 100%; height: 3rem; border: none;" src="https://webring.bucketfish.me/embed.html?name=denizk0461"></iframe>
<div class="webring">
<a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">
<img src="/webrings/gamedev/ringprev.png" alt="previous">
</a>
<a href="https://www.rainbowcemetery.com/devring/list.php?id=18">
<img src="/webrings/gamedev/88x31.png" alt="list">
</a>
<a href="https://www.rainbowcemetery.com/devring/next.php?id=18">
<img src="/webrings/gamedev/ringnext.png" alt="next">
</a>
</div>
<map name="w95widget">
<area href="https://baccyflap.com/noai" target="_blank" shape="rect" coords="0,0,308,22" alt="no ai webring" title="no ai webring">
<area href="https://baccyflap.com/noai/?prv&s=dzk" target="_top" shape="rect" coords="56,36,130,58" alt="previous" title="previous">
<area href="https://baccyflap.com/noai/?rnd" target="_top" shape="rect" coords="137,36,211,58" alt="random" title="random">
<area href="https://baccyflap.com/noai/?nxt&s=dzk" target="_top" shape="rect" coords="218,36,292,58" alt="next" title="next">
</map>
<img class="webring-img" usemap="#w95widget" src="/webrings/noai/w95widget.webp" alt="a gray Windows 95 style dialog box titled 'The No AI Webring' with a little icon showing a computer chip in a rubbish bin. beside it are three clickable buttons, labeled Previous, Random... and Next">
</div>
<div class="webring">
<a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">
<img src="/webrings/gamedev/ringprev.png" alt="previous">
</a>
<a href="https://www.rainbowcemetery.com/devring/list.php?id=18">
<img src="/webrings/gamedev/88x31.png" alt="list">
</a>
<a href="https://www.rainbowcemetery.com/devring/next.php?id=18">
<img src="/webrings/gamedev/ringnext.png" alt="next">
</a>
<div class="button-container">
<h4 class="update-header">88x31 buttons</h4>
<div class="button-subcontainer">
{#each buttons as button}
<IndieButton button={button} />
{/each}
</div>
<p class="small-supertext">my own 88x31 button is in the making. ETA: ???</p>
</div>
<map name="w95widget">
<area href="https://baccyflap.com/noai" target="_blank" shape="rect" coords="0,0,308,22" alt="no ai webring" title="no ai webring">
<area href="https://baccyflap.com/noai/?prv&s=dzk" target="_top" shape="rect" coords="56,36,130,58" alt="previous" title="previous">
<area href="https://baccyflap.com/noai/?rnd" target="_top" shape="rect" coords="137,36,211,58" alt="random" title="random">
<area href="https://baccyflap.com/noai/?nxt&s=dzk" target="_top" shape="rect" coords="218,36,292,58" alt="next" title="next">
</map>
<img class="webring-img" usemap="#w95widget" src="/webrings/noai/w95widget.webp" alt="a gray Windows 95 style dialog box titled 'The No AI Webring' with a little icon showing a computer chip in a rubbish bin. beside it are three clickable buttons, labeled Previous, Random... and Next">
</div>
</Content>
<style>
@@ -134,7 +146,7 @@
display: flex;
flex-direction: row;
gap: 16px;
margin-bottom: 16px;
margin: 16px 0;
}
@media screen and (max-width: 900px) {
@@ -144,6 +156,18 @@
}
}
.button-container {
flex: 2;
}
.button-subcontainer {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-content: center;
}
.webring {
display: flex;
flex-direction: row;
@@ -162,21 +186,23 @@
margin-right: 12px;
}
.update-container, .info-container {
.update-container, .info-container, .button-container, .webring-container {
padding: 8px 24px;
backdrop-filter: blur(var(--blur-radius-background));
flex: 2;
}
.update-container {
.update-container, .button-container, .webring-container {
border: var(--border-dash-size) var(--color-highlight) var(--border-style);
}
.info-container {
.info-container, .button-container {
border: var(--border-dash-size) var(--color-highlight-alt) var(--border-style);
}
.info-container {
flex: 1;
}
.info-container > h4 {
.info-container > h4, .button-container > h4 {
color: var(--color-highlight-alt);
}
.info-container p, .info-container a {
@@ -190,6 +216,7 @@
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex: 3;
/* flex-wrap: wrap; */
/* gap: 8px; */
padding-top: 16px;