Initial commit

landing/src/app/pages/home.page.scss

@@ -0,0 +1,75 @@
+// The home page's own layout: the grids each section drops its cards into,
+// plus the skip link. Everything else belongs to a component.
+.landing-grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(var(--landing-columns, 3), minmax(0, 1fr));
+  }
+}
+
+.landing-grid--four {
+  @media (min-width: 1024px) {
+    --landing-columns: 4;
+  }
+}
+
+.landing-grid--logos {
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+.landing-issues {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+  padding: 0;
+  list-style: none;
+}
+
+.landing-subsection {
+  margin-top: 3rem;
+}
+
+.landing-subsection__title {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.landing-subsection__lead {
+  margin: 0.375rem 0 0;
+  color: var(--pi-color-grey-600, #5b5b6b);
+}
+
+.landing-form__wrap {
+  max-width: 40rem;
+}
+
+.landing-skip {
+  position: absolute;
+  left: -9999px;
+
+  &:focus {
+    left: 1rem;
+    top: 1rem;
+    z-index: 100;
+    padding: 0.5rem 1rem;
+    background: var(--pi-color-white, #fff);
+    border-radius: 0.5rem;
+  }
+}