Make the feed page nicer
This commit is contained in:
Ben Visness
parent
92b175c84d
commit
1b79f45d71
|
|
@ -28,7 +28,7 @@ var WRJ2021 = Jam{
|
|||
var WRJ2022 = Jam{
|
||||
Name: "Wheel Reinvention Jam 2022",
|
||||
Slug: "WRJ2022",
|
||||
StartTime: time.Date(2022, 8, 15, 8, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
|
||||
StartTime: time.Date(2022, 8, 3, 8, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
|
||||
EndTime: time.Date(2022, 8, 22, 8, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,286 @@
|
|||
{{/*
|
||||
This is a copy-paste from base.html because we want to preserve the unique
|
||||
style of this page no matter what future changes we make to the base.
|
||||
*/}}
|
||||
<!DOCTYPE html{{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ static "wheeljam2022/favicon-16x16.png" }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "wheeljam2022/favicon-32x32.png" }}">
|
||||
|
||||
{{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
|
||||
{{ range .OpenGraphItems }}
|
||||
{{ if .Property }}
|
||||
<meta property="{{ .Property }}" content="{{ .Value }}" />
|
||||
{{ else }}
|
||||
<meta name="{{ .Name }}" content="{{ .Value }}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .Title }}
|
||||
<title>{{ .Title }} | Handmade Network</title>
|
||||
{{ else }}
|
||||
<title>Handmade Network</title>
|
||||
{{ end }}
|
||||
<meta name="theme-color" content="#346ba6">
|
||||
|
||||
<script src="{{ static "js/templates.js" }}"></script>
|
||||
<script src="{{ static "js/showcase.js" }}"></script>
|
||||
|
||||
<link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
|
||||
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--content-background: #f8f8f8;
|
||||
--card-background: rgba(255, 255, 255, 0.1);
|
||||
--card-background-hover: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(#346ba6, #814cb7)
|
||||
}
|
||||
|
||||
.user-options,
|
||||
header form,
|
||||
header .menu-bar .wiki,
|
||||
header .menu-bar .library
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom-color: white;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.hmn-logo {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
header a, footer a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
header .submenu {
|
||||
background-color: #346ba6;
|
||||
}
|
||||
|
||||
#top-container {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'MohaveHMN', sans-serif;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#title {
|
||||
color: white;
|
||||
font-size: 2.4rem;
|
||||
line-height: 0.8;
|
||||
margin-top: 2rem;
|
||||
letter-spacing: -0.06rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#dates {
|
||||
font-variant: small-caps;
|
||||
font-size: 1.6rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
#tagline {
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#top-container a {
|
||||
color: white !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.actions a {
|
||||
text-decoration: none !important;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
|
||||
transition: background-color 50ms ease-in-out;
|
||||
background-color:rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.actions a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.actions a:active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.section {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-variant: small-caps;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-variant: small-caps;
|
||||
font-size: 2rem;
|
||||
line-height: 0.8;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
.section p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.section a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.emphasized {
|
||||
padding-left: 1rem;
|
||||
border-left: 0.3rem solid white;
|
||||
}
|
||||
|
||||
.flex-fair {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.section li p {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 2px solid white;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer h2 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.showcase-item {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.carousel-thinger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 6rem;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.1); /* bg-white-10 */
|
||||
border-radius: 0.5rem; /* br3 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.carousel-thinger.prev {
|
||||
left: -7rem;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
|
||||
}
|
||||
|
||||
.carousel-thinger.next {
|
||||
right: -7rem;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 30em) {
|
||||
/* not small styles */
|
||||
|
||||
#top-container {
|
||||
margin: 5.4rem 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 31rem;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 5.2rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
#dates {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
#tagline {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 2.2rem;
|
||||
}
|
||||
|
||||
.actions a {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 3.4rem;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-size: 2.4rem;
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="{{ static "js/carousel.js" }}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left white">
|
||||
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
|
||||
{{ template "header.html" . }}
|
||||
</div>
|
||||
|
||||
{{ block "content" . }}{{ end }}
|
||||
|
||||
<div class="mw8 margin-center ph3-m ph4-l">
|
||||
{{ template "footer.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,243 +1,44 @@
|
|||
{{/*
|
||||
This is a copy-paste from base.html because we want to preserve the unique
|
||||
style of this page no matter what future changes we make to the base.
|
||||
*/}}
|
||||
<!DOCTYPE html{{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ static "wheeljam2022/favicon-16x16.png" }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "wheeljam2022/favicon-32x32.png" }}">
|
||||
|
||||
{{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
|
||||
{{ range .OpenGraphItems }}
|
||||
{{ if .Property }}
|
||||
<meta property="{{ .Property }}" content="{{ .Value }}" />
|
||||
{{ else }}
|
||||
<meta name="{{ .Name }}" content="{{ .Value }}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .Title }}
|
||||
<title>{{ .Title }} | Handmade Network</title>
|
||||
{{ else }}
|
||||
<title>Handmade Network</title>
|
||||
{{ end }}
|
||||
<meta name="theme-color" content="#346ba6">
|
||||
|
||||
<link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
|
||||
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
|
||||
<link rel="stylesheet" href="{{ statictheme .Theme "theme.css" }}" />
|
||||
{{ template "wheeljam_2022_base.html" . }}
|
||||
|
||||
{{ define "content" }}
|
||||
<style>
|
||||
:root {
|
||||
--content-background: #f8f8f8;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(#346ba6, #814cb7)
|
||||
}
|
||||
|
||||
.user-options,
|
||||
header form,
|
||||
header .menu-bar .wiki,
|
||||
header .menu-bar .library
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom-color: white;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.hmn-logo {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
header a, footer a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
header .submenu {
|
||||
background-color: #346ba6;
|
||||
}
|
||||
|
||||
#top-container {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'MohaveHMN', sans-serif;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#title {
|
||||
color: white;
|
||||
font-size: 2.4rem;
|
||||
line-height: 0.8;
|
||||
margin-top: 2rem;
|
||||
letter-spacing: -0.06rem;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#dates {
|
||||
font-variant: small-caps;
|
||||
font-size: 1.6rem;
|
||||
margin-top: 0.2rem;
|
||||
h3.mt0 {
|
||||
margin-top: 0; /* ugh seriously */
|
||||
}
|
||||
|
||||
#tagline {
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
line-height: 1.4;
|
||||
.back-to-normal * {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
}
|
||||
|
||||
#top-container a {
|
||||
color: white !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.actions a {
|
||||
text-decoration: none !important;
|
||||
line-height: 1.4;
|
||||
.back-to-normal h1,
|
||||
.back-to-normal h2,
|
||||
.back-to-normal h3,
|
||||
.back-to-normal h4,
|
||||
.back-to-normal h5
|
||||
{
|
||||
font-weight: 500;
|
||||
|
||||
transition: background-color 50ms ease-in-out;
|
||||
background-color:rgba(255, 255, 255, 0.1);
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
.actions a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.actions a:active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.section {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-variant: small-caps;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-variant: small-caps;
|
||||
font-size: 2rem;
|
||||
line-height: 0.8;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
.section p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.section a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.flex-fair {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.section li p {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 2px solid white;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer h2 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.showcase-item {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
.back-to-normal a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 30em) {
|
||||
/* not small styles */
|
||||
|
||||
#top-container {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 31rem;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 5.2rem;
|
||||
}
|
||||
|
||||
#dates {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
#tagline {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 2.2rem;
|
||||
}
|
||||
|
||||
.actions a {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 3.4rem;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-size: 2.4rem;
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
@media screen and (min-width: 30em) {
|
||||
/* large styles */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left white">
|
||||
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
|
||||
{{ template "header.html" . }}
|
||||
</div>
|
||||
|
||||
<div id="top-container" class="flex flex-column items-center ph3">
|
||||
<h1 id="title">Wheel Reinvention Jam</h1>
|
||||
|
|
@ -247,34 +48,28 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-black-20 pt4 pb3 pb4-ns">
|
||||
<div class="section mw8 margin-center ph3 ph4-l mv4">
|
||||
<h2>Projects</h2>
|
||||
<div class="projects">
|
||||
{{ range .JamProjects }}
|
||||
<div class="mv3">
|
||||
{{ template "project_card.html" projectcarddata . "" }}
|
||||
</div>
|
||||
<div class="section bg-black-20 pt4 pb3 pb4-ns">
|
||||
<div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
|
||||
<div>
|
||||
{{ if eq .DaysUntilEnd 0 }}
|
||||
<h3 class="mt0 mb3">Project updates</h3>
|
||||
{{ else }}
|
||||
<h3 class="mt0 mb3">Recent updates</h3>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section mw8 margin-center ph3 ph4-l">
|
||||
<h2>Recent activity</h2>
|
||||
<div class="timeline">
|
||||
{{ range .TimelineItems }}
|
||||
{{ template "timeline_item.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mw8 margin-center ph3-m ph4-l">
|
||||
{{ template "footer.html" . }}
|
||||
<div class="w-40-ns flex-shrink-0">
|
||||
<h3 class="mt0 mb3">Projects</h3>
|
||||
<div class="projects flex flex-column g3 back-to-normal">
|
||||
{{ range .JamProjects }}
|
||||
{{ template "project_card.html" projectcarddata . "" }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,278 +1,6 @@
|
|||
{{/*
|
||||
This is a copy-paste from base.html because we want to preserve the unique
|
||||
style of this page no matter what future changes we make to the base.
|
||||
*/}}
|
||||
<!DOCTYPE html{{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ static "wheeljam2022/favicon-16x16.png" }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "wheeljam2022/favicon-32x32.png" }}">
|
||||
|
||||
{{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
|
||||
{{ range .OpenGraphItems }}
|
||||
{{ if .Property }}
|
||||
<meta property="{{ .Property }}" content="{{ .Value }}" />
|
||||
{{ else }}
|
||||
<meta name="{{ .Name }}" content="{{ .Value }}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .Title }}
|
||||
<title>{{ .Title }} | Handmade Network</title>
|
||||
{{ else }}
|
||||
<title>Handmade Network</title>
|
||||
{{ end }}
|
||||
<meta name="theme-color" content="#346ba6">
|
||||
|
||||
<script src="{{ static "js/templates.js" }}"></script>
|
||||
<script src="{{ static "js/showcase.js" }}"></script>
|
||||
|
||||
<link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
|
||||
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--content-background: #f8f8f8;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(#346ba6, #814cb7)
|
||||
}
|
||||
|
||||
.user-options,
|
||||
header form,
|
||||
header .menu-bar .wiki,
|
||||
header .menu-bar .library
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom-color: white;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.hmn-logo {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
header a, footer a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
header .submenu {
|
||||
background-color: #346ba6;
|
||||
}
|
||||
|
||||
#top-container {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'MohaveHMN', sans-serif;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#title {
|
||||
color: white;
|
||||
font-size: 2.4rem;
|
||||
line-height: 0.8;
|
||||
margin-top: 2rem;
|
||||
letter-spacing: -0.06rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#dates {
|
||||
font-variant: small-caps;
|
||||
font-size: 1.6rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
#tagline {
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#top-container a {
|
||||
color: white !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.actions a {
|
||||
text-decoration: none !important;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
|
||||
transition: background-color 50ms ease-in-out;
|
||||
background-color:rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.actions a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.actions a:active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.section {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-variant: small-caps;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-variant: small-caps;
|
||||
font-size: 2rem;
|
||||
line-height: 0.8;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
.section p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.section a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.emphasized {
|
||||
padding-left: 1rem;
|
||||
border-left: 0.3rem solid white;
|
||||
}
|
||||
|
||||
.flex-fair {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.section li p {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 2px solid white;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer h2 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.showcase-item {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.carousel-thinger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 6rem;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.1); /* bg-white-10 */
|
||||
border-radius: 0.5rem; /* br3 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.carousel-thinger.prev {
|
||||
left: -7rem;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
|
||||
}
|
||||
|
||||
.carousel-thinger.next {
|
||||
right: -7rem;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 30em) {
|
||||
/* not small styles */
|
||||
|
||||
#top-container {
|
||||
margin: 5.4rem 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 31rem;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 5.2rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
#dates {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
#tagline {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 2.2rem;
|
||||
}
|
||||
|
||||
.actions a {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 3.4rem;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-size: 2.4rem;
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="{{ static "js/carousel.js" }}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left white">
|
||||
<div class="mt4-ns mw8 margin-center ph3-m ph4-l">
|
||||
{{ template "header.html" . }}
|
||||
</div>
|
||||
{{ template "wheeljam_2022_base.html" . }}
|
||||
|
||||
{{ define "content" }}
|
||||
{{ $discordInviteURL := "https://discord.gg/zFt8Rf59?event=1004511448107602031" }}
|
||||
|
||||
<div id="top-container" class="flex flex-column items-center ph3">
|
||||
|
|
@ -293,14 +21,13 @@
|
|||
</div>
|
||||
<div class="actions flex justify-center">
|
||||
{{ if gt .DaysUntilStart 0 }}
|
||||
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="https://github.com/HandmadeNetwork/wishlist/discussions">Choose a project</a>
|
||||
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="https://github.com/HandmadeNetwork/wishlist/discussions">Find a project</a>
|
||||
{{ else }}
|
||||
{{ if gt .DaysUntilEnd 0 }}
|
||||
{{ if .SubmittedProjectUrl }}
|
||||
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
|
||||
{{ else }}
|
||||
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="https://github.com/HandmadeNetwork/wishlist/discussions">Choose a project</a>
|
||||
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ProjectSubmissionUrl }}">Create a jam project</a>
|
||||
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ProjectSubmissionUrl }}">Create your project</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -323,7 +50,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
{{ if .ShowcaseJson }}
|
||||
{{ if not (eq .ShowcaseJson "[]") }}
|
||||
<div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
|
||||
<div class="section mw8 margin-center ph3 ph4-l">
|
||||
{{ if gt .DaysUntilEnd 0 }}
|
||||
|
|
@ -343,9 +70,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if gt .DaysUntilStart 0 }}
|
||||
{{ else }}
|
||||
<div class="section bg-black-20 pv4 overflow-hidden">
|
||||
<div class="mw8 margin-center ph3 ph4-l">
|
||||
<h2>Last year's entries</h2>
|
||||
|
|
@ -505,11 +230,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mw8 margin-center ph3-m ph4-l">
|
||||
{{ template "footer.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ template "showcase_templates.html" }}
|
||||
<!-- Copy-pasted and mangled from showcase.html -->
|
||||
<script>
|
||||
|
|
@ -522,7 +242,7 @@
|
|||
const showcaseOuterContainer = document.querySelector('#showcase-outer-container');
|
||||
let showcaseContainer = document.querySelector('#showcase-container');
|
||||
|
||||
showcaseOuterContainer.classList.toggle('dn', showcaseItems.length === 0);
|
||||
// showcaseOuterContainer.classList.toggle('dn', showcaseItems.length === 0);
|
||||
|
||||
const itemElements = []; // array of arrays
|
||||
for (let i = 0; i < showcaseItems.length; i++) {
|
||||
|
|
@ -663,6 +383,4 @@
|
|||
setInterval(updateCountdown, 1000 * 60);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,11 @@ func Init() {
|
|||
t := template.New(f.Name())
|
||||
t = t.Funcs(sprig.FuncMap())
|
||||
t = t.Funcs(HMNTemplateFuncs)
|
||||
t, err := t.ParseFS(templateFs, "src/layouts/*.html", "src/include/*.html", "src/"+f.Name())
|
||||
t, err := t.ParseFS(templateFs,
|
||||
"src/layouts/*",
|
||||
"src/include/*",
|
||||
"src/"+f.Name(),
|
||||
)
|
||||
if err != nil {
|
||||
logging.Fatal().Str("filename", f.Name()).Err(err).Msg("failed to parse template")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,10 +141,15 @@ func JamFeed2022(c *RequestContext) ResponseData {
|
|||
|
||||
type JamFeedData struct {
|
||||
templates.BaseData
|
||||
DaysUntilStart, DaysUntilEnd int
|
||||
|
||||
JamProjects []templates.Project
|
||||
TimelineItems []templates.TimelineItem
|
||||
}
|
||||
|
||||
daysUntilStart := daysUntil(hmndata.WRJ2022.StartTime)
|
||||
daysUntilEnd := daysUntil(hmndata.WRJ2022.EndTime)
|
||||
|
||||
baseData := getBaseDataAutocrumb(c, hmndata.WRJ2022.Name)
|
||||
baseData.OpenGraphItems = []templates.OpenGraphItem{
|
||||
{Property: "og:site_name", Value: "Handmade.Network"},
|
||||
|
|
@ -157,6 +162,8 @@ func JamFeed2022(c *RequestContext) ResponseData {
|
|||
var res ResponseData
|
||||
res.MustWriteTemplate("wheeljam_2022_feed.html", JamFeedData{
|
||||
BaseData: baseData,
|
||||
DaysUntilStart: daysUntilStart,
|
||||
DaysUntilEnd: daysUntilEnd,
|
||||
JamProjects: pageProjects,
|
||||
TimelineItems: timelineItems,
|
||||
}, c.Perf)
|
||||
|
|
|
|||
Loading…
Reference in New Issue