hmn
/
hmn
4
Fork 9
Code Issues 59 Pull Requests 1 Releases Activity

Add HMS banner to the home page

This commit is contained in:
Ben Visness 2021-10-25 22:21:11 -05:00
parent 3324428f8b
commit de587abc94
2 changed files with 58 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/hms/banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

75
src/templates/src/landing.html
View File

@ -7,53 +7,94 @@
{{ define "content" }}
<div class="content-block pb3 ph3 ph0-ns">
<style>
#jam-banner {
background: linear-gradient(#ab4c47, #a5467d);
#hms-banner {
height: 10rem;
background-color: #0b0243;
color: white !important;
text-align: center;
position: relative;
overflow: hidden;
}
#jam-banner h3 {
#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.2rem;
font-size: 2.6rem;
line-height: 0.8;
margin: 0;
text-transform: uppercase;
}
#jam-details {
#hms-details {
font-family: 'MohaveHMN', sans-serif;
font-variant: small-caps;
font-size: 1.2rem;
font-size: 1.3rem;
line-height: 0.8;
margin-top: 0.6rem;
letter-spacing: 0.02rem;
}
#jam-learn-more {
#hms-learn-more {
font-size: 1rem;
}
@media screen and (min-width: 30rem) {
#jam-banner {
#hms-banner {
height: 12rem;
text-align: left;
color: #0b0243 !important;
}
#jam-title-container {
padding-top: 0.2rem;
#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="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>
<a id="hms-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="https://handmade-seattle.com/">
<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 11 - 12. In person and online.</div>
</div>
<div class="flex-grow-1"></div>
<div id="jam-learn-more">
Learn more
<div id="hms-learn-more" class="z-1">
Sign up
<div class="dib svgicon">{{ svg "chevron-right" }}</div>
</div>
</a>