wifi: improved intro

content/wifi.de.md

@@ -7,9 +7,9 @@ color: none
 class: wifi
 headerImage: headers/outdoor.jpg
 ---
-In Bereiche der Studentenstadt strahlt das StuStaNet für seie Mitglieder das W-LAN "StuStaNet". Wie du dein Gerät mit dem WLAN verbindest, erfährst du auf dieser Seite. Falls du sonst noch Probleme oder Fragen hast, kannst du uns immer gerne eine [Mail](https://stustanet.de/mail/admins) schreiben.
+Im Areal der Studentenstadt bietet StuStaNet für Mitglieder in Außenbereichen und Gemeinschaftseinrichtungen das StuStaNet WLAN an. Wie du dein Gerät mit dem WLAN verbindest, erfährst du auf dieser Seite.
 
-<span style="background:#FFDADA; margin:20px 0 0; padding:6px 0; width:100%; max-width:100%;">Das StuStaNet W-LAN befindet sich in der Testphase. Erwarte Verfügbarkeitprobleme. Einstellungen können sich ändern.</span>
+{{% warn %}} StuStaNet WLAN befindet sich in der Testphase. Verfügbarkeitsprobleme sind zu erwarten und Einstellungen können sich ändern.{{% /warn %}}
 
 <div class="callout callout-default">
     <h3>WLAN fürs eigene Zimmer</h3>

content/wifi.en.md

@@ -7,10 +7,9 @@ color: none
 class: wifi
 headerImage: headers/outdoor.jpg
 ---
+In the Studentenstadt StuStaNet offers the StuStaNet WLAN for members in outdoor areas and community facilities. On this page, you will learn how to connect your device to the Wi-Fi.
 
-In the Studentenstadt area StuStaNet provides the Wi-Fi "StuStaNet" for StuStaNet members. On this page, you will learn how to connect your device to the Wi-Fi. If you have any questions or comments you can [write us](https://stustanet.de/mail/admins).
-
-<span style="background:#FFDADA; margin:20px 0 0; padding:6px 0; width:100%; max-width:100%;">StuStaNet Wi-Fi is under development. Expect downtime. Settings may change.</span>
+{{% warn %}} StuStaNet Wi-Fi is in the testing phase. Downtimes are to be expected and settings may change.{{% /warn %}}
 
 <div class="callout callout-default">
     <h3>Wi-Fi for your room</h3>

layouts/shortcodes/alert.html

+<div class="alert">{{ .Inner }}</div>

layouts/shortcodes/warn.html

+<div class="warn">{{ .Inner }}</div>

static/css/main.css

@@ -680,12 +680,37 @@ a.button:hover {
     margin-top: 30px;
 }
 
+div.alert,
+div.warn,
+div.success {
+    position: relative;
+    padding: .5rem .8rem;
+    margin: .5rem 0;
+    line-height: 1.5;
+    border: 1px solid #dee2e6;
+    border-radius: .25rem;
+}
+div.alert {
+    color: #721c24;
+    background: #f8d7da;
+    border-color: #f5c6cb;
+}
+div.warn {
+    color: #856404;
+    background: #fff3cd;
+    border-color: #f2d376;
+}
+div.success {
+    background: #e1f6e1;
+    border-color: #a9deaa;
+}
+
 .callout {
     padding: 20px;
     margin: 20px 0;
     border: 1px solid #eee;
-    border-left-width: 5px;
-    border-radius: 3px;
+    border-left-width: 0.25rem;
+    border-radius: 0.25rem;
 }
 .callout:after {
     content: "";