Convert global styles to vanilla styles

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