feat: serve static and assets add policies and index from base

34 files changed, 943 insertions, 47 deletions

diff --git a/Cargo.lock b/Cargo.lock
index c3394de..11b2bd0 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -127,7 +127,7 @@ dependencies = [
  "serde_urlencoded",
  "sync_wrapper 1.0.1",
  "tokio",
- "tower",
+ "tower 0.4.13",
  "tower-layer",
  "tower-service",
  "tracing",
@@ -185,6 +185,12 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
 [[package]]
+name = "bitflags"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b048fb63fd8b5923fc5aa7b340d8e156aec7ec02f0c78fa8a6ddc2613f6f71de"
+
+[[package]]
 name = "bumpalo"
 version = "3.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -204,6 +210,8 @@ dependencies = [
  "askama_axum",
  "axum",
  "tokio",
+ "tower 0.5.0",
+ "tower-http",
 ]
 
 [[package]]
@@ -279,6 +287,12 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dfc6580bb841c5a68e9ef15c77ccc837b40a7504914d52e47b8b0e9bbda25a1d"
 
 [[package]]
+name = "futures-sink"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fb8e00e87438d937621c1c6269e53f536c14d3fbd6a042bb24879e57d474fb5"
+
+[[package]]
 name = "futures-task"
 version = "0.3.30"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -343,6 +357,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "http-range-header"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08a397c49fec283e3d6211adbe480be95aae5f304cfb923e9970e08956d5168a"
+
+[[package]]
 name = "httparse"
 version = "1.9.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -605,7 +625,7 @@ version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4722d768eff46b75989dd134e5c353f0d6296e5aaa3132e776cbdb56be7731aa"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 ]
 
 [[package]]
@@ -809,6 +829,19 @@ dependencies = [
 ]
 
 [[package]]
+name = "tokio-util"
+version = "0.7.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "61e7c3654c13bcd040d4a03abee2c75b1d14a37b423cf5a813ceae1cc903ec6a"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "futures-sink",
+ "pin-project-lite",
+ "tokio",
+]
+
+[[package]]
 name = "tower"
 version = "0.4.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -825,6 +858,41 @@ dependencies = [
 ]
 
 [[package]]
+name = "tower"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "36b837f86b25d7c0d7988f00a54e74739be6477f2aac6201b8f429a7569991b7"
+dependencies = [
+ "tower-layer",
+ "tower-service",
+]
+
+[[package]]
+name = "tower-http"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e9cd434a998747dd2c4276bc96ee2e0c7a2eadf3cae88e52be55a05fa9053f5"
+dependencies = [
+ "bitflags 2.6.0",
+ "bytes",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "http-range-header",
+ "httpdate",
+ "mime",
+ "mime_guess",
+ "percent-encoding",
+ "pin-project-lite",
+ "tokio",
+ "tokio-util",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
 name = "tower-layer"
 version = "0.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
diff --git a/Cargo.toml b/Cargo.toml
index a496dbf..afb71dd 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -10,3 +10,5 @@ askama = { version = "0.12", features = ["markdown", "with-axum"], default-featu
 askama_axum = "0.4.0"
 axum = "0.7.5"
 tokio = { version = "1.40.0", features = ["full"] }
+tower = "0.5.0"
+tower-http = { version = "0.5.2", features = ["fs"] }
diff --git a/assets/amy-sunny.png b/assets/amy-sunny.png
deleted file mode 100644
index 003c700..0000000
--- a/assets/amy-sunny.png
+++ /dev/null
diff --git a/assets/amy-sunny.webp b/assets/amy-sunny.webp
deleted file mode 100644
index 680335f..0000000
--- a/assets/amy-sunny.webp
+++ /dev/null
diff --git a/assets/amy.png b/assets/amy.png
deleted file mode 100644
index ea2f165..0000000
--- a/assets/amy.png
+++ /dev/null
diff --git a/assets/amy.webp b/assets/amy.webp
deleted file mode 100644
index 6ca2282..0000000
--- a/assets/amy.webp
+++ /dev/null
diff --git a/assets/bg.png b/assets/bg.png
deleted file mode 100644
index a0c9ab8..0000000
--- a/assets/bg.png
+++ /dev/null
diff --git a/assets/brochure/brochure-back-center.png b/assets/brochure/brochure-back-center.png
deleted file mode 100644
index 48ee7e2..0000000
--- a/assets/brochure/brochure-back-center.png
+++ /dev/null
diff --git a/assets/brochure/brochure-back-left.png b/assets/brochure/brochure-back-left.png
deleted file mode 100644
index 5a2cc4a..0000000
--- a/assets/brochure/brochure-back-left.png
+++ /dev/null
diff --git a/assets/brochure/brochure-back-right.png b/assets/brochure/brochure-back-right.png
deleted file mode 100644
index 73a5b8d..0000000
--- a/assets/brochure/brochure-back-right.png
+++ /dev/null
diff --git a/assets/brochure/brochure-front-center.png b/assets/brochure/brochure-front-center.png
deleted file mode 100644
index 59f9f82..0000000
--- a/assets/brochure/brochure-front-center.png
+++ /dev/null
diff --git a/assets/brochure/brochure-front-left.png b/assets/brochure/brochure-front-left.png
deleted file mode 100644
index 2ed6c56..0000000
--- a/assets/brochure/brochure-front-left.png
+++ /dev/null
diff --git a/assets/brochure/brochure-front-right.png b/assets/brochure/brochure-front-right.png
deleted file mode 100644
index 1fd53c7..0000000
--- a/assets/brochure/brochure-front-right.png
+++ /dev/null
diff --git a/assets/favicon.ico b/assets/favicon.ico
deleted file mode 100644
index 8ba4c15..0000000
--- a/assets/favicon.ico
+++ /dev/null
diff --git a/assets/icons/close-box.svg b/assets/icons/close-box.svg
deleted file mode 100644
index 717756e..0000000
--- a/assets/icons/close-box.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z" /></svg>
diff --git a/assets/icons/dots-horizontal-circle.svg b/assets/icons/dots-horizontal-circle.svg
deleted file mode 100644
index ca1de94..0000000
--- a/assets/icons/dots-horizontal-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,10.5A1.5,1.5 0 0,0 10.5,12A1.5,1.5 0 0,0 12,13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 12,10.5M6.5,10.5A1.5,1.5 0 0,0 5,12A1.5,1.5 0 0,0 6.5,13.5A1.5,1.5 0 0,0 8,12A1.5,1.5 0 0,0 6.5,10.5M17.5,10.5A1.5,1.5 0 0,0 16,12A1.5,1.5 0 0,0 17.5,13.5A1.5,1.5 0 0,0 19,12A1.5,1.5 0 0,0 17.5,10.5Z" /></svg>
diff --git a/assets/icons/email-variant.svg b/assets/icons/email-variant.svg
deleted file mode 100644
index e8ef2dd..0000000
--- a/assets/icons/email-variant.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,13L2,6.76V6C2,4.89 2.89,4 4,4H20A2,2 0 0,1 22,6V6.75L12,13M22,18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V9.11L4,10.36V18H20V10.36L22,9.11V18Z" /></svg>
diff --git a/assets/icons/phone-classic.svg b/assets/icons/phone-classic.svg
deleted file mode 100644
index 814990b..0000000
--- a/assets/icons/phone-classic.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,3C7.46,3 3.34,4.78 0.29,7.67C0.11,7.85 0,8.1 0,8.38C0,8.66 0.11,8.91 0.29,9.09L2.77,11.57C2.95,11.75 3.2,11.86 3.5,11.86C3.75,11.86 4,11.75 4.18,11.58C4.97,10.84 5.87,10.22 6.84,9.73C7.17,9.57 7.4,9.23 7.4,8.83V5.73C8.85,5.25 10.39,5 12,5C13.59,5 15.14,5.25 16.59,5.72V8.82C16.59,9.21 16.82,9.56 17.15,9.72C18.13,10.21 19,10.84 19.82,11.57C20,11.75 20.25,11.85 20.5,11.85C20.8,11.85 21.05,11.74 21.23,11.56L23.71,9.08C23.89,8.9 24,8.65 24,8.37C24,8.09 23.88,7.85 23.7,7.67C20.65,4.78 16.53,3 12,3M9,7V10C9,10 3,15 3,18V22H21V18C21,15 15,10 15,10V7H13V9H11V7H9M12,12A4,4 0 0,1 16,16A4,4 0 0,1 12,20A4,4 0 0,1 8,16A4,4 0 0,1 12,12M12,13.5A2.5,2.5 0 0,0 9.5,16A2.5,2.5 0 0,0 12,18.5A2.5,2.5 0 0,0 14.5,16A2.5,2.5 0 0,0 12,13.5Z" /></svg>
diff --git a/assets/icons/send-circle.svg b/assets/icons/send-circle.svg
deleted file mode 100644
index 1b7e5c3..0000000
--- a/assets/icons/send-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M8,7.71V11.05L15.14,12L8,12.95V16.29L18,12L8,7.71Z" /></svg>
diff --git a/assets/icons/star-box.svg b/assets/icons/star-box.svg
deleted file mode 100644
index 2973ca8..0000000
--- a/assets/icons/star-box.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
-   <path fill="#FFCA28"  d="M19,3A2,2 0 0,1 21,5V19C21,20.11 20.1,21 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M15.58,17L14.63,12.92L17.79,10.19L13.62,9.83L12,6L10.38,9.84L6.21,10.2L9.37,12.93L8.42,17L12,14.84L15.58,17Z" />
-</svg>
diff --git a/assets/logo-simple.png b/assets/logo-simple.png
deleted file mode 100644
index b299e66..0000000
--- a/assets/logo-simple.png
+++ /dev/null
diff --git a/assets/logo-small.png b/assets/logo-small.png
deleted file mode 100644
index a128e24..0000000
--- a/assets/logo-small.png
+++ /dev/null
diff --git a/assets/logo.png b/assets/logo.png
deleted file mode 100644
index 81e0776..0000000
--- a/assets/logo.png
+++ /dev/null
diff --git a/assets/logo.webp b/assets/logo.webp
deleted file mode 100644
index 16ab275..0000000
--- a/assets/logo.webp
+++ /dev/null
diff --git a/assets/signature.png b/assets/signature.png
deleted file mode 100644
index 7d115de..0000000
--- a/assets/signature.png
+++ /dev/null
diff --git a/assets/signature.webp b/assets/signature.webp
deleted file mode 100644
index 8ce6e28..0000000
--- a/assets/signature.webp
+++ /dev/null
diff --git a/src/main.rs b/src/main.rs
index 43b6fa6..ca0a3d9 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,3 +1,4 @@
+use tower_http::services::ServeDir;
 use axum::response::Html;
 use axum::extract::State;
 use std::sync::Arc;
@@ -11,29 +12,12 @@ use std::io::*;
 use std::path::Path;
 use std::path::PathBuf;
 
-trait Post<'a>: fmt::Debug {
+trait Post: fmt::Debug {
     fn dump(&self);
-    fn display_name(&'a self) -> &'a str;
+    fn display_name(&self) -> Cow<str>;
     fn get_content(&self) -> Cow<str>;
 }
 
-#[derive(Debug)]
-struct MockPost;
-
-impl<'a> Post<'a> for MockPost {
-    fn dump(&self) {
-        println!("Post content goes here.");
-    }
-
-    fn display_name(&'a self) -> &'a str {
-        ""
-    }
-
-    fn get_content(&self) -> Cow<str> {
-        Cow::Borrowed("")
-    }
-}
-
 struct MdFilePost {
     path: PathBuf,
     name: OsString,
@@ -48,13 +32,13 @@ impl MdFilePost {
     }
 }
 
-impl<'a> Post<'a> for MdFilePost {
+impl Post for MdFilePost {
     fn dump(&self) {
         println!("{}: {}", &self.display_name(), &self.get_content());
     }
 
-    fn display_name(&'a self) -> &'a str {
-        self.name.to_str().unwrap()
+    fn display_name(&self) -> Cow<str> {
+        self.name.to_string_lossy()
     }
 
     fn get_content(&self) -> Cow<str> {
@@ -94,8 +78,8 @@ impl Posts for FsDirPosts {
     }
 }
 
-trait Page<'a>: Template {
-    fn from_post(post: &impl Post<'a>) -> Self;
+trait Page: Template {
+    fn from_post(post: &impl Post) -> Self;
 }
 
 #[derive(Template)]
@@ -104,32 +88,60 @@ struct MdPage {
     article: String,
 }
 
-impl<'a> Page<'a> for MdPage {
-    fn from_post(post: &impl Post<'a>) -> Self {
+impl Page for MdPage {
+    fn from_post(post: &impl Post) -> Self {
         Self {
             article: post.get_content().into_owned(),
         }
     }
 }
 
-fn test_get_posts(posts: &impl Posts) {
-    for post in posts.get_posts() {
-        let page = MdPage::from_post(&post);
-        println!("{}", page.render().unwrap());
+#[derive(Template)]
+#[template(path = "posts.html")]
+struct PostsView {
+    post_titles: Vec<String>
+}
+
+impl PostsView {
+    fn with_posts(posts: &impl Posts) -> Self {
+        Self {
+            post_titles: posts.get_posts().map(|p| p.display_name().into_owned()).map(String::from).collect()
+        }
     }
 }
 
-async fn handler(State(posts): State<Arc<impl Posts>>) -> Html<String> {
-    let post = posts.get_posts().next().unwrap();
-    let page = MdPage::from_post(&post);
-    Html(page.render().unwrap())
+async fn posts_handler(State(posts): State<Arc<impl Posts>>) -> Html<String> {
+    let view = PostsView::with_posts(&*posts);
+    Html(view.render().unwrap())
+}
+
+#[derive(Template)]
+#[template(path = "index.html")]
+struct IndexTemplate;
+
+async fn index_handler() -> Html<String> {
+    Html(IndexTemplate {}.render().unwrap())
+}
+
+#[derive(Template)]
+#[template(path = "policies.html")]
+struct PoliciesTemplate;
+
+async fn policies_handler() -> Html<String> {
+    Html(PoliciesTemplate{}.render().unwrap())
 }
 
 #[tokio::main]
 async fn main() {
     let repo = Arc::new(FsDirPosts::new(&format!("/data/ct/{}", "blog")));
 
-    let app = Router::new().route("/posts", get(handler)).with_state(repo);
+    let app = Router::new()
+        .nest_service("/static", ServeDir::new("static"))
+        .nest_service("/assets", ServeDir::new("/data/ct/assets"))
+        .route("/posts", get(posts_handler))
+        .route("/policies", get(policies_handler))
+        .route("/", get(index_handler))
+        .with_state(repo);
 
     let listener = tokio::net::TcpListener::bind("0.0.0.0:8000").await.unwrap();
     axum::serve(listener, app).await.unwrap();
diff --git a/desktop.css b/static/desktop.css
index 1b0eb43..1b0eb43 100644
--- a/desktop.css
+++ b/static/desktop.css
diff --git a/widescreen.css b/static/widescreen.css
index 8231129..8231129 100644
--- a/widescreen.css
+++ b/static/widescreen.css
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..1657ec1
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<title>
+		Tutoring Excellence Online and in Suffolk, VA - Carpenter Tutoring, LLC
+	</title>
+	<style>
+		{% block style %}
+			{% include "styles.css" %}
+		{% endblock %}
+	</style>
+	<link rel="preconnect" href="https://fonts.gstatic.com" />
+	<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Indie+Flower&family=PT+Sans&display=swap" rel="stylesheet" />
+	<link rel="stylesheet" href="/static/desktop.css" />
+	<link rel="stylesheet" href="/static/widescreen.css" />
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="description" content="Tutoring Excellence Online and in Suffolk, VA" />
+	<meta property="og:description" content="Tutoring excellence online and in-person" />
+	<meta property="og:image" content="https://carpentertutoring.com/assets/logo.webp" />
+	<meta property="og:image:secure_url" content="https://carpentertutoring.com/assets/logo.webp" />
+	<meta property="og:site_name" content="Carpenter Tutoring" />
+	<meta property="og:title" content="Tutoring Excellence Online and in Suffolk, VA - Carpenter Tutoring, LLC" />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="https://carpentertutoring.com" />
+</head>
+
+<body>
+	<nav>
+		<a href="/#reviews">Reviews</a>
+		<a href="/about">Team</a>
+		<a href="/policies">Policies</a>
+		<a href="/#pricing">Pricing</a>
+		<a href="/brochure">Brochure</a>
+		<a href="/#offerings">Offerings</a>
+		<a href="/#"><img alt="logo" src="/assets/logo-simple.png" /></a>
+	</nav>
+
+	<main>
+		{% block main %}<p>Placeholder content</p>{% endblock %}
+	</main>
+
+	<footer>
+		<figure class="logo">
+			<picture>
+				<source srcset="/assets/logo.webp" type="image/webp" />
+				<source srcset="/assets/logo.png" type="image/png" />
+				<img alt="logo" src="/assets/logo.png" />
+			</picture>
+		</figure>
+		<p>
+			&copy; 2019-<?php echo date('Y'); ?> Carpenter Tutoring, LLC. All rights reserved.
+		</p>
+		<p>
+			<a href="https://g.page/carpenter-tutoring?share">Visit me on Google</a>
+			|
+			<a href="https://g.page/carpenter-tutoring/review?np">Submit a review</a>
+			|
+			<a href="mailto:webmaster@carpentertutoring.com">
+				Having trouble with our site?
+			</a>
+		</p>
+	</footer>
+</body>
+
+</html>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..48e85e8
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,407 @@
+{% extends "base.html" %}
+
+{% block main %}
+<!--banner-->
+<section class="banner">
+	<h1>CARPENTER TUTORING</h1>
+	<h2>
+		<strong>Discovering <em>your</em> path to success</strong>
+	</h2>
+
+	<div class="buttons">
+		<a class="button" href="mailto:amy@carpentertutoring.com"> <img src="/assets/icons/email-variant.svg" alt="mailbox" />Amy@CarpenterTutoring.com</a>
+		<a class="button primary" href="tel:1-757-335-7555">
+			<img src="/assets/icons/phone-classic.svg" alt="phone" />
+			(757) 335-7555</a>
+	</div>
+</section>
+
+<!-- welcome-->
+<section id="welcome" class="quiet flexible">
+	<div>
+		<h2>
+			Welcome, and thank you for your interest in Carpenter Tutoring!
+		</h2>
+
+		<p> Carpenter Tutoring is a private tutoring service based in Suffolk,
+			Virginia. We offer high-engagement remote appointments through Zoom. A limited
+			number of in-person appointments with me are also available for students in the Harbour
+			View region of Suffolk, VA. Most of our offerings are one-on-one, and siblings
+			and pre-existing groups of students may opt for group meetings. No matter your
+			budget, I am confident that we can find an arrangement that will provide your
+			student services without creating financial strain. </p>
+
+		<p>
+			I invite you to explore and learn more about the <a href="/#offerings">services we offer</a>, <a href="/about">Carpenter Tutoring's background</a>,
+			and some of <a href="/policies">our policies</a>. Thank you for visiting, and
+			please do not hesitate to reach out with any questions. We will be thrilled to
+			assist you!
+		</p>
+
+		<figure class="signature">
+			<picture>
+				<source srcset="/assets/signature.webp" type="image/webp" />
+				<source srcset="/assets/signature.png" type="image/png" />
+				<img alt="Amy's signature" src="/assets/signature.png" />
+			</picture>
+		</figure>
+
+	</div>
+
+	<figure class="shadowy">
+		<picture>
+			<source srcset="/assets/amy-sunny.webp" type="image/webp" />
+			<source srcset="/assets/amy-sunny.png" type="image/png" />
+			<img alt="Amy Carpenter" src="/assets/amy-sunny.png" />
+		</picture>
+		<figcaption>Amy Carpenter, M.Ed.</figcaption>
+	</figure>
+</section>
+
+<!-- offering modals -->
+<div id="offering-subject-tutoring" class="modal">
+	<div class="card">
+		<p>
+			Our regular subject specific offerings include:
+
+		<ul>
+			<li> All levels of reading/language arts/English</li>
+			<li> Writing (formal and creative)</li>
+			<li> Foreign Language: French and all levels of Latin</li>
+			<li> Math through Calculus II</li>
+			<li> Introductory Physics (not at the honors or AP level)</li>
+			<li> Biology and Chemistry through AP level</li>
+		</ul>
+
+		Special arrangements can be made for subjects that fall outside of these
+		offerings. Please contact me directly for more information.
+
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-college-prep" class="modal">
+	<div class="card">
+		<p>
+			Work with a former Higher Education professional to
+			determine what types of schools and/or degree programs may be a good fit
+			for your interests and desires. Additionally, learn how to write an
+			attention-grabbing personal essay for college applications and receive
+			guidance on institution-specific supplemental essays.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-test-prep" class="modal">
+	<div class="card">
+		<p>
+			One-on-one content instruction, practice testing, and
+			testing strategization for a number of standardized tests, including but
+			not limited to:
+
+		<ul>
+			<li> SAT &amp; ACT</li>
+			<li> PSAT</li>
+			<li> ISEE</li>
+			<li> SSAT</li>
+			<li> GED</li>
+			<li> GMAT</li>
+			<li> MAT</li>
+			<li> GRE</li>
+			<li> LSAT</li>
+		</ul>
+
+		Please contact me directly if you'd like assistance for a test not listed
+		here.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-music-lessons" class="modal">
+	<div class="card">
+		<p>
+			Instruments offered include piano, guitar, drums, and voice.
+			Instrument lessons include a combination of formal instruction and
+			ear-training, which allows students to select the songs they'd like to
+			learn. Music composition lessons focus on the techniques necessary for
+			writing original songs, whether they be instrumental or singer/songwriter
+			style.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-evals" class="modal">
+	<div class="card">
+		<p>
+			Both evaluations are based on materials submitted through an online
+			portal. Letters are returned within a week of your notice that all documents
+			have been uploaded.</p>
+		<p> <strong>$45 option</strong>: Considers math and language arts materials,
+			satisfies proof of progress with a personalized letter and evaluator
+			credentials </p>
+		<p><strong>$80+ option</strong>: Considers math and language arts materials
+			satisfies proof of progress with a
+			personalized letter and evaluator credentials, provides homeschool families
+			with a separate document detailing identified areas of strength, areas of
+			weakness, and recommendations for addressing weaknesses.
+			<strong>Other subjects may be added on for $10 each</strong>.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-college-writing" class="modal">
+	<div class="card">
+		<p>
+			Learn how to shift high-school level writing to that which will be expected in
+			college. Topics covered include moving beyond the five-paragraph essay, writing
+			research papers, and choosing a topic for essays with open prompts. In-session
+			exercises will allow students to implement these skills in real time with
+			immediate feedback.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-academic-coaching" class="modal">
+	<div class="card">
+		<p>
+			Academic Coaching offers all the benefits of Study Skills and Time Management
+			appointments plus ongoing planning and accountability support. As an Academic
+			Coach, I keep track of your student's upcoming assignments and assessments and
+			help craft a schedule week to week for them to accomplish their goals. Students
+			come away as more independent and confident planners and self-advocates.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-study-skills" class="modal">
+	<div class="card">
+		<p>
+			Study Skills sessions will allow students to develop a toolkit for
+			successful study habits. Learn about techniques to fight mental fatigue and
+			tools for mental recall. Study Skills sessions also cover ways to address
+			motivation, attention, and avoidance. Topics will be tailored for your specific
+			needs.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-dissertation-coaching" class="modal">
+	<div class="card">
+		<p>
+			Dissertation coaching consists of one-on-one work to strengthen the effort you
+			have already put in. Draw out the significance of your research by honing in on
+			the implications, connections, and recommendations that stem from your
+			findings. Together, we will break past a surface-level review of your study to
+			generate the greatest impact possible. Dissertation coaching can also focus on
+			general writing mechanics, clarity of message, and/or consistency of voice.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<div id="offering-time-management" class="modal">
+	<div class="card">
+		<p>
+			Learn how to balance all of the demands in your life. Time
+			Management sessions are tailored to your needs and can include building an
+			hour-by-hour schedule of your week, creating a long-term plan for assignments
+			and responsibilities, and discussing time and stress management techniques.
+		</p>
+		<a href="#offerings" class="button"><img src="/assets/icons/close-box.svg" alt="close" />Close</a>
+	</div>
+</div>
+
+<!-- offerings cards -->
+<section id="offerings">
+
+	<div class="card">
+		<h2>Subject Tutoring</h2>
+		<p>Tutoring for specific courses or disciplines
+		</p>
+		<a class="button" href="#offering-subject-tutoring"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>Time Management</h2>
+		<p>
+			Personalized plans for managing academics, extracurriculars, and
+			other commitments
+		</p>
+		<a class="button" href="#offering-time-management"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>Study Skills</h2>
+		<p>Learn how to make the most of your study time</p>
+		<a class="button" href="#offering-study-skills"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>Academic Coaching</h2>
+		<p>
+			Time management and study skills blended with continuing
+			accountability
+		</p>
+		<a class="button" href="#offering-academic-coaching"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>College Application Assistance</h2>
+		<p>
+			Assistance with generating a college list and crafting application
+			essays
+		</p>
+		<a class="button" href="#offering-college-prep"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>College-Level Writing</h2>
+		<p>Get a head start on meeting professors' expectations</p>
+		<a class="button" href="#offering-college-writing"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>Dissertation Coaching</h2>
+		<p>Ensure your research is communicated effectively and eloquently</p>
+		<a class="button" href="#offering-dissertation-coaching"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>Standardized Test Prep</h2>
+		<p>
+			Tailored assistance in preparing for a variety of standardized tests
+		</p>
+		<a class="button" href="#offering-test-prep"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>Music Lessons</h2>
+		<p>Instrument and/or composition lessons for students of all ages</p>
+		<a class="button" href="#offering-music-lessons"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+	<div class="card">
+		<h2>Proof of Progress Evaluations</h2>
+		<p>
+			Two levels of portfolio-based evaluations for homeschool families
+			looking to satisfy Proof of Progress or gain insight into their
+			child's learning
+		</p>
+		<a class="button" href="#offering-evals"><img src="/assets/icons/dots-horizontal-circle.svg" alt="expand" /> Learn more</a>
+	</div>
+
+</section>
+
+<section class="squarshed flexible centered">
+	<a class="button primary" href="/brochure">Click here to view an interactive brochure of our offerings</a>
+</section>
+
+<!-- pricing -->
+<section class="quiet" id="pricing">
+	<table>
+		<caption>
+			<h2>Pricing Guide - Remote*</h2>
+		</caption>
+		<tbody>
+			<tr>
+				<th scope="col">
+					<a href="#offering-subject-tutoring">Single Subject</a>, <a href="#offering-time-management">Time Management</a>, <a href="#offering-study-skills">Study Skills Tutoring</a>, <a href="#offering-music-lessons">Music Lessons</a>
+				</th>
+				<td>$60/hr</td>
+			</tr>
+
+			<tr>
+				<th scope="col">
+					<a href="#offering-subject-tutoring">Multi-Subject</a>, <a href="#offering-academic-coaching">Academic Coaching</a>, <a href="#offering-dissertation-coaching">Dissertation Coaching</a>, <a href="#offering-test-prep">Test Prep</a>, <a href="#offering-college-prep">College
+						Application Assistance</a>
+				</th>
+				<td>$70/hr</td>
+			</tr>
+
+			<tr>
+				<th scope="col">Small Group Sessions, Group Lessons</th>
+				<td>$40/hr/student</td>
+			</tr>
+			<tr>
+				<th scope="col"><a href="#offering-evals">Simplified Homeschool Evaluations</a></th>
+				<td>$45</td>
+			</tr>
+			<tr>
+				<th scope="col"><a href="#offering-evals">Detailed Homeschool Evaluations</a></th>
+				<td>$80+</td>
+			</tr>
+		</tbody>
+	</table>
+
+	<h3>
+		<p><em>*In-person pricing for students in the Harbour View region of Suffolk is $10/hr more in each category.</em></p>
+		<a href="/policies">See a list of our policies and procedures regarding scheduling,
+			payment, and booking.</a>
+	</h3>
+
+</section>
+
+<!-- reviews -->
+<section id="reviews">
+
+	<div class="card">
+		<h2>C.L. Cannon</h2>
+		<blockquote>
+			I hired Amy to complete an end-of-the-year evaluation for both of my Elementary aged sons. This being our first year of independent home instruction, the task of testing and/or evaluation was daunting! Amy put my fears to rest! She was super easy to work with, had great communication skills, and answered all my questions in a timely and informative manner! I would highly recommend her services!
+		</blockquote>
+		<p>
+			<a href="https://goo.gl/maps/kC4aTuFqpiyLCJ2r8">View on Google</a>
+			or
+			<a href="https://g.page/carpenter-tutoring/review?np">leave a review.</a>
+		</p>
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+	</div>
+
+	<div class="card">
+		<h2>Lee Crabtree</h2>
+		<blockquote>
+			Amy is a wonderful tutor who helped my child (who does not like help at all) though some difficult classes where the teacher was not providing the support my child needed. Highly recommended.
+		</blockquote>
+		<p>
+			<a href="https://goo.gl/maps/73wWvyS7azkBBkA39">View on Google</a>
+			or
+			<a href="https://g.page/carpenter-tutoring/review?np">leave a review.</a>
+		</p>
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+	</div>
+
+	<div class="card">
+		<h2>Connor Fenton</h2>
+		<blockquote>
+			I was a Graduate student at the College of William and Mary who needed to pass a Latin Language test as part of my degree requirements. I was struggling with refreshing my Latin after a few years out of the classroom and Amy was both professional and helpful. With her tutoring I was able to pass my test and finish my degree. She is very considerate and easy to work with.
+		</blockquote>
+		<p>
+			<a href="https://goo.gl/maps/73wWvyS7azkBBkA39">View on Google</a>
+			or
+			<a href="https://g.page/carpenter-tutoring/review?np">leave a review.</a>
+		</p>
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+		<img src="/assets/icons/star-box.svg" alt="star" />
+	</div>
+
+</section>
+{% endblock %}
diff --git a/templates/policies.html b/templates/policies.html
new file mode 100644
index 0000000..0d39b38
--- /dev/null
+++ b/templates/policies.html
@@ -0,0 +1,65 @@
+{% extends "base.html" %}
+
+{% block main %}
+
+<section class="banner">
+	<h1>Policies &amp; Procedures</h1>
+</section>
+<section class="quiet">
+	<p>
+	<h2>Payment Methods</h2>
+	We accept payments through Zelle (amy@carpentertutoring.com), Venmo
+	(@AmyCTutoring), and PayPal (amy@carpentertutoring.com). We also accept
+	checks made out to Carpenter Tutoring, LLC. Please <a href="/#contact">contact Amy</a> for
+	a mailing address if you would like to pay by check.
+	</p>
+
+	<p>
+	<h2>Travel</h2>
+	Due to high appointment volumes, Amy is only able to travel to students in the Harbour View area of Suffolk, VA.
+	</p>
+
+	<p>Please contact other tutors directly to discuss their locations and in-person policies.</p>
+
+	<p>
+	<h2>Remote sessions</h2>
+	Remote sessions are typically conducted from tutors' homes. We use online video conferencing software such as
+	<a target="_blank" href="https://zoom.us">Zoom</a> and <a target="_blank" href="https://meet.google.com">Google Meet</a>.
+	Your tutor will inform you of their preferred meeting method and provide initial meeting instructions and support.
+	</p>
+
+	<p>
+	<h2>Late Cancellations</h2>
+	Sessions cancelled within 72 hours of their start time will incur a late
+	cancellation fee equal to 40% of the cancelled session price.
+	</p>
+
+	<p>
+	<h2>No-Shows</h2>
+	Sessions which a student does not attend with no notice of
+	cancellation will be charged the full session price.
+	</p>
+
+	<p>
+	<h2>Session Duration</h2>
+	Sessions are purchased in half-hour increments, and the shortest
+	appointment duration is 60 minutes. Families are responsible for the
+	amount of time they book and will be charged based on that amount.
+	Students who provide no advance notice of a need to end their meeting early will still be responsible for the full session price. If a student is
+	late to their appointment, we will work to the end of their scheduled
+	time, but no later.
+	</p>
+
+	<p>
+	<h2>Proof of Progress Evaluations</h2>
+	Proof of Progress letters will be returned within 7 days of notification that materials are ready for review. Families are responsible for sending Proof of Progress letters and proof of evaluator credentials to their school system by August 1, the deadline for Proof of Progress submissions in Virginia. Notifications regarding sample readiness sent on or after July 24 of each year will incur a $10 late submission fee per evaluation. All payments are expected within two weeks of receipt of letter(s). Payment method information is available on this site as well as in the email sent along with Proof of Progress letters.
+	</p>
+
+	<p>
+	<h2>Learning Acceleration Grants</h2>
+	Carpenter Tutoring is proud to serve Virginia students and families as a vendor for the K-12 Learning Acceleration Grant. Families must share student names as they appear on the grants, associated parent name, and associated address for invoicing purposes. Families are expected to upload emailed invoices at their earliest convenience as there are significant lag times between family submission and fund deposits from ClassWallet. While Carpenter Tutoring will provide an overview of funds used with our tutors with each invoice, families are expected to keep track of fund use and communicate with tutors when funds are nearing exhaustion to plan an end date for services or a transition to out-of-pocket payment. Grant vendors cannot see fund totals or funds used with other vendors, so we rely on families completely to communicate their remaining balances. Families who fail to notify us that their funds are nearly or have been depleted or rescinded but continue to use services will be required to pay for any excesses out-of-pocket.
+	</p>
+</section>
+<section></section>
+
+{% endblock %}
diff --git a/templates/posts.html b/templates/posts.html
new file mode 100644
index 0000000..9f522a6
--- /dev/null
+++ b/templates/posts.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block main %}
+<section class="quiet">
+	<p>
+		<ul>
+			{% for title in post_titles %}
+			<li>{{ title }}</li>
+			{% endfor %}
+		</ul>
+	</p>
+<section>
+{% endblock %}
diff --git a/templates/styles.css b/templates/styles.css
new file mode 100644
index 0000000..68eae3b
--- /dev/null
+++ b/templates/styles.css
@@ -0,0 +1,272 @@
+/* Colors */
+:root {
+	--darkteal: rgb(0, 100, 108);
+	--green: rgb(88, 169, 143);
+	--darkerteal: rgb(29, 133, 137);
+	--gray: rgb(157, 210, 211);
+	--teal: rgb(58, 165, 166);
+	--cyan: rgb(156, 210, 210);
+	--darkgray: rgb(127, 177, 181);
+	--darkgreen: rgb(59, 136, 114);
+	--yellow: rgb(186, 214, 187);
+}
+
+/* Elements */
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "PT Sans", sans-serif;
+	color: dimgray;
+}
+
+body {
+	background-image: url("/assets/bg.png");
+}
+
+.banner {
+	font-size: 1em;
+	text-align: center;
+	padding: 3em;
+	background-color: white;
+}
+
+nav {
+	display: flex;
+	background-color: white;
+	flex-direction: column-reverse;
+}
+
+nav img {
+	height: 1.4em;
+}
+
+nav a {
+	font-family: "PT Sans", sans-serif;
+	color: dimgray;
+	text-align: center;
+	text-decoration: none;
+	padding: 1em 1em;
+	transition: 0.15s;
+}
+
+nav a:hover {
+	color: var(--darkteal);
+	background-color: lightgray;
+}
+
+div.buttons {
+	display: flex;
+	flex-direction: column;
+}
+
+h1 {
+	font-size: 3em;
+	color: var(--darkteal);
+	font-family: "Architects Daughter", cursive;
+}
+
+h2 {
+	font-size: 2em;
+	color: var(--darkteal);
+	font-family: "Indie Flower", cursive;
+}
+
+em {
+
+	color: var(--darkteal);
+}
+
+section {
+	font-size: 1.5em;
+	margin: 0;
+	padding: 1em;
+}
+
+section.quiet {
+	background-color: white;
+}
+
+section.squarshed {
+	padding-bottom: 1em;
+	padding-top: 1em;
+}
+
+.button img {
+	margin-right: 1em;
+}
+
+button.button,
+a.button {
+	display: flex;
+	align-items: center;
+	background-color: var(--teal);
+	padding-left: 1em;
+	padding-right: 1em;
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+	margin-right: 0.5em;
+	margin-bottom: 0.5em;
+	text-decoration: none;
+	color: white;
+	border-radius: 3em;
+	transition: 0.15s;
+}
+
+button.button:hover,
+a.button:hover {
+	box-shadow: 0 4px 8px 0 lightgray, 0 6px 20px 0 lightgray;
+}
+
+button {
+	font-family: "PT Sans", sans-serif;
+	border: none;
+	font-size: 0.75em;
+}
+
+a.primary {
+	background-color: var(--darkteal);
+}
+
+footer {
+	background-color: white;
+	text-align: center;
+	padding: 3em;
+	font-size: 1.5em;
+}
+
+footer a,
+section a {
+	color: var(--darkteal);
+	text-decoration: underline;
+}
+
+.card {
+	font-size: 0.9em;
+	background-color: white;
+	padding: 1em;
+	border-radius: 1em;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+form input,
+form textarea {
+	font-family: "PT Sans", sans-serif;
+	margin-bottom: 1.5em;
+	box-sizing: border-box;
+	width: 100%;
+	border: 1px solid lightgray;
+	padding: 1em;
+}
+
+form input {
+	border-radius: 3em;
+}
+
+textarea {
+	border-radius: 1em;
+	resize: none;
+}
+
+/* honeypot */
+textarea#beehive {
+	display: none;
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+table caption {
+	text-align: left;
+}
+
+table th {
+	text-align: right;
+	color: var(--darkteal);
+}
+
+table td,
+table th {
+	vertical-align: bottom;
+}
+
+tr:nth-child(even) {
+	background-color: lightgray;
+}
+
+picture img {
+	width: 100%;
+}
+
+.shadowy img {
+	box-shadow: 0 4px 8px 0 dimgray, 0 6px 20px 0 dimgray;
+}
+
+figcaption {
+	text-align: right;
+	color: var(--darkteal);
+	font-family: "Architects Daughter", cursive;
+}
+
+section.flexible {
+	display: flex;
+	flex-direction: column;
+}
+
+#reviews .card,
+#offerings .card {
+	margin: 1em;
+	text-align: center;
+}
+
+#reviews,
+#offerings {
+	padding-left: 0;
+	padding-right: 0;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.modal {
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: white;
+	background-color: rgba(1, 1, 1, 0.4);
+	overflow: auto;
+	display: none;
+	font-size: 1.5em;
+}
+
+.modal .card {
+	max-height: 90%;
+	max-width: 60%;
+}
+
+.modal a,
+.card a.button {
+	float: right;
+}
+
+:target.modal {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+:target.modal .card {
+	overflow: auto;
+}
+
+.centered {
+	text-align: center;
+	justify-content: center;
+}