nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki 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" }} {{ define "content" }}
<div class="content-block pb3 ph3 ph0-ns"> <div class="content-block pb3 ph3 ph0-ns">
<style> <style>
#jam-banner { #hms-banner {
background: linear-gradient(#ab4c47, #a5467d); height: 10rem;
background-color: #0b0243;
color: white !important; color: white !important;
text-align: center; 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-family: 'MohaveHMN', sans-serif;
font-weight: normal; font-weight: normal;
font-size: 2.2rem; font-size: 2.6rem;
line-height: 0.8; line-height: 0.8;
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
} }
#jam-details { #hms-details {
font-family: 'MohaveHMN', sans-serif; font-family: 'MohaveHMN', sans-serif;
font-variant: small-caps; font-variant: small-caps;
font-size: 1.2rem; font-size: 1.3rem;
line-height: 0.8; line-height: 0.8;
margin-top: 0.6rem; margin-top: 0.6rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
#jam-learn-more { #hms-learn-more {
font-size: 1rem; font-size: 1rem;
} }
@media screen and (min-width: 30rem) { @media screen and (min-width: 30rem) {
#jam-banner { #hms-banner {
height: 12rem;
text-align: left; text-align: left;
color: #0b0243 !important;
} }
#jam-title-container { #hms-banner::before {
padding-top: 0.2rem; 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> </style>
<a id="jam-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="{{ .WheelJamUrl }}"> <a id="hms-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="https://handmade-seattle.com/">
<img class="h3" src="{{ static "wheeljam/logo.svg" }}"> <div id="hms-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns z-1">
<div id="jam-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns"> <h3 id="hms-title">Handmade Seattle</h3>
<h3 id="jam-title">Wheel Reinvention Jam</h3> <div id="hms-details">November 11 - 12. In person and online.</div>
<div id="jam-details">See the results.</div>
</div> </div>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<div id="jam-learn-more"> <div id="hms-learn-more" class="z-1">
Learn more Sign up
<div class="dib svgicon">{{ svg "chevron-right" }}</div> <div class="dib svgicon">{{ svg "chevron-right" }}</div>
</div> </div>
</a> </a>