Add twitch tv banner to the index page

src/lib/styles/sprinkles.css.ts

@@ -33,6 +33,7 @@ const responsiveProperties = defineProperties({
     ],
     alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
     flex: ['1'],
+    gap: vars.space,
     textAlign: ['center', 'justify', 'start', 'end'],
     textShadow: vars.textShadow,
     paddingTop: vars.space,
@@ -55,6 +56,7 @@ const responsiveProperties = defineProperties({
     height: vars.height,
     listStyle: ['none'],
     overflow: ['auto'],
+    aspectRatio: vars.aspectRatio,
   },
   shorthands: {
     padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],

src/lib/styles/vars.css.ts

@@ -19,6 +19,7 @@ export const colors = {
 }
 
 export const menuBackground = transparentize(0.6, colors.tearkiss)
+export const twitchEmbedBackground = transparentize(0.6, colors.pinky)
 export const background = tint(0.7, colors.lightCyan)
 export const codeBackground = tint(0.2, background)
 export const quoteBackground = darken(0.02, background)
@@ -130,6 +131,7 @@ export const vars = createGlobalTheme(':root', {
     )}`,
   },
   width: {
+    auto: 'auto',
     s: '400px',
     m: '700px',
     image: '800px',
@@ -146,4 +148,7 @@ export const vars = createGlobalTheme(':root', {
     parent: '100%',
     image: '640px',
   },
+  aspectRatio: {
+    monitor: '16 / 9',
+  },
 })