Properly include "remote events" into the common event_weekly shortcode

- Not using the term "corona"
  - Too common, and what do we do in the next pandemic? ;)
  - Use the term "remote" and introduce some new "reason" field
- Use the "remote_reason" field to change text dynamically
- Use the existing and "custom.css" style sheets instead of inline css
  - Stick to the color scheme and visual appearance of the theme
  - Allows reusability in future
- Use the proper codepoint notation for the "microbe" emoji
  - Also append "︎" (use the one specified in the font, if defined)
    - See "scroll to top" icon in the footer

assets/custom.css

@@ -3,9 +3,16 @@
     text-align: center;
 }
 
+.border-dashed {
+    border: 1px dashed #4d4d4c;
+}
+
 .pad-horizontal {
     padding: 0 .5em;
 }
 .pad-vertical {
     padding: .5em 0;
 }
+.pad-both {
+    padding: .5em;
+}

content/events/programmierrunde.md

@@ -17,7 +17,8 @@ aliases:
 - /termine/montag
 event:
   weekly:
-    corona_url: https://meetmeetmeet.de/dezentrale-programmierrunde
+    remote_url: https://meetmeetmeet.de/dezentrale-programmierrunde
+    remote_reason: covid
     intro: >-
       Ob Du mit bits und bytes zaubern kannst, oder gerade erst 100 = 11+1 verstehst: Wir freuen uns auf Deinen Besuch
       bei uns. Du kannst hier Fragen stellen, Dein Projekt vorstellen oder unser Wissen mit spannenden Problemlösungen
@@ -27,4 +28,4 @@ event:
     finish: '19.00'
 ---
 
-{{< corona_event_weekly >}}
+{{< event_weekly >}}

layouts/shortcodes/corona_event_weekly.html

@@ -1,62 +0,0 @@
-{{- $corona_url := $.Page.Param "event.weekly.corona_url" }}
-{{- $intro := $.Page.Param "event.weekly.intro" }}
-{{- if not $intro }}
-{{- errorf "missing value for 'event.weekly.intro': %s" .Position }}
-{{- end }}
-{{- $weekday := $.Page.Param "event.weekly.weekday" }}
-{{- if not $weekday }}
-{{- errorf "missing value for 'event.weekly.weekday': %s" .Position }}
-{{- end }}
-{{- $begin := $.Page.Param "event.weekly.begin" }}
-{{- if not $begin }}
-{{- errorf "missing value for 'event.weekly.begin': %s" .Position }}
-{{- end }}
-{{- $finish := $.Page.Param "event.weekly.finish" }}
-{{- $interval := $.Page.Param "event.weekly.interval" }}
-{{- $annotation := $.Page.Param "event.weekly.annotation" }}
-{{- $link := $.Page.Param "event.weekly.link" }}
-<div style="position: relative; max-width: 600px;
-      height: auto;
-      border: 2px solid #ff0000;
-      margin: 50px auto;
-      padding: 20px;
-      box-sizing: border-box;">
-  &#9888;&#129440; Aufgrund der Corona-Pandemie findet unser Event virtuell unter der URL:
-  <a href="{{ $corona_url }}" target="_blank">{{ $corona_url }}</a> statt.
-</div>
-<p>
-  {{ $intro }}
-</p>
-<dl>
-  <dt>Termin</dt>
-  <dd>
-    Jeden
-    {{- with $interval }}
-    {{ . }} {{ $weekday }} im Monat
-    {{- else }}
-    {{ $weekday }}
-    {{- end }}
-  </dd>
-  {{- with $annotation }}
-  <dd>
-    <small>({{ . }})</small>
-  </dd>
-  {{- end }}
-  <dt>von</dt>
-  <dd>
-    {{ $begin }} Uhr
-  </dd>
-  <dt>bis</dt>
-  <dd>
-    {{- with $finish }}
-    {{ . }} Uhr
-    {{- else }}
-    open end
-    {{- end }}
-  </dd>
-</dl>
-<p>
-  {{- with $link }}
-  <a href="{{ . }}">Website</a>
-  {{- end }}
-</p>

layouts/shortcodes/event_weekly.html

@@ -14,9 +14,27 @@
 {{- $interval := $.Page.Param "event.weekly.interval" }}
 {{- $annotation := $.Page.Param "event.weekly.annotation" }}
 {{- $link := $.Page.Param "event.weekly.link" }}
+{{- $remote_url := $.Page.Param "event.weekly.remote_url" }}
+{{- $remote_reason := $.Page.Param "event.weekly.remote_reason" }}
 <p>
   {{ $intro }}
 </p>
+{{- with $remote_url }}
+<div class="pure-u-1-8"></div>
+<div class="pure-u-3-4 border-dashed pad-both">
+  {{- if eq $remote_reason "covid" }}
+    &#x1f9a0;&#xfe0e;
+  {{- end }}
+  Das Event findet
+  {{- if eq $remote_reason "covid" }}
+    aufgrund der Corona-Pandemie
+  {{- end }}
+  virtuell statt:
+  <br>
+  <a href="{{ . }}" target="_blank">{{ . }}</a>
+</div>
+<div class="pure-u-1-8"></div>
+{{- end }}
 <dl>
   <dt>Termin</dt>
   <dd>