focus rings for header and footer

README.md

@@ -1,96 +1,8 @@
-# 11ty Template
+# District Dharma
 
-Template repository for my 11ty projects.
+Home page for District Dharma based out of DC.
 
-## full drone/submodule setup from scratch
+## todo
 
-### 1. create repo
-
-in heckin gitea, create destination repo.
-
-### 2. add dronefile to source repo
-
-Filename: `.drone.yml`, in root of repo. Note the `<vars>` to replace.
-
-```yaml
-kind: pipeline
-type: docker
-name: default
-
-steps:
-  - name: build
-    image: node:current
-    environment:
-      REPOSITORY: <dest-repo>
-      GIT_USER: <username>
-      GIT_TOKEN:
-        from_secret: GIT_TOKEN
-    commands:
-      - git config credential.helper '!f() { echo username=$GIT_USER; echo "password=$GIT_TOKEN"; };f'
-      - git submodule update --remote --init --merge
-      - npm install
-      - npm run build
-      - apt-get update && apt-get install -y rsync
-      - rsync -uavh _site/ $REPOSITORY --delete --exclude .git
-      - cd $REPOSITORY
-      - git checkout main
-      - git config --global --add safe.directory /drone/src/$REPOSITORY
-      - git add -A
-      - git commit -m "drone build $(TZ=':America/Los_Angeles' date)"
-      - git push
-```
-
-### 3. create PAT
-
-in heckin, go to settings > applications, and create a PAT with read & write permissions to repositories.
-
-### 4. activate project in drone and add PAT
-
-in drone, find your project and activate it.
-
-in the settings, I chose to disable pull requests and forks. I set my runner timeout to 15m.
-
-you can set your PAT either as a project secret or an organization secret. In either case call it `GIT_TOKEN`.
-
-### 5. first commit to submodule
-
-assuming we are committing the _site folder...
-
-```sh
-cp -r _site ../temp
-cd ../temp
-
-git init
-git add -A
-git commit -m "first"
-
-git remote add origin <remote-url>
-git push -u origin main
-```
-
-### 6. add submodule to local repo
-
-in root dir of local repo, add the submodule.
-
-```sh
-git submodule add <remote-url>
-```
-
-if you used the SSH url, set it to the HTTPS url.
-
-```sh
-git submodule set-url <dest-repo> <remote-url-https>
-git add .gitmodules # the changes from submodule add are auto-staged, this config change isn't
-```
-
-commit your changes and push.
-
-```sh
-git commit -m "add submodule"
-```
-
-(commit your dronefile changes too.)
-
-### 7. profit
-
-if it doesn't work, cry
+- focus highlighting on home page link
+- email validation message?

_includes/layouts/index.njk

@@ -16,14 +16,14 @@ layout: page.njk
       <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>
+      <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>
+      <p id="email-error" class="error">Email cannot be empty and must be a valid email.</p>
     </div>
   </div>
 
@@ -31,7 +31,7 @@ layout: page.njk
     <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>
+    <p id="message-error" class="error">Message cannot be empty.</p>
   </div>
 
   <button type="submit" class="form-button">Send message</button>

css/main.css

@@ -11,6 +11,7 @@
 	--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-accent-flipped: light-dark(var(--color-blue-light), var(--color-blue-dark));
 	--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
 }
 
@@ -28,8 +29,8 @@
 }
 
 *:focus-visible {
-	outline-offset: .1rem;
-	outline: .1rem solid var(--color-accent);
+	outline-offset: .12rem;
+	outline: .12rem solid var(--color-accent);
 	border-radius: .25rem;
 }
 
@@ -134,13 +135,25 @@ a:visited {
 /* Header/nav/footer */
 header {
 	height: 20vh;
-	padding: 1rem;
+	padding: calc(20vh / 8);
 	background-color: var(--color-accent);
 }
 
 .logo {
 	height: 100%;
 	width: auto;
+	padding: calc(20vh / 30);
+	border: calc(20vh / 50) solid var(--color-accent);
+	border-radius: calc(20vh / 3);
+}
+
+header a:focus-visible {
+	outline: none; /* covered by logo rule below */
+}
+
+header a:focus-visible .logo {
+	border-color: var(--color-text);
+	outline: calc(20vh / 30) solid var(--color-accent-flipped);
 }
 
 @media (prefers-color-scheme: light) {
@@ -170,8 +183,36 @@ footer a:visited {
 	text-decoration-color: var(--color-bg);
 }
 
+footer a:focus-visible {
+	outline: .15rem solid var(--color-accent-flipped);
+}
+
 /* Misc */
 #hero {
 	aspect-ratio: 40 / 9;
 	object-fit: cover;
 }
+
+.inset-left,
+.inset-right {
+	margin-bottom: 1rem;
+}
+
+
+/* only float on larger screens */
+@media (min-width: 551px) {
+	.inset-left,
+	.inset-right {
+		clear: both;
+		width: 40%;
+		margin: .5rem 0;
+	}
+	.inset-left {
+		float: left;
+		margin-right: 1rem;
+	}
+	.inset-right {
+		float: right;
+		margin-left: 1rem;
+	}
+}