wip(front): update styles for experience aside (#963)

dgrebb · Feb 6, 2024 · 5926a89 · 5926a89
1 parent 8002e72
commit 5926a89
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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/...b/components/general/PageNav/page-nav.css → front/src/lib/styles/components/page-nav.css b/...b/components/general/PageNav/page-nav.css → 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
@@ -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
@@ -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,