From 5926a89b983119a0b8f4f2ef12afe89204d1d84e Mon Sep 17 00:00:00 2001
From: Dan Grebb <git@dgrebb.com>
Date: Mon, 5 Feb 2024 23:11:07 -0500
Subject: [PATCH] wip(front): update styles for experience aside (#963)

---
 .../src/lib/components/general/Aside/Aside.svelte |  7 ++++++-
 .../components/general/Aside/AsideGroup.svelte    | 15 ++++++++++++---
 .../lib/components/general/PageNav/PageNav.svelte |  2 +-
 .../PageNav => styles/components}/page-nav.css    |  3 ++-
 front/src/lib/styles/global.css                   |  3 ++-
 front/src/lib/styles/pages/cv.css                 |  6 ++++--
 6 files changed, 27 insertions(+), 9 deletions(-)
 rename front/src/lib/{components/general/PageNav => styles/components}/page-nav.css (99%)

diff --git a/front/src/lib/components/general/Aside/Aside.svelte b/front/src/lib/components/general/Aside/Aside.svelte
index b6b1eb5ba..bf92a8bd1 100644
--- a/front/src/lib/components/general/Aside/Aside.svelte
+++ b/front/src/lib/components/general/Aside/Aside.svelte
@@ -1,4 +1,8 @@
-<aside class="collection__aside">
+<script>
+  import '@styles/components/page-nav.css';
+</script>
+
+<aside class="collection__aside page-navigation">
   <!-- TODO: Each artifact type should have a component 
   to match, which is dynamically selected by artifact type  -->
 
@@ -46,6 +50,7 @@
 <style lang="postcss">
   .collection__aside {
     float: right;
+    opacity: 0.85;
     padding-left: 2rem;
     width: 25%;
   }
diff --git a/front/src/lib/components/general/Aside/AsideGroup.svelte b/front/src/lib/components/general/Aside/AsideGroup.svelte
index cd03f4c68..41a1cb86d 100644
--- a/front/src/lib/components/general/Aside/AsideGroup.svelte
+++ b/front/src/lib/components/general/Aside/AsideGroup.svelte
@@ -3,12 +3,21 @@
 </script>
 
 <h2>{title}</h2>
-<ul class="{collection}__{title}">
+<ul class="{collection}__{title} page-navigation-list">
   {#each items as { attributes: { name, slug } }}
     <li><a href="/cv/{singleton}/{slug}">{name}</a></li>
   {/each}
 </ul>
 
-<style>
-  /* your styles go here */
+<style lang="postcss">
+  .page-navigation-list {
+    & a {
+      color: var(--link-clr);
+      &:hover,
+      &:focus,
+      &:focus-visible {
+        color: var(--link-clr--hover);
+      }
+    }
+  }
 </style>
diff --git a/front/src/lib/components/general/PageNav/PageNav.svelte b/front/src/lib/components/general/PageNav/PageNav.svelte
index a0fbc1017..310730138 100644
--- a/front/src/lib/components/general/PageNav/PageNav.svelte
+++ b/front/src/lib/components/general/PageNav/PageNav.svelte
@@ -5,7 +5,7 @@
   import { categoryClick, relatedClick } from '@utils/uiHelpers.js';
   import { focusTrap } from '@utils/actions.js';
   import ListIcon from '~icons/gg/list';
-  import './page-nav.css';
+  import '@styles/components/page-nav.css';
   const { post: postPath, category: categoryPath } = PATHS.one;
   const categoriesPath = PATHS.many.categories;
 
diff --git a/front/src/lib/components/general/PageNav/page-nav.css b/front/src/lib/styles/components/page-nav.css
similarity index 99%
rename from front/src/lib/components/general/PageNav/page-nav.css
rename to front/src/lib/styles/components/page-nav.css
index 8b33222d6..0ea156b99 100644
--- a/front/src/lib/components/general/PageNav/page-nav.css
+++ b/front/src/lib/styles/components/page-nav.css
@@ -1,6 +1,7 @@
 .meat .page-navigation {
   h2,
-  li {
+  li,
+  p {
     text-align: right;
   }
   h2 {
diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css
index a44d545da..be8a3ec4c 100644
--- a/front/src/lib/styles/global.css
+++ b/front/src/lib/styles/global.css
@@ -118,7 +118,8 @@ body {
 .footer a,
 .privacy a,
 .category-posts-list .post-item-summary a,
-.cv a,
+.cv article section a,
+.cv .timeline a,
 .not-found a {
   transition-duration: var(--transition-duration);
   transition-property: color, border-color;
diff --git a/front/src/lib/styles/pages/cv.css b/front/src/lib/styles/pages/cv.css
index 1a27bc88f..63e0d20a9 100644
--- a/front/src/lib/styles/pages/cv.css
+++ b/front/src/lib/styles/pages/cv.css
@@ -1,7 +1,8 @@
 @import '../components/cv-timeline.css';
 
 .cv.meat {
-  width: 100%;
+  padding: 2.33rem;
+  max-width: 64rem;
   h1.page-heading {
     font-family: var(--font-psbl);
     letter-spacing: -0.0875rem;
@@ -330,7 +331,8 @@
       }
     }
     a {
-      padding-bottom: 0.5rem;
+      border: none;
+      padding-bottom: 0;
     }
   }
   .experience-timeline-date,