Hide Coral floating notification controls

README.md

@@ -50,6 +50,17 @@ npm run build --prefix sites/research
 
 Deployment is via Forgejo + Dokploy. See [DEPLOYMENT.md](./DEPLOYMENT.md).
 
+## Coral Comments
+
+Post pages embed Coral with `customCSSURL: "/coral-transparent.css"`. Each
+site keeps its own copy at `sites/<name>/public/coral-transparent.css`.
+
+That CSS is the durable customization point for Coral UI changes: it is served
+by the blog site and loaded by Coral at runtime, so it survives Coral container
+rebuilds and image upgrades. It currently makes the embed background
+transparent, hides the redundant single "Comments" tab, and suppresses Coral's
+fixed-position floating notification bell so it cannot drift over article text.
+
 ## Obsidian Content Bridge
 
 The seven blog content folders are synced from the public Obsidian vault. See

sites/art/public/coral-transparent.css

@@ -16,3 +16,9 @@
 #coral:has(nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li))) [class*="App-tabContent"] {
   padding-top: 0 !important;
 }
+
+#coral [class*="FloatingNotificationButton-root"],
+#coral [class*="MobileNotificationButton-"],
+#coral [class*="TabBar-notificationsTab"] {
+  display: none !important;
+}

sites/poetry/public/coral-transparent.css

@@ -16,3 +16,9 @@
 #coral:has(nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li))) [class*="App-tabContent"] {
   padding-top: 0 !important;
 }
+
+#coral [class*="FloatingNotificationButton-root"],
+#coral [class*="MobileNotificationButton-"],
+#coral [class*="TabBar-notificationsTab"] {
+  display: none !important;
+}

sites/puzzles/public/coral-transparent.css

@@ -16,3 +16,9 @@
 #coral:has(nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li))) [class*="App-tabContent"] {
   padding-top: 0 !important;
 }
+
+#coral [class*="FloatingNotificationButton-root"],
+#coral [class*="MobileNotificationButton-"],
+#coral [class*="TabBar-notificationsTab"] {
+  display: none !important;
+}

sites/reflections/public/coral-transparent.css

@@ -16,3 +16,9 @@
 #coral:has(nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li))) [class*="App-tabContent"] {
   padding-top: 0 !important;
 }
+
+#coral [class*="FloatingNotificationButton-root"],
+#coral [class*="MobileNotificationButton-"],
+#coral [class*="TabBar-notificationsTab"] {
+  display: none !important;
+}

sites/research/public/coral-transparent.css

@@ -16,3 +16,9 @@
 #coral:has(nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li))) [class*="App-tabContent"] {
   padding-top: 0 !important;
 }
+
+#coral [class*="FloatingNotificationButton-root"],
+#coral [class*="MobileNotificationButton-"],
+#coral [class*="TabBar-notificationsTab"] {
+  display: none !important;
+}

sites/reviews/public/coral-transparent.css

@@ -16,3 +16,9 @@
 #coral:has(nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li))) [class*="App-tabContent"] {
   padding-top: 0 !important;
 }
+
+#coral [class*="FloatingNotificationButton-root"],
+#coral [class*="MobileNotificationButton-"],
+#coral [class*="TabBar-notificationsTab"] {
+  display: none !important;
+}

sites/vibes/public/coral-transparent.css

@@ -16,3 +16,9 @@
 #coral:has(nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li))) [class*="App-tabContent"] {
   padding-top: 0 !important;
 }
+
+#coral [class*="FloatingNotificationButton-root"],
+#coral [class*="MobileNotificationButton-"],
+#coral [class*="TabBar-notificationsTab"] {
+  display: none !important;
+}