some spacing

LICENSE

@@ -1,4 +1,4 @@
-<name of project>
+District Dharma
 Copyright (C) 2026 Lee Cattarin
 
 This program is free software: you can redistribute it and/or modify

_includes/footer.njk

@@ -1,2 +1,3 @@
 <footer>
+  <p><a href="/attribution/">site attribution</a></p>
 </footer>

_includes/head.njk

@@ -36,6 +36,6 @@
 
 	<!-- Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 </head>

_includes/header.njk

@@ -1,4 +1,6 @@
 <header>
-	<nav>
-	</nav>
+  <a href="/" title="go home" aria-label="go home">
+    <img class="logo light" src="/img/logo-light.png" alt="the district dharma logo, which depicts a stylized lotus flower under 3 dots, surrounded by an upper and lower curve, in two shades of blue">
+    <img class="logo dark" src="/img/logo-dark.png" alt="the district dharma logo, which depicts a stylized lotus flower under 3 dots, surrounded by an upper and lower curve, in two shades of blue">
+  </a>
 </header>

_includes/layouts/index.njk

@@ -0,0 +1,38 @@
+---
+layout: page.njk
+---
+{% css %}{% include "css/form.css" %}{% endcss %}
+
+{{ content | safe }}
+
+<form action="https://formgrid.dev/api/f/842wiwnz" method="POST" class="contact-form">
+  <h2 class="center">Contact Us</h2>
+  <p class="center">All fields
+    <span aria-hidden="true">marked with an asterisk (<span class="red">*</span>)</span>
+  are required.</p>
+
+  <div class="name-email">
+    <div class="form-field">
+      <label for="name">Name <span class="red" aria-hidden="true">*</span></label>
+      <input id="name" type="text" name="name" placeholder="Your Name"
+        required aria-required="true" aria-describedby="name-error">
+      <p id="name-error" class="error">Name cannot be empty</p>
+    </div>
+
+    <div class="form-field">
+      <label for="email">Email <span class="red" aria-hidden="true">*</span></label>
+      <input id="email" type="email" name="email" placeholder="you@example.com"
+        required aria-required="true" aria-describedby="email-error">
+      <p id="email-error" class="error">Email cannot be empty</p>
+    </div>
+  </div>
+
+  <div class="form-field">
+    <label for="message">Message <span class="red" aria-hidden="true">*</span></label>
+    <textarea id="message" name="message" rows="4" placeholder="What's your message?"
+      required aria-required="true" aria-describedby="message-error"></textarea>
+    <p id="message-error" class="error">Message cannot be empty</p>
+  </div>
+
+  <button type="submit" class="form-button">Send message</button>
+</form>

css/form.css

@@ -0,0 +1,64 @@
+form label {
+	display: block;
+	margin-top: 1rem;
+	margin-bottom: .5rem;
+	font-weight: bold;
+}
+
+form input,
+form textarea,
+form button {
+	display: block;
+	border-radius: .25rem;
+	border-color: var(--color-accent);
+}
+
+form input,
+form textarea {
+	width: 100%;
+}
+
+input:user-invalid,
+textarea:user-invalid {
+	border-color: var(--color-red);
+	outline: .2rem solid var(--color-red);
+	outline-offset: .2rem;
+}
+
+input:user-invalid:focus-visible,
+textarea:user-invalid:focus-visible {
+	outline: .1rem solid var(--color-accent);
+	outline-offset: .1rem;
+}
+
+.error {
+	margin-top: .5rem;
+	visibility: hidden;
+}
+
+input:user-invalid + .error,
+textarea:user-invalid + .error {
+	visibility: visible;
+}
+
+form button {
+	padding: 0 .5rem;
+	margin: 1rem auto;
+}
+
+.name-email {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 1rem;
+}
+
+@media (max-width: 650px) {
+	.name-email {
+		grid-template-columns: 1fr;
+		gap: 0;
+	}
+}
+
+.red {
+	color: var(--color-red);
+}

css/main.css

@@ -5,10 +5,13 @@
 	--color-light: #e4edf3;
 	--color-blue-dark: #0c436d;
 	--color-blue-light: #5ca6ce;
+	--color-red-light: #bb362a;
+	--color-red-dark: #b82e1f;
 
 	--color-text: light-dark(var(--color-dark), var(--color-light));
 	--color-bg: light-dark(var(--color-light), var(--color-dark));
 	--color-accent: light-dark(var(--color-blue-dark), var(--color-blue-light));
+	--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -24,6 +27,10 @@
   margin: 0; /* 2. Remove default margins */
 }
 
+html {
+	height: 100%;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   html {
     interpolate-size: allow-keywords; /* 3. Enable keyword animations */
@@ -36,6 +43,11 @@ body {
   font-family: sans-serif;
   color: var(--color-text);
   background-color: var(--color-bg);
+  font-family: "Atkinson Hyperlegible Next";
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100%;
 }
 
 #content {
@@ -84,12 +96,73 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
 	text-align: center;
+	font-size: 3rem;
+	margin-block-end: .6em;
 }
 
+h2 { font-size: 2rem; }
+h3 { font-size: 1.8rem; }
+
 p {
   text-wrap: pretty; /* 9. Improve line wrapping */
+  margin-block: 1.25em;
 }
 
+a {
+	color: var(--color-accent);
+	text-decoration-thickness: .15rem;
+}
+
+a:visited {
+	color: var(--color-text);
+	text-decoration-color: var(--color-accent);
+}
+
+*:focus-visible {
+	outline-offset: .1rem;
+	outline: .1rem solid var(--color-accent);
+}
+
+/* Header/nav/footer */
+header {
+	height: 20vh;
+	padding: 1rem;
+	background-color: var(--color-accent);
+}
+
+.logo {
+	height: 100%;
+	width: auto;
+}
+
+@media (prefers-color-scheme: light) {
+	.dark {
+		display: none;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.light {
+		display: none;
+	}
+}
+
+footer {
+	background-color: var(--color-accent);
+	color: var(--color-bg);
+}
+
+footer p {
+	text-align: center;
+}
+
+footer a,
+footer a:visited {
+	color: var(--color-bg);
+	text-decoration-color: var(--color-bg);
+}
+
+/* Misc */
 #hero {
 	aspect-ratio: 40 / 9;
 	object-fit: cover;

src/attribution.md

@@ -0,0 +1,9 @@
+---
+title: Attribution
+---
+
+This site is built using [{{ eleventy.generator }}](https://www.11ty.dev/){target="_blank"} by [Lee Cattarin](https://leecat.art){target="_blank"}.
+
+The header font is [Monserrat](https://fonts.google.com/specimen/Montserrat){target="_blank"}. The body font is [Atkinson Hyperlegible Next](https://www.brailleinstitute.org/freefont/){target="_blank"}, developed by the Braille Institute.
+
+This site is created [without the use of generative AI](https://declare-ai.org/1.0.0/none.html){target="_blank"}.

src/index.md

@@ -1,6 +1,7 @@
 ---
 title: Welcome
 hero: null
+layout: index.njk
 ___mb_schema: /.mattrbld/schemas/page.json
 ---
 ## About