Style updates + splash
Ben Visness
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 766 B After Width: | Height: | Size: 766 B |
|
Before Width: | Height: | Size: 549 B After Width: | Height: | Size: 549 B |
|
Before Width: | Height: | Size: 910 B After Width: | Height: | Size: 910 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 614 B After Width: | Height: | Size: 614 B |
|
Before Width: | Height: | Size: 776 B After Width: | Height: | Size: 776 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 488 B After Width: | Height: | Size: 488 B |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 922 B After Width: | Height: | Size: 922 B |
|
After Width: | Height: | Size: 57 B |
|
After Width: | Height: | Size: 88 B |
|
After Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 894 B After Width: | Height: | Size: 894 B |
|
|
@ -0,0 +1,54 @@
|
||||||
|
{{/*
|
||||||
|
This is a copy-paste from base.html because we want to preserve the unique
|
||||||
|
style of landing pages if we change base.html in the future.
|
||||||
|
*/}}
|
||||||
|
<!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 "visjam2023/favicon-16x16.png" }}">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ static "visjam2023/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>
|
||||||
|
|
||||||
|
<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" }}">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="left white">
|
||||||
|
<div class="mt4-ns mw7 margin-center ph3-m ph4-l">
|
||||||
|
{{ template "header.html" . }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="jam-sections">
|
||||||
|
{{ block "content" . }}{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mw8 margin-center ph3-m ph4-l">
|
||||||
|
{{ template "footer.html" . }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,5 +1,13 @@
|
||||||
{{ template "landing_page.html" . }} {{ define "content" }}
|
{{ template "timemachine_base.html" . }}
|
||||||
|
|
||||||
|
{{ define "frame title" }}
|
||||||
|
<div class="title">
|
||||||
|
{{ . }}
|
||||||
|
<img class="frame-close" src="{{ dataimg "timemachine/win95-close.gif" }}">
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ define "content" }}
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
/*
|
/*
|
||||||
|
|
@ -34,10 +42,6 @@
|
||||||
background-color: #000080;
|
background-color: #000080;
|
||||||
}
|
}
|
||||||
|
|
||||||
#top-container {
|
|
||||||
margin: 3rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
width: 16rem;
|
width: 16rem;
|
||||||
}
|
}
|
||||||
|
|
@ -53,10 +57,11 @@
|
||||||
/* '95-esque styles */
|
/* '95-esque styles */
|
||||||
.frame {
|
.frame {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #c0c0c0;
|
background: #c3c3c3;
|
||||||
border-width: 1px;
|
border-width: 2px;
|
||||||
border-color: #ffffff #000000 #000000 #ffffff;
|
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
border-color: #fff #333 #333 #fff;
|
||||||
|
border-image: url('{{ dataimg "timemachine/win95-border.gif" }}') 4;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
@ -75,25 +80,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame .title {
|
.frame .title {
|
||||||
padding: 6px;
|
padding: 0 0.125rem; /* 0 2px */
|
||||||
|
height: 1.125rem; /* 18px */
|
||||||
|
line-height: 1.125rem; /* 18px */
|
||||||
|
font-size: 0.8125rem; /* 13px */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #000080;
|
background: rgb(0, 0, 130);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame .frame-close {
|
||||||
|
width: 1rem; /* 16px */
|
||||||
|
height: 0.875rem; /* 14px */
|
||||||
|
position: absolute;
|
||||||
|
right: 0.125rem; /* 2px */
|
||||||
|
top: 0.125rem; /* 2px */
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame .body {
|
.frame .body {
|
||||||
padding: 6px;
|
padding: 0.5rem; /* 8px */
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame * {
|
.frame * {
|
||||||
font-family: "MS Sans Serif"; /* Can someone with a Mac confirm this font is available?
|
font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
|
||||||
Despite the name, it appears to be pre-installed:
|
|
||||||
https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS */
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame p {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame .image_copy {
|
.frame .image_copy {
|
||||||
|
|
@ -109,79 +121,81 @@
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame img {
|
.frame .body img {
|
||||||
border-width: 2px;
|
border-width: 1px;
|
||||||
border-color: #000000 #ffffff #ffffff #000000;
|
border-color: #828282 #ffffff #ffffff #828282;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
border-image: url('{{ dataimg "timemachine/win95-border-inset.gif" }}') 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.pixelated {
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-shadow {
|
||||||
|
box-shadow: 2px 2px black;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="center-layout mw7 ph3 ph0-ns flex flex-column g3">
|
<div class="center-layout content mw7 ph3 flex flex-column g3">
|
||||||
<div id="top-container">
|
<div>
|
||||||
<div class="title"><h1 class="center mb4">Time Machine</h1></div>
|
<div class="mv5 flex justify-center">
|
||||||
|
<img
|
||||||
|
class="pixelated drop-shadow"
|
||||||
|
src="{{ static "timemachine/splash.gif" }}"
|
||||||
|
alt="Time Machine"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<div class="frame">
|
<div class="frame">
|
||||||
<div class="title">Overview</div>
|
{{ template "frame title" "Overview" }}
|
||||||
<div class="body">
|
<div class="body post-content">
|
||||||
<p>
|
<p>
|
||||||
This summer, we’re digging out old devices and seeing what they were
|
This summer, we're digging out old devices and seeing what they were
|
||||||
actually like to use.
|
actually like to use.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Our phones today are far more powerful than our desktop computers from
|
Our phones today are far more powerful than our desktop computers from decades ago. But those old computers worked just fine! The Time Machine project is a chance to revisit those old devices and see what they were actually like to use.
|
||||||
decades ago. But those old computers worked just fine! The Time
|
|
||||||
Machine project is a chance to revisit those old devices and see what
|
|
||||||
they were actually like to use.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
As our hardware has improved, how has the user experience changed?
|
As our hardware has improved, how has the user experience changed? Which parts have stayed the same? Which parts have gotten worse? There's only one way to find out.
|
||||||
Which parts have stayed the same? Which parts have gotten worse?
|
|
||||||
There’s only one way to find out.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="frame">
|
<div class="frame">
|
||||||
<div class="title">How To Participate</div>
|
<div class="title">How To Participate</div>
|
||||||
<div class="body">
|
<div class="body post-content">
|
||||||
<ol>
|
<ol>
|
||||||
<li>
|
<li>
|
||||||
<p>
|
<p>
|
||||||
<strong>Take video of yourself using an older device.</strong> Any
|
<strong>Take video of yourself using an older device.</strong> Any personal device from any time period is great. We're particularly interested in the history of day-to-day devices like personal computers, and mobile phones.
|
||||||
personal device from any time period is great. We’re particularly
|
|
||||||
interested in the history of day-to-day devices like personal
|
|
||||||
computers, and mobile phones.
|
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<p>
|
<p>
|
||||||
<strong>Upload the video somewhere.</strong> Upload to Google
|
<strong>Upload the video somewhere.</strong> Upload to Google Drive, Dropbox, or even YouTube - anywhere we can download it from.
|
||||||
Drive, Dropbox, or even YouTube - anywhere we can download it
|
|
||||||
from.
|
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<p>
|
<p>
|
||||||
<strong>Send us the video link + extra info.</strong> Tell us
|
<strong>Send us the video link + extra info.</strong> Tell us about this device, when you got it, what specs it has, and anything else you think is interesting. We'll get the video posted here on the website for everyone to see.
|
||||||
about this device, when you got it, what specs it has, and
|
|
||||||
anything else you think is interesting. We’ll get the video posted
|
|
||||||
here on the website for everyone to see.
|
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>
|
<p>
|
||||||
At the end of the summer, we’ll compile all the submissions into a
|
At the end of the summer, we'll compile all the submissions into a final report.
|
||||||
final report.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="frame">
|
<div class="frame">
|
||||||
<div class="title">Example Submission</div>
|
<div class="title">Example Submission</div>
|
||||||
<div class="body mt1">
|
<div class="body post-content mt1">
|
||||||
<div class="image_copy">
|
<div class="image_copy">
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<img
|
<img
|
||||||
src="https://handmade-network.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Febaabb39-ec9e-4d10-8e50-2099b06b3e29%2FUntitled.png?id=cc736ce6-079f-4b4c-91fe-dcd046fe95a5&table=block&spaceId=81085921-8dca-40db-a20f-e6b9092d2ce2&width=2000&userId=&cache=v2"
|
class="pixelated"
|
||||||
|
src="{{ static "timemachine/ipodtouch-dither.gif" }}"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,12 @@ package templates
|
||||||
|
|
||||||
import (
|
import (
|
||||||
"embed"
|
"embed"
|
||||||
|
"encoding/base64"
|
||||||
"fmt"
|
"fmt"
|
||||||
"html/template"
|
"html/template"
|
||||||
|
"io"
|
||||||
"io/fs"
|
"io/fs"
|
||||||
|
"net/http"
|
||||||
"regexp"
|
"regexp"
|
||||||
"strings"
|
"strings"
|
||||||
"time"
|
"time"
|
||||||
|
|
@ -105,8 +108,24 @@ func names(ts []*template.Template) []string {
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
|
|
||||||
//go:embed svg/*
|
//go:embed img/*
|
||||||
var SVGs embed.FS
|
var Imgs embed.FS
|
||||||
|
|
||||||
|
func GetImg(filepath string) []byte {
|
||||||
|
var imgs fs.FS
|
||||||
|
if config.Config.DevConfig.LiveTemplates {
|
||||||
|
imgs = utils.DirFS("src/templates/img")
|
||||||
|
} else {
|
||||||
|
imgs = Imgs
|
||||||
|
}
|
||||||
|
|
||||||
|
img, err := imgs.Open(filepath)
|
||||||
|
if err != nil {
|
||||||
|
panic(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
return utils.Must1(io.ReadAll(img))
|
||||||
|
}
|
||||||
|
|
||||||
var controlCharRegex = regexp.MustCompile(`\p{Cc}`)
|
var controlCharRegex = regexp.MustCompile(`\p{Cc}`)
|
||||||
|
|
||||||
|
|
@ -200,7 +219,7 @@ var HMNTemplateFuncs = template.FuncMap{
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"svg": func(name string) template.HTML {
|
"svg": func(name string) template.HTML {
|
||||||
contents, err := SVGs.ReadFile(fmt.Sprintf("svg/%s.svg", name))
|
contents, err := Imgs.ReadFile(fmt.Sprintf("img/%s.svg", name))
|
||||||
if err != nil {
|
if err != nil {
|
||||||
panic("SVG not found: " + name)
|
panic("SVG not found: " + name)
|
||||||
}
|
}
|
||||||
|
|
@ -218,6 +237,12 @@ var HMNTemplateFuncs = template.FuncMap{
|
||||||
"staticthemenobust": func(theme string, filepath string) string {
|
"staticthemenobust": func(theme string, filepath string) string {
|
||||||
return hmnurl.BuildTheme(filepath, theme, false)
|
return hmnurl.BuildTheme(filepath, theme, false)
|
||||||
},
|
},
|
||||||
|
"dataimg": func(filepath string) template.URL {
|
||||||
|
contents := GetImg(filepath)
|
||||||
|
mime := http.DetectContentType(contents)
|
||||||
|
contentsBase64 := base64.StdEncoding.EncodeToString(contents)
|
||||||
|
return template.URL(fmt.Sprintf("data:%s;base64,%s", mime, contentsBase64))
|
||||||
|
},
|
||||||
"string2uuid": func(s string) string {
|
"string2uuid": func(s string) string {
|
||||||
return uuid.NewSHA1(uuid.NameSpaceURL, []byte(s)).URN()
|
return uuid.NewSHA1(uuid.NameSpaceURL, []byte(s)).URN()
|
||||||
},
|
},
|
||||||
|
|
|
||||||