diff --git a/src/templates/cap-about-page.js b/src/templates/cap-about-page.js
index 7ece980..dd49461 100644
--- a/src/templates/cap-about-page.js
+++ b/src/templates/cap-about-page.js
@@ -1,4 +1,5 @@
-import { LitElement, html } from "../lib/lit.js";
+import { LitElement, html, css } from "../lib/lit.js";
+import { baseStyles } from "../lib/wc-base.js";
import "../components/cap-nav.js";
import "../components/cap-page-header.js";
import "../components/cap-footer.js";
@@ -9,19 +10,192 @@ import "../components/cap-contributor-list.js";
import { anchorLinks } from "../data/aboutSidebarLinks.js";
export class CapAboutPage extends LitElement {
- // Turn Shadow DOM off
- // Generally discouraged: https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot
- createRenderRoot() {
- return this;
+ static properties = {};
+
+ constructor() {
+ super();
+ }
+
+ static styles = [
+ baseStyles,
+ css`
+ p,
+ ul {
+ font-family: var(--font-sans-text);
+
+ @media (min-width: 35rem) {
+ font-size: var(--font-size-175);
+ }
+ }
+
+ ul {
+ padding-inline-start: 1.8rem;
+ list-style-position: outside;
+ }
+
+ li {
+ list-style-type: circle;
+ }
+
+ h2 {
+ font-size: var(--font-size-200);
+ font-weight: 600;
+
+ @media (min-width: 35rem) {
+ font-size: var(--font-size-250);
+ }
+ }
+
+ h3 {
+ font-size: var(--font-size-175);
+
+ @media (min-width: 35rem) {
+ font-size: var(--font-size-200);
+ }
+ }
+
+ h4 {
+ font-size: var(--font-size-100);
+
+ @media (min-width: 35rem) {
+ font-size: var(--font-size-175);
+ }
+ }
+
+ a:link,
+ a:visited,
+ a:active {
+ text-decoration: none;
+ color: var(--color-blue-400);
+ }
+
+ a:hover {
+ color: var(--color-blue-500);
+ text-decoration: underline;
+ }
+
+ .interiorMain {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+
+ @media (min-width: 65rem) {
+ max-width: 80%;
+ margin-inline: auto;
+ box-shadow: 0 0 27px 0 rgba(222, 222, 230, 0.46);
+ }
+ }
+
+ .interiorMain__header {
+ background-color: var(--color-gray-500);
+ grid-column: 1 / -1;
+ }
+
+ .interiorMain__description {
+ color: var(--color-white);
+ font-family: var(--font-serif);
+ }
+
+ .interiorMain__aside {
+ @media (max-width: 60rem) {
+ display: none;
+ }
+ }
+
+ .interiorMain__article {
+ grid-column: 1 / -1;
+ background-color: var(--color-beige);
+ padding-inline: var(--spacing-500);
+ padding-block-start: var(--spacing-300);
+ padding-block-end: var(--spacing-550);
+
+ @media (min-width: 60rem) {
+ grid-column: 2 / -1;
+ }
+ }
+
+ .interiorMain__article + .interiorMain__article {
+ padding-block-start: 0;
+ }
+
+ .interiorMain__article * + * {
+ margin-block-start: var(--spacing-100);
+
+ @media (min-width: 35rem) {
+ margin-block-start: var(--spacing-200);
+ }
+ }
+
+ .interiorMain__decorator + * {
+ margin-block-start: var(--spacing-100);
+ }
+
+ .interiorMain__decorator {
+ font-weight: 400;
+ color: var(--color-blue-500);
+ position: relative;
+ }
+
+ .interiorMain__decorator::before {
+ content: "§";
+ color: var(--color-yellow);
+ position: absolute;
+ font-size: 1.5rem;
+ line-height: 1.2;
+ transform: translateX(calc(-100% - 0.5rem)) translateY(5%);
+ }
+
+ @media screen and (min-width: 35rem) {
+ .interiorMain__decorator::before {
+ font-size: 2rem;
+ line-height: 1.5;
+ }
+ }
+
+ .interiorMain__emphasis {
+ color: var(--color-purple-200);
+ }
+ `,
+ ];
+
+ connectedCallback() {
+ super.connectedCallback();
+ window.addEventListener("hashchange", this.handleHashChange.bind(this));
+ }
+
+ updated() {
+ // if a person navigates directly to a URL with a hash, handle it on load
+ this.handleHashChange();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ window.removeEventListener("hashchange", this.handleHashChange.bind(this));
+ }
+
+ /*
+ In order to preserve encapsulation in the shadow DOM, we need to recreate
+ the ability to navigate to the anchor tags for each link.
+ Potentially we could have rendered to the window's DOM, but that will be
+ potentially problematic when we have to render case HTML, so I started
+ using this pattern here.
+ */
+ handleHashChange() {
+ const hash = window.location.hash.substring(1); // remove the '#'
+ if (hash) {
+ const element = this.shadowRoot.getElementById(hash);
+ if (element) {
+ element.scrollIntoView();
+ }
+ }
}
render() {
return html`
-
-
+
+
-
+
The Caselaw Access Project (“CAP”) expands public access to U.S.
law. Our goal is to make all published U.S. court decisions freely
available to the public online, in a consistent format, digitized
@@ -29,11 +203,11 @@ export class CapAboutPage extends LitElement {
-