fix error

_includes/head.njk

@@ -18,11 +18,9 @@
 	<meta property="og:url" content="{{ metadata.url }}{{ page.url }}" />
 	<meta property="og:description" content="{{ metadata.description }}" />
 
-	{#
 	<link rel="icon" type="image/x-icon" href="/favicon.ico">
-	<meta property="og:image" content="" />
-	<meta property="og:image:alt" content="" />
-	#}
+	<meta property="og:image" content="/favicon.ico" />
+	<meta property="og:image:alt" content="the logo for Rachel Guinevere LordKenaga, a dappled multicolor circle with several oval lines surrounding and overlapping. Inside in yellow it reads rglk art." />
 
 	{#
 	<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
@@ -33,6 +31,7 @@
 	<!-- CSS -->
 	<style>{% include "css/main.css" %}</style>
 	<style>{% include "css/nav.css" %}</style>
+	<style>{% include "css/title.css" %}</style>
 	<style>{% getBundle "css" %}</style>
 
   <!-- Fonts -->

_includes/header.njk

@@ -1,7 +1,9 @@
 <header>
 	<nav aria-label="main navigation">
+    <a id="skip" href="#main">skip to main content</a>
+
 	  <a href="/" {% if page.url == "/" %}aria-current="page"{% endif %} title="go home">
-			<img src="/img/RGLK+LOGO.webp" alt="the logo for Rachel Guinevere LordKenaga, a dappled multicolor circle with several oval lines surrounding and overlapping. Inside in yellow it reads rglk art.">
+			<img src="/img/logo.webp" alt="the logo for Rachel Guinevere LordKenaga, a dappled multicolor circle with several oval lines surrounding and overlapping. Inside in yellow it reads rglk art.">
     </a>
 
     <button aria-label="menu" aria-expanded="false" class="menu-button-mobile">

_includes/layouts/base.njk

@@ -6,7 +6,13 @@
 
 	<main id="main">
 
-	<h1>{{ title }}</h1>
+    <div id="title">
+      <div class="triangle triangle-up-left"></div>
+      <div class="triangle triangle-down-left"></div>
+      <div class="triangle triangle-up-right"></div>
+      <div class="triangle triangle-down-right"></div>
+      <h1>{{ title }}</h1>
+    </div>
 
 		<div id="content">
   		{{ content | safe }}

_includes/series.njk

@@ -0,0 +1,13 @@
+<div class="series">
+  <h2>{{ series.data.title }}</h2>
+
+  <div class="imgset">
+    {% for img in series.data.imgs %}
+      <img src="/img/{{ img.src }}" alt="{{ img.alt }}">
+    {% endfor %}
+  </div>
+
+  <div class="blurb">
+    {{ series.content | safe }}
+  </div>
+</div>

css/art.css

@@ -0,0 +1,39 @@
+.series {
+	display: grid;
+	gap: 1rem;
+
+	h2 {
+		text-align: center;
+		grid-area: h2;
+	}
+
+	.imgset {
+		grid-area: img;
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+		max-width: 100%;
+		flex-flow: row wrap;
+
+		img {
+			max-height: 33vh;
+			width: auto;
+		}
+	}
+
+	.blurb {
+		grid-area: blurb;
+	}
+}
+
+.series:nth-child(odd) {
+	grid-template-columns: 3fr 2fr;
+	grid-template-areas:
+		"h2 img"
+		"blurb img"
+		". img";
+
+	h2, .blurb {
+		text-align: right;
+	}
+}

css/home.css

@@ -1,10 +1,10 @@
 .tagline {
 	margin-block: 2rem;
 	p {
-		font-size: 1.2rem;
+		font-size: 1.3rem;
 		font-family: var(--font-headers);
 		text-align: center;
-		color: var(--color-nav-light);
+		color: var(--color-headers);
 	}
 }
 
@@ -24,6 +24,7 @@
 
 	h2 {
 		grid-area: h2;
+		margin-top: 0;
 	}
 	img {
 		grid-area: img;
@@ -39,6 +40,12 @@
 	}
 }
 
+@media (max-width: 650px) {
+	.intro {
+		gap: .5rem;
+	}
+}
+
 .art {
 	grid-template-areas:
 		"h2 img"

css/main.css

@@ -61,7 +61,7 @@ body {
 #content {
 	width: 65%;
 	max-width: 1800px;
-	margin: 1rem auto;
+	margin: 1rem auto 4rem;
 }
 
 @media (max-width: 1100px) {
@@ -73,6 +73,7 @@ body {
 @media (max-width: 650px) {
 	#content {
 		width: 92%;
+		margin-block-end: 2rem;
 	}
 }
 
@@ -97,10 +98,8 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
 	color: var(--color-title-text);
-	background: var(--color-title-bg);
 	font-size: 3rem;
 	text-align: center;
-	padding-block: .4em;
 }
 
 h2, h3, h4, h5, h6 {
@@ -109,11 +108,24 @@ h2, h3, h4, h5, h6 {
 
 h2 {
 	font-size: 2rem;
+	margin-block: 1.5rem 1rem;
+}
+
+h3 {
+	font-size: 1.5rem;
+	margin-block: .8rem;
 }
 
 @media (max-width: 800px) {
 	h1 { font-size: 2rem; }
-	h2 { font-size: 1.5rem; }
+	h2 {
+		font-size: 1.5rem;
+		margin-block: 1rem .5rem;
+	}
+	h3 {
+		font-size: 1.2rem;
+		margin-block-end: .5rem;
+	}
 }
 
 p {
@@ -128,6 +140,7 @@ p {
 
 a {
 	color: var(--color-text);
+	border-radius: .25em;
 	text-decoration-line: underline;
 	text-decoration-style: solid;
 	text-decoration-thickness: .2em;
@@ -141,6 +154,18 @@ a {
 	}
 }
 
+a:focus-visible {
+	outline: .1em solid var(--color-title-bg);
+	text-decoration: none;
+}
+
 a:active {
 	text-decoration-thickness: .4em;
 }
+
+hr {
+	color: var(--color-title-bg);
+	background: var(--color-title-bg);
+	border: none;
+	height: .5rem;
+}

css/nav.css

@@ -10,21 +10,53 @@ nav {
 	a[aria-current="page"] {
 		text-decoration: underline solid .2em var(--color-title-bg);
 	}
+
+	a[aria-current="page"]:focus-visible {
+		text-decoration: none;
+	}
 }
 
 header nav {
+	--font-size: 1.4rem;
+	--header-height: 12vh;
+
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	font-size: 1.4rem;
+	font-size: var(--font-size);
+	line-height: 1;
 
-	> a {
-		height: 5.5rem;
+	#skip {
+		position: absolute;
+		left: -999px;
+		top: auto;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		z-index: -99;
+		background: var(--color-nav-dark);
 	}
 
-	img {
-		height: 100%;
+	#skip:focus-visible {
+		display: inline-block;
+		left: 10%;
+		top: calc((var(--header-height) - var(--font-size)) / 2);
 		width: auto;
+		height: auto;
+		overflow: auto;
+		z-index: 99;
+	}
+
+	a:has(img) {
+		height: calc(var(--header-height) - 1rem);
+		margin: .5rem;
+		border-radius: 1.25em;
+		outline-offset: .15em;
+
+		img {
+			height: 100%;
+			width: auto;
+		}
 	}
 
 	ul {
@@ -34,6 +66,7 @@ header nav {
 		padding: 0;
 		margin-inline: 1rem;
 		gap: 2rem;
+		z-index: 999;
 	}
 
 	button {
@@ -43,28 +76,32 @@ header nav {
 
 @media (max-width: 650px) {
 	header nav {
-		--height: 4.5rem;
-
 		display: grid;
 		grid-template-areas:
 			"home button"
 			"links links";
 		padding: 0;
 
-		> a {
+	 	a:has(img) {
 			grid-area: home;
-			height: var(--height);
+			height: calc(var(--header-height) - 1rem);
+			margin: .5rem;
 		}
 
 		button {
 			grid-area: button;
 			display: unset;
 			margin-inline: 1rem;
-			padding: 1rem;
+			padding: .5rem .75rem;
 			border: none;
 			background: var(--color-nav-dark);
 			color: var(--color-nav-light);
 			cursor: pointer;
+			border-radius: .5em;
+		}
+
+		button:focus-visible {
+			outline: .1em solid var(--color-title-bg);
 		}
 
 		ul[aria-hidden="true"] {
@@ -81,7 +118,7 @@ header nav {
 			border-top: .5rem solid var(--color-title-bg);
 			border-bottom: .5rem solid var(--color-title-bg);
 			position: absolute;
-			top: var(--height);
+			top: var(--header-height);
 			width: 100%;
 
 			a {

css/resume.css

@@ -0,0 +1,42 @@
+h2 {
+	text-align: center;
+}
+
+.listing {
+	display: grid;
+	grid-template-areas:
+		"title title"
+		"location date";
+	margin-block: 1rem;
+
+	h3 {
+		margin-block-end: 0;
+		grid-area: title;
+	}
+
+	p {
+		margin-block: 0;
+
+		&.location {
+			grid-area: location;
+
+			span {
+				font-weight: bold;
+			}
+		}
+
+		&.date {
+			grid-area: date;
+			justify-self: end;
+		}
+	}
+}
+
+@media (max-width: 650px) {
+	.listing {
+		grid-template-areas:
+			"title"
+			"location"
+			"date";
+	}
+}

css/title.css

@@ -0,0 +1,57 @@
+#title {
+	--height: 7rem;
+
+	height: var(--height);
+	width: 100%;
+	background: var(--color-title-bg);
+
+	h1 {
+		line-height: var(--height);
+	}
+
+	.triangle {
+		--color-triangle: rgba(from var(--color-nav-dark) r g b / .33);
+		width: 28vw;
+		height: var(--height);
+		position: absolute;
+	}
+
+	.triangle-up-left {
+		background-image: linear-gradient(to bottom right, var(--color-triangle) 50%, transparent 50.5%);
+	}
+
+	.triangle-down-left {
+		background-image: linear-gradient(to top right, var(--color-triangle) 50%, transparent 50.5%);
+	}
+
+	.triangle-up-right,
+	.triangle-down-right {
+		right: 0;
+	}
+
+	.triangle-up-right {
+		background-image: linear-gradient(to bottom left, var(--color-triangle) 50%, transparent 50.5%);
+	}
+
+	.triangle-down-right {
+		background-image: linear-gradient(to top left, var(--color-triangle) 50%, transparent 50.5%);
+	}
+}
+
+@media (max-width: 650px) {
+	#title {
+		--height: 5rem;
+
+		.triangle {
+			width: 17vw;
+		}
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	#title {
+		.triangle {
+			--color-triangle: rgba(from var(--color-nav-light) r g b / .33);
+		}
+	}
+}

src/art/art.11tydata.js

@@ -0,0 +1,6 @@
+export default {
+	permalink: false,
+	tags: [
+		"art"
+	],
+}

src/art/understory-tarot.md

@@ -0,0 +1,14 @@
+---
+title: understory tarot
+imgs:
+  - src: tarot0.jpeg
+    alt: tarot
+  - src: tarot1.jpeg
+    alt: tarot
+  - src: tarot2.jpeg
+    alt: tarot
+---
+
+This is a test paragraph.
+
+This is a second paragraph.

src/index.njk

@@ -1,6 +1,7 @@
 ---
-title: Rachel Guinevere LordKenaga
+title: home
 ---
+
 {% css %}{% include "css/home.css" %}{% endcss %}
 
 <section class="tagline" aria-label="introductory statement">

src/pages/art.njk

@@ -4,3 +4,8 @@ eleventyNavigation:
   key: art
   order: 2
 ---
+{% css %}{% include "css/art.css" %}{% endcss %}
+
+{% for series in collections["art"] %}
+  {% include "series.njk" %}
+{% endfor %}

src/pages/resume.md

@@ -1,15 +0,0 @@
----
-title: resume
----
-
-## employment
-
-Private Practice Art Therapist/Mental Health Counseling,Sakura Counseling, Seattle and Vashon, Oct  2008- current
-
-King County Crisis Connections, Supervisor, Seattle, April 2009-July 2014
-
-Mental Health Counselor/Art Therapist/Case Manager, Community Psychiatric Clinic, Seattle, Feb 2004-July 2008
-
-Hospice/Eldercare Provider, Seattle (Providence, Care Advocates, Health Unlimited) 1994- Feb 2004
-
-Studio Assistant, Artist Assistant, Life Model 1991- 2000

src/pages/resume.njk

@@ -0,0 +1,57 @@
+---
+title: resume
+---
+{% css %}{% include "css/resume.css" %}{% endcss %}
+
+<h2>employment</h2>
+
+<div class="listing">
+  <h3>Private Practice Art Therapist and Mental Health Counselor</h3>
+  <p class="location"><span>Sakura Counseling,</span> Seattle and Vashon</p>
+  <p class="date">Oct 2008 - present</p>
+</div>
+
+<div class="listing">
+  <h3>Crisis Counselor</h3>
+  <p class="location"><span>King County Crisis Connections,</span> Seattle</p>
+  <p class="date">April 2009 - July 2014</p>
+</div>
+
+<div class="listing">
+  <h3>Mental Health Counselor, Art Therapist, Case Manager</h3>
+  <p class="location"><span>Community Psychiatric Clinic,</span> Seattle</p>
+  <p class="date">Feb 2004 - July 2008</p>
+</div>
+
+<div class="listing">
+  <h3>Hospice/Eldercare Provider</h3>
+  <p class="location"><span>Providence, Care Advocates, Health Unlimited,</span> Seattle</p>
+  <p class="date">1994 - Feb 2004</p>
+</div>
+
+<div class="listing">
+  <h3>Studio Assistant, Artist Assistant, Life Model</h3>
+  <p class="date">1991 - 2000</p>
+</div>
+
+<hr />
+
+<h2>education</h2>
+
+<div class="listing">
+  <h3>Masters in Art Therapy</h3>
+  <p class="location"><span>Antioch University</span></p>
+  <p class="date">2001 - 2004</p>
+</div>
+
+<div class="listing">
+  <h3>BFA in Interdisciplinary Arts, BA in Psychology</h3>
+  <p class="location"><span>University of Washington</span></p>
+  <p class="date">1993 - 1996</p>
+</div>
+
+<div class="listing">
+  <h3>Art Studies</h3>
+  <p class="location"><span>Cornish College of the Arts</span></p>
+  <p class="date">1990 - 1993</p>
+</div>