Add audio shortcode, plus styling

Author: bartdegoede

layouts/shortcodes/audio.html

@@ -0,0 +1,26 @@
+<div id="player">
+    <div class="listen">Listen to this article instead</div>
+    <div id="waveform">
+        {{ $waveform := resources.Get "img/waveform.svg" | minify }}
+        <img src="{{ $waveform.Permalink }}" alt="waveform">
+    </div>
+    <audio controls
+        class="audio_controls {{ .Get "class" }}"
+        {{ with .Get "id" }}id="{{ . }}"{{ end }}
+        {{ with .Get "preload" }}preload="{{ . }}"{{ else }}preload="metadata"{{ end }}
+
+        style="{{ with .Get "style" }}{{ . | safeCSS }}; {{ end }}"
+        {{ with .Get "title" }}data-info-title="{{ . }}"{{ end }}
+    >
+        {{ if .Get "src" }}
+        <source {{ with .Get "src" }}src="{{ . }}"{{ end }}
+            {{ with .Get "type" }}type="audio/{{ . }}"{{ end }}>
+        {{ else if .Get "backup_src" }}
+            <source src="{{ .Get "backup_src" }}"
+                {{ with .Get "backup_type" }}type="audio/{{ . }}"{{ end }}
+                {{ with .Get "backup_codec" }}codecs="{{ . }}"{{ end }}
+            >
+        {{ end }}
+        Your browser does not support the audio element
+    </audio>
+</div>

static/css/bart.degoe.de.css

@@ -77,3 +77,23 @@ figcaption h4 {
 input[type="search"] {
     -webkit-appearance: textfield;
 }
+
+#player {
+    padding: 20px 20px;
+    margin: 20px 0;
+    border-radius: 3px;
+    box-shadow: 0 0 8px 0 #eee;
+}
+
+#player .listen {
+    color: #19BC9C;
+    margin-bottom: 7px;
+}
+
+#player #waveform img {
+    width: 100%;
+}
+
+#player audio {
+    width: 100%;
+}