Convert global styles to vanilla styles

src/components/Footer.css.ts

@@ -123,7 +123,7 @@ export const bottomLineClass = sprinkles({
   display: 'flex',
   justifyContent: 'space-between',
   marginX: 'auto',
-  marginBottom: '1x',
+  paddingBottom: '1x',
   marginTop: '2x',
   maxWidth: 'max',
 })

src/components/SvgIcon.svelte

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

src/routes/__layout.svelte

@@ -19,6 +19,8 @@
 <script lang="ts">
   import Nav from '../components/Nav.svelte'
   import Footer from '../components/Footer.svelte'
+  import 'modern-normalize/modern-normalize.css'
+  import '../styles/global.css'
   import { mainContentClass } from './layout.css'
 
   export let segment
@@ -33,57 +35,3 @@
   </main>
   <Footer {latestPosts} />
 </div>
-
-<style global lang="less">
-  @import '../styles/global.module.less';
-
-  main {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p,
-    ul,
-    ol,
-    figure,
-    img,
-    blockquote,
-    iframe,
-    footer {
-      max-width: 42rem;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    h1 {
-      max-width: 52rem;
-    }
-    h2 {
-      max-width: 46rem;
-    }
-    pre,
-    pre[class*='language-'] {
-      max-width: 48rem;
-      margin-left: auto;
-      margin-right: auto;
-    }
-    figure {
-      max-width: @max-image-size;
-    }
-    iframe {
-      max-width: 46rem;
-      display: block;
-    }
-    footer {
-      max-width: 52rem;
-    }
-
-    img {
-      width: 100%;
-      border-radius: 5px;
-      box-shadow: @content-box-shadow;
-    }
-  }
-</style>

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 '../../../src/styles/vars.css'
 
 export const contentClass = style({})
 

src/routes/layout.css.ts

@@ -1,4 +1,5 @@
-import { style } from '@vanilla-extract/css'
+import { globalStyle, style } from '@vanilla-extract/css'
+import { vars } from '../../src/styles/vars.css'
 import { sprinkles } from '../../src/styles/sprinkles.css'
 
 export const appContentClass = style([
@@ -8,7 +9,6 @@ export const appContentClass = style([
   {
     gridTemplateRows: 'auto 1fr auto',
     gridTemplateColumns: '100%',
-    minHeight: '100vh',
   },
 ])
 
@@ -16,3 +16,46 @@ export const mainContentClass = sprinkles({
   position: 'relative',
   padding: '3x',
 })
+
+// Layout global styles
+
+globalStyle(
+  `${mainContentClass} h1, ${mainContentClass} h2, ${mainContentClass} h3, ${mainContentClass} h4, ${mainContentClass} h5, ${mainContentClass} h6, ${mainContentClass} p, ${mainContentClass} ul, ${mainContentClass} ol, ${mainContentClass} figure, ${mainContentClass} img, ${mainContentClass} blockquote, ${mainContentClass} iframe, ${mainContentClass} footer`,
+  {
+    maxWidth: vars.width.layoutMax,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  }
+)
+
+globalStyle(`${mainContentClass} h1, ${mainContentClass} footer`, {
+  maxWidth: vars.width.headerFooterMax,
+})
+
+globalStyle(`${mainContentClass} h2`, {
+  maxWidth: vars.width.additionalBlockMax,
+})
+
+globalStyle(`${mainContentClass} iframe`, {
+  maxWidth: vars.width.additionalBlockMax,
+  display: 'block',
+})
+
+globalStyle(`${mainContentClass} img`, {
+  width: vars.width.parent,
+  borderRadius: 5,
+  boxShadow: vars.boxShadow.contentBoxShadow,
+})
+
+globalStyle(`${mainContentClass} figure`, {
+  maxWidth: vars.width.image,
+})
+
+globalStyle(
+  `${mainContentClass} pre, ${mainContentClass} pre[class*="language-"]`,
+  {
+    maxWidth: vars.width.additionalBlockMax,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  }
+)

src/styles/global.css.ts

@@ -0,0 +1,152 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { breakpoints, colors, vars } from './vars.css'
+
+globalStyle('html', {
+  scrollBehavior: 'smooth',
+})
+
+globalStyle('body', {
+  margin: 0,
+  fontFamily:
+    'cantarell, roboto, -apple-system, blinkmacsystemfont, segoe ui, oxygen, ubuntu, fira sans, droid sans, helvetica neue, sans-serif',
+  fontSize: '16px',
+  lineHeight: 1.65,
+  color: vars.color.articleText,
+  background: vars.color.background,
+  minHeight: '100vh',
+  '@media': {
+    [`screen and (min-width: ${breakpoints.s}px)`]: {
+      fontSize: '18px',
+    },
+    [`screen and (min-width: ${breakpoints.m}px)`]: {
+      fontSize: '24px',
+    },
+  },
+})
+
+globalStyle('h1, h2, h3, h4, h5, h6', {
+  marginTop: vars.space['2x'],
+  marginBottom: vars.space['1x'],
+  marginLeft: vars.space.none,
+  marginRight: vars.space.none,
+  lineHeight: vars.lineHeight['1x'],
+  color: vars.color.header,
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+})
+
+globalStyle('h1', {
+  fontSize: vars.fontSize['5x'],
+  fontWeight: 800,
+})
+
+globalStyle('h2', {
+  fontSize: vars.fontSize['4x'],
+  fontWeight: 700,
+})
+
+globalStyle('h3', {
+  fontSize: vars.fontSize['3x'],
+})
+
+globalStyle('h4', {
+  fontSize: vars.space['2x'],
+})
+
+globalStyle('a', {
+  textDecoration: 'none',
+  transition: 'color 0.2s',
+})
+
+globalStyle('a:link', {
+  color: vars.color.link,
+})
+
+globalStyle('a:hover', {
+  color: vars.color.linkHover,
+  textDecoration: 'underline',
+})
+
+globalStyle('a:visited', {
+  color: vars.color.linkVisited,
+})
+
+globalStyle('a:visited:hover', {
+  color: vars.color.linkVisitedHover,
+})
+
+globalStyle('main pre, main pre[class*="language-"], main :not(pre) > code', {
+  fontFamily: 'menlo, inconsolata, monospace',
+  backgroundColor: vars.color.codeBackground,
+  paddingTop: vars.space['1x'],
+  paddingBottom: vars.space['1x'],
+  paddingLeft: vars.space['2x'],
+  paddingRight: vars.space['2x'],
+  color: vars.color.code,
+  lineHeight: vars.lineHeight['0x'],
+  boxShadow: vars.boxShadow.codeBoxShadow,
+  borderRadius: 3,
+})
+
+globalStyle('main code, main code[class*="language-"]', {
+  fontSize: vars.fontSize.sm,
+  '@media': {
+    [`screen and (min-width: ${breakpoints.m}px)`]: {
+      fontSize: vars.fontSize.xs,
+    },
+  },
+})
+
+globalStyle('code', {
+  whiteSpace: 'pre-line',
+})
+
+globalStyle('pre code', {
+  whiteSpace: 'pre',
+})
+
+globalStyle('figure', {
+  marginTop: vars.space['2x'],
+  marginBottom: vars.space['2x'],
+  marginLeft: vars.space['1x'],
+  marginRight: vars.space['1x'],
+  textAlign: 'center',
+})
+
+globalStyle('figcaption', {
+  fontSize: vars.fontSize.xs,
+  fontStyle: 'italic',
+})
+
+globalStyle('blockquote', {
+  lineHeight: vars.lineHeight['2x'],
+  margin: vars.space['0x'],
+  paddingLeft: vars.space['2x'],
+  paddingRight: vars.space['0x'],
+  paddingTop: vars.space['1x'],
+  paddingBottom: vars.space['2x'],
+  background: vars.color.quoteBackground,
+  borderRadius: 3,
+  borderLeft: `2px solid ${colors.tearkiss}`,
+  boxShadow: vars.boxShadow.contentBoxShadow,
+  fontSize: vars.fontSize.sm,
+  overflow: 'auto',
+})
+
+globalStyle('blockquote p', {
+  marginTop: vars.space['0x'],
+  marginBottom: vars.space['0x'],
+})
+
+globalStyle('p', {
+  marginTop: vars.space['1x'],
+  marginBottom: vars.space['1x'],
+})
+
+globalStyle('b, strong', {
+  fontWeight: 600,
+})
+
+globalStyle('::selection', {
+  background: vars.color.selection,
+})

src/styles/global.module.less

@@ -1,157 +0,0 @@
-@import '../../node_modules/modern-normalize/modern-normalize.css';
-@import './variables.module.less';
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  margin: 0;
-  font-family: Cantarell, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI,
-    Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-size: 16px;
-  line-height: 1.65;
-  color: @article-text-color;
-  background: @bg-color;
-  min-height: 1vh;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 1em 0 0.5em 0;
-  line-height: 1.2;
-  // text-shadow: @header-text-shadow;
-  color: @header-color;
-  letter-spacing: -0.01em;
-  font-weight: 500;
-}
-
-h1 {
-  font-size: 2.5em;
-  font-weight: 800;
-}
-
-h2 {
-  font-size: 1.7em;
-  font-weight: 700;
-}
-
-h3 {
-  font-size: 1.5em;
-}
-
-h4 {
-  font-size: 1.3em;
-}
-
-a {
-  text-decoration: none;
-  transition: color 0.2s;
-
-  &:link {
-    color: @link-color;
-  }
-
-  // &:visited {
-  //   color: @link-visited-color;
-  // }
-
-  &:hover {
-    text-decoration: underline;
-    color: @link-hover-color;
-  }
-
-  // &:visited:hover {
-  //   color: @link-visited-hover-color;
-  // }
-}
-
-main {
-  // code,
-  pre,
-  // code[class*='language-'],
-  pre[class*='language-'],
-  :not(pre) > code {
-    font-family: menlo, inconsolata, monospace;
-    background-color: tint(@bg-color, 20%);
-    padding: 0.2em 0.4em;
-    color: lighten(@article-text-color, 15%);
-    line-height: 1em;
-    box-shadow: @code-box-shadow;
-    border-radius: 3px;
-  }
-
-  code,
-  code[class*='language-'] {
-    font-size: 0.76em;
-  }
-}
-
-code {
-  white-space: pre-line;
-
-  pre & {
-    white-space: pre;
-  }
-}
-
-figure {
-  margin: 1em 0.5em;
-  text-align: center;
-}
-
-figcaption {
-  font-size: 0.7em;
-  font-style: italic;
-}
-
-blockquote {
-  line-height: 1.5em;
-  margin: 0.2em;
-  border-left: 2px solid @tearkiss;
-  padding: 0.2em 0.4em 0.2em 0.8em;
-  background: darken(@bg-color, 2%, relative);
-  border-radius: 3px;
-  box-shadow: @content-box-shadow;
-  font-size: 0.9em;
-  overflow: auto;
-
-  p {
-    margin: 0.2em 0;
-  }
-}
-
-p {
-  margin: 0.8em 0;
-  // text-shadow: @text-shadow;
-}
-
-b,
-strong {
-  font-weight: 600;
-}
-
-::selection {
-  background: @selection-color;
-}
-
-@media only screen and (min-width: @media-s) {
-  body {
-    font-size: 18px;
-  }
-}
-
-@media only screen and (min-width: @media-m) {
-  body {
-    font-size: 24px;
-  }
-
-  code,
-  pre {
-    font-size: 0.8em;
-  }
-}

src/styles/sprinkles.css.ts

@@ -54,6 +54,7 @@ const responsiveProperties = defineProperties({
     maxWidth: vars.width,
     height: ['100vh', '100&'],
     listStyle: ['none'],
+    overflow: ['auto'],
   },
   shorthands: {
     padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],

src/styles/vanilla.css.ts

@@ -1,5 +0,0 @@
-import { style } from '@vanilla-extract/css'
-
-export const mainStyle = style({
-  background: '#383',
-})

src/styles/vars.css.ts

@@ -1,5 +1,6 @@
 import { createGlobalTheme } from '@vanilla-extract/css'
 import {
+  darken,
   desaturate,
   lighten,
   mix,
@@ -18,6 +19,9 @@ export const colors = {
 }
 
 export const menuBackground = transparentize(0.6, colors.tearkiss)
+export const background = tint(0.7, colors.lightCyan)
+export const codeBackground = tint(0.2, background)
+export const quoteBackground = darken(0.02, background)
 export const transparent = transparentize(1, '#ffffff')
 const articleText = desaturate(0.16, colors.midnightBlue)
 
@@ -65,13 +69,16 @@ export const vars = createGlobalTheme(':root', {
     linkHover: colors.tearkiss,
     linkVisited: colors.frenchViolet,
     linkVisitedHover: lighten(0.1, colors.frenchViolet),
+    code: lighten(0.15, articleText),
 
     menu: colors.midnightBlue,
     menuLink: colors.midnightBlue,
     menuLinkHover: lighten(0.15, colors.midnightBlue),
 
     header: lighten(0.1, colors.midnightBlue),
-    background: tint(0.7, colors.lightCyan),
+    background,
+    codeBackground,
+    quoteBackground,
     menuBackground,
   },
   fontFamily: {
@@ -84,9 +91,9 @@ export const vars = createGlobalTheme(':root', {
     xl: fontSizeScale(1),
     '2x': fontSizeScale(2),
     '3x': fontSizeScale(3),
-    '4x': fontSizeScale(4),
+    '4x': fontSizeScale(5),
-    '5x': fontSizeScale(5),
+    '5x': fontSizeScale(7),
-    '6x': fontSizeScale(6),
+    '6x': fontSizeScale(9),
   },
   lineHeight: {
     none: '0',
@@ -112,6 +119,16 @@ export const vars = createGlobalTheme(':root', {
       colors.midnightBlue
     )}`,
   },
+  boxShadow: {
+    contentBoxShadow: `0px 0px 2px 1px ${transparentize(
+      0.5,
+      desaturate(0.5, colors.tearkiss)
+    )}`,
+    codeBoxShadow: `inset 0px 0px 2px 1px ${transparentize(
+      0.8,
+      desaturate(0.5, colors.tearkiss)
+    )}`,
+  },
   width: {
     s: '400px',
     m: '700px',
@@ -120,6 +137,9 @@ export const vars = createGlobalTheme(':root', {
     max: '1140px',
     full: '100vw',
     parent: '100%',
+    layoutMax: '42rem',
+    headerFooterMax: '52rem',
+    additionalBlockMax: '46rem',
   },
   height: {
     full: '100hw',