Learn our curriculum with Scrimba's interactive{" "}
diff --git a/client/src/curriculum/scrim-inline.global.css b/client/src/curriculum/scrim-inline.global.css
new file mode 100644
index 000000000000..ac55e7fa316a
--- /dev/null
+++ b/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");
+}
diff --git a/client/src/curriculum/scrim-inline.scss b/client/src/curriculum/scrim-inline.scss
new file mode 100644
index 000000000000..6618fb42ac2f
--- /dev/null
+++ b/client/src/curriculum/scrim-inline.scss
@@ -0,0 +1,184 @@
+:host {
+ display: block;
+ overflow: hidden;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+.visually-hidden {
+ border: 0 !important;
+ clip: rect(1px, 1px, 1px, 1px) !important;
+ -webkit-clip-path: inset(50%) !important;
+ clip-path: inset(50%) !important;
+ height: 1px !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: absolute !important;
+ white-space: nowrap !important;
+ width: 1px !important;
+}
+
+button {
+ appearance: none;
+ background: none;
+ border: none;
+ padding: 0;
+}
+
+dialog {
+ display: contents;
+
+ &[open] {
+ background-color: #0009;
+ height: 90vh;
+ width: 90vw;
+ }
+}
+
+.inner {
+ background-color: #000;
+ border: 1px solid #000;
+ container-type: size;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ 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%;
+
+ span {
+ color: #fff;
+ font-size: var(--type-tiny-font-size);
+ margin-right: auto;
+ }
+}
+
+.toggle,
+.external {
+ background-color: #fff;
+ cursor: pointer;
+ height: 1rem;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ width: 1rem;
+
+ &:hover {
+ background-color: var(--curriculum-color);
+ }
+
+ &:focus-visible {
+ outline-color: var(--accent-primary);
+ outline-offset: 1px;
+ outline-style: auto;
+ }
+}
+
+.toggle {
+ &.enter {
+ mask-image: url("../assets/icons/fullscreen-enter.svg");
+ }
+
+ &.exit {
+ mask-image: url("../assets/icons/cancel.svg");
+ }
+}
+
+.external {
+ mask-image: url("../assets/icons/external.svg");
+ mask-size: 75%;
+}
+
+.body {
+ flex: 1;
+ font-size: 4cqmin;
+ position: relative;
+}
+
+.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:
+ 1.5em 1.5em,
+ right,
+ center;
+ background-repeat: no-repeat;
+ background-size:
+ auto 0.6em,
+ contain,
+ cover;
+ 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: 0.5em;
+ 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: none;
+ height: 100%;
+ position: absolute;
+ width: 100%;
+}
+
+.open {
+ --color: #8cb4ffcc;
+ background-image: var(--scrim-img);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ cursor: pointer;
+ font-size: inherit;
+
+ &:hover {
+ --color: #8cb4ffe5;
+ }
+
+ svg {
+ height: 9em;
+ stroke-width: 2px;
+ width: auto;
+
+ circle {
+ fill: var(--color);
+ }
+
+ path {
+ fill: #fff;
+ }
+ }
+}
diff --git a/client/src/curriculum/scrim-inline.ts b/client/src/curriculum/scrim-inline.ts
index 8696a977d476..196a88ee6204 100644
--- a/client/src/curriculum/scrim-inline.ts
+++ b/client/src/curriculum/scrim-inline.ts
@@ -1,15 +1,14 @@
-import { css, html, LitElement, PropertyValues, unsafeCSS } from "lit";
+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 externalIcon from "../assets/icons/external.svg?url";
-import fullscreenIcon from "../assets/icons/fullscreen-enter.svg?url";
-import cancelIcon from "../assets/icons/cancel.svg?url";
-import backgroundImg from "../assets/curriculum/scrim-bg.png";
+import "./scrim-inline.global.css";
+import styles from "./scrim-inline.scss?css" with { type: "css" };
import playSvg from "../assets/curriculum/scrim-play.svg?raw";
@customElement("scrim-inline")
@@ -21,146 +20,20 @@ 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 },
};
- static styles = css`
- * {
- box-sizing: border-box;
- }
-
- .visually-hidden {
- border: 0 !important;
- clip: rect(1px, 1px, 1px, 1px) !important;
- -webkit-clip-path: inset(50%) !important;
- clip-path: inset(50%) !important;
- height: 1px !important;
- margin: -1px !important;
- overflow: hidden !important;
- padding: 0 !important;
- position: absolute !important;
- white-space: nowrap !important;
- width: 1px !important;
- }
-
- button {
- appearance: none;
- background: none;
- border: none;
- padding: 0;
- }
-
- dialog {
- display: contents;
-
- &[open] {
- background-color: #0009;
- height: 90vh;
- width: 90vw;
- }
- }
-
- .inner {
- background-color: #000;
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- }
-
- .header {
- align-items: center;
- display: flex;
- gap: 0.25rem;
- margin: 0;
- padding: 0 0.5rem;
- width: 100%;
- min-height: 1.75rem;
-
- span {
- color: #fff;
- font-size: var(--type-tiny-font-size);
- margin-right: auto;
- }
- }
-
- .toggle,
- .external {
- background-color: #fff;
- cursor: pointer;
- height: 1rem;
- width: 1rem;
- mask-size: contain;
- mask-position: center;
- mask-repeat: no-repeat;
-
- &:hover {
- background-color: var(--curriculum-color);
- }
-
- &:focus-visible {
- outline-color: var(--accent-primary);
- outline-offset: 1px;
- outline-style: auto;
- }
- }
-
- .toggle {
- &.enter {
- mask-image: url(${unsafeCSS(fullscreenIcon)});
- }
-
- &.exit {
- mask-image: url(${unsafeCSS(cancelIcon)});
- }
- }
-
- .external {
- mask-image: url(${unsafeCSS(externalIcon)});
- mask-size: 75%;
- }
-
- .open,
- iframe {
- border: 1px solid #000;
- width: 100%;
- height: 100%;
- }
-
- .open {
- --color: #8cb4ffcc;
- cursor: pointer;
- background-image: var(--img, url(${unsafeCSS(backgroundImg)}));
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
-
- &:hover {
- --color: #8cb4ffe5;
- }
-
- svg {
- height: 7rem;
- width: 7rem;
- stroke-width: 2px;
-
- circle {
- fill: var(--color);
- }
-
- path {
- fill: #fff;
- }
- }
- }
- `;
+ static styles = styles;
willUpdate(changedProperties: PropertyValues${this.scrimTitle}
+