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{
|
var WRJ2022 = Jam{
|
||||||
Name: "Wheel Reinvention Jam 2022",
|
Name: "Wheel Reinvention Jam 2022",
|
||||||
Slug: "WRJ2022",
|
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"))),
|
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 @@
|
||||||
{{/*
|
{{ template "wheeljam_2022_base.html" . }}
|
||||||
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" }}" />
|
|
||||||
|
|
||||||
|
{{ define "content" }}
|
||||||
<style>
|
<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 {
|
#title {
|
||||||
color: white;
|
margin-top: 0;
|
||||||
font-size: 2.4rem;
|
|
||||||
line-height: 0.8;
|
|
||||||
margin-top: 2rem;
|
|
||||||
letter-spacing: -0.06rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#dates {
|
h3.mt0 {
|
||||||
font-variant: small-caps;
|
margin-top: 0; /* ugh seriously */
|
||||||
font-size: 1.6rem;
|
|
||||||
margin-top: 0.2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tagline {
|
.back-to-normal * {
|
||||||
font-size: 1rem;
|
font-family: "Fira Sans", sans-serif;
|
||||||
margin-top: 1rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#top-container a {
|
.back-to-normal h1,
|
||||||
color: white !important;
|
.back-to-normal h2,
|
||||||
text-decoration: underline;
|
.back-to-normal h3,
|
||||||
}
|
.back-to-normal h4,
|
||||||
|
.back-to-normal h5
|
||||||
.actions {
|
{
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions a {
|
|
||||||
text-decoration: none !important;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
transition: background-color 50ms ease-in-out;
|
margin-bottom: 0.5rem;
|
||||||
background-color:rgba(255, 255, 255, 0.1);
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions a:hover {
|
.back-to-normal a {
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
text-decoration: none;
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 30em) {
|
@media screen and (min-width: 30em) {
|
||||||
/* not small styles */
|
/* not small styles */
|
||||||
|
|
||||||
#top-container {
|
|
||||||
margin: 3rem 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo {
|
@media screen and (min-width: 30em) {
|
||||||
width: 31rem;
|
/* large styles */
|
||||||
}
|
|
||||||
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</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">
|
<div id="top-container" class="flex flex-column items-center ph3">
|
||||||
<h1 id="title">Wheel Reinvention Jam</h1>
|
<h1 id="title">Wheel Reinvention Jam</h1>
|
||||||
|
|
@ -247,34 +48,28 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="section bg-black-20 pt4 pb3 pb4-ns">
|
||||||
<div class="bg-black-20 pt4 pb3 pb4-ns">
|
<div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
|
||||||
<div class="section mw8 margin-center ph3 ph4-l mv4">
|
<div>
|
||||||
<h2>Projects</h2>
|
{{ if eq .DaysUntilEnd 0 }}
|
||||||
<div class="projects">
|
<h3 class="mt0 mb3">Project updates</h3>
|
||||||
{{ range .JamProjects }}
|
{{ else }}
|
||||||
<div class="mv3">
|
<h3 class="mt0 mb3">Recent updates</h3>
|
||||||
{{ template "project_card.html" projectcarddata . "" }}
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section mw8 margin-center ph3 ph4-l">
|
|
||||||
<h2>Recent activity</h2>
|
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
{{ range .TimelineItems }}
|
{{ range .TimelineItems }}
|
||||||
{{ template "timeline_item.html" . }}
|
{{ template "timeline_item.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="w-40-ns flex-shrink-0">
|
||||||
<div class="mw8 margin-center ph3-m ph4-l">
|
<h3 class="mt0 mb3">Projects</h3>
|
||||||
{{ template "footer.html" . }}
|
<div class="projects flex flex-column g3 back-to-normal">
|
||||||
|
{{ range .JamProjects }}
|
||||||
|
{{ template "project_card.html" projectcarddata . "" }}
|
||||||
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
|
</div>
|
||||||
</html>
|
{{ end }}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,278 +1,6 @@
|
||||||
{{/*
|
{{ template "wheeljam_2022_base.html" . }}
|
||||||
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>
|
|
||||||
|
|
||||||
|
{{ define "content" }}
|
||||||
{{ $discordInviteURL := "https://discord.gg/zFt8Rf59?event=1004511448107602031" }}
|
{{ $discordInviteURL := "https://discord.gg/zFt8Rf59?event=1004511448107602031" }}
|
||||||
|
|
||||||
<div id="top-container" class="flex flex-column items-center ph3">
|
<div id="top-container" class="flex flex-column items-center ph3">
|
||||||
|
|
@ -293,14 +21,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="actions flex justify-center">
|
<div class="actions flex justify-center">
|
||||||
{{ if gt .DaysUntilStart 0 }}
|
{{ 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 }}
|
{{ else }}
|
||||||
{{ if gt .DaysUntilEnd 0 }}
|
{{ if gt .DaysUntilEnd 0 }}
|
||||||
{{ if .SubmittedProjectUrl }}
|
{{ if .SubmittedProjectUrl }}
|
||||||
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
|
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns" target="_blank" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
|
||||||
{{ else }}
|
{{ 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 your project</a>
|
||||||
<a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ProjectSubmissionUrl }}">Create a jam project</a>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -323,7 +50,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ if .ShowcaseJson }}
|
{{ if not (eq .ShowcaseJson "[]") }}
|
||||||
<div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
|
<div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
|
||||||
<div class="section mw8 margin-center ph3 ph4-l">
|
<div class="section mw8 margin-center ph3 ph4-l">
|
||||||
{{ if gt .DaysUntilEnd 0 }}
|
{{ if gt .DaysUntilEnd 0 }}
|
||||||
|
|
@ -343,9 +70,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ else }}
|
||||||
|
|
||||||
{{ if gt .DaysUntilStart 0 }}
|
|
||||||
<div class="section bg-black-20 pv4 overflow-hidden">
|
<div class="section bg-black-20 pv4 overflow-hidden">
|
||||||
<div class="mw8 margin-center ph3 ph4-l">
|
<div class="mw8 margin-center ph3 ph4-l">
|
||||||
<h2>Last year's entries</h2>
|
<h2>Last year's entries</h2>
|
||||||
|
|
@ -505,11 +230,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mw8 margin-center ph3-m ph4-l">
|
|
||||||
{{ template "footer.html" . }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ template "showcase_templates.html" }}
|
{{ template "showcase_templates.html" }}
|
||||||
<!-- Copy-pasted and mangled from showcase.html -->
|
<!-- Copy-pasted and mangled from showcase.html -->
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -522,7 +242,7 @@
|
||||||
const showcaseOuterContainer = document.querySelector('#showcase-outer-container');
|
const showcaseOuterContainer = document.querySelector('#showcase-outer-container');
|
||||||
let showcaseContainer = document.querySelector('#showcase-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
|
const itemElements = []; // array of arrays
|
||||||
for (let i = 0; i < showcaseItems.length; i++) {
|
for (let i = 0; i < showcaseItems.length; i++) {
|
||||||
|
|
@ -663,6 +383,4 @@
|
||||||
setInterval(updateCountdown, 1000 * 60);
|
setInterval(updateCountdown, 1000 * 60);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
{{ end }}
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,11 @@ func Init() {
|
||||||
t := template.New(f.Name())
|
t := template.New(f.Name())
|
||||||
t = t.Funcs(sprig.FuncMap())
|
t = t.Funcs(sprig.FuncMap())
|
||||||
t = t.Funcs(HMNTemplateFuncs)
|
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 {
|
if err != nil {
|
||||||
logging.Fatal().Str("filename", f.Name()).Err(err).Msg("failed to parse template")
|
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 {
|
type JamFeedData struct {
|
||||||
templates.BaseData
|
templates.BaseData
|
||||||
|
DaysUntilStart, DaysUntilEnd int
|
||||||
|
|
||||||
JamProjects []templates.Project
|
JamProjects []templates.Project
|
||||||
TimelineItems []templates.TimelineItem
|
TimelineItems []templates.TimelineItem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
daysUntilStart := daysUntil(hmndata.WRJ2022.StartTime)
|
||||||
|
daysUntilEnd := daysUntil(hmndata.WRJ2022.EndTime)
|
||||||
|
|
||||||
baseData := getBaseDataAutocrumb(c, hmndata.WRJ2022.Name)
|
baseData := getBaseDataAutocrumb(c, hmndata.WRJ2022.Name)
|
||||||
baseData.OpenGraphItems = []templates.OpenGraphItem{
|
baseData.OpenGraphItems = []templates.OpenGraphItem{
|
||||||
{Property: "og:site_name", Value: "Handmade.Network"},
|
{Property: "og:site_name", Value: "Handmade.Network"},
|
||||||
|
|
@ -157,6 +162,8 @@ func JamFeed2022(c *RequestContext) ResponseData {
|
||||||
var res ResponseData
|
var res ResponseData
|
||||||
res.MustWriteTemplate("wheeljam_2022_feed.html", JamFeedData{
|
res.MustWriteTemplate("wheeljam_2022_feed.html", JamFeedData{
|
||||||
BaseData: baseData,
|
BaseData: baseData,
|
||||||
|
DaysUntilStart: daysUntilStart,
|
||||||
|
DaysUntilEnd: daysUntilEnd,
|
||||||
JamProjects: pageProjects,
|
JamProjects: pageProjects,
|
||||||
TimelineItems: timelineItems,
|
TimelineItems: timelineItems,
|
||||||
}, c.Perf)
|
}, c.Perf)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue