Homer: Design, Links & Favicon (#481)

Co-authored-by: Michael Grote <michael.grote@posteo.de>
Reviewed-on: #481
This commit is contained in:
Michael Grote 2023-03-21 19:48:01 +01:00
parent 6b17b33533
commit 8b7121f45e
19 changed files with 293 additions and 219 deletions

View file

@ -0,0 +1,174 @@
@charset "UTF-8";
/* Catppuccin theme for Homer */
#app.theme-default.is-dark {
--catppuccin-base: #303446;
--catppuccin-surface0: #414559;
--catppuccin-text: #c6d0f5;
--catppuccin-surface2: #626880;
--catppuccin-teal: #81c8be;
--catppuccin-green: #a6d189;
--catppuccin-peach: #ef9f76;
--catppuccin-pink: #f4b8e4;
--catppuccin-mauve: #ca9ee6;
--catppuccin-red: #e78284;
--catppuccin-yellow: #e5c890;
--highlight-primary: transparent;
--highlight-secondary: var(--catppuccin-surface0);
--highlight-hover: var(--catppuccin-surface0);
--background: var(--catppuccin-base);
--highlight-hover: var(--catppuccin-surface0);
--card-background: var(--catppuccin-surface0);
--text: var(--catppuccin-text);
--text-header: var(--catppuccin-text);
--text-title: var(--catppuccin-text);
--text-subtitle: var(--catppuccin-teal);
--link: var(--catppuccin-green);
--link-hover: var(--catppuccin-green);
}
/* Header */
/* Comment the following section out if you want no header image. Also, set --highlight-primary to var(--catppuccin-surface0). */
#app.theme-default.is-dark #bighead {
background-image: url('../assets/images/romb.png');
background-size: cover;
background-position: center;
}
#app.theme-default.is-dark .logo {
color: var(--catppuccin-mauve);
}
#app.theme-default.is-dark .first-line .headline {
color: var(--catppuccin-yellow);
}
#app.theme-default.is-dark .navbar-start i {
color: var(--catppuccin-teal);
}
#app.theme-default.is-dark [title='Auto-switch'] {
color: var(--catppuccin-mauve);
}
#app.theme-default.is-dark [title='Dark theme'] {
color: var(--catppuccin-peach);
}
#app.theme-default.is-dark .navbar-item .fa-columns {
color: var(--catppuccin-green);
}
#app.theme-default.is-dark .navbar-item .fa-list {
color: var(--catppuccin-teal);
}
#app.theme-default.is-dark .search-bar .search-label:before {
color: var(--catppuccin-yellow);
}
#app.theme-default.is-dark .search-bar input {
background-color: var(--catppuccin-base);
}
#app.theme-default.is-dark .search-bar > input:nth-child(2) {
color: var(--catppuccin-text);
}
#app.theme-default.is-dark .search-bar input:focus-visible {
outline: none;
}
/* Message */
#app.theme-default.is-dark .message-header {
color: var(--catppuccin-text);
background-color: var(--catppuccin-surface0);
border-style: none none solid none;
border-width: thin;
}
#app.theme-default.is-dark .is-info .message-header {
border-color: var(--catppuccin-teal);
}
#app.theme-default.is-dark .is-info .message-header i {
color: var(--catppuccin-teal);
}
#app.theme-default.is-dark .is-success .message-header {
border-color: var(--catppuccin-green);
}
#app.theme-default.is-dark .is-success .message-header i {
color: var(--catppuccin-green);
}
#app.theme-default.is-dark .is-warning .message-header {
border-color: var(--catppuccin-peach);
}
#app.theme-default.is-dark .is-warning .message-header i {
color: var(--catppuccin-peach);
}
#app.theme-default.is-dark .is-danger .message-header {
border-color: var(--catppuccin-red);
}
#app.theme-default.is-dark .is-danger .message-header i {
color: var(--catppuccin-red);
}
/* Cards */
#app.theme-default.is-dark .tag {
background-color: var(--catppuccin-pink);
color: var(--catppuccin-text);
}
#app.theme-default.is-dark .status.unknown::before {
background-color: var(--catppuccin-yellow);
border-color: var(--catppuccin-yellow);
box-shadow: 0 0 5px 1px var(--catppuccin-yellow);
}
#app.theme-default.is-dark .status.bad::before {
background-color: var(--catppuccin-red);
border-color: var(--catppuccin-red);
box-shadow: 0 0 5px 1px var(--catppuccin-red);
}
#app.theme-default.is-dark .status.running::before {
background-color: var(--catppuccin-green);
border-color: var(--catppuccin-green);
box-shadow: 0 0 5px 1px var(--catppuccin-green);
}
body #app .card:hover {
background-color: #51576d; /* Surface1 */
}
/* Footer */
#app.theme-default.is-dark .footer {
color: var(--catppuccin-text);
}
/* Adds spacing to the bottom of cards */
body #app .card-content {
margin-bottom: 0.55rem;
}
/* Custom font using Fira Code */
body #bighead .navbar a {
font-family: 'Fira Code', monospace;
}
body #app .title {
font-family: 'Fira Code', monospace;
}

View file

@ -1,41 +1,21 @@
--- ---
# https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md # https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md
title: "Homer" title: "Homer"
logo: "assets/icons/homer.png"
header: false header: false
footer: false footer: false
columns: "4" columns: "4"
# Set the default layout and color scheme
defaults:
layout: columns # Either 'columns', or 'list'
colorTheme: dark # One of 'auto', 'light', or 'dark'
stylesheet:
- 'assets/catppuccin-frappe.css'
theme: default
colors:
light:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
highlight-hover: "#5a95f5"
background: "#f5f5f5"
card-background: "#ffffff"
text: "#363636"
text-header: "#ffffff"
text-title: "#303030"
text-subtitle: "#424242"
card-shadow: rgba(0, 0, 0, 0.1)
link-hover: "#363636"
dark:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
highlight-hover: "#5a95f5"
background: "#131313"
card-background: "#2b2b2b"
text: "#eaeaea"
text-header: "#ffffff"
text-title: "#fafafa"
text-subtitle: "#f5f5f5"
card-shadow: rgba(0, 0, 0, 0.4)
link-hover: "#ffdd57"
@ -47,69 +27,28 @@ links:
- name: "Management" - name: "Management"
icon: "fas fa-code-branch" icon: "fas fa-code-branch"
url: "#mgmt" url: "#mgmt"
- name: "Extern"
icon: "fas fa-file-alt"
url: "#papa"
- name: "Test"
icon: "fas fa-globe"
url: "#test"
# wetter # wetter
# https://github.com/bastienwirtz/homer/pull/181 # https://github.com/bastienwirtz/homer/pull/181
services: services:
- name: "Wetter" # - name: "Wetter"
icon: "fas fa-cloud" # icon: "fas fa-cloud"
items: # items:
- name: "Weather" # - name: "Weather"
location: "Burg" # your location. # location: "Burg" # your location.
locationId: "2941501" # OpenWeatherMap city ID. # locationId: "2941501" # OpenWeatherMap city ID.
apiKey: "c1ec4c040abfa80b991c72d48b49d4a0" # insert your own API key here. Request one from https://openweathermap.org/api. # apiKey: "c1ec4c040abfa80b991c72d48b49d4a0" # insert your own API key here. Request one from https://o#penweathermap.org/api. # key deactiviert
units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin. # units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
background: "none" # choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none. # background: "none" # choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none.
type: "OpenWeather" # type: "OpenWeather"
- name: "Weather" # - name: "Weather"
location: "Magdeburg" # location: "Magdeburg"
locationId: "2874545" # locationId: "2874545"
apiKey: "c1ec4c040abfa80b991c72d48b49d4a0" # apiKey: "c1ec4c040abfa80b991c72d48b49d4a0"
units: "metric" # units: "metric"
background: "none" # background: "none"
type: "OpenWeather" # type: "OpenWeather"
- name: "Help"
icon: "fas fa-cloud"
items:
- name: "Crontab Guru"
logo: "assets/icons/healthchecks.png"
url: "https://crontab.guru"
target: "_blank"
- name: "Epoch Converter"
logo: "assets/icons/epochconverter.png"
url: "https://www.epochconverter.com"
target: "_blank"
- name: "fstab Generator"
logo: "assets/icons/sabnzbd.png"
url: "https://epistel.no/fstab/"
target: "_blank"
- name: "chmod Calculator"
logo: "assets/icons/redis.png"
url: "https://chmod-calculator.com"
target: "_blank"
- name: "composerizer"
logo: "assets/icons/docker.png"
url: "https://www.composerize.com"
target: "_blank"
subtitle: "docker-run to docker-compose"
- name: "Umrechner Bytes"
logo: "assets/icons/bytes.png"
url: "https://www.fischerclan.de/byte_umrechner.html"
target: "_blank"
- name: "git revert..."
logo: "assets/icons/netatmo.png"
url: "https://sethrobertson.github.io/GitFixUm/fixup.html"
target: "_blank"
- name: "Dienste" - name: "Dienste"
icon: "fas fa-cloud" icon: "fas fa-cloud"
@ -139,7 +78,7 @@ services:
url: "http://docker10.grote.lan:3001" url: "http://docker10.grote.lan:3001"
target: "_blank" target: "_blank"
subtitle: "Facebook/Instagram-to-rss" subtitle: "Facebook/Instagram-to-rss"
- name: "Navidrome - mg" - name: "Navidrome"
logo: "assets/icons/navidrome.png" logo: "assets/icons/navidrome.png"
url: "https://audio.mgrote.net/mg" url: "https://audio.mgrote.net/mg"
target: "_blank" target: "_blank"
@ -150,8 +89,6 @@ services:
target: "_blank" target: "_blank"
subtitle: "Website2rss" subtitle: "Website2rss"
- name: "Web" - name: "Web"
icon: "fas fa-cloud" icon: "fas fa-cloud"
items: items:
@ -184,14 +121,30 @@ services:
url: "https://hub.docker.com/r/quotengrote" url: "https://hub.docker.com/r/quotengrote"
target: "_blank" target: "_blank"
- name: "Help"
icon: "fas fa-cloud"
items:
- name: "Crontab Guru"
logo: "assets/icons/healthchecks.png"
url: "https://crontab.guru"
target: "_blank"
- name: "chmod Calculator"
logo: "assets/icons/redis.png"
url: "https://chmod-calculator.com"
target: "_blank"
- name: "composerizer"
logo: "assets/icons/docker.png"
url: "https://www.composerize.com"
target: "_blank"
subtitle: "docker-run to docker-compose"
- name: "git revert..."
logo: "assets/icons/netatmo.png"
url: "https://sethrobertson.github.io/GitFixUm/fixup.html"
target: "_blank"
- name: "Diabetes" - name: "Diabetes"
icon: "fas fa-cloud" icon: "fas fa-cloud"
items: items:
- name: "LibreView"
logo: "assets/icons/freestyle.png"
url: "https://www.libreview.com/glucosereports"
target: "_blank"
- name: "DexCom Clarity" - name: "DexCom Clarity"
logo: "assets/icons/dexcom.png" logo: "assets/icons/dexcom.png"
url: "https://clarity.dexcom.eu/#/overview" url: "https://clarity.dexcom.eu/#/overview"
@ -201,18 +154,6 @@ services:
url: "https://de-fr.my.glooko.com" url: "https://de-fr.my.glooko.com"
target: "_blank" target: "_blank"
- name: "Spiele"
icon: "fas fa-cloud"
items:
- name: "Gravity Simulator"
logo: "assets/icons/freshrss.png"
url: "https://testtubegames.com/gravity.html"
target: "_blank"
- name: "Finanzen" - name: "Finanzen"
icon: "fas fa-cloud" icon: "fas fa-cloud"
items: items:
@ -225,16 +166,6 @@ services:
url: "https://sparen.leaseplanbank.de" url: "https://sparen.leaseplanbank.de"
target: "_blank" target: "_blank"
- name: "Dataport"
icon: "fas fa-cloud"
items:
- name: "Outlook"
logo: "assets/icons/dataport.png"
url: "https://webmail.ondataport.de"
target: "_blank"
subtitle: "Webmail"
- name: "Solar" - name: "Solar"
icon: "fas fa-cloud" icon: "fas fa-cloud"
items: items:

View file

@ -0,0 +1,12 @@
# PWA Icons / Images
We suggest you to create a svg or png icon (if it is a png icon, with the maximum resolution possible) for your application and use it to generate a favicon package in [Favicon Generator](https://realfavicongenerator.net/).
Once generated, download the ZIP and use android-* icons for pwa-*:
- use `android-chrome-192x192.png` for `pwa-192x192.png`
- use `android-chrome-512x512.png` for `pwa-512x512.png`
- `apple-touch-icon.png` is `apple-touch-icon.png`
- `favicon.ico` is `favicon.ico`
`

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

View file

@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

View file

@ -18,12 +18,6 @@ links:
- name: "Management" - name: "Management"
icon: "fas fa-code-branch" icon: "fas fa-code-branch"
url: "#mgmt" url: "#mgmt"
- name: "Extern"
icon: "fas fa-file-alt"
url: "#papa"
- name: "Test"
icon: "fas fa-globe"
url: "#test"
services: services:
- name: "Hardware" - name: "Hardware"
@ -42,11 +36,6 @@ services:
- name: "Infra" - name: "Infra"
icon: "fas fa-cloud" icon: "fas fa-cloud"
items: items:
- name: "ProxMox Virtual Environment"
logo: "assets/icons/pve.png"
url: "https://pve5.grote.lan:8006"
target: "_blank"
subtitle: "Selbstbau"
- name: "Apt-Cacher-NG" - name: "Apt-Cacher-NG"
logo: "assets/icons/acng.jpg" logo: "assets/icons/acng.jpg"
url: "http://acng2.grote.lan:9999/acng-report.html" url: "http://acng2.grote.lan:9999/acng-report.html"
@ -78,8 +67,19 @@ services:
target: "_blank" target: "_blank"
subtitle: "Package-Registry" subtitle: "Package-Registry"
- name: "Infra"
icon: "fas fa-cloud"
items:
- name: "ProxMox Virtual Environment - Production"
logo: "assets/icons/pve.png"
url: "https://pve5.grote.lan:8006"
target: "_blank"
subtitle: "Selbstbau"
- name: "ProxMox Virtual Environment - Test"
logo: "assets/icons/pve.png"
url: "https://pve5-test.grote.lan:8006"
target: "_blank"
subtitle: "Test"
- name: "Monitoring" - name: "Monitoring"
icon: "fas fa-cloud" icon: "fas fa-cloud"
@ -98,23 +98,33 @@ services:
- name: "Internet-MGMT" - name: "Internet-MGMT"
icon: "fas fa-cloud" icon: "fas fa-cloud"
items: items:
- name: "IONOS"
logo: "assets/icons/1und1.jpg"
url: "https://login.ionos.de/#/servers/F872D83983D453EA40074C5C59AFB7DD"
target: "_blank"
subtitle: "tor1.mgrote.net"
- name: "Scaleway" - name: "Scaleway"
logo: "assets/icons/scaleway.png" logo: "assets/icons/scaleway.png"
url: "https://console.scaleway.com/object-storage/buckets" url: "https://console.scaleway.com/object-storage/buckets"
target: "_blank" target: "_blank"
subtitle: "Scaleway S3" subtitle: "Scaleway S3"
- name: "gl.inet - Cloud"
logo: "assets/icons/gl-cloud.png"
url: "https://www.goodcloud.xyz/#/login"
target: "_blank"
subtitle: "Mango MGMT"
- name: "Strato - DNS" - name: "Strato - DNS"
logo: "assets/icons/strato.jpg" logo: "assets/icons/strato.jpg"
url: "https://www.strato.de/apps/CustomerService#/skl" url: "https://www.strato.de/apps/CustomerService#/skl"
target: "_blank" target: "_blank"
subtitle: "Domainverwaltung" subtitle: "Domainverwaltung"
- name: "Extern - NAS"
icon: "fas fa-cloud"
items:
- name: "QNAP TS-251+"
logo: "assets/icons/qnap.png"
url: "http://192.168.3.108:8080"
target: "_blank"
- name: "Extern - Network"
icon: "fas fa-cloud"
items:
- name: "Speedport Smart 3"
logo: "assets/icons/speedport.png"
url: "http://192.168.3.1"
target: "_blank"
- name: "Netgear GS308E"
logo: "assets/icons/switch.png"
url: "http://192.168.3.147"
target: "_blank"

View file

@ -1,46 +0,0 @@
---
# Additionnal page configuration
# Additionnal configurations are loaded using its file name, minus the extension, as an anchor (https://<mydashboad>#<config>).
# `config.yml` is still used as a base configuration, and all values here will overwrite it, so you don't have to re-defined everything
subtitle: "Papa's Dienste"
# This overwrites message config. Setting it to empty to remove message from this page and keep it only in the main one:
message: "Nur per VPN erreichbar, @home über den Router als s2s-Tunnel umgesetzt."
# as we want to include a differente link here (so we can get back to home page), we need to replicate all links or they will be revome when overwriting the links field:
links:
- name: "Homepage"
icon: "fas fa-heartbeat"
url: "http://docker10.grote.lan:333"
- name: "Management"
icon: "fas fa-code-branch"
url: "#mgmt"
- name: "Extern"
icon: "fas fa-file-alt"
url: "#papa"
- name: "Test"
icon: "fas fa-globe"
url: "#test"
services:
- name: "Storage"
icon: "fas fa-cloud"
items:
- name: "QNAP TS-251+"
logo: "assets/icons/qnap.png"
url: "http://192.168.3.108:8080"
target: "_blank"
- name: "Network"
icon: "fas fa-cloud"
items:
- name: "Speedport Smart 3"
logo: "assets/icons/speedport.png"
url: "http://192.168.3.1"
target: "_blank"
- name: "Netgear GS308E"
logo: "assets/icons/switch.png"
url: "http://192.168.3.147"
target: "_blank"

View file

@ -1,36 +0,0 @@
---
# Additionnal page configuration
# Additionnal configurations are loaded using its file name, minus the extension, as an anchor (https://<mydashboad>#<config>).
# `config.yml` is still used as a base configuration, and all values here will overwrite it, so you don't have to re-defined everything
subtitle: "Test/Staging"
# This overwrites message config. Setting it to empty to remove message from this page and keep it only in the main one:
# message: ~
# as we want to include a differente link here (so we can get back to home page), we need to replicate all links or they will be revome when overwriting the links field:
links:
- name: "Homepage"
icon: "fas fa-heartbeat"
url: "http://docker10.grote.lan:333"
- name: "Management"
icon: "fas fa-code-branch"
url: "#mgmt"
- name: "Extern"
icon: "fas fa-file-alt"
url: "#papa"
- name: "Test"
icon: "fas fa-globe"
url: "#test"
services:
- name: "Infra"
icon: "fas fa-cloud"
items:
- name: "ProxMox Virtual Environment"
logo: "assets/icons/pve.png"
url: "https://pve5-test.grote.lan:8006"
target: "_blank"
subtitle: "VM"