Get rid of less

src/components/Nav.css.ts

@@ -78,3 +78,7 @@ export const portfolioPageNavigationLinksClass = sprinkles({
   marginX: 'auto',
   marginY: 'none',
 })
+
+export const portfolioPageNavigationLinkClass = sprinkles({
+  padding: '1x',
+})

src/components/Nav.svelte

@@ -8,6 +8,7 @@
     navigationContentClass,
     navigationLinksClass,
     portfolioPageNavigation,
+    portfolioPageNavigationLinkClass,
     portfolioPageNavigationLinksClass,
     selectedClass,
   } from './Nav.css'
@@ -63,11 +64,22 @@
 {#if segment === '/portfolio'}
   <section class="page-navigation {portfolioPageNavigation}">
     <div class={portfolioPageNavigationLinksClass}>
-      <a href="/portfolio#personal-information">About</a>
-      <a href="/portfolio#skills">Skills</a>
-      <a href="/portfolio#work-history">Work History</a>
-      <a href="/portfolio#projects">Projects</a>
-      <a href="/portfolio#education">Education</a>
+      <a
+        class={portfolioPageNavigationLinkClass}
+        href="/portfolio#personal-information">About</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#skills"
+        >Skills</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#work-history"
+        >Work History</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#projects"
+        >Projects</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#education"
+        >Education</a
+      >
     </div>
   </section>
 {/if}

src/components/SvgIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import svgSprite from '/build/icons-sprite.svg'
+  import svgSprite from '/static/build/icons-sprite.svg'
   export let className: string
   export let name: string
 </script>

src/components/portfolio/project.css.ts

@@ -0,0 +1,10 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const projectScopeClass = style({})
+
+globalStyle(`${projectScopeClass} img`, {
+  float: 'right',
+  width: '25%',
+})
+
+// We need to get rid off the global selectors LOL

src/components/portfolio/project.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { ProjectAttributes } from '../../routes/portfolio/index.json'
+  import { projectScopeClass } from './project.css'
 
   export let project: ProjectAttributes
 </script>
 
-<article class="project">
+<article class="project {projectScopeClass}">
   <h3>{project.name}</h3>
   <section class="description">
     {#if project.image}
@@ -18,10 +19,3 @@
   </section>
   <aside />
 </article>
-
-<style>
-  .project-image {
-    float: right;
-    width: 25%;
-  }
-</style>