60 lines
1.1 KiB
HTML
60 lines
1.1 KiB
HTML
{{ define "main" }}
|
||
|
||
<h1>{{ .Title }}</h1>
|
||
<ul>
|
||
{{ range .Pages }}
|
||
|
||
<div id="shows">
|
||
<div class="shows-row">
|
||
<div id="shows-image">
|
||
<img src="{{ .Params.poster}}" width="300" height="300">
|
||
</div>
|
||
<div class="shows-text">
|
||
<strong>{{ .Params.date.Format "2006-01-02" }}</strong> – {{ .Params.location }} – {{ .Title }}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{{ end }}
|
||
</ul>
|
||
|
||
<style>
|
||
#shows {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.shows-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 2rem 0;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.shows-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.shows-image img {
|
||
width: 300px;
|
||
height: auto;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.shows-row {
|
||
flex-direction: column-reverse;
|
||
text-align: center;
|
||
}
|
||
.shows-image img {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
</style>
|
||
{{ end }}
|
||
|