michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move styles to $lib

Browse Source
This commit is contained in:
Michal Vanko 2021-12-28 14:16:06 +01:00
parent 6a82394322
commit 84c9841d7b
17 changed files with 48 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer.css.ts
View File

@ -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({

4
src/components/Nav.css.ts
View File

@ -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({

27
src/components/blog/ArticleFooter.css.ts
View File

@ -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',
})

4
src/components/blog/ArticleFooter.svelte
View File

@ -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>

15
src/components/portfolio/work.css.ts Normal file
View File

@ -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',
})

35
src/components/portfolio/workhistory.svelte
View File

@ -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>

0
src/styles/global.css.ts → src/lib/styles/global.css.ts
View File

10
src/lib/styles/scoops.css.ts Normal file
View File

@ -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)
)}`,
})

0
src/styles/sprinkles.css.ts → src/lib/styles/sprinkles.css.ts
View File

0
src/styles/vars.css.ts → src/lib/styles/vars.css.ts
View File

2
src/routes/__layout.svelte
View File

@ -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

2
src/routes/blog/blog.css.ts
View File

@ -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({})

4
src/routes/blog/index.css.ts
View File

@ -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',

2
src/routes/index.css.ts
View File

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

4
src/routes/layout.css.ts
View File

@ -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({

2
src/routes/portfolio/index.css.ts
View File

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

35
src/styles/variables.module.less
View File

@ -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;