diff --git a/gfi-ihk-2024/stories/_global/styles/_mixins.scss b/gfi-ihk-2024/stories/_global/styles/_mixins.scss
index 192bc54..1b242ac 100644
--- a/gfi-ihk-2024/stories/_global/styles/_mixins.scss
+++ b/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 {
diff --git a/gfi-ihk-2024/stories/components/gallery/GalleryData.js b/gfi-ihk-2024/stories/components/gallery/GalleryData.js
index 25fb2d0..980832f 100644
--- a/gfi-ihk-2024/stories/components/gallery/GalleryData.js
+++ b/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',
diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.js b/gfi-ihk-2024/stories/components/gallery/gallery.js
index 4c5c4e9..3becacb 100644
--- a/gfi-ihk-2024/stories/components/gallery/gallery.js
+++ b/gfi-ihk-2024/stories/components/gallery/gallery.js
@@ -110,6 +110,10 @@ class IHKGallery {
const a = $('').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('' + item.data('copyright') + '');
+ }
})
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')) {
+ $('').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 = $('').appendTo(slides);
- const imgElement = $('').attr('data-src', item.data('full')).attr("title", item.attr("title"));
-
+ const imgElement = $('').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) {
$('').appendTo(slide).append(item.find('span.image-description,span.copyright').clone());
}
diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.scss b/gfi-ihk-2024/stories/components/gallery/gallery.scss
index 9c07498..a443443 100644
--- a/gfi-ihk-2024/stories/components/gallery/gallery.scss
+++ b/gfi-ihk-2024/stories/components/gallery/gallery.scss
@@ -308,6 +308,9 @@
max-width: calc(100vw - 200px);
}
}
+ .copyright {
+ @include copyright;
+ }
}
.text-box {
diff --git a/gfi-ihk-2024/stories/pages/article/Article.stories.js b/gfi-ihk-2024/stories/pages/article/Article.stories.js
index 04d0edc..5fd36a6 100644
--- a/gfi-ihk-2024/stories/pages/article/Article.stories.js
+++ b/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;
diff --git a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js
index bb7972a..cbe7b61 100644
--- a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js
+++ b/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);
diff --git a/gfi-ihk-2024/stories/sections/slider/SliderData.js b/gfi-ihk-2024/stories/sections/slider/SliderData.js
index c4ff86b..6096b6c 100644
--- a/gfi-ihk-2024/stories/sections/slider/SliderData.js
+++ b/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: '#',
}
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js
index aaad81a..64bbaba 100644
--- a/gfi-ihk-2024/stories/sections/slider/slider.js
+++ b/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')) {
+ $('').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')) {
+ $('').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')) {
+ $('').html(ib.attr('data-copyright')).appendTo(ib);
+ }
}
}
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.scss b/gfi-ihk-2024/stories/sections/slider/slider.scss
index f7c190c..dd61153 100644
--- a/gfi-ihk-2024/stories/sections/slider/slider.scss
+++ b/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;
}
}
}
diff --git a/gfi-ihk-2024/stories/sections/survey/survey.scss b/gfi-ihk-2024/stories/sections/survey/survey.scss
index bda55a9..cba9bea 100644
--- a/gfi-ihk-2024/stories/sections/survey/survey.scss
+++ b/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 {