Changed footer to rely on vanilla extract styles

src/components/Footer.css.ts

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css'
+import { radialGradient, transparentize } from 'polished'
+import {
+  breakpoints,
+  mediaAt,
+  menuBackground,
+  transparent,
+  vars,
+} from '../styles/vars.css'
+
+export const siteFooterStyle = style({
+  fontSize: '0.9em',
+  padding: '2em 0.8em 0',
+  color: vars.color.menuLink,
+
+  ...radialGradient({
+    colorStops: [
+      `${menuBackground}  56%`,
+      `${transparentize(0.4, menuBackground)} 100%`,
+    ],
+    extent: '160% 100% at 100% 100%',
+    fallback: transparent,
+  }),
+
+  '@media': {
+    [mediaAt(breakpoints.m)]: {
+      ...radialGradient({
+        colorStops: [
+          `${menuBackground} 48%`,
+          `${transparentize(1, menuBackground)} 100%`,
+        ],
+        extent: '140% 100% at 100% 100%',
+        fallback: transparent,
+      }),
+    },
+    [mediaAt(breakpoints.l)]: {
+      fontSize: '0.8em',
+    },
+  },
+})

src/components/Footer.svelte

@@ -1,12 +1,13 @@
-<script>
+<script lang="ts">
   import { format } from 'date-fns'
   import type { PostContent } from 'src/routes/blog/_content'
   import SvgIcon from './SvgIcon.svelte'
+  import { siteFooterStyle } from './Footer.css'
 
   export let latestPosts: PostContent[]
 </script>
 
-<footer class="site-footer navigation-theme">
+<footer class="site-footer navigation-theme {siteFooterStyle}">
   <div class="lists">
     <section class="site-map">
       <ul>
@@ -112,10 +113,10 @@
   </footer>
 </footer>
 
-<style>
+<style lang="less">
   @import '../styles/variables.module.less';
 
-  .site-footer {
+  /* .site-footer {
     font-size: 0.9em;
     padding: 2em 0.8em 0em;
     color: @menu-link-color;
@@ -137,7 +138,7 @@
     @media (min-width: @media-l) {
       font-size: 0.8em;
     }
-  }
+  } */
 
   h3 {
     font: inherit;
@@ -211,7 +212,6 @@
 
   .twitch :global(svg),
   .twitch :global(svg rect) {
-    /* fill: rgb(169, 112, 255); */
     fill: @menu-link-color;
   }