feat(about): histroy images from md + id=content

mdn · Dec 2, 2024 · 6c396d4 · 6c396d4
1 parent 7e1933d
commit 6c396d4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 45 deletions.
diff --git a/client/src/about/index.scss b/client/src/about/index.scss
@@ -359,7 +359,7 @@ main.about-container {
             }
           }
 
-          ~ p:last-of-type::after {
+          ~ p:last-of-type > img {
             // image
             background-color: var(--about-journey-image-border);
             background-position: center center;
@@ -368,10 +368,9 @@ main.about-container {
             border: var(--image-border-size) solid
               var(--about-journey-image-border);
             box-shadow: var(--about-journey-shadow);
-            content: "";
-            display: none;
             height: var(--image-height);
             left: calc(var(--inner-width) - var(--image-width));
+            max-width: var(--image-width);
             position: absolute;
             top: calc(var(--dot-height) / -2);
             width: var(--image-width);
@@ -383,6 +382,7 @@ main.about-container {
               left: auto;
               margin: 2rem auto;
               max-height: var(--image-inner-height);
+              max-width: 100%;
               position: relative;
               top: auto;
               width: auto;
@@ -394,67 +394,27 @@ main.about-container {
             ~ p:last-of-type::after {
               display: block;
             }
-
-            ~ p:last-of-type::after {
-              background-image: url("https://mdn.dev/generic-content/about/screenshots/[email protected]");
-              background-image: image-set(
-                url("https://mdn.dev/generic-content/about/screenshots/[email protected]")
-                  1x,
-                url("https://mdn.dev/generic-content/about/screenshots/[email protected]")
-                  2x
-              );
-            }
           }
 
           &[id="2010"] {
             &::before,
             ~ p:last-of-type::after {
               display: block;
             }
-
-            ~ p:last-of-type::after {
-              background-image: url("https://mdn.dev/generic-content/about/screenshots/[email protected]");
-              background-image: image-set(
-                url("https://mdn.dev/generic-content/about/screenshots/[email protected]")
-                  1x,
-                url("https://mdn.dev/generic-content/about/screenshots/[email protected]")
-                  2x
-              );
-            }
           }
 
           &[id="2020"] {
             &::before,
             ~ p:last-of-type::after {
               display: block;
             }
-
-            ~ p:last-of-type::after {
-              background-image: url("https://mdn.dev/generic-content/about/screenshots/[email protected]");
-              background-image: image-set(
-                url("https://mdn.dev/generic-content/about/screenshots/[email protected]")
-                  1x,
-                url("https://mdn.dev/generic-content/about/screenshots/[email protected]")
-                  2x
-              );
-            }
           }
 
           &[id="2022"] {
             &::before,
             ~ p:last-of-type::after {
               display: block;
             }
-
-            ~ p:last-of-type::after {
-              background-image: url("https://mdn.dev/generic-content/about/screenshots/[email protected]");
-              background-image: image-set(
-                url("https://mdn.dev/generic-content/about/screenshots/[email protected]")
-                  1x,
-                url("https://mdn.dev/generic-content/about/screenshots/[email protected]")
-                  2x
-              );
-            }
           }
         }
       }

diff --git a/client/src/about/index.tsx b/client/src/about/index.tsx
@@ -24,7 +24,7 @@ export function About(appProps: HydrationData<any, AboutDoc>) {
   const doc = useAboutDoc(appProps);
 
   return (
-    <main className="about-container">
+    <main id="content" className="about-container">
       <RenderAboutBody
         doc={doc}
         renderer={(section, i) => {

diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx
@@ -18,7 +18,7 @@ export function Community(appProps: HydrationData<any, AboutDoc>) {
     <SWRConfig
       value={{ provider: () => new SWRLocalStorageCache("community") }}
     >
-      <main className="community-container">
+      <main id="content" className="community-container">
         <RenderCommunityBody
           doc={doc}
           renderer={(section, i) => {