Add keyring and a few other things

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

88x31/index.html

@@ -70,6 +70,7 @@
                 <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/caramelldansen.gif" alt="Caramelldansen" loading="lazy">
                 <img src="/assets/88x31/girlsnow.png" alt="Girls Now" loading="lazy">
                 <img src="/assets/88x31/skirt.gif" alt="Skirt" loading="lazy">
                 <img src="/assets/88x31/gitgay.png" alt="GitGay" loading="lazy">

css/main.css

@@ -781,8 +781,8 @@ body:has(.friend-grid) {
 
 .bot-grid {
   margin-bottom: 1.5rem;
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fit, 96px);
+  flex-wrap: wrap;
   justify-content: center;
   gap: 2rem 1.5rem;
   max-width: 560px;
@@ -1155,8 +1155,8 @@ body:has(.waka) {
   background: var(--surface-0);
   border: 1px solid var(--surface-1);
   border-radius: 16px;
-  padding: 1.15rem 1.25rem 1.35rem;
+  padding: 0.85rem 1.25rem 0.95rem;
-  margin-bottom: 1.1rem;
+  margin-bottom: 0.7rem;
 }
 
 .waka-section .section-title {
@@ -1371,12 +1371,12 @@ body:has(.waka) {
 /* ---- collapsible dropdown sections (details/summary) ---- */
 details.waka-section {
   /* keep the card padding tight when collapsed; expands via [open] below */
-  padding-bottom: 1.15rem;
+  padding-bottom: 0.85rem;
   transition: padding-bottom 0.15s ease;
 }
 
 details.waka-section[open] {
-  padding-bottom: 1.35rem;
+  padding-bottom: 1.15rem;
 }
 
 /* The clickable header row */
@@ -1425,7 +1425,7 @@ summary.section-title::after {
 }
 
 details.waka-section[open]>summary.section-title {
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 
 details.waka-section[open]>summary.section-title::after {
@@ -1690,7 +1690,6 @@ body:has(.terminal) .hub .terminal {
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.6rem;
-  max-width: min(92vw, 480px);
   margin: 0 auto;
 }
 
@@ -1700,9 +1699,8 @@ body:has(.terminal) .hub .terminal {
 }
 
 .button-wall img {
-  width: 88px;
+  width: 132px;
-  height: 31px;
+  height: 46px;
-  image-rendering: pixelated;
   border: 1px solid var(--surface-1);
   border-radius: 2px;
   transition: transform 0.12s ease, border-color 0.12s ease;
@@ -1929,11 +1927,12 @@ body:has(.friend-grid) .hub-header {
 }
 
 .friend-grid {
-  display: grid;
+  display: flex;
-  /* fixed-width columns + centered: a lone card stays card-sized (not
+  flex-wrap: wrap;
-     stretched), and as many as fit sit centered as a group */
+  /* flex-wrap centres EVERY row, including a partial last row (a lone card
-  grid-template-columns: repeat(auto-fit, 210px);
+     sits centred rather than stuck to the left as it did with CSS grid) */
   justify-content: center;
+  align-items: flex-start;
   margin-bottom: 1.5rem;
   gap: 1.1rem;
   width: 100%;
@@ -1965,6 +1964,7 @@ body:has(.friends-wrap) .hub {
   position: relative;
   display: flex;
   flex-direction: column;
+  width: 210px;
   border-radius: 14px;
   background: var(--surface-0);
   border: 1px solid var(--surface-1);
@@ -1977,6 +1977,18 @@ body:has(.friends-wrap) .hub {
   box-shadow: 0 8px 22px -12px rgba(var(--accent-rgb), 0.5);
 }
 
+/* Hovered card lifts above its neighbours and lets its text un-truncate so
+   long names / usernames / custom statuses expand in full instead of being
+   chopped off with an ellipsis. */
+.friend-card:hover { z-index: 5; }
+.friend-card:hover .fc-name,
+.friend-card:hover .fc-user,
+.friend-card:hover .fc-custom-text {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 /* banner strip — Nitro banner image / accent colour / default wash */
 .fc-banner {
   height: 54px;
@@ -2095,14 +2107,32 @@ a.fc-name:hover { color: rgb(var(--accent-rgb)); }
 
 /* custom status (Discord activity type 4) */
 .fc-custom {
+  position: relative;
+  align-self: flex-start;
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.3rem;
+  max-width: 100%;
   font-size: 0.72rem;
   color: var(--subtext-1);
-  margin-top: 0.1rem;
+  margin-top: 0.45rem;
   min-width: 0;
+  padding: 0.3rem 0.5rem;
+  background: var(--surface-1);
+  border-radius: 11px;
+  border-top-left-radius: 4px;
 }
+/* Discord-style thought-bubble tail: two little circles rising to the name */
+.fc-custom::before,
+.fc-custom::after {
+  content: "";
+  position: absolute;
+  background: var(--surface-1);
+  border-radius: 50%;
+  pointer-events: none;
+}
+.fc-custom::before { width: 7px; height: 7px; top: -4px;  left: 9px; }
+.fc-custom::after  { width: 4px; height: 4px; top: -8px;  left: 7px; }
 .fc-custom[hidden] { display: none; }
 .fc-custom-emoji { width: 14px; height: 14px; display: block; flex: none; }
 .fc-custom-emoji-uni { font-size: 0.8rem; line-height: 1; flex: none; }
@@ -3057,12 +3087,29 @@ a.pc-row:hover,
 
 /* custom status */
 .pc-custom {
-  background: transparent;
+  position: relative;
+  align-self: flex-start;
+  background: var(--surface-1);
   border: none;
-  padding: 0.1rem 0.5rem;
+  padding: 0.5rem 0.7rem;
   gap: 0.4rem;
   align-items: flex-start;
+  border-radius: 13px;
+  border-top-left-radius: 4px;
+  margin-top: 0.3rem;
 }
+/* Discord-style thought-bubble tail */
+.pc-custom::before,
+.pc-custom::after {
+  content: "";
+  position: absolute;
+  background: var(--surface-1);
+  border-radius: 50%;
+  pointer-events: none;
+}
+.pc-custom::before { width: 9px; height: 9px; top: -5px;  left: 12px; }
+.pc-custom::after  { width: 5px; height: 5px; top: -11px; left: 9px; }
+.pc-custom:hover { transform: none; border-color: transparent; }
 .pc-emoji { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.05rem; }
 .pc-custom-text {
   font-size: 0.74rem;
@@ -3536,3 +3583,50 @@ body:has(.presence-stage) {
   .presence-stage .presence-card.has-banner-color .pc-head { margin-top: -30px; }
   .presence-stage .pc-name { font-size: 1.25rem; }
 }
+
+/* =====================================================================
+ * lanyard.cafe keyring (webring) — embed.js injects #lc-embed with all
+ * styles inline, so every override here needs !important. Re-themes the
+ * default cream/brown look to Catppuccin and the site font, keeping the
+ * widget floating in the bottom-left (which is otherwise empty chrome).
+ * ===================================================================== */
+#lc-embed {
+  font-family: 'Comic Code', 'Quicksand', system-ui, sans-serif !important;
+  left: 1rem !important;
+  bottom: 1rem !important;
+  z-index: 5 !important;
+}
+#lc-embed > section { margin-bottom: 0 !important; }
+
+/* the card */
+#lc-embed > section > div {
+  background: var(--surface-0) !important;
+  border: 1px solid rgba(var(--accent-rgb), 0.45) !important;
+  border-radius: 14px !important;
+  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.7) !important;
+}
+
+/* prev / random / next buttons */
+#lc-embed a {
+  background: var(--surface-1) !important;
+  border-radius: 10px !important;
+  font-weight: 600 !important;
+  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease !important;
+}
+#lc-embed a:nth-child(1),
+#lc-embed a:nth-child(3) { color: rgb(var(--accent-rgb)) !important; }
+#lc-embed a:nth-child(2) { color: var(--lavender) !important; }
+#lc-embed a:hover {
+  background: var(--surface-2) !important;
+  transform: translateY(-2px) !important;
+}
+
+/* the "you are at <url>" line */
+#lc-embed p { color: var(--subtext-0) !important; }
+#lc-embed p span { color: rgb(var(--accent-rgb)) !important; }
+
+/* tuck out of the way on small screens so it doesn't cover content */
+@media (max-width: 640px) {
+  #lc-embed { left: 0.5rem !important; bottom: 0.5rem !important; }
+  #lc-embed > section > div { min-width: 0 !important; }
+}

index.html

@@ -70,6 +70,8 @@
     <script src="/js/dev-mode.js"></script>
     <script src="/js/terminal.js"></script>
     <script src="/js/site-switcher.js"></script>
+    <!-- lanyard.cafe keyring (webring) — styled to match the site in css/main.css (#lc-embed) -->
+    <script src="https://lanyard.cafe/api/embed.js" data-theme="dark"></script>
     <script src="/js/visitor-counter.js"
         data-target="#visitor-counter"
         data-namespace="clove-is-a-dev"

js/friends.js

@@ -41,6 +41,8 @@
       members: [
         { name: "J", img: "/assets/alts/j.png", tier: "active-alt", discordId: "1500197577336033301", link: null},
         { name: "Uzi", img: "/assets/alts/uzi.png", tier: "active-alt", discordId: "526626867973849123", link: null },
+        { name: "clovetwilight3", img: "/assets/alts/clovetwilight3.png", tier: "dead-alt", discordId: null, link: null },
+        { name: "estrogenhrt", img: "/assets/alts/estrogenhrt.png", tier: "dead-alt", discordId: null, link: null },
         { name: "Clove <3", img: "/assets/alts/clove.png", tier: "dead-alt", discordId: "1125844710511104030", link: null},
         { name: "Clove ⛤", img: "/assets/alts/butterfly.png", tier: "dead-alt", discordId: "514994021970739201", link: null },
         { name: "Mrow", img: "/assets/alts/mrow.png", tier: "dead-alt", discordId: "219480349053288450", link: null }