121 lines
3.5 KiB
HTML
121 lines
3.5 KiB
HTML
{{ template "base.html" . }}
|
|
|
|
{{ define "extrahead" }}
|
|
<script src="{{ static "js/templates.js" }}"></script>
|
|
{{ end }}
|
|
|
|
{{ define "content" }}
|
|
<div class="content-block pb3 ph3 ph0-ns">
|
|
<style>
|
|
#jam-banner {
|
|
background: linear-gradient(#ab4c47, #a5467d);
|
|
color: white !important;
|
|
text-align: center;
|
|
}
|
|
|
|
#jam-banner h3 {
|
|
font-family: 'MohaveHMN', sans-serif;
|
|
font-weight: normal;
|
|
font-size: 2.2rem;
|
|
line-height: 0.8;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#jam-details {
|
|
font-family: 'MohaveHMN', sans-serif;
|
|
font-variant: small-caps;
|
|
font-size: 1.2rem;
|
|
line-height: 0.8;
|
|
margin-top: 0.6rem;
|
|
letter-spacing: 0.02rem;
|
|
}
|
|
|
|
#jam-learn-more {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30rem) {
|
|
#jam-banner {
|
|
text-align: left;
|
|
}
|
|
|
|
#jam-title-container {
|
|
padding-top: 0.2rem;
|
|
}
|
|
}
|
|
</style>
|
|
<a id="jam-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="{{ .WheelJamUrl }}">
|
|
<img class="h3" src="{{ static "wheeljam/logo.svg" }}">
|
|
<div id="jam-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
|
|
<h3 id="jam-title">Wheel Reinvention Jam</h3>
|
|
<div id="jam-details">See the results.</div>
|
|
</div>
|
|
<div class="flex-grow-1"></div>
|
|
<div id="jam-learn-more">
|
|
Learn more
|
|
<div class="dib svgicon">{{ svg "chevron-right" }}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="landing-layout ph3 ph0-ns">
|
|
{{/*
|
|
The order of the grid children should be as desired on mobile, then adapted to larger
|
|
sizes using CSS grid properties.
|
|
*/}}
|
|
|
|
<div>
|
|
<h2>Latest News</h2>
|
|
{{ template "timeline_item.html" .NewsPost }}
|
|
</div>
|
|
<div class="landing-right">
|
|
<h2>Around the Network</h2>
|
|
<div class="optionbar mb2">
|
|
<div class="options">
|
|
<a class="button" href="{{ .AtomFeedUrl }}"><span class="icon big pr1">4</span> RSS Feed</a>
|
|
{{ if .User }}
|
|
<form method="POST" action="{{ .MarkAllReadUrl }}">
|
|
{{ csrftoken .Session }}
|
|
<button type="submit"><span class="big pr1">✓</span> Mark all posts on site as read</button>
|
|
</form>
|
|
{{ end }}
|
|
</div>
|
|
<div class="options">
|
|
{{ template "pagination.html" .Pagination }}
|
|
</div>
|
|
</div>
|
|
{{ range .TimelineItems }}
|
|
{{ template "timeline_item.html" . }}
|
|
{{ end }}
|
|
<div class="optionbar bottom mt2">
|
|
<div class="options"></div>
|
|
<div class="options">
|
|
{{ template "pagination.html" .Pagination }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ if .ShowcaseTimelineJson }}
|
|
<div>
|
|
{{ template "showcase_templates.html" }}
|
|
<div>
|
|
<h2>Community Showcase</h2>
|
|
<div class="bg--card pa3 br3">
|
|
<div class="mb3">
|
|
This is a selection of recent work done by community members. Want to participate? <a href="{{ .DiscordUrl }}" target="_blank">Join us on Discord.</a>
|
|
</div>
|
|
<div id="showcase-container"></div>
|
|
<div>
|
|
<a class="db w-100 tc pa2" href="{{ .ShowcaseUrl }}">View all »</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const showcaseItems = JSON.parse("{{ .ShowcaseTimelineJson }}");
|
|
initShowcaseContainer(document.querySelector('#showcase-container'), showcaseItems, 200);
|
|
</script>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|