Move styles to $lib

src/components/Footer.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 import { radialGradient, rgba, transparentize } from 'polished'
-import { sprinkles } from '../styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 import {
   breakpoints,
   colors,
@@ -8,7 +8,7 @@ import {
   menuBackground,
   transparent,
   vars,
-} from '../styles/vars.css'
+} from '$lib/styles/vars.css'
 
 export const siteFooterClass = style([
   sprinkles({

src/components/Nav.css.ts

@@ -1,7 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 import { radialGradient, transparentize } from 'polished'
-import { menuBackground, transparent, vars } from '../styles/vars.css'
-import { sprinkles } from '../styles/sprinkles.css'
+import { menuBackground, transparent, vars } from '$lib/styles/vars.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const navigationClass = style([
   sprinkles({

src/components/blog/ArticleFooter.css.ts

@@ -1,7 +1,4 @@
-import { style } from '@vanilla-extract/css'
-import { desaturate, transparentize } from 'polished'
-import { colors } from '../../styles/vars.css'
-import { sprinkles } from '../../styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const tagsListClass = sprinkles({
   listStyle: 'none',
@@ -24,18 +21,10 @@ export const publishedLabelClass = sprinkles({
   color: 'tintedText',
 })
 
-export const footerClass = style([
-  sprinkles({
-    display: 'flex',
-    fontSize: 'sm',
-    justifyContent: 'space-between',
-    paddingTop: '1x',
-    marginTop: '2x',
-  }),
-  {
-    borderTop: `1px solid ${transparentize(
-      0.6,
-      desaturate(0.5, colors.tearkiss)
-    )}`,
-  },
-])
+export const footerClass = sprinkles({
+  display: 'flex',
+  fontSize: 'sm',
+  justifyContent: 'space-between',
+  paddingTop: '1x',
+  marginTop: '2x',
+})

src/components/blog/ArticleFooter.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { horizontalBorderTopClass } from '$lib/styles/scoops.css'
+
   import { format } from 'date-fns'
   import type { PostContent } from '../../routes/blog/_content'
   import {
@@ -12,7 +14,7 @@
   export let post: PostContent
 </script>
 
-<footer class={footerClass}>
+<footer class="{footerClass} {horizontalBorderTopClass}">
   <div class="article-tags">
     {#if post.tags.length > 0}
       <span class="lighten">Tags:</span>

src/components/portfolio/work.css.ts

@@ -0,0 +1,15 @@
+import { sprinkles } from '$lib/styles/sprinkles.css'
+
+export const workFooterClass = sprinkles({
+  marginTop: '1x',
+  paddingTop: '1x',
+  fontSize: 'sm',
+  lineHeight: '1x',
+})
+
+export const workAddressNameClass = sprinkles({
+  fontStyle: 'italic',
+  fontWeight: 'normal',
+  margin: 'none',
+  fontSize: 'base',
+})

src/components/portfolio/workhistory.svelte

@@ -1,35 +0,0 @@
-<section id="workhistory">
-  <h3>Work Experience</h3>
-  <p>
-    I am doing web development for approximately 14 years.
-    I've started at very young age of 14.
-    My very first web site was for promotion web of my own Counter-Strike clan.
-    Then I had an opportunity to create a important registration system
-    for marathon runners for Europe's oldest marathon event.
-    That basically started off my career as a web developer. I had some projects while I was studying in high school and university.
-    After that I started to work full-time as a web developer and gain more experience in developing real-time web applications.
-  </p>
-  
-  <article>
-    <h4>localhost.company s.r.o</h4>
-    <p>localhost.company is a small company which has only around 40 developers and most of them are students.
-      I work in <em>localhost</em> as a <strong>Senior front end developer</strong>. I am focused on delivering a high quality product and to teach and help other colleagues.
-    </p>
-    <p>I've started to work there in October 2018.</p>
-    <span class="location"><em>localhost.company s.r.o</em> Boženy Nemcovej 30, 040 01 Košice, Slovakia</span>
-  </article>
-  <article>
-    <h4>Ness KE s.r.o</h4>
-    <p>I worked in Ness as a <strong>Senior front end developer</strong>. In Ness, I've been able to work for different clients on various projects.</p>
-    <p>I joined Ness as a Junior front end developer and I've been able to quickly proceed to Senior level with my engagement</p>
-    <p>I started to work in March 2013 and left in October 2018.</p>
-    <span class="location"><em>Ness KE s.r.o.</em>Moldavská cesta 10/B, 040 11 Košice, Slovakia</span>
-  </article>
-  <article>
-    <h4>eSOLUTIONS s.r.o.</h4>
-    <p>I worked in eSOLUTIONS as a <strong>extern web developer</strong></p>
-    <p>I was building front-end and back-end for websites and web applications. Mostly using <em>PHP</em>, <em>MySQL</em>, <em>JavaScript</em>, <em>HTML</em>, <em>CSS</em></p>
-    <p>I started to work in 2007 and stopped in 2012.</p>
-    <span class="location"><em>eSOLUTIONS s.r.o.</em> Hroncová 2, Košice, Slovakia</span>
-  </article>
-</section>