basic styling, some metadata

_data/metadata.js

@@ -1,5 +1,5 @@
 export default {
-	title: "",
+	title: "District Dharma Collective",
 	description: "",
 	url: "",
 	author: "Lee Cattarin",

_includes/layouts/page.njk

@@ -2,6 +2,12 @@
 layout: base.njk
 ---
 
-<h1>{{ title }}</h1>
+{% if hero %}
+  <img id="hero" src="{{ hero.src }}" alt="{{ hero.alt }}">
+{% endif %}
 
-{{ content | safe }}
+<div id="content">
+  <h1>{{ title }}</h1>
+
+  {{ content | safe }}
+</div>

css/main.css

@@ -3,58 +3,79 @@
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
-/* 1. Use a more-intuitive box-sizing model */
 *, *::before, *::after {
-  box-sizing: border-box;
+  box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
+}
+
+#root, #__next {
+  isolation: isolate; /* 10. Create a root stacking context */
 }
 
-/* 2. Remove default margin */
 *:not(dialog) {
-  margin: 0;
+  margin: 0; /* 2. Remove default margins */
 }
 
-/* 3. Enable keyword animations */
 @media (prefers-reduced-motion: no-preference) {
   html {
-    interpolate-size: allow-keywords;
+    interpolate-size: allow-keywords; /* 3. Enable keyword animations */
   }
 }
 
 body {
-  /* 4. Increase line-height */
-  line-height: 1.5;
-  /* 5. Improve text rendering */
-  -webkit-font-smoothing: antialiased;
+  line-height: 1.5; /* 4. Increase line-height */
+  -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
+  font-family: sans-serif;
+}
+
+#content {
+	width: 65%;
+	max-width: 1800px;
+	margin-inline: auto;
+	margin-block-end: 3rem;
+}
+
+@media (max-width: 1050px) {
+	#content {
+		width: 85%;
+	}
+}
+
+@media (max-width: 650px) {
+	#content {
+		width: 92%;
+	}
 }
 
-/* 6. Improve media defaults */
 img, picture, video, canvas, svg {
-  display: block;
-  max-width: 100%;
-  height: auto;
+  display: block; /* 6. Improve media defaults */
+  max-width: 100%; /* 6. Improve media defaults */
+  height: auto; /* 6. Improve media defaults */
+  margin: 0 auto;
 }
 
-/* 7. Inherit fonts for form controls */
 input, button, textarea, select {
-  font: inherit;
+  font: inherit; /* 7. Inherit fonts for form controls */
 }
 
-/* 8. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
+h1, h2, h3, h4, h5, h6, p {
+  overflow-wrap: break-word; /* 8. Avoid text overflows */
 }
 
-/* 9. Improve line wrapping */
-p {
-  text-wrap: pretty;
-}
 h1, h2, h3, h4, h5, h6 {
-  text-wrap: balance;
+  text-wrap: balance; /* 9. Improve line wrapping */
+  font-family: serif;
+  margin-block-start: 1em;
 }
 
-/*
-  10. Create a root stacking context
-*/
-#root, #__next {
-  isolation: isolate;
+h1 {
+	text-align: center;
+}
+
+p {
+  text-wrap: pretty; /* 9. Improve line wrapping */
+}
+
+#hero {
+	aspect-ratio: 40 / 9;
+	object-fit: cover;
 }

package-lock.json

@@ -1,5 +1,5 @@
 {
-	"name": "11ty",
+	"name": "district-dharma",
 	"version": "1.0.0",
 	"lockfileVersion": 3,
 	"requires": true,

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "",
+	"name": "district-dharma",
 	"version": "1.0.0",
 	"description": "",
 	"scripts": {