This is my first post here and I am trying to follow all the tips for how to make a post to try to resolve my issue.
What I am trying to do
I am working on an implementation of the “future-events” template here:
https://gohugo.io/templates/introduction/#example-show-future-events
However, I would like the events to display as panels instead of a <ul>
list, similar to the way the Articles show up here:
https://gohugo-ananke-theme-demo.netlify.app/post/
What I have tried
Using that Articles page, I tried making this my future-events.html file:
<h2>Future Events</h2>
<article class="pa3 pa4-ns nested-copy-line-height">
{{ range where site.RegularPages "Type" "events" }}
{{ if gt (.Params.start_date | time.AsTime) now }}
{{ $startDate := .Params.start_date | time.Format ":date_medium" }}
<aside class="flex-ns flex-wrap justify-around mt5">
<div class="relative w-100 w-30-l mb4 bg-white">
<div class="mb3 pa4 mid-gray overflow-hidden">
<div class="f6">
{{ $startDate }}
</div>
<h1 class="f3 near-black">
<a href="{{ .RelPermalink }}" class="link black dim"> {{ .LinkTitle }} </a>
</h1>
<div class="nested-links f5 lh-copy nested-copy-line-height">
{{ $startDate }}
</div>
</div>
</div>
{{ end }}
{{ end }}
</ul>
The issue
The alignment is off and I’m wondering if there is a more concise way to accomplish this than what I’ve written above