diff --git a/config/custom.css b/config/custom.css index 0f8f275..ac7381b 100755 --- a/config/custom.css +++ b/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; } \ No newline at end of file +.service-card:nth-child(6) { animation-delay: 0.20s; } diff --git a/config/widgets.yaml b/config/widgets.yaml index 23c8d61..b9d8701 100755 --- a/config/widgets.yaml +++ b/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 diff --git a/images/gremlin-badge.png b/images/gremlin-badge.png new file mode 100644 index 0000000..7497ce8 Binary files /dev/null and b/images/gremlin-badge.png differ diff --git a/images/gremlin-scene.png b/images/gremlin-scene.png new file mode 100644 index 0000000..eb3f9fe Binary files /dev/null and b/images/gremlin-scene.png differ