wip(scrim-inline): small design tweaks

mdn · Sep 26, 2024 · 5251916 · 5251916
1 parent 2db72fa
commit 5251916
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 45 deletions.
diff --git a/client/src/curriculum/scrim-inline.scss b/client/src/curriculum/scrim-inline.scss
@@ -40,16 +40,12 @@ dialog {
 
 .inner {
   background-color: #000;
+  border: 1px solid #000;
   container-type: size;
   display: flex;
   flex-direction: column;
   height: 100%;
-  position: relative;
   width: 100%;
-
-  > * {
-    font-size: 4cqmin;
-  }
 }
 
 .header {
@@ -61,7 +57,6 @@ dialog {
   min-height: 1.75rem;
   padding: 0 0.5rem;
   width: 100%;
-  z-index: 1;
 
   span {
     color: #fff;
@@ -106,13 +101,19 @@ dialog {
   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:
-    calc(100% - 3em) calc(100% - 3.2em),
+    1.5em 1.5em,
     right,
     center;
   background-repeat: no-repeat;
@@ -131,7 +132,7 @@ dialog {
     font-weight: 600;
     left: 0;
     line-height: 1;
-    margin: 1em;
+    margin: 0.5em;
     position: absolute;
     text-transform: uppercase;
     text-wrap: balance;
@@ -148,10 +149,10 @@ dialog {
 
 .open,
 iframe {
-  border: 1px solid #000;
+  border: none;
   height: 100%;
+  position: absolute;
   width: 100%;
-  z-index: 1;
 }
 
 .open {
@@ -161,6 +162,7 @@ iframe {
   background-repeat: no-repeat;
   background-size: cover;
   cursor: pointer;
+  font-size: inherit;
 
   &:hover {
     --color: #8cb4ffe5;

diff --git a/client/src/curriculum/scrim-inline.ts b/client/src/curriculum/scrim-inline.ts
@@ -84,41 +84,43 @@ class ScrimInline extends LitElement {
               <span class="visually-hidden">Open on Scrimba</span>
             </a>
           </div>
-          ${this._scrimLoaded
-            ? html`
-                <iframe
-                  src="${this._fullUrl}"
-                  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"
-                  data-glean=${`${CURRICULUM}: scrim engage id:${this._scrimId}`}
-                >
-                  ${unsafeHTML(playSvg)}
-                  <span class="visually-hidden">
-                    "Load scrim and open dialog."
-                  </span>
-                </button>
-              `}
+          <div class="body">
+            ${this._scrimLoaded
+              ? html`
+                  <iframe
+                    src="${this._fullUrl}"
+                    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"
+                    data-glean=${`${CURRICULUM}: scrim engage id:${this._scrimId}`}
+                  >
+                    ${unsafeHTML(playSvg)}
+                    <span class="visually-hidden">
+                      "Load scrim and open dialog."
+                    </span>
+                  </button>
+                `}
+          </div>
         </div>
       </dialog>
     `;