CSS changes, testing message from URL

config.yml

@@ -4,10 +4,12 @@ subtitle: 'Home'
 logo: 'logo.png'
 
 message:
-  title: 'Wartungsarbeiten'
+  url: 'https://checksch.de/hook/messages.php'
-  style: 'is-warning'
+  mapping:
-  icon: 'fa fa-exclamation-triangle'
+    title: 's-title'
-  content: 'Innerhalb der Schmökerei werden derzeit einige Änderungen vorgenommen, welche dazu führen können, dass Dienste zeitweise nicht erreichbar sind oder Links in diesem Dashboard nicht mehr funktionieren.'
+    content: 's-content'
+  style: 'is-info'
+  icon: 'fa fa-info'
 
 header: false
 footer: false
@@ -31,7 +33,7 @@ colors:
     card-shadow: rgba(0, 0, 0, 0.5)
     link: '#3273dc'
     link-hover: '#2e4053'
-    background-image: '../assets/wallpaper-light.jpeg' # Change wallpaper.jpeg to the name of your own custom wallpaper!
+    background-image: '../assets/wallpaper.png' # Change wallpaper.jpeg to the name of your own custom wallpaper!
   dark:
     highlight-primary: '#181C3A'
     highlight-secondary: '#181C3A'
@@ -45,7 +47,7 @@ colors:
     card-shadow: rgba(0, 0, 0, 0.5)
     link: '#c1c1c1'
     link-hover: '#fafafa'
-    background-image: '../assets/wallpaper.jpeg'
+    background-image: '../assets/wallpaper.png'
 
 services:
   - name: 'Service'

custom.css

@@ -7,10 +7,14 @@
   font-weight: 400;
   src: url('./fonts/raleway-v22-latin-regular.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./fonts/raleway-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./fonts/raleway-v22-latin-regular.eot?#iefix')
-       url('./fonts/raleway-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+      format('embedded-opentype'),
-       url('./fonts/raleway-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
+    /* IE6-IE8 */ url('./fonts/raleway-v22-latin-regular.woff2') format('woff2'),
-       url('./fonts/raleway-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+    /* Super Modern Browsers */ url('./fonts/raleway-v22-latin-regular.woff')
+      format('woff'),
+    /* Modern Browsers */ url('./fonts/raleway-v22-latin-regular.ttf')
+      format('truetype'),
+    /* Safari, Android, iOS */
       url('./fonts/raleway-v22-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
 }
 
@@ -21,11 +25,14 @@
   font-weight: 400;
   src: url('./fonts/lato-v20-latin-regular.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./fonts/lato-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./fonts/lato-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
-       url('./fonts/lato-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+    /* IE6-IE8 */ url('./fonts/lato-v20-latin-regular.woff2') format('woff2'),
-       url('./fonts/lato-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
+    /* Super Modern Browsers */ url('./fonts/lato-v20-latin-regular.woff')
-       url('./fonts/lato-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+      format('woff'),
-       url('./fonts/lato-v20-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
+    /* Modern Browsers */ url('./fonts/lato-v20-latin-regular.ttf')
+      format('truetype'),
+    /* Safari, Android, iOS */ url('./fonts/lato-v20-latin-regular.svg#Lato')
+      format('svg'); /* Legacy iOS */
 }
 
 /* lato-700 - latin */
@@ -35,11 +42,14 @@
   font-weight: 700;
   src: url('./fonts/lato-v20-latin-700.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./fonts/lato-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./fonts/lato-v20-latin-700.eot?#iefix') format('embedded-opentype'),
-       url('./fonts/lato-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+    /* IE6-IE8 */ url('./fonts/lato-v20-latin-700.woff2') format('woff2'),
-       url('./fonts/lato-v20-latin-700.woff') format('woff'), /* Modern Browsers */
+    /* Super Modern Browsers */ url('./fonts/lato-v20-latin-700.woff')
-       url('./fonts/lato-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+      format('woff'),
-       url('./fonts/lato-v20-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
+    /* Modern Browsers */ url('./fonts/lato-v20-latin-700.ttf')
+      format('truetype'),
+    /* Safari, Android, iOS */ url('./fonts/lato-v20-latin-700.svg#Lato')
+      format('svg'); /* Legacy iOS */
 }
 
 /* lato-900 - latin */
@@ -49,11 +59,14 @@
   font-weight: 900;
   src: url('./fonts/lato-v20-latin-900.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./fonts/lato-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./fonts/lato-v20-latin-900.eot?#iefix') format('embedded-opentype'),
-       url('./fonts/lato-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
+    /* IE6-IE8 */ url('./fonts/lato-v20-latin-900.woff2') format('woff2'),
-       url('./fonts/lato-v20-latin-900.woff') format('woff'), /* Modern Browsers */
+    /* Super Modern Browsers */ url('./fonts/lato-v20-latin-900.woff')
-       url('./fonts/lato-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
+      format('woff'),
-       url('./fonts/lato-v20-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
+    /* Modern Browsers */ url('./fonts/lato-v20-latin-900.ttf')
+      format('truetype'),
+    /* Safari, Android, iOS */ url('./fonts/lato-v20-latin-900.svg#Lato')
+      format('svg'); /* Legacy iOS */
 }
 
 /* Sets the group title to be a bolder font */
@@ -84,7 +97,7 @@ body #app .message {
   opacity: 80%;
 }
 
- /*Adds more border radius to the cards */
+/*Adds more border radius to the cards */
 body .layout-vertical .column div:first-of-type .card {
   border-radius: 1rem;
 }
@@ -107,7 +120,37 @@ body .search-bar input {
   opacity: 20%;
 }
 
-body #bighead .navbar a:focus, body #bighead .navbar a:hover {
+body #bighead .navbar a:focus,
+body #bighead .navbar a:hover {
   background-color: rgba(0, 0, 0, 0);
   color: var(--link-hover);
 }
+
+body .footer {
+  text-align: center;
+}
+
+.footer i {
+  color: #e21c1b;
+}
+
+.footer img {
+  position: relative;
+  opacity: 0.6;
+  top: 2px;
+  height: 1em;
+}
+
+.footer a:hover img {
+  opacity: 1;
+}
+
+body #app .card,
+body #app .card:hover,
+body #app .message {
+  opacity: 87%;
+}
+
+body #app.is-light .message .message-body {
+  color: var(--text-subtitle);
+}