From 7b6cfcd572212c456ffc3995021d5e1a89cbfd73 Mon Sep 17 00:00:00 2001
From: Mechiel Lukkien <mechiel@ueber.net>
Date: Thu, 11 Jan 2024 23:01:04 +0100
Subject: [PATCH] add quickstart video

---
 website/index.md   | 11 +++++++++++
 website/website.go |  6 +++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/website/index.md b/website/index.md
index 7c92927..b328f00 100644
--- a/website/index.md
+++ b/website/index.md
@@ -44,6 +44,17 @@ or see [all releases](https://github.com/mjl-/mox/releases).
 - 2023-09-24, [v0.0.7](https://github.com/mjl-/mox/releases/tag/v0.0.7) released
 
 
+## Quickstart demo
+
+Mox is real easy to set up. Get a machine, download the mox binary, run the
+quickstart, add the printed DNS records, and you're good to go. See the demo
+below, or continue reading at [Install](install/).
+
+<video controls preload="none" poster="files/video/quickstart-20240111.jpg">
+	<source type="video/webm" src="files/video/quickstart-20240111.webm" />
+	<source type="video/mp4" src="files/video/quickstart-20240111.mp4" />
+</video>
+
 ## Background
 
 Work on mox started in 2021. Admins were migrating their emails to just a few
diff --git a/website/website.go b/website/website.go
index b6fa9d6..f5acfe1 100644
--- a/website/website.go
+++ b/website/website.go
@@ -139,7 +139,7 @@ func main() {
 		inputstr = inputstr[len(lines[0])+1+len(lines[1])+1:]
 		lines[0] = strings.TrimPrefix(lines[0], "#")
 		lines[1] = strings.TrimPrefix(lines[1], "##")
-		sep := "## Background"
+		sep := "## Quickstart demo"
 		inleft, inright, found := strings.Cut(inputstr, sep)
 		if !found {
 			log.Fatalf("did not find separator %q", sep)
@@ -410,7 +410,7 @@ dt { font-weight: bold; margin-bottom: .5ex; }
 dd { max-width: 50em; padding-left: 2em; margin-bottom: 1em; }
 table { margin-bottom: 2ex; }
 
-.video { box-shadow: 0 0 20px 0 #bbb; }
+video { display: block; max-width: 100%; box-shadow: 0 0 20px 0 #ddd; margin: 0 auto; }
 .img1 { width: 1050px; max-width: 100%; box-shadow: 0 0 20px 0 #bbb; }
 .img2 { width: 1500px; max-width: 100%; box-shadow: 0 0 20px 0 #bbb; }
 
@@ -443,7 +443,7 @@ h2 { background: linear-gradient(90deg, #6dd5fd 0%, #77e8e3 100%); display: inli
 .main { padding: 1em; }
 .main ul, .main ol { padding-left: 1em; }
 .two { display: flex; gap: 2em; }
-.two > div { max-width: 50em; }
+.two > div { flex-basis: 50%; max-width: 50em; }
 .toc { display: flex; gap: 2em; margin-bottom: 3ex; }
 .toc ul { margin-bottom: 0; }