| @@ -14,12 +14,11 @@ | |||
| line-height: 0; | |||
| text-align: center; | |||
| pointer-events: none; | |||
| margin-bottom: 10px; | |||
| margin-bottom: 0; | |||
| @media(max-width: 767px) { | |||
| top: 80px; | |||
| height: 70px; | |||
| margin-bottom: 0; | |||
| } | |||
| @media(max-width: 359px) { | |||
| top: 70px; | |||
| @@ -62,23 +61,8 @@ | |||
| font-size: 36px; | |||
| } | |||
| img { | |||
| display: block; | |||
| width: auto; | |||
| height: 75px; | |||
| @media(max-width: 767px) { | |||
| height: 56px; | |||
| margin: 0 auto; | |||
| } | |||
| } | |||
| &.narrow { | |||
| height: 50px; | |||
| img { | |||
| height: 40px; | |||
| } | |||
| } | |||
| } | |||
| @@ -7,15 +7,22 @@ | |||
| } | |||
| @media(min-width: 1200px) { | |||
| .page-wrapper { | |||
| border-top-width: 160px; | |||
| } | |||
| .magazine-start, .magazine-article { | |||
| .page-wrapper { | |||
| border-top: var(--header-height) solid white; | |||
| } | |||
| } | |||
| } | |||
| @media(min-width: 1400px) { | |||
| .page-wrapper { | |||
| border-top-width: 160px; | |||
| } | |||
| } | |||
| @media(min-width: 1200px) and (max-width: 1399px) { | |||
| .magazine-header + .page-wrapper { | |||
| border-top-width: 100px; | |||
| } | |||
| } | |||
| .container { | |||
| width: var(--container-width); | |||
| @@ -24,6 +24,7 @@ export const createGallery = | |||
| imageDiv.dataset.full = item.src; | |||
| imageDiv.dataset.width = item.width; | |||
| imageDiv.dataset.height = item.height; | |||
| imageDiv.dataset.alt = item.alt; | |||
| if (item.copyright) { | |||
| imageDiv.dataset.copyright = item.copyright; | |||
| } | |||
| @@ -1,90 +1,121 @@ | |||
| export const galleryData = [ | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| copyright: '© Shutterstock' | |||
| }, | |||
| { | |||
| 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', | |||
| width: 1200, | |||
| height: 980, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 880, | |||
| height: 1200, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 800, | |||
| height: 1100, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 900, | |||
| height: 1200, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-1-1.svg', | |||
| width: 1200, | |||
| height: 1200, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 880, | |||
| height: 1200, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 800, | |||
| height: 1100, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 900, | |||
| height: 1200, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-4-3.svg', | |||
| width: 1200, | |||
| height: 980, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-1-1.svg', | |||
| width: 1200, | |||
| height: 1200, | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-2-3.svg', | |||
| width: 736, | |||
| height: 981, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-4-3.svg', | |||
| width: 1200, | |||
| height: 980, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 880, | |||
| height: 1200, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 800, | |||
| height: 1100, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 900, | |||
| height: 1200, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-1-1.svg', | |||
| width: 1200, | |||
| height: 1200, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 880, | |||
| height: 1200, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 800, | |||
| height: 1100, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-4.svg', | |||
| width: 900, | |||
| height: 1200, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-3-2.svg', | |||
| width: 1470, | |||
| height: 980, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-4-3.svg', | |||
| width: 1200, | |||
| height: 980, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| { | |||
| src: './dummy/placeholder-1-1.svg', | |||
| width: 1200, | |||
| height: 1200, | |||
| copyright: '© Shutterstock', | |||
| alt: 'Dummy Alt Text' | |||
| }, | |||
| ] | |||
| @@ -189,7 +189,7 @@ 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")); | |||
| img.attr('alt', item.data('alt')).attr('title', item.data("title")); | |||
| if (item.data('copyright')) { | |||
| $('<span class="copyright">').html(item.data('copyright')).appendTo(item.find('a')); | |||
| @@ -218,7 +218,7 @@ 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('data-copyright', item.data('copyright')).attr("title", item.attr("title")); | |||
| const imgElement = $('<div class="image-box" />').attr('data-src', item.data('full')).attr('data-copyright', item.data('copyright')).attr('data-alt', item.data('alt')).attr("title", item.attr("title")); | |||
| if (this.section.data("render-download") === true) { | |||
| imgElement.attr('data-download', item.data('download')); | |||
| } | |||
| @@ -55,8 +55,14 @@ | |||
| img { | |||
| display: block; | |||
| width: auto; | |||
| height: calc(var(--magazine-header-height) * 7 / 9); | |||
| height: auto; | |||
| max-height: 75px; | |||
| margin: 0 auto; | |||
| @media(max-width: 767px) { | |||
| max-height: 56px; | |||
| margin: 0 auto; | |||
| } | |||
| } | |||
| .image-and-text { | |||
| @@ -103,6 +109,11 @@ | |||
| margin-bottom: 0; | |||
| } | |||
| img { | |||
| height: auto; | |||
| max-height: 40px; | |||
| } | |||
| .title { | |||
| font-size: var(--font-size-h3); | |||
| } | |||
| @@ -28,9 +28,9 @@ ArticlePageMicrosite.args = { | |||
| --theme-color-primary-dimmed-02: #B0C4D6 !important; | |||
| --theme-color-primary-dimmed-03: #F9BFDF !important; | |||
| --theme-color-primary-dimmed-04: #FCE6F2 !important; | |||
| --theme-color-secondary: #077EAF !important; | |||
| --theme-color-secondary-microsite: #077EAF !important; | |||
| --theme-color-secondary-intensed: #077EAF !important; | |||
| --theme-color-secondary: #0073A2 !important; | |||
| --theme-color-secondary-microsite: #0073A2 !important; | |||
| --theme-color-secondary-intensed: #0073A2 !important; | |||
| --theme-color-secondary-dimmed: #E6F2F7 !important; | |||
| --theme-color-neutral: #636D76 !important; | |||
| --theme-color-neutral-background: #EFF3F6 !important; | |||
| @@ -38,7 +38,7 @@ ArticlePageMicrosite.args = { | |||
| --theme-color-text-intensed: #000000 !important; | |||
| --theme-color-text: #000000 !important; | |||
| --theme-color-link: #003366 !important; | |||
| --theme-color-link-hover: #077EAF !important; | |||
| --theme-color-link-hover: #0073A2 !important; | |||
| --theme-color-gradient-01: #E6007E !important; | |||
| --theme-color-gradient-02: #9f1f69 !important; | |||
| --theme-color-gradient-03: #563f54 !important; | |||
| @@ -426,6 +426,7 @@ class IHKSlider { | |||
| const nextItem = t.nextWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box'); | |||
| nextItem.append(loadedImage.clone()); | |||
| nextItem.find('img').attr('alt', ib.attr('data-alt') || ''); | |||
| // Copyright für Next-Wrapper | |||
| if (ib.attr('data-copyright')) { | |||
| $('<span class="copyright" aria-hidden="true">').html(ib.attr('data-copyright')).appendTo(nextItem); | |||
| @@ -433,6 +434,7 @@ class IHKSlider { | |||
| } | |||
| const prevItem = t.prevWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box'); | |||
| prevItem.append(loadedImage.clone()); | |||
| prevItem.find('img').attr('alt', ib.attr('data-alt') || ''); | |||
| // Copyright für Prev-Wrapper | |||
| if (ib.attr('data-copyright')) { | |||
| $('<span class="copyright">').html(ib.attr('data-copyright')).appendTo(prevItem); | |||
| @@ -442,7 +444,7 @@ class IHKSlider { | |||
| //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('src', ib.attr('data-src')).attr('alt', ib.attr('data-alt') || '').appendTo(ib); | |||
| img.attr('data-download', ib.attr('data-download')); | |||
| img.attr('draggable', 'false').attr('ondragstart', 'return false;'); | |||