431 lines
12 KiB
HTML
431 lines
12 KiB
HTML
{{ template "base.html" . }}
|
|
|
|
{{ define "extrahead" }}
|
|
<script src="{{ static "js/templates.js" }}"></script>
|
|
{{ end }}
|
|
|
|
{{ define "content" }}
|
|
|
|
{{/*
|
|
<div class="mb3 ph3 ph0-ns">
|
|
<style>
|
|
#hms-banner {
|
|
height: 10rem;
|
|
background-color: #0b0243;
|
|
color: white !important;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#hms-banner::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('{{ static "hms/banner.jpg" }}');
|
|
background-size: auto 100%;
|
|
z-index: 0;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
#hms-banner h3 {
|
|
font-family: 'MohaveHMN', sans-serif;
|
|
font-weight: normal;
|
|
font-size: 2.6rem;
|
|
line-height: 0.8;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#hms-details {
|
|
font-family: 'MohaveHMN', sans-serif;
|
|
font-variant: small-caps;
|
|
font-size: 1.3rem;
|
|
line-height: 0.8;
|
|
margin-top: 0.6rem;
|
|
letter-spacing: 0.02rem;
|
|
}
|
|
|
|
#hms-learn-more {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30rem) {
|
|
#hms-banner {
|
|
height: 12rem;
|
|
text-align: left;
|
|
color: #0b0243 !important;
|
|
}
|
|
|
|
#hms-banner::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
#hms-title-container {
|
|
padding-left: 13.4rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
#hms-banner {
|
|
height: 15rem;
|
|
text-align: left;
|
|
color: #0b0243 !important;
|
|
}
|
|
|
|
#hms-title-container {
|
|
padding-left: 16rem;
|
|
}
|
|
|
|
#hms-banner h3 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
#hms-details {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
<a id="hms-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="https://guide.handmade-seattle.com/c/2022/" target="_blank">
|
|
<div id="hms-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns z-1">
|
|
<h3 id="hms-title">Handmade Seattle</h3>
|
|
<div id="hms-details">November 16 - 18. In person and online.</div>
|
|
</div>
|
|
<div class="flex-grow-1"></div>
|
|
<div id="hms-learn-more" class="z-1">
|
|
{{ if gt .HMSDaysUntilEnd 0 }}
|
|
{{ if eq .HMSDaysUntilStart 0 }}
|
|
Watch live
|
|
{{ else }}
|
|
Get tickets
|
|
{{ end }}
|
|
{{ else }}
|
|
Catch up
|
|
{{ end }}
|
|
<div class="dib svgicon">{{ svg "chevron-right" }}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
*/}}
|
|
|
|
<div class="mb3 ph3 ph0-ns">
|
|
<style>
|
|
#jam-banner {
|
|
background: linear-gradient(174deg, #C8217E, #6E2C6B);
|
|
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="{{ .JamUrl }}">
|
|
<img class="h3" src="{{ static "visjam2023/logo.svg" }}">
|
|
<div id="jam-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
|
|
<h3 id="jam-title">Visibility Jam</h3>
|
|
<div id="jam-details">
|
|
April 14 - 16.
|
|
{{ if gt .JamDaysUntilEnd 0 }}
|
|
{{ if eq .JamDaysUntilStart 0 }}
|
|
<b>Happening now.</b>
|
|
{{ else if eq .JamDaysUntilStart 1 }}
|
|
<b>Starting tomorrow.</b>
|
|
{{ else }}
|
|
<b>In {{ .JamDaysUntilStart }} days.</b>
|
|
{{ end }}
|
|
{{ else }}
|
|
<b>See the results.</b>
|
|
{{ end }}
|
|
</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="mb3 ph3 ph0-ns">
|
|
<style>
|
|
#cities-banner {
|
|
background: url("{{ static "cities/banner.png" }}");
|
|
background-repeat: no-repeat;
|
|
color: white !important;
|
|
text-align: center;
|
|
background-size: contain;
|
|
background-position: bottom;
|
|
background-color: black;
|
|
}
|
|
|
|
#cities-banner h3 {
|
|
font-family: 'MohaveHMN', sans-serif;
|
|
font-weight: normal;
|
|
font-size: 2.2rem;
|
|
line-height: 0.8;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.cities-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;
|
|
}
|
|
|
|
#cities-learn-more {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#cities-title-container{
|
|
padding-left: 8.5rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30rem) {
|
|
#cities-banner {
|
|
text-align: left;
|
|
}
|
|
|
|
#cities-title-container {
|
|
padding-top: 0.2rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 960px) {
|
|
#cities-title-container {
|
|
padding-left: 7.5rem;
|
|
}
|
|
|
|
#cities-banner{
|
|
background-size: 200%;
|
|
background-position: 0 100%;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 560px) {
|
|
#cities-banner {
|
|
text-align: left;
|
|
}
|
|
|
|
#cities-title-container {
|
|
padding-top: 0.2rem;
|
|
padding-left: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<a id="cities-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="https://handmadecities.com/tickets">
|
|
<div id="cities-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
|
|
<h3 id="cities-title">Handmade cities</h3>
|
|
<div class="cities-details">
|
|
Boston - Aug 3-4 2023.
|
|
{{ if gt .HMBostonDaysUntilEnd 0 }}
|
|
{{ if eq .HMBostonDaysUntilStart 0 }}
|
|
<b>Happening now.</b>
|
|
{{ else if eq .HMBostonDaysUntilStart 1 }}
|
|
<b>Starting tomorrow.</b>
|
|
{{ else }}
|
|
<b>In {{ .HMBostonDaysUntilStart }} days.</b>
|
|
{{ end }}
|
|
{{ else }}
|
|
<b>See the results.</b>
|
|
{{ end }}
|
|
</div>
|
|
<div class="cities-details">
|
|
Seattle - Nov 15-17 2023.
|
|
{{ if gt .HMSDaysUntilEnd 0 }}
|
|
{{ if eq .HMSDaysUntilStart 0 }}
|
|
<b>Happening now.</b>
|
|
{{ else if eq .HMSDaysUntilStart 1 }}
|
|
<b>Starting tomorrow.</b>
|
|
{{ else }}
|
|
<b>In {{ .HMSDaysUntilStart }} days.</b>
|
|
{{ end }}
|
|
{{ else }}
|
|
<b>See the results.</b>
|
|
{{ end }}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex-grow-1"></div>
|
|
<div id="cities-learn-more">
|
|
Tickets available now
|
|
<div class="dib svgicon">{{ svg "chevron-right" }}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
{{ if not .User }}
|
|
<div class="mb3 ph3 ph0-ns">
|
|
<style>
|
|
#welcome {
|
|
background: linear-gradient(#753330, #823461); /* darker variant of jam color scheme */
|
|
color: white;
|
|
}
|
|
|
|
#welcome-logo {
|
|
font-family: 'MohaveHMN', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 4rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#welcome-logo svg {
|
|
height: 100%;
|
|
fill: currentColor;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
#welcome-content a {
|
|
color: white !important;
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#welcome-actions {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
#welcome-actions a {
|
|
color: white !important;
|
|
text-decoration: none;
|
|
line-height: 1.4;
|
|
font-weight: 500;
|
|
|
|
transition: background-color 50ms ease-in-out;
|
|
background-color:rgba(255, 255, 255, 0.1);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
#welcome-actions a:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
#welcome-actions a:active {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
</style>
|
|
<div id="welcome" class="br3 pa3 pa4-ns bg--card f5">
|
|
<div id="welcome-logo" class="h4 mb3 mb4-ns">
|
|
{{ svg "hmn_circuit" }}
|
|
</div>
|
|
<div id="welcome-content" class="center-layout" style="max-width: 51rem">
|
|
<p class="b">We are a community of programmers producing quality software through deeper understanding.</p>
|
|
<p>Originally inspired by Casey Muratori's <a href="https://handmadehero.org/" target="_blank">Handmade Hero</a>, we have grown into a thriving community focused on building truly high-quality software. We're not low-level in the typical sense. Instead we realize that to write great software, you need to understand things on a deeper level.</p>
|
|
<p>Modern software is a mess. The status quo needs to change. But we're optimistic that we can change it.</p>
|
|
</div>
|
|
<div id="welcome-actions" class="flex flex-column flex-row-ns justify-center">
|
|
<a class="ba b--white br2 pa3 ph4-ns" href="{{ .ManifestoUrl }}">Read our manifesto</a>
|
|
<a class="ba b--white br2 pa3 ph4-ns mt3 mt0-ns ml3-ns" href="{{ .Header.ProjectIndexUrl }}">View Handmade projects</a>
|
|
<a class="ba b--white br2 pa3 ph4-ns mt3 mt0-ns ml3-ns" target="_blank" href="https://discord.gg/hmn">Join our Discord</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<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.
|
|
*/}}
|
|
|
|
{{/* NOTE(ben): I am just removing news posts for now. They are always stale and detract from the events we announce.
|
|
{{ with .NewsPost }}
|
|
<div>
|
|
<h2>Latest News</h2>
|
|
{{ template "timeline_item.html" . }}
|
|
</div>
|
|
{{ end }}
|
|
*/}}
|
|
<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="https://discord.gg/hmn" 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 }}
|