From 84c9841d7b89533feacb486d4651b5b180f70bd8 Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Tue, 28 Dec 2021 14:16:06 +0100
Subject: [PATCH] Move styles to $lib

---
 src/components/Footer.css.ts                |  4 +--
 src/components/Nav.css.ts                   |  4 +--
 src/components/blog/ArticleFooter.css.ts    | 27 +++++-----------
 src/components/blog/ArticleFooter.svelte    |  4 ++-
 src/components/portfolio/work.css.ts        | 15 +++++++++
 src/components/portfolio/workhistory.svelte | 35 ---------------------
 src/{ => lib}/styles/global.css.ts          |  0
 src/lib/styles/scoops.css.ts                | 10 ++++++
 src/{ => lib}/styles/sprinkles.css.ts       |  0
 src/{ => lib}/styles/vars.css.ts            |  0
 src/routes/__layout.svelte                  |  2 +-
 src/routes/blog/blog.css.ts                 |  2 +-
 src/routes/blog/index.css.ts                |  4 +--
 src/routes/index.css.ts                     |  2 +-
 src/routes/layout.css.ts                    |  4 +--
 src/routes/portfolio/index.css.ts           |  2 +-
 src/styles/variables.module.less            | 35 ---------------------
 17 files changed, 48 insertions(+), 102 deletions(-)
 create mode 100644 src/components/portfolio/work.css.ts
 delete mode 100644 src/components/portfolio/workhistory.svelte
 rename src/{ => lib}/styles/global.css.ts (100%)
 create mode 100644 src/lib/styles/scoops.css.ts
 rename src/{ => lib}/styles/sprinkles.css.ts (100%)
 rename src/{ => lib}/styles/vars.css.ts (100%)
 delete mode 100644 src/styles/variables.module.less

diff --git a/src/components/Footer.css.ts b/src/components/Footer.css.ts
index cd65c3c..2aa28af 100644
--- a/src/components/Footer.css.ts
+++ b/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({
diff --git a/src/components/Nav.css.ts b/src/components/Nav.css.ts
index c21e052..e8496de 100644
--- a/src/components/Nav.css.ts
+++ b/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({
diff --git a/src/components/blog/ArticleFooter.css.ts b/src/components/blog/ArticleFooter.css.ts
index 52f476f..b25708c 100644
--- a/src/components/blog/ArticleFooter.css.ts
+++ b/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',
+})
diff --git a/src/components/blog/ArticleFooter.svelte b/src/components/blog/ArticleFooter.svelte
index 79b6251..d4d4950 100644
--- a/src/components/blog/ArticleFooter.svelte
+++ b/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>
diff --git a/src/components/portfolio/work.css.ts b/src/components/portfolio/work.css.ts
new file mode 100644
index 0000000..80e297f
--- /dev/null
+++ b/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',
+})
diff --git a/src/components/portfolio/workhistory.svelte b/src/components/portfolio/workhistory.svelte
deleted file mode 100644
index 95d54d2..0000000
--- a/src/components/portfolio/workhistory.svelte
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/styles/global.css.ts b/src/lib/styles/global.css.ts
similarity index 100%
rename from src/styles/global.css.ts
rename to src/lib/styles/global.css.ts
diff --git a/src/lib/styles/scoops.css.ts b/src/lib/styles/scoops.css.ts
new file mode 100644
index 0000000..a567293
--- /dev/null
+++ b/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)
+  )}`,
+})
diff --git a/src/styles/sprinkles.css.ts b/src/lib/styles/sprinkles.css.ts
similarity index 100%
rename from src/styles/sprinkles.css.ts
rename to src/lib/styles/sprinkles.css.ts
diff --git a/src/styles/vars.css.ts b/src/lib/styles/vars.css.ts
similarity index 100%
rename from src/styles/vars.css.ts
rename to src/lib/styles/vars.css.ts
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 965eb3f..7a1a0b9 100644
--- a/src/routes/__layout.svelte
+++ b/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
diff --git a/src/routes/blog/blog.css.ts b/src/routes/blog/blog.css.ts
index d7d11fa..5bd8a6c 100644
--- a/src/routes/blog/blog.css.ts
+++ b/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({})
 
diff --git a/src/routes/blog/index.css.ts b/src/routes/blog/index.css.ts
index 05f8948..9ed2464 100644
--- a/src/routes/blog/index.css.ts
+++ b/src/routes/blog/index.css.ts
@@ -1,6 +1,6 @@
 import { globalStyle } from '@vanilla-extract/css'
-import { vars } from '../../styles/vars.css'
-import { sprinkles } from '../../styles/sprinkles.css'
+import { vars } from '$lib/styles/vars.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const postListClass = sprinkles({
   padding: 'none',
diff --git a/src/routes/index.css.ts b/src/routes/index.css.ts
index 3019c7c..430e37d 100644
--- a/src/routes/index.css.ts
+++ b/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',
diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts
index fce9fbb..4c963a4 100644
--- a/src/routes/layout.css.ts
+++ b/src/routes/layout.css.ts
@@ -1,6 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../src/styles/vars.css'
-import { sprinkles } from '../../src/styles/sprinkles.css'
+import { vars } from '$lib/styles/vars.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const appContentClass = style([
   sprinkles({
diff --git a/src/routes/portfolio/index.css.ts b/src/routes/portfolio/index.css.ts
index d13d83f..bd6047c 100644
--- a/src/routes/portfolio/index.css.ts
+++ b/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',
diff --git a/src/styles/variables.module.less b/src/styles/variables.module.less
deleted file mode 100644
index 86e2faa..0000000
--- a/src/styles/variables.module.less
+++ /dev/null
@@ -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;