xczv

config/custom.css

@@ -21,6 +21,65 @@
 }
 
 
+/* ─────────────────────────────────────────────
+   GREMLIN — Logo widget + AI card
+   ───────────────────────────────────────────── */
+
+/* Logo widget — subtle glow matching the badge's green sparks */
+#information-widgets img[src*="gremlin-badge"] {
+  filter: drop-shadow(0 0 10px rgba(0, 229, 204, 0.45))
+          drop-shadow(0 0 24px rgba(0, 229, 204, 0.15));
+  transition: filter 0.3s ease;
+}
+
+#information-widgets img[src*="gremlin-badge"]:hover {
+  filter: drop-shadow(0 0 16px rgba(0, 229, 204, 0.70))
+          drop-shadow(0 0 32px rgba(0, 229, 204, 0.25));
+}
+
+/* Gremlin AI service card — scene image as card header */
+.service-card[data-name="Gremlin AI"],
+.service-card[id*="gremlin"] {
+  background-image:    url("/images/gremlin-scene.png") !important;
+  background-size:     cover !important;
+  background-position: center 20% !important;
+  border-color:        var(--ng-teal-border) !important;
+  box-shadow:          0 0 24px var(--ng-teal-glow),
+                       0 4px 20px rgba(0, 0, 0, 0.5) !important;
+  min-height:          120px;
+  position:            relative;
+}
+
+/* Dark gradient overlay so text stays readable over the scene */
+.service-card[data-name="Gremlin AI"]::before,
+.service-card[id*="gremlin"]::before {
+  content:    "";
+  position:   absolute;
+  inset:      0;
+  background: linear-gradient(
+    to bottom,
+    rgba(8, 14, 20, 0.20) 0%,
+    rgba(8, 14, 20, 0.82) 100%
+  );
+  border-radius: inherit;
+}
+
+/* Keep card text above the overlay */
+.service-card[data-name="Gremlin AI"] > *,
+.service-card[id*="gremlin"] > * {
+  position: relative;
+  z-index:  1;
+}
+
+/* Gremlin card name — teal glow text */
+.service-card[data-name="Gremlin AI"] .service-name,
+.service-card[id*="gremlin"] .service-name {
+  color:       var(--ng-teal) !important;
+  text-shadow: 0 0 12px rgba(0, 229, 204, 0.50);
+  font-weight: 600;
+}
+
+
 /* ─────────────────────────────────────────────
    BASE — Background behavior
    ───────────────────────────────────────────── */
@@ -378,4 +437,4 @@ body.tab-glance iframe[src*="glance.netgrimoire.com"] {
 .service-card:nth-child(3) { animation-delay: 0.08s; }
 .service-card:nth-child(4) { animation-delay: 0.12s; }
 .service-card:nth-child(5) { animation-delay: 0.16s; }
-.service-card:nth-child(6) { animation-delay: 0.20s; }
+.service-card:nth-child(6) { animation-delay: 0.20s; }

config/widgets.yaml

@@ -1,11 +1,51 @@
 ---
 # For configuration options and examples, please see:
-# https://gethomepage.dev/configs/service-widgets
+# https://gethomepage.dev/configs/widgets
+
+- logo:
+    icon: /images/gremlin-badge.png
+
+- greeting:
+    text_size: xl
+    text: "NetGrimoire"
+
+- datetime:
+    text_size: l
+    format:
+      dateStyle: long
+      timeStyle: short
+      hour12: true
 
 - resources:
+    label: ZNAS
     cpu: true
     memory: true
     disk: /
+    uptime: true
+    units: imperial
+    refresh: 5000
+
+- resources:
+    label: Hermes
+    cpu: true
+    memory: true
+    cputemp: true
+    uptime: true
+    refresh: 5000
+
+- resources:
+    label: Docker5
+    cpu: true
+    memory: true
+    uptime: true
+    refresh: 5000
+
+- openmeteo:
+    label: Pensacola
+    latitude: 30.42
+    longitude: -87.21
+    units: imperial
+    cache: 5
 
 - search:
     provider: duckduckgo