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

src/routes/index.css.ts

@@ -1,4 +1,12 @@
 import { sprinkles } from '$lib/styles/sprinkles.css'
+import {
+  transparent,
+  twitchEmbedBackground,
+  mediaAt,
+  breakpoints,
+} from '$lib/styles/vars.css'
+import { style } from '@vanilla-extract/css'
+import { radialGradient, transparentize } from 'polished'
 
 export const profilePicClass = sprinkles({
   textAlign: 'center',
@@ -21,3 +29,59 @@ export const welcomeNoteClass = sprinkles({
 export const citeOwnerClass = sprinkles({
   whiteSpace: 'nowrap',
 })
+
+export const twitchStreamPromoClass = style([
+  radialGradient({
+    colorStops: [
+      `${twitchEmbedBackground} 0%`,
+      `${transparentize(1, twitchEmbedBackground)} 60%`,
+    ],
+    extent: '90% 40% at 50% 70%',
+    fallback: transparent,
+  }),
+  {
+    '@media': {
+      [mediaAt(breakpoints.l)]: radialGradient({
+        colorStops: [
+          `${twitchEmbedBackground} 0%`,
+          `${transparentize(1, twitchEmbedBackground)} 100%`,
+        ],
+        extent: '180% 50% at 100% 50%',
+        fallback: transparent,
+      }),
+    },
+  },
+])
+
+export const twitchIframeClass = sprinkles({
+  flexGrow: 1,
+  maxWidth: 'image',
+  aspectRatio: 'monitor',
+  width: {
+    mobile: 'parent',
+    desktop: 'auto',
+  },
+})
+
+export const twitchEmbedClass = sprinkles({
+  display: 'flex',
+  padding: '3x',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: {
+    mobile: 'column',
+    desktop: 'row',
+  },
+  gap: '4x',
+  width: {
+    mobile: 'parent',
+    desktop: 'auto',
+  },
+})
+
+export const twitchAsideClass = sprinkles({
+  width: {
+    mobile: 'parent',
+    desktop: 's',
+  },
+})

src/routes/index.svelte

@@ -4,6 +4,10 @@
     citeOwnerClass,
     mottoClass,
     profilePicClass,
+    twitchAsideClass,
+    twitchEmbedClass,
+    twitchIframeClass,
+    twitchStreamPromoClass,
     welcomeNoteClass,
   } from './index.css'
 </script>
@@ -47,3 +51,36 @@
   . I'll try to share some stories and opinions about things that I'm interested
   in.
 </p>
+
+<section class="twitch-stream-promo {twitchStreamPromoClass}">
+  <h2>Checkout my twitch stream</h2>
+  <div class="twitch-embed {twitchEmbedClass}">
+    <div class="twitch-video {twitchIframeClass}">
+      <iframe
+        title="My twitch channel"
+        src="https://player.twitch.tv/?channel=michalvankodev&parent=michalvanko.dev&parent=localhost&autoplay=false"
+        frameborder="0"
+        scrolling="no"
+        allowfullscreen
+        height="100%"
+        width="100%"
+        class="embed {twitchIframeClass}"
+      />
+    </div>
+    <aside class={twitchAsideClass}>
+      Come hang out and chat with me <strong>every Tuesday and Thursday</strong>
+      afternoon central Europe time. I stream working on my side-projects and talking
+      anything about the developer lifestyle.
+    </aside>
+    <!-- <div class="twitch-chat">
+    <iframe
+      title="Twitch chat"
+      frameborder="0"
+      scrolling="no"
+      src="https://www.twitch.tv/embed/michalvankodev/chat?parent=michalvanko.dev&parent=localhost"
+      height="100%"
+      width="100%"
+    />
+    </div> -->
+  </div>
+</section>

src/routes/layout.css.ts

@@ -14,7 +14,10 @@ export const appContentClass = style([
 
 export const mainContentClass = sprinkles({
   position: 'relative',
-  padding: '3x',
+  padding: {
+    mobile: '3x',
+    desktop: 'none',
+  },
 })
 
 // Layout global styles
@@ -24,7 +27,7 @@ export const mainContentClass = sprinkles({
 // TODO Create atomic classes for maxWidhts and use them everywhere in the content
 
 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`,
+  `${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:not(.embed), ${mainContentClass} footer`,
   {
     maxWidth: vars.width.layoutMax,
     marginLeft: 'auto',
@@ -40,7 +43,7 @@ globalStyle(`${mainContentClass} h2`, {
   maxWidth: vars.width.additionalBlockMax,
 })
 
-globalStyle(`${mainContentClass} iframe`, {
+globalStyle(`${mainContentClass} iframe:not(.embed)`, {
   maxWidth: vars.width.additionalBlockMax,
   display: 'block',
 })