fix: wrong location shown, button issues

content/posts/talks.md

@@ -2,7 +2,6 @@
 title = 'Talks'
 date = 2024-02-08T18:25:50+01:00
 draft = false
-layout = "talks"
 +++
 this are most (if not all) of the talks that ive seen, either online or live during conferences and events ive traveled to.
 {{< talks >}}

themes/hugo-theme-console/layouts/shortcodes/talks.html

@@ -12,13 +12,16 @@
 <!-- Display location buttons -->
 <div id="locationButtons">
     {{ range $locations }}
-        <button class="locationButton" data-location="{{ . }}">{{ . }}</button>
+        <!-- Apply inline styles to the button -->
+        <button class="locationButton" data-location="{{ . }}" style="font-family: 'Open Sans', sans-serif; font-size: 16px; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; color: #000; cursor: pointer; border: 3px solid; padding: 0.25em 0.5em; box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation;">
+            {{ . }}
+        </button>
     {{ end }}
 </div>
+
 <!-- Display talks for each location -->
 {{ range $locations }}
     <div class="talksContainer" id="talks_{{ . }}" style="display: none;">
-        <h2>{{ . }}</h2>
         <ul>
             {{ $currentLocation := . }}
             {{ range $json.talks }}
@@ -40,8 +43,9 @@
                                 {{ end }}<br>
                             {{ end }}
                         {{ end }}
+                        <strong>Location:</strong> {{ .location }}<br>
                         <strong>Date:</strong> {{ .date }}<br>
-                        <strong>URL:</strong> <a href="{{ .url }}">{{ .url }}</a><br>
+                        <strong>URL:</strong> <a href="{{ .url }}" target="_blank">{{ .url }}</a><br>
                         <strong>Description:</strong> {{ .description }}<br><br>
                     </li>              
                 {{ end }}