From 6c396d403945d75162cde60b662858c5873dcf5d Mon Sep 17 00:00:00 2001
From: Florian Dieminger <me@fiji-flo.de>
Date: Mon, 2 Dec 2024 12:42:44 +0100
Subject: [PATCH] feat(about): histroy images from md + id=content

---
 client/src/about/index.scss    | 46 +++-------------------------------
 client/src/about/index.tsx     |  2 +-
 client/src/community/index.tsx |  2 +-
 3 files changed, 5 insertions(+), 45 deletions(-)

diff --git a/client/src/about/index.scss b/client/src/about/index.scss
index 49c8e922d4f4..fbc6432bcbcc 100644
--- 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,16 +394,6 @@ 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/20050121103200-1280x720@0.5x.png");
-              background-image: image-set(
-                url("https://mdn.dev/generic-content/about/screenshots/20050121103200-1280x720@0.5x.png")
-                  1x,
-                url("https://mdn.dev/generic-content/about/screenshots/20050121103200-1280x720@1x.png")
-                  2x
-              );
-            }
           }
 
           &[id="2010"] {
@@ -411,16 +401,6 @@ 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/20100901014818-1280x720@0.5x.png");
-              background-image: image-set(
-                url("https://mdn.dev/generic-content/about/screenshots/20100901014818-1280x720@0.5x.png")
-                  1x,
-                url("https://mdn.dev/generic-content/about/screenshots/20100901014818-1280x720@1x.png")
-                  2x
-              );
-            }
           }
 
           &[id="2020"] {
@@ -428,16 +408,6 @@ 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/20200103045709-1280x720@0.5x.png");
-              background-image: image-set(
-                url("https://mdn.dev/generic-content/about/screenshots/20200103045709-1280x720@0.5x.png")
-                  1x,
-                url("https://mdn.dev/generic-content/about/screenshots/20200103045709-1280x720@1x.png")
-                  2x
-              );
-            }
           }
 
           &[id="2022"] {
@@ -445,16 +415,6 @@ 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/20220402010722-1280x720@0.5x.png");
-              background-image: image-set(
-                url("https://mdn.dev/generic-content/about/screenshots/20220402010722-1280x720@0.5x.png")
-                  1x,
-                url("https://mdn.dev/generic-content/about/screenshots/20220402010722-1280x720@1x.png")
-                  2x
-              );
-            }
           }
         }
       }
diff --git a/client/src/about/index.tsx b/client/src/about/index.tsx
index a8fab1e99235..92055d8c82f2 100644
--- 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
index 0560648bf385..e2290d123a52 100644
--- 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) => {