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

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>

src/lib/styles/scoops.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css'
+import { desaturate, transparentize } from 'polished'
+import { colors } from './vars.css'
+
+export const horizontalBorderTopClass = style({
+  borderTop: `1px solid ${transparentize(
+    0.6,
+    desaturate(0.5, colors.tearkiss)
+  )}`,
+})

src/routes/__layout.svelte

@@ -20,7 +20,7 @@
   import Nav from '../components/Nav.svelte'
   import Footer from '../components/Footer.svelte'
   import 'modern-normalize/modern-normalize.css'
-  import '../styles/global.css'
+  import '$lib/styles/global.css'
   import { mainContentClass } from './layout.css'
 
   export let segment

src/routes/blog/blog.css.ts

@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../../src/styles/vars.css'
+import { vars } from '$lib/styles/vars.css'
 
 export const contentClass = style({})
 

src/routes/blog/index.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle } from '@vanilla-extract/css'
-import { vars } from '../../styles/vars.css'
+import { vars } from '$lib/styles/vars.css'
-import { sprinkles } from '../../styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const postListClass = sprinkles({
   padding: 'none',

src/routes/index.css.ts

@@ -1,4 +1,4 @@
-import { sprinkles } from '../../src/styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const profilePicClass = sprinkles({
   textAlign: 'center',

src/routes/layout.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../src/styles/vars.css'
+import { vars } from '$lib/styles/vars.css'
-import { sprinkles } from '../../src/styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const appContentClass = style([
   sprinkles({

src/routes/portfolio/index.css.ts

@@ -1,4 +1,4 @@
-import { sprinkles } from '../../../src/styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const linkableSectionClass = sprinkles({
   marginTop: '4x',

src/styles/variables.module.less

@@ -1,35 +0,0 @@
-@tearkiss: #42a6f0;
-@pinky: #fea6eb;
-@light-cyan: #d8f6ff;
-@midnight-blue: #171664;
-@french-violet: #7332c3;
-
-@article-text-color: desaturate(@midnight-blue, 16%);
-@text-shadow: 0.02em 0.02em 0.03em fade(@tearkiss, 20%);
-@selection-color: tint(@pinky, 40%);
-@link-color: saturate(mix(@tearkiss, @midnight-blue, 66%), 20%);
-@link-hover-color: @tearkiss;
-@link-visited-color: @french-violet;
-@link-visited-hover-color: lighten(@link-visited-color, 10%);
-@nice-pink-color: spin(@link-visited-color, 50);
-
-@menu-color: @midnight-blue;
-@menu-link-color: @menu-color;
-@menu-link-hover-color: lighten(@menu-link-color, 15%);
-@menu-link-text-shadow: 0.02em 0.02em 0.03em fade(@menu-link-color, 30%);
-@menu-active-link-text-shadow: 0.01em 0.01em 0.05em fade(@menu-link-color, 90%);
-
-@header-color: lighten(@midnight-blue, 10%);
-@header-text-shadow: 0.015em 0.015em 0.02em fade(@header-color, 40%);
-
-@bg-color: tint(@light-cyan, 70%);
-@menu-bg-color: fade(@tearkiss, 40%);
-
-@content-box-shadow: 0px 0px 2px 1px fade(desaturate(@tearkiss, 50%), 50%);
-@code-box-shadow: inset 0px 0px 2px 1px fade(desaturate(@tearkiss, 50%), 20%);
-
-@media-l: 1000px;
-@media-m: 700px;
-@media-max: 1140px;
-@media-s: 400px;
-@max-image-size: 800px;