testimonial

gfi-ihk-2024/stories/components/testimonial/testimonial.scss

@@ -6,7 +6,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 0 auto var(--section-margin) auto;
+  margin: 0 auto;
   padding: 45px 0;
   position: relative;
   z-index: 1;
@@ -17,17 +17,17 @@
     font-size: 28px;
     line-height: 120%; /* 50.4px */
     @media(min-width: 768px) {
-       font-size: 36px;
+      font-size: 36px;
     }
     @media(min-width: 1110px) {
       font-size: 42px;
-   }
+    }
     + .text {
       font-size: 18px;
       @media(min-width: 768px) {
-       font-size: 22px;
+        font-size: 22px;
+      }
     }
-   }
   }
 
 
@@ -73,10 +73,9 @@
     border-left: 0;
     font-style: normal;
     font-weight: 300;
-    margin: 116px 0 0 0;
+    margin: calc(var(--section-margin)*.6) 0 0 0;
     padding: 0 20px 0 40px;
     @media(max-width: 767px) {
-      margin-top: calc(var(--section-margin)*.6);
       padding: 0;
     }
     .text {
@@ -181,13 +180,13 @@
       .image-text--image {
         position: absolute;
         right: 0;
-        bottom: 78px;
+        bottom: 63px;
         width: 100px;
         @media(max-width: 767px) {
           position: relative;
           right: auto;
           bottom: auto;
-          margin: 0 0 15px 0;
+          margin: 40px 0 15px 0;
         }
         &:after {
           display: none;
@@ -200,92 +199,37 @@
         width: auto;
       }
       blockquote {
-        .test:not(.author):not(.author-subline) {
+        .text:not(.author):not(.author-subline) {
           margin-left: -40px;
-          padding-bottom: 65px;
-          padding-left: 30px;
-          margin-bottom: 0;
+          padding-bottom: 10px;
           @media(max-width: 767px) {
             margin-left: 0;
-            margin-bottom: 0;
-            padding-left: 0;
-            padding-bottom: 50px;
           }
           &:before {
             margin-left: 0;
           }
-          &:after {
-            left: 0;
-            position: absolute;
-            bottom: 23px;
-            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==);
-            background-size: 100%;
-            content: "";
-            display: block;
-            height: 30px;
-            margin: 2px 0 2px 0;
-            transform: rotate(180deg);
-            width: 30px;
-            @media(max-width: 767px) {
-              bottom: 8px;
-            }
-          }
-        }
-        .author-text {
-          @media(max-width: 767px) {
-            padding-left: 20px;
-          }
-        }
-        .author-text--inner {
-          position: relative;
-          @media(min-width: 768px) {
-            display: flex;
-            flex-direction: column;
-            width: fit-content;
-            margin-left: auto;
-          }
-          &:before {
-            content: "— ";
-            position: absolute;
-            top: 1px;
-            left: -20px;
-            font-family: Source Sans Pro,sans-serif;
-            font-style: normal;
-            line-height: 1.2;
-            font-size: 18px;
-            font-weight: 600;
-            @media(max-width: 767px) {
-              top: -1px;
-            }
-          }
         }
-        p.author {
-          margin-top: 0;
+        .author {
+          margin-top: 66px;
           padding-top: 2px;
           @media(max-width: 767px) {
             margin-top: 0;
           }
           &:after {
-            display: none;
             top: -56px;
             @media(max-width: 767px) {
               top: -155px;
             }
           }
-          &:before {
-            display: none;
-          }
         }
-        p.author,
-        p.author-subline {
+        .author,
+        .author-subline {
           padding-right: 115px;
-          text-align: left;
-          @media(max-width: 767px) {
-            padding-left: 0;
-            padding-right: 0;
-          }
         }
       }
+      @media(max-width: 767px) {
+
+      }
     }
   }
-}
+}

gfi-ihk-2024/stories/pages/article/ArticlePage.js

@@ -14,6 +14,7 @@ import {createVideo} from "../../components/video/VideoComponent";
 import {createEventsSection} from "../../sections/events/EventsComponent";
 import {createCardSlider} from "../../sections/card-slider/CardSliderComponent";
 import {createQuickFacts} from "../../sections/quick-facts/QuickFactsComponent";
+import {createTestimonial} from "../../components/testimonial/TestimonialComponent";
 
 export const createArticlePage =
   ({
@@ -48,6 +49,7 @@ export const createArticlePage =
     main.appendChild(createGallery({}));
     main.appendChild(createSteps({}));
     main.appendChild(createAccordion({}));
+    main.appendChild(createTestimonial({article: true}));
 
     createElement('h2', [], 'Eine weitere Headline zwischendurch', main);
     createElement('p', [], lorem1, main);