copyright fixes and re-activate old theme

gfi-ihk-2024/stories/_global/styles/_mixins.scss

@@ -104,23 +104,31 @@
   display: block;
   left: 100%;
   bottom: 0;
-  color: var(--theme-color-white);
   font-size: 12px;
+  text-align: left;
   line-height: 1.2;
-  text-shadow: -2px 2px 0 #000;
   z-index: 2;
-  padding: 2px 6px 2px 4px;
   transform-origin: 0 100%;
   transform: rotate(-90deg);
-  background: #012d59;
-  white-space: nowrap;
-  max-width: calc(66.6% + 7px);
-  overflow: hidden;
   transition: 0.3s ease;
-  @media(max-width: 767px) {
-    font-size: 10px;
-    max-width: 100%;
-  }
+
+  color: white;
+  text-shadow: 0 0 3px rgba(black, 0.6), 0 0 8px rgba(black, 0.6);
+  width: calc(66.6% + 7px);
+  padding: 8px 18px;
+
+  //color: var(--theme-color-white);
+  //text-shadow: -2px 2px 0 #000;
+  //padding: 2px 6px 2px 4px;
+  //background: #012d59;
+  //white-space: nowrap;
+  //max-width: calc(66.6% + 7px);
+  //overflow: hidden;
+  //
+  //@media(max-width: 767px) {
+  //  font-size: 10px;
+  //  max-width: 100%;
+  //}
 }
 
 @mixin form-field {

gfi-ihk-2024/stories/components/gallery/GalleryData.js

@@ -9,11 +9,13 @@ export const galleryData = [
     src: './dummy/placeholder-2-3.svg',
     width: 736,
     height: 981,
+    copyright: '© Shutterstock'
   },
   {
     src: './dummy/placeholder-3-2.svg',
     width: 1470,
     height: 980,
+    copyright: '© Shutterstock'
   },
   {
     src: './dummy/placeholder-4-3.svg',

gfi-ihk-2024/stories/components/gallery/gallery.js

@@ -110,6 +110,10 @@ class IHKGallery {
       const a = $('<a href="' + item.data('full') + '" />').attr('data-index', i).appendTo(item);
 
       a.css('padding-top', Math.round(item.data('height') / item.data('width') * 10000) / 100 + '%');
+      // Copyright für Masonry-Element vorbereiten
+      if (item.data('copyright')) {
+        a.append('<span class="copyright">' + item.data('copyright') + '</span>');
+      }
     })
 
     const btnText = window.ihk.translations.loadMoreImages;
@@ -184,7 +188,12 @@ class IHKGallery {
         item.removeClass('loading').addClass('loaded');
       });
       img.attr('src', (this.section.data('type') === 'masonry' ? item.data('full') : item.data('thumb'))).appendTo(item.find('a'));
-      img.attr('alt', item.attr('alt')).attr('title', item.attr("title")).appendTo(item.find('a'));
+      img.attr('alt', item.attr('alt')).attr('title', item.attr("title"));
+
+      if (item.data('copyright')) {
+        $('<span class="copyright">').html(item.data('copyright')).appendTo(item.find('a'));
+      }
+
       this.visibleItems.push(item);
       item.find('a').removeAttr('tabindex');
       //newItems.push(item);
@@ -208,13 +217,13 @@ class IHKGallery {
       const item = $(element);
       const slide = $('<div class="slide preload" />').appendTo(slides);
 
-      const imgElement = $('<div class="image-box" />').attr('data-src', item.data('full')).attr("title", item.attr("title"));
-
+      const imgElement = $('<div class="image-box" />').attr('data-src', item.data('full')).attr('data-copyright', item.data('copyright')).attr("title", item.attr("title"));
       if (this.section.data("render-download") === true) {
         imgElement.attr('data-download', item.data('download'));
       }
       imgElement.appendTo(slide);
 
+
       if (item.find('span').length > 0) {
         $('<div class="text-box" />').appendTo(slide).append(item.find('span.image-description,span.copyright').clone());
       }

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

@@ -308,6 +308,9 @@
         max-width: calc(100vw - 200px);
       }
     }
+    .copyright {
+      @include copyright;
+    }
   }
 
   .text-box {

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

@@ -21,24 +21,24 @@ export const ArticlePageMicrosite = Template.bind({});
 ArticlePageMicrosite.args = {
   styleBlock: `
     :root {
-      --theme-color-primary: #E6007E !important;
-      --theme-color-primary-microsite: #000000 !important;
+      --theme-color-primary: #003366 !important;
+      --theme-color-primary-microsite: #003366 !important;
       --theme-color-primary-rgb: 230,0,126 !important;
-      --theme-color-primary-dimmed-01: #EB3398 !important;
-      --theme-color-primary-dimmed-02: #F063B0 !important;
+      --theme-color-primary-dimmed-01: #335C85 !important;
+      --theme-color-primary-dimmed-02: #B0C4D6 !important;
       --theme-color-primary-dimmed-03: #F9BFDF !important;
       --theme-color-primary-dimmed-04: #FCE6F2 !important;
-      --theme-color-secondary: #563F54 !important;
-      --theme-color-secondary-microsite: #E6007E !important;
-      --theme-color-secondary-intensed: #563F54 !important;
-      --theme-color-secondary-dimmed: #EEECEE !important;
-      --theme-color-neutral: #E6007E !important;
+      --theme-color-secondary: #077EAF !important;
+      --theme-color-secondary-microsite: #077EAF !important;
+      --theme-color-secondary-intensed: #077EAF !important;
+      --theme-color-secondary-dimmed: #E6F2F7 !important;
+      --theme-color-neutral: #636D76 !important;
       --theme-color-neutral-background: #EFF3F6 !important;
       --theme-color-background: #FFFFFF !important;
       --theme-color-text-intensed: #000000 !important;
       --theme-color-text: #000000 !important;
-      --theme-color-link: #E6007E !important;
-      --theme-color-link-hover: #E6007E !important;
+      --theme-color-link: #003366 !important;
+      --theme-color-link-hover: #077EAF !important;
       --theme-color-gradient-01: #E6007E !important;
       --theme-color-gradient-02: #9f1f69 !important;
       --theme-color-gradient-03: #563f54 !important;

gfi-ihk-2024/stories/sections/slider/SliderComponent.js

@@ -22,6 +22,9 @@ export const createSlider =
       if (slideData.imageSrc && slideData.imageSrc.length > 0) {
         const imageBox = createElement('div', ['image-box'], null, outer);
         createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
+        if (slideData.copyright && slideData.copyright.length > 0) {
+          createElement('span', ['copyright'], slideData.copyright, imageBox);
+        }
         if (contextBoxContentImg) {
           const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
           createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);

gfi-ihk-2024/stories/sections/slider/SliderData.js

@@ -4,6 +4,7 @@ export const sliderData = [
     headline: 'Möglichkeiten der Integration',
     copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
     imageSrc: './dummy/placeholder-3-2.svg',
+    copyright: 'Quelle: DigiZeitschriften e.V.',
     cta: 'Mehr erfahren',
     link: '#',
     contextImg: './logos/wirtschaftsdialoge.svg',
@@ -22,6 +23,7 @@ export const sliderData = [
     headline: 'Möglichkeiten der Integration',
     copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
     imageSrc: './dummy/placeholder-3-2.svg',
+    copyright: '© Marco Mustermann für Mustervideos',
     cta: 'Mehr erfahren',
     link: '#',
   }

gfi-ihk-2024/stories/sections/slider/slider.js

@@ -423,13 +423,32 @@ class IHKSlider {
         const loadedImage = $(this).removeClass('loading');
         const slide = loadedImage.closest('.slide').removeClass('preload');
         const index = parseInt(slide.attr('data-index'));
-        t.nextWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box').append(loadedImage.clone());
-        t.prevWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box').append(loadedImage.clone());
-      })
+
+        const nextItem = t.nextWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box');
+        nextItem.append(loadedImage.clone());
+        // Copyright für Next-Wrapper
+        if (ib.attr('data-copyright')) {
+          $('<span class="copyright">').html(ib.attr('data-copyright')).appendTo(nextItem);
+        }
+        const prevItem = t.prevWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box');
+        prevItem.append(loadedImage.clone());
+        // Copyright für Prev-Wrapper
+        if (ib.attr('data-copyright')) {
+          $('<span class="copyright">').html(ib.attr('data-copyright')).appendTo(prevItem);
+        }
+
+        //t.nextWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box').append(loadedImage.clone());
+        //t.prevWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box').append(loadedImage.clone());
+      });
 
       img.attr('src', ib.attr('data-src')).appendTo(ib);
-      img.attr('data-download', ib.attr('data-download')).appendTo(ib);
+      img.attr('data-download', ib.attr('data-download'));
       img.attr('draggable', 'false').attr('ondragstart', 'return false;');
+
+      // Copyright für das Hauptbild hinzufügen
+      if (ib.attr('data-copyright')) {
+        $('<span class="copyright">').html(ib.attr('data-copyright')).appendTo(ib);
+      }
     }
   }
 

gfi-ihk-2024/stories/sections/slider/slider.scss

@@ -141,9 +141,12 @@
   }
 
   .image-box {
-    position: relative;
     order: 1;
+    position: relative;
     flex: 1 1 100%;
+    @media(min-width: 1000px) {
+
+    }
 
     &:before {
       content: "";;
@@ -175,9 +178,8 @@
 
   .copyright {
     @include copyright;
-    left: calc(100% - 20px);
-    @media screen and (min-width: 901px) and (max-width: 999px) {
-      left: 100%;
+    @media(min-width: 1000px) {
+      left: calc(100% - 20px);
     }
   }
 
@@ -301,10 +303,10 @@
         right: 0;
       }
       @media(max-width: 567px) {
-        top: 60px;
+        top: 40px;
       }
       @media(max-width: 319px) {
-        top: 40px;
+        top: 20px;
       }
     }
   }

gfi-ihk-2024/stories/sections/survey/survey.scss

@@ -14,8 +14,12 @@
   background-color: var(--theme-color-secondary-dimmed);
   border-bottom: var(--border-width) solid var(--theme-color-secondary);
 
+  legend {
+    margin: 0 0 0.75rem 0;
+  }
+
   .text-box {
-    padding-bottom: 0;
+    padding: var(--content-box-padding) var(--content-box-padding) 0 var(--content-box-padding);
     font-size: var(--font-size-small);
 
     .kicker {
@@ -223,7 +227,8 @@
 
   &[data-size='lg'] {
     display: flex;
-    align-items: center;
+    //align-items: center;
+    align-items: flex-start;
 
     .text-box, .form-box {
       flex: 1 1 100%;
@@ -233,6 +238,9 @@
     .text-box {
       padding: var(--content-box-padding);
       margin-bottom: 0.1em;
+      .kicker {
+        padding-top: 0.1em;
+      }
     }
 
     .form-box {