Something went wrong. Try again.
browse the protocol like its 2008 ibex.desertthunder.dev
Something went wrong. Try again.
2.1 kB · 94 lines
Svelte
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495<script lang="ts"> import { buildVersion } from '$lib/version'; import { REPO_URL } from '$lib/constants'; let { onclose }: { onclose: () => void } = $props();</script>
<aside class="sticky-note" aria-label="Design note"> <button type="button" aria-label="Close note" onclick={onclose}>x</button> <h2>Intrepid Ibex</h2> <p>This app is a recreation of the spirit of Ubuntu 8.10</p> <hr /> <p class="version-label"> <a href={REPO_URL} target="_blank" rel="external">{buildVersion.display}</a> </p></aside>
<style> .sticky-note { position: absolute; right: var(--space-5); bottom: var(--space-5); z-index: 2; width: min(18rem, 100%); padding: var(--space-4); transform: rotate(1.2deg); color: #3a250e; background: linear-gradient(135deg, #fff1a9, #e9bf51); border: 1px solid #946b19; border-radius: var(--radius-2); box-shadow: 0 12px 24px rgb(0 0 0 / 0.25), 0 1px 0 rgb(255 255 255 / 0.72) inset; }
.sticky-note button { position: absolute; top: var(--space-1); right: var(--space-1); width: 1.25rem; height: 1.25rem; color: #6b4a12; font-weight: 700; cursor: default; }
.sticky-note h2 { font-size: var(--text-4); line-height: var(--leading-tight); }
.sticky-note p { margin-top: var(--space-2); font-size: var(--text-2); }
.sticky-note hr { margin: var(--space-3) 0 var(--space-2); border: 0; border-top: 1px solid rgb(104 74 18 / 0.48); box-shadow: 0 1px 0 rgb(255 255 255 / 0.42); }
.version-label { font-family: var(--font-mono); font-size: var(--text-1); }
.version-label a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.version-label a:hover { color: #211205; }
@media (max-width: 1000px) { .sticky-note { right: var(--space-3); bottom: var(--space-3); width: min(16rem, calc(100vw - 2rem)); padding: var(--space-3); } }
@media (max-width: 640px) { .sticky-note { width: min(14rem, calc(100vw - 1.5rem)); font-size: var(--text-1); } }</style>