funny buttons
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 925 B |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -183,6 +183,41 @@ body::before {
|
|||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ---- 88x31 button wall (always visible) ---- */
|
||||
.button-wall {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
max-width: min(90vw, 480px);
|
||||
}
|
||||
|
||||
.button-wall a {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.button-wall img {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
image-rendering: pixelated;
|
||||
border: 1px solid var(--surface-1);
|
||||
border-radius: 2px;
|
||||
transition: transform 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
|
||||
.button-wall a:hover img {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(var(--accent-rgb));
|
||||
}
|
||||
|
||||
|
||||
/* Coffee/index.html */
|
||||
|
||||
.teapot {
|
||||
|
|
|
|||
15
index.html
|
|
@ -59,8 +59,21 @@
|
|||
<a href="https://git.gay/Ari" target="_blank"><button class="gitgay-link">Check out my Git.Gay</button></a>
|
||||
</div>
|
||||
</header>
|
||||
</main>
|
||||
|
||||
</main>
|
||||
<aside class="button-wall" aria-label="88x31 buttons">
|
||||
<img src="/assets/88x31/linux.gif" alt="Linux" loading="lazy">
|
||||
<img src="/assets/88x31/microslop.gif" alt="Microslop" loading="lazy">
|
||||
<img src="/assets/88x31/estrogen.gif" alt="Estrogen" loading="lazy">
|
||||
<img src="/assets/88x31/girlsnow.png" alt="Girls Network" loading="lazy">
|
||||
<img src="/assets/88x31/skirt.gif" alt="Skirt" loading="lazy">
|
||||
<img src="/assets/88x31/gitgay.png" alt="GitGay" loading="lazy">
|
||||
<img src="/assets/88x31/blink.gif" alt="Blink" loading="lazy">
|
||||
<img src="/assets/88x31/firefox.gif" alt="Firefox" loading="lazy">
|
||||
<img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
|
||||
<img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
|
||||
<img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
|
||||
</aside>
|
||||
</body>
|
||||
<script src="js/index.js"></script>
|
||||
<script src="js/flavors.js"></script>
|
||||
|
|
|
|||