⚡ first steps (footer)

src/app-episodes/index.ts

@@ -2,14 +2,12 @@ import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { styles } from "./index.css.js";
 
-const logo = new URL("../../../assets/logo.svg", import.meta.url);
-
 @customElement("app-episodes")
 export class AppEpisodes extends LitElement {
 	static override styles = styles;
 	override render() {
 		return html`
-			<div class="logo"><img alt="open-wc logo" src=${logo} /></div>
+			<div class="logo"></div>
 			<a href="/episodes/1">Episode 1</a>
 		`;
 	}

src/components/c-sronly.ts

@@ -0,0 +1,24 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+const styles = css`
+	:host {
+		position: absolute;
+		clip: rect(1px 1px 1px 1px);
+		clip: rect(1px, 1px, 1px, 1px);
+		padding: 0;
+		border: 0;
+		height: 1px;
+		width: 1px;
+		overflow: hidden;
+	}
+`;
+@customElement("c-sronly")
+export class CSronly extends LitElement {
+	static override styles = styles;
+	override render() {
+		return html`
+			<slot></slot>
+		`;
+	}
+}

src/index.css.ts

@@ -7,14 +7,31 @@ export const styles = css`
 		grid-template-areas:
 			"main"
 			"footer";
-		grid-template-rows: auto 2.5ch;
+		grid-template-rows: auto 4ch;
+		overflow: hidden;
 	}
 
 	main {
 		grid-area: main;
+		overflow: scroll;
 	}
 
 	nav {
 		grid-area: footer;
+
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-evenly;
+		align-items: center;
+		padding: .5ch;
+
+		a {
+			display: block;
+			height: 100%;
+			aspect-ratio: 1;
+		}
+		img {
+			height: 100%;
+		}
 	}
 `;

src/index.ts

@@ -2,8 +2,12 @@ import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { styles } from "./index.css.js";
 import { Router } from "@lit-labs/router";
+
 import * as routeEpisodes from "./app-episodes/routes.js";
 
+import "./components/c-sronly.js";
+const logo = new URL("../../assets/logo.svg", import.meta.url);
+
 @customElement("app-cfpodcasts")
 export class AppCfpodcasts extends LitElement {
 	static override styles = styles;
@@ -12,12 +16,22 @@ export class AppCfpodcasts extends LitElement {
 		...routeEpisodes.routes,
 	]);
 	override render() {
-		console.log(this._routes);
+		console.log(this._routes); // TODO
 		return html`
 			<main>${this._routes.outlet()}</main>
 			<nav>
-				<a href="${this._routes.link("/")}">Home</a>
-				<a href="${this._routes.link(routeEpisodes.path)}">Episodes</a>
+				<a
+					href="${this._routes.link("/")}"
+					title="Home"
+					>
+					<img src=${logo} />
+					<c-sronly>Home</c-sronly>
+				</a>
+				<a
+					href="${this._routes.link(routeEpisodes.path)}"
+					>
+					Episodes
+				</a>
 			</nav>
 		`;
 	}