feat: explanation & styling for highlight (#149)

## Description

resolves
[#104](#104)

## Checklist
<!-- Check fields with: [x] / Abhaken von Punkten: [x] -->

- [ ] Check the License of new pictures (non-commercial use without
attribution) <!-- Die Lizenz neuer Bilder geprüft (nicht-kommerzielle
Nutzung ohne Namensnennung) -->

The content was modified in the following languages: <!-- Der Inhalt
wurde für die folgenden Sprachen angepasst -->
- [ ] English
- [ ] German

---------

Signed-off-by: lennartrommeiss <61516567+lenderom@users.noreply.github.com>
Co-authored-by: Lennart Rommeiss <61516567+lenderom@users.noreply.github.com>

Author: therobrob

assets/sass/textHighlight.scss

@@ -6,6 +6,14 @@
   border-left: var(--bg-neutral) solid 1rem;
 }
 
+.m-text-highlight__roofline {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+  font-weight: bold;
+  opacity: .8;
+}
+
 .m-text-highlight--tip {
   background-color: #C4F2FF;
   border-left: #1DB5DF solid 1rem;

i18n/de.yaml

@@ -11,9 +11,10 @@ menu-open: Menü
 menu-close: Schließen
 general: Übergreifendes
 information-disclaimer-short: Diese Informationen sind inoffiziell und ohne Gewähr. Es besteht keine rechtliche Verbindung zu FIP oder Bahngesellschaften.
-highlight-important: Wichtige Information
-highlight-inofficial: Inoffizielle Information
-highlight-tip: Persönlicher Tipp
+highlight:
+  important: Wichtige Information
+  inofficial: Inoffizielle Information
+  tip: Persönlicher Tipp
 news-headline: Was gibt's Neues?
 _operator__list_title: Betreiber mit FIP
 updateDate: Zuletzt aktualisiert

i18n/en.yaml

@@ -11,9 +11,10 @@ menu-open: Menu
 menu-close: Close
 general: general
 information-disclaimer-short: The information provided is unofficial and without guarantee. There is no legal connection to FIP or railway companies.
-highlight-important: Important Information
-highlight-inofficial: Unofficial Information
-highlight-tip: Personal Tip
+highlight:
+  important: Important Information
+  inofficial: Unofficial Information
+  tip: Personal Tip
 news-headline: What's new?
 _operator__list_title: Operators supporting FIP
 updateDate: Last updated

layouts/shortcodes/highlight.html

@@ -1,3 +1,8 @@
-<div class="m-text-highlight m-text-highlight--{{ (.Get 0) | markdownify }}" aria-label='{{ T (printf "highlight-%s" (.Get 0)) }}'>
-    {{ .Inner }}
-</div>
+{{- $param := .Get 0 -}}
+<div class="m-text-highlight m-text-highlight--{{ $param }}">
+    {{- if $param -}}
+    <div class="m-text-highlight__roofline">{{ T (printf "highlight.%s" $param) }}</div>
+    {{- end -}}
+    <div>
+{{ .Inner }}
+</div></div>