diff --git a/src/lib/components/ring.svelte b/src/lib/components/ring.svelte index a96366c..6da2030 100644 --- a/src/lib/components/ring.svelte +++ b/src/lib/components/ring.svelte @@ -8,7 +8,8 @@ listLink, prevSymbol, nextSymbol, - highlightEmoji, + highlightEmojiLeft, + highlightEmojiRight, }: { ringName: string; ringLink: string; @@ -18,14 +19,22 @@ listLink?: string; prevSymbol: string; nextSymbol: string; - highlightEmoji: string; + + // Emoji to be used as highlight next to the title + highlightEmojiLeft: string; + + /** + * Emoji to be used as highlight to the right of the title. If + * not set, will default to highlightEmojiLeft. + */ + highlightEmojiRight?: string; } = $props();
- {highlightEmoji} {ringName} {highlightEmoji} + {highlightEmojiLeft} {ringName} {highlightEmojiRight ?? highlightEmojiLeft}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 65ef67d..75273d8 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -89,7 +89,7 @@ randLink="https://webring.bucketfish.me/redirect.html?to=random&name=denizk0461" prevSymbol="⥼" nextSymbol="⥽" - highlightEmoji="🏳️‍🌈" /> + highlightEmojiLeft="🏳️‍🌈" /> + highlightEmojiLeft="👾" + highlightEmojiRight="🎮" /> + + +
@@ -139,6 +152,8 @@ align-items: center; justify-content: center; margin: 16px 0; + flex-wrap: wrap; + gap: 8px; } .gradient-title { @@ -152,11 +167,4 @@ -webkit-text-fill-color: transparent; padding-bottom: 12px; } - - @media screen and (max-width: 700px) { - .webring-container { - flex-direction: column; - gap: 16px; - } - } \ No newline at end of file diff --git a/static/background/20240524_230638.jpg b/static/background/20240524_230638.jpg new file mode 100755 index 0000000..481764e Binary files /dev/null and b/static/background/20240524_230638.jpg differ