docs: home page splash banner styling

Author: thescientist13

docs/components/banner-splash/banner-splash.module.css

@@ -1,3 +1,35 @@
+.container {
+  width: 80%;
+  margin: 0 auto;
+  text-align: center;
+}
+
 .splash {
-  color: red;
+  display: inline-block;
+  background-image: url(/assets/wcc-splash.png);
+  background-repeat: no-repeat;
+  background-size: contain;
+  font-size: var(--size-6);
+  color: var(--color-white);
+  font-weight: bold;
+  width: 100px;
+}
+
+.text {
+  display: inline;
+  font-size: var(--size-6);
+  height: 136px;
+  font-weight: bold;
+}
+
+@media (min-width: 900px) {
+  .splash {
+    width: 297px;
+    height: 136px;
+  }
+
+  .splash,
+  .text {
+    font-size: var(--size-10);
+  }
 }

docs/components/banner-splash/banner-splash.tsx

@@ -7,8 +7,9 @@ export default class BannerSplash extends HTMLElement {
 
   render() {
     return (
-      <h1>
-        <span class={styles.splash}>SSR</span> for Web Components
+      <h1 class={styles.container}>
+        <span class={styles.splash}>SSR</span>
+        <span class={styles.text}> for Web Components</span>
       </h1>
     );
   }