extract really needed styles from water.css; skip darkmode as this adds quite some burden to site owners and is easily overseen (eg. already our banners are not-so-nice in tdarkmode), if ppl want to use darkmode, they should actively adapt

cmdeploy/src/cmdeploy/__init__.py

@@ -378,6 +378,20 @@ def deploy_chatmail(mail_domain: str, mail_server: str, dkim_selector: str) -> N
         system=True,
     )
 
+    # Run local DNS resolver `unbound`.
+    # `resolvconf` takes care of setting up /etc/resolv.conf
+    # to use 127.0.0.1 as the resolver.
+    apt.packages(
+        name="Install unbound",
+        packages="unbound",
+    )
+    systemd.service(
+        name="Start and enable unbound",
+        service="unbound.service",
+        running=True,
+        enabled=True,
+    )
+
     # Deploy acmetool to have TLS certificates.
     deploy_acmetool(nginx_hook=True, domains=[mail_server, f"mta-sts.{mail_server}"])
 

cmdeploy/src/cmdeploy/cmdeploy.py

@@ -155,7 +155,7 @@ def fmt_cmd_options(parser):
 
 
 def fmt_cmd(args, out):
-    """Run formattting fixes (fuff and black) on all chatmail source code."""
+    """Run formattting fixes (ruff and black) on all chatmail source code."""
 
     sources = [str(importlib.resources.files(x)) for x in ("chatmaild", "cmdeploy")]
     black_args = [shutil.which("black")]

www/src/main.css

@@ -1,4 +1,47 @@
 
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
+  line-height: 1.4;
+  font-size: 1.4em;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  color: #363636;
+  background: #fff;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #000;
+  margin-bottom: 12px;
+  margin-top: 24px;
+  font-weight: 600;
+}
+
+a {
+  text-decoration: none;
+  color: #0076d1;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+code {
+  background: #efefef;
+  padding: 2.5px 5px;
+  border-radius: 6px;
+}
+
 #menu {
   display: flex;
   flex-wrap: wrap;

www/src/page-layout.html

@@ -6,7 +6,6 @@
     <meta http-equiv="refresh" content="3">
     {% endif %}
     <title>{{ config.mail_domain }} {{ pagename }}</title>
-    <link rel="stylesheet" href="./water.css">
     <link rel="stylesheet" href="./main.css">
     <link rel="icon" href="/logo.svg">
     <link rel=”mask-icon” href=”/logo.svg” color=”#000000">