wip(scrim-inline): add design

client/src/curriculum/index.scss

@@ -289,9 +289,13 @@
       }
 
       scrim-inline {
+        aspect-ratio: 1.5;
         display: block;
-        height: 14.25rem;
-        width: 22rem;
+        width: 100%;
+      }
+
+      p:has(> scrim-inline:only-child) {
+        margin: 1rem 0;
       }
     }
   }

client/src/curriculum/landing.tsx

@@ -16,6 +16,7 @@ import "./landing.scss";
 import { ProseSection } from "../../../libs/types/document";
 import { PartnerBanner } from "./partner-banner";
 import { useIsServer } from "../hooks";
+import scrimBg from "../assets/curriculum/landing-scrim.png";
 
 const ScrimInline = lazy(() => import("./scrim-inline"));
 
@@ -141,7 +142,15 @@ function About({ section }) {
         <div className="arrow"></div>
         <section className="scrim-wrapper">
           <div className="scrim-border">
-            <Suspense>{!isServer && <ScrimInline url={SCRIM_URL} />}</Suspense>
+            <Suspense>
+              {!isServer && (
+                <ScrimInline
+                  url={SCRIM_URL}
+                  img={scrimBg}
+                  scrimTitle="MDN + Scrimba partnership announcement scrim"
+                />
+              )}
+            </Suspense>
           </div>
           <p>
             Learn our curriculum with high quality, interactive courses from our

client/src/curriculum/scrim-inline.global.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "BarlowCondensed-SemiBold";
+  font-weight: 600;
+  font-display: block;
+  src:
+    local("BarlowCondensed-SemiBold"),
+    url("../assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
+}

client/src/curriculum/scrim-inline.scss

@@ -1,3 +1,8 @@
+:host {
+  display: block;
+  overflow: hidden;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -35,20 +40,24 @@ dialog {
 
 .inner {
   background-color: #000;
+  container-type: size;
   display: flex;
   flex-direction: column;
-  width: 100%;
   height: 100%;
+  position: relative;
+  width: 100%;
 }
 
 .header {
   align-items: center;
+  background: #000;
   display: flex;
   gap: 0.25rem;
   margin: 0;
+  min-height: 1.75rem;
   padding: 0 0.5rem;
   width: 100%;
-  min-height: 1.75rem;
+  z-index: 1;
 
   span {
     color: #fff;
@@ -62,10 +71,10 @@ dialog {
   background-color: #fff;
   cursor: pointer;
   height: 1rem;
-  width: 1rem;
-  mask-size: contain;
   mask-position: center;
   mask-repeat: no-repeat;
+  mask-size: contain;
+  width: 1rem;
 
   &:hover {
     background-color: var(--curriculum-color);
@@ -93,29 +102,71 @@ dialog {
   mask-size: 75%;
 }
 
+.background {
+  background-color: #453c78;
+  background-image: url("../assets/curriculum/scrimba-logo.svg"),
+    url("../assets/curriculum/scrim-hexagons.svg"),
+    url("../assets/curriculum/scrim-bg.png");
+  background-position:
+    calc(100% - 3em) calc(100% - 3.2em),
+    right,
+    center;
+  background-repeat: no-repeat;
+  background-size:
+    auto 0.6em,
+    contain,
+    cover;
+  font-size: 4cqmin;
+  inset: 0;
+  position: absolute;
+
+  h1 {
+    bottom: 0;
+    color: #fff;
+    font-family: "BarlowCondensed-SemiBold", "Inter", sans-serif;
+    font-size: 3em;
+    font-weight: 600;
+    left: 0;
+    line-height: 1;
+    margin: 1em;
+    position: absolute;
+    text-transform: uppercase;
+    text-wrap: balance;
+    width: 60%;
+  }
+}
+
+.background-noise {
+  filter: url("#noise");
+  inset: 0;
+  mix-blend-mode: soft-light;
+  position: absolute;
+}
+
 .open,
 iframe {
   border: 1px solid #000;
-  width: 100%;
   height: 100%;
+  width: 100%;
+  z-index: 1;
 }
 
 .open {
   --color: #8cb4ffcc;
-  cursor: pointer;
-  background-image: var(--img, url("../assets/curriculum/scrim-bg.png"));
-  background-repeat: no-repeat;
+  background-image: var(--scrim-img);
   background-position: center;
+  background-repeat: no-repeat;
   background-size: cover;
+  cursor: pointer;
 
   &:hover {
     --color: #8cb4ffe5;
   }
 
   svg {
     height: 7rem;
-    width: 7rem;
     stroke-width: 2px;
+    width: 7rem;
 
     circle {
       fill: var(--color);

client/src/curriculum/scrim-inline.ts

@@ -2,10 +2,12 @@ import { html, LitElement, PropertyValues } from "lit";
 import { customElement } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { StyleInfo, styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { createComponent } from "@lit/react";
 import React from "react";
 import { CURRICULUM } from "../telemetry/constants";
 
+import "./scrim-inline.global.css";
 import styles from "./scrim-inline.scss?css" with { type: "css" };
 import playSvg from "../assets/curriculum/scrim-play.svg?raw";
 
@@ -18,12 +20,15 @@ class ScrimInline extends LitElement {
   img?: string;
   _imgStyle: StyleInfo = {};
 
+  scrimTitle?: string;
+
   _fullscreen = false;
   _scrimLoaded = false;
 
   static properties = {
     url: { type: String },
     img: { type: String },
+    scrimTitle: { type: String },
     _fullscreen: { state: true },
     _scrimLoaded: { state: true },
   };
@@ -47,7 +52,7 @@ class ScrimInline extends LitElement {
     if (changedProperties.has("img")) {
       this._imgStyle = this.img
         ? {
-            "--img": `url(${this.img})`,
+            "--scrim-img": `url(${this.img})`,
           }
         : {};
     }
@@ -83,10 +88,26 @@ class ScrimInline extends LitElement {
             ? html`
                 <iframe
                   src="${this._fullUrl}"
-                  title="MDN + Scrimba partnership announcement scrim"
+                  title="${ifDefined(this.scrimTitle)}"
                 ></iframe>
               `
             : html`
+                ${this.scrimTitle && !this.img
+                  ? html`<div class="background">
+                      <div class="background-noise">
+                        <svg width="0" height="0">
+                          <filter id="noise">
+                            <feTurbulence
+                              type="fractalNoise"
+                              baseFrequency="0.7"
+                              numOctaves="4"
+                            />
+                          </filter>
+                        </svg>
+                      </div>
+                      <h1>${this.scrimTitle}</h1>
+                    </div>`
+                  : null}
                 <button
                   @click="${this.#open}"
                   class="open"