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>
|
||||
body {
|
||||
/*
|
||||
|
|
@ -34,10 +42,6 @@
|
|||
background-color: #000080;
|
||||
}
|
||||
|
||||
#top-container {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 16rem;
|
||||
}
|
||||
|
|
@ -53,10 +57,11 @@
|
|||
/* '95-esque styles */
|
||||
.frame {
|
||||
width: 100%;
|
||||
background: #c0c0c0;
|
||||
border-width: 1px;
|
||||
border-color: #ffffff #000000 #000000 #ffffff;
|
||||
background: #c3c3c3;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: #fff #333 #333 #fff;
|
||||
border-image: url('{{ dataimg "timemachine/win95-border.gif" }}') 4;
|
||||
padding: 1px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
|
@ -75,25 +80,32 @@
|
|||
}
|
||||
|
||||
.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%;
|
||||
background: #000080;
|
||||
background: rgb(0, 0, 130);
|
||||
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 {
|
||||
padding: 6px;
|
||||
padding: 0.5rem; /* 8px */
|
||||
color: black;
|
||||
}
|
||||
|
||||
.frame * {
|
||||
font-family: "MS Sans Serif"; /* Can someone with a Mac confirm this font is available?
|
||||
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;
|
||||
font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
|
||||
}
|
||||
|
||||
.frame .image_copy {
|
||||
|
|
@ -109,79 +121,81 @@
|
|||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.frame img {
|
||||
border-width: 2px;
|
||||
border-color: #000000 #ffffff #ffffff #000000;
|
||||
.frame .body img {
|
||||
border-width: 1px;
|
||||
border-color: #828282 #ffffff #ffffff #828282;
|
||||
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>
|
||||
|
||||
<div class="center-layout mw7 ph3 ph0-ns flex flex-column g3">
|
||||
<div id="top-container">
|
||||
<div class="title"><h1 class="center mb4">Time Machine</h1></div>
|
||||
<div class="center-layout content mw7 ph3 flex flex-column g3">
|
||||
<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="title">Overview</div>
|
||||
<div class="body">
|
||||
{{ template "frame title" "Overview" }}
|
||||
<div class="body post-content">
|
||||
<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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frame">
|
||||
<div class="title">How To Participate</div>
|
||||
<div class="body">
|
||||
<div class="body post-content">
|
||||
<ol>
|
||||
<li>
|
||||
<p>
|
||||
<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.
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Upload the video somewhere.</strong> Upload to Google
|
||||
Drive, Dropbox, or even YouTube - anywhere we can download it
|
||||
from.
|
||||
<strong>Upload the video somewhere.</strong> Upload to Google Drive, Dropbox, or even YouTube - anywhere we can download it from.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<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.
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
At the end of the summer, we’ll compile all the submissions into a
|
||||
final report.
|
||||
At the end of the summer, we'll compile all the submissions into a final report.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frame">
|
||||
<div class="title">Example Submission</div>
|
||||
<div class="body mt1">
|
||||
<div class="body post-content mt1">
|
||||
<div class="image_copy">
|
||||
<div class="image">
|
||||
<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=""
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,12 @@ package templates
|
|||
|
||||
import (
|
||||
"embed"
|
||||
"encoding/base64"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"io"
|
||||
"io/fs"
|
||||
"net/http"
|
||||
"regexp"
|
||||
"strings"
|
||||
"time"
|
||||
|
|
@ -105,8 +108,24 @@ func names(ts []*template.Template) []string {
|
|||
return result
|
||||
}
|
||||
|
||||
//go:embed svg/*
|
||||
var SVGs embed.FS
|
||||
//go:embed img/*
|
||||
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}`)
|
||||
|
||||
|
|
@ -200,7 +219,7 @@ var HMNTemplateFuncs = template.FuncMap{
|
|||
}
|
||||
},
|
||||
"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 {
|
||||
panic("SVG not found: " + name)
|
||||
}
|
||||
|
|
@ -218,6 +237,12 @@ var HMNTemplateFuncs = template.FuncMap{
|
|||
"staticthemenobust": func(theme string, filepath string) string {
|
||||
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 {
|
||||
return uuid.NewSHA1(uuid.NameSpaceURL, []byte(s)).URN()
|
||||
},
|
||||
|
|
|
|||