rename css/ -> styles/

styles/artist.css

@@ -0,0 +1,89 @@
+.artist {
+  width: 100%;
+  margin: 2rem 0;
+  display: grid;
+  scroll-margin-top: 1rem;
+}
+
+.artist:nth-child(odd) {
+  grid-template:
+    'imgs h3'
+    'imgs desc'
+    'imgs .';
+  grid-template-columns: 45% auto;
+}
+
+.artist:nth-child(even) {
+  grid-template:
+    'h3 imgs'
+    'desc imgs'
+    '. imgs';
+  grid-template-columns: auto 45%;
+}
+
+@media (max-width: 1050px) {
+  .artist:nth-child(n) {
+    grid-template:
+      'imgs'
+      'h3'
+      'desc';
+  }
+}
+
+.fit-contain {
+  object-fit: contain;
+  grid-area: imgs;
+}
+
+.artist img {
+  max-height: 100%;
+  max-width: 100%;
+  border-radius: 1rem;
+}
+
+.artist h3 {
+  grid-area: h3;
+  text-transform: uppercase;
+}
+
+.artist:nth-child(odd) h3 {
+  padding-left: .5rem;
+}
+
+.artist:nth-child(even) h3 {
+  padding-right: .5rem;
+  text-align: right;
+}
+
+.description {
+  grid-area: desc;
+  background-color: var(--color-alt);
+  border-radius: 0 0 1rem 1rem;
+}
+
+.artist:nth-child(odd) .description {
+  margin-left: 1.75rem;
+}
+
+.artist:nth-child(even) .description {
+  margin-right: 1.75rem;
+}
+
+@media (max-width: 1050px) {
+  .artist:nth-child(n) h3 {
+    padding: .5rem 0 0;
+  }
+
+  .artist:nth-child(odd) .description {
+    margin-left: .625rem;
+  }
+
+  .artist:nth-child(even) .description {
+    margin-right: .625rem;
+  }
+}
+
+.description p:last-child {
+  text-align: center;
+  padding-bottom: 1rem;
+}

styles/directory.css

@@ -0,0 +1,48 @@
+#directory {
+  display: grid;
+  flex-flow: row wrap;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 3rem;
+}
+
+@media (max-width: 850px) {
+  #directory {
+    grid-template-columns: 1fr;
+  }
+}
+
+#directory li {
+  list-style: none;
+  border: solid thin var(--color-accent);
+  border-radius: .5rem;
+  outline-offset: .1rem;
+}
+
+@media (any-hover: hover) {
+  #directory li:hover {
+    outline: solid .25rem var(--color-accent);
+  }
+}
+
+#directory li:focus-within {
+  outline: solid .25rem var(--color-accent);
+}
+
+#directory a {
+  text-decoration: none;
+  margin: 0;
+}
+
+#directory a:focus-visible {
+  outline: none; /* outline handled by li:focus-within */
+}
+
+#directory h2 {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+#directory img {
+  margin: 0;
+  border-radius: 0 0 .5rem .5rem;
+}

styles/main.css

@@ -0,0 +1,119 @@
+:root {
+  color-scheme: light dark;
+
+  --color-light: #d5e9ff;
+  --color-light-alt: #beddff;
+  --color-dark: #001a33;
+  --color-dark-alt: #00274b;
+  --color-orange-light: #ff764f;
+  --color-orange-dark: #f55e33;
+
+  --color-bg: light-dark(var(--color-light), var(--color-dark));
+  --color-text: light-dark(var(--color-dark), var(--color-light));
+  --color-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
+  --color-accent: light-dark(var(--color-orange-dark), var(--color-orange-light));
+  --color-accent-flipped: light-dark(var(--color-orange-light), var(--color-orange-dark));
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--color-text);
+  color: var(--color-bg);
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  min-height: 100vh;
+}
+
+#content {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  width: 100%;
+  flex-grow: 1;
+  border-radius: 0 0 2rem 2rem;
+  padding: 1rem 0 2rem;
+}
+
+header,
+main {
+  width: 65%;
+  margin: 0 auto;
+}
+
+@media (max-width: 650px) {
+  header,
+  main {
+    width: 95%;
+  }
+}
+
+@media (min-width: 2000px) {
+  header,
+  main {
+    width: 45%;
+  }
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+h1 {
+  text-align: center;
+  margin: 2rem 0;
+}
+
+h2 {
+  margin: 2rem 0 0;
+}
+
+h2,
+h3 {
+  border-bottom: .25rem solid var(--color-accent);
+}
+
+a {
+  color: var(--color-text);
+  font-weight: bold;
+  text-decoration: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: .25rem;
+  text-decoration-color: var(--color-accent);
+  transition: text-decoration-thickness .5s;
+  margin: 0 .25rem;
+  border-radius: .1rem;
+  outline-offset: .1rem;
+}
+
+a:hover,
+a:active {
+  text-decoration-thickness: .5rem;
+}
+
+a:focus-visible {
+  text-decoration: none;
+  outline: solid .25rem var(--color-accent);
+}
+
+p {
+  background-color: var(--color-alt);
+  color: var(--color-text);
+  padding: .5rem;
+  border-radius: 0 0 1rem 1rem;
+}
+
+main > p {
+  margin-left: 2.5rem;
+}
+
+@media (max-width: 650px) {
+  main > p {
+    margin-left: 1.25rem;
+  }
+}

styles/nav.css

@@ -0,0 +1,74 @@
+/* top nav */
+nav {
+  margin: 0 auto 1.5rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+nav a {
+  text-decoration: none;
+  font-size: 1.2rem;
+  padding: 0 .25rem;
+  border: solid thin var(--color-accent);
+  border-radius: .25rem;
+}
+
+@media (any-hover: hover) {
+  nav a:hover {
+    outline: solid .25rem var(--color-accent);
+  }
+}
+
+#current-page {
+  visibility: hidden;
+}
+
+header img {
+  max-height: 25vh;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+@media (prefers-color-scheme: light) {
+  #logo-dark {
+    display: none;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #logo-light {
+    display: none;
+  }
+}
+
+/* footer */
+footer {
+  width: 95%;
+  margin: 0 auto;
+  padding: 0 0 1rem;
+}
+
+footer p {
+  background-color: var(--color-text);
+  color: var(--color-bg);
+  text-align: center;
+  font-size: .9rem;
+}
+
+footer a {
+  color: var(--color-bg);
+  text-decoration-color: var(--color-accent-flipped);
+}
+
+footer a:focus-visible {
+  outline-color: var(--color-accent-flipped);
+}
+
+#contacts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  column-gap: 3rem;
+  margin: 1rem 0 0;
+}