hr-design-system-handlebars 1.82.11 → 1.83.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.83.0 (Thu Jul 18 2024)
+
+#### 🚀 Enhancement
+
+- Feature/vertical spacing [#1017](https://github.com/mumprod/hr-design-system-handlebars/pull/1017) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.82.11 (Thu Jul 18 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1717,9 +1717,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .w-5 {
   width: 1.25rem;
 }
-.w-5\/6 {
-  width: 83.333333%;
-}
 .w-6 {
   width: 1.5rem;
 }
@@ -2756,9 +2753,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .pb-6 {
   padding-bottom: 1.5rem;
 }
-.pb-8 {
-  padding-bottom: 2rem;
-}
 .pb-9 {
   padding-bottom: 2.25rem;
 }
@@ -3336,7 +3330,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1721303344884;
+  counter-reset: cnt1721309878426;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3357,7 +3351,8 @@ article.indexTextDS .indexTextHighlighted .link {
 /*! ****************************/
 /*! Aspect Ratio with fallback */
 /*! ****************************/
-.ar-auto, .ar-auto > img {
+.ar-auto,
+    .ar-auto > img {
         aspect-ratio: auto;
     }
 @supports not (aspect-ratio: auto) {
@@ -3373,7 +3368,8 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-16-9, .ar-16-9 > img {
+.ar-16-9,
+    .ar-16-9 > img {
         aspect-ratio: 16 / 9;
     }
 @supports not (aspect-ratio: 16 / 9) {
@@ -3389,7 +3385,8 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-16-7, .ar-16-7 > img {
+.ar-16-7,
+    .ar-16-7 > img {
         aspect-ratio: 16 / 7;
     }
 @supports not (aspect-ratio: 16 / 7) {
@@ -3405,7 +3402,8 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-4-3, .ar-4-3 > img {
+.ar-4-3,
+    .ar-4-3 > img {
         aspect-ratio: 4 / 3;
     }
 @supports not (aspect-ratio: 4 / 3) {
@@ -3421,7 +3419,8 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-4-1, .ar-4-1 > img {
+.ar-4-1,
+    .ar-4-1 > img {
         aspect-ratio: 4 / 1;
     }
 @supports not (aspect-ratio: 4 / 1) {
@@ -3437,7 +3436,8 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-1-1, .ar-1-1 > img {
+.ar-1-1,
+    .ar-1-1 > img {
         aspect-ratio: 1 / 1;
     }
 @supports not (aspect-ratio: 1 / 1) {
@@ -3453,7 +3453,8 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-100-27, .ar-100-27 > img {
+.ar-100-27,
+    .ar-100-27 > img {
         aspect-ratio: 100 / 27.1;
     }
 @supports not (aspect-ratio: 100 / 27.1) {
@@ -3469,7 +3470,8 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-9-16, .ar-9-16 > img {
+.ar-9-16,
+    .ar-9-16 > img {
         aspect-ratio: 9 / 16;
     }
 @supports not (aspect-ratio: 9 / 16) {
@@ -3485,7 +3487,8 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-7-16, .ar-7-16 > img {
+.ar-7-16,
+    .ar-7-16 > img {
         aspect-ratio: 7 / 16;
     }
 @supports not (aspect-ratio: 7 / 16) {
@@ -3528,10 +3531,8 @@ article.indexTextDS .indexTextHighlighted .link {
         grid-template-columns:
             [full-width-start] minmax(var(--mobile-padding), var(--desktop-padding))
             [content-start] minmax(0, var(--breakout-size))
-            [narrow-start] min(
-                100% - (var(--mobile-padding) * 2),
-                var(--narrow-max-width)
-            ) [narrow-end]
+            [narrow-start] min(100% - (var(--mobile-padding) * 2), var(--narrow-max-width))
+            [narrow-end]
             minmax(0, var(--breakout-size)) [content-end]
             minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end];
         grid-column: main;
@@ -3542,7 +3543,10 @@ article.indexTextDS .indexTextHighlighted .link {
 .article-full-width {
         grid-column: full-width;
     }
-.copytextWrapper > :not(.article-breakout):not(.article-full-width) {
+.article-narrow {
+        grid-column: narrow;
+    }
+.copytextWrapper > :not(.article-breakout):not(.article-full-width):not(.xs\:article-full-width) {
         grid-column: narrow;
     }
 .grid-content {
@@ -3734,7 +3738,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1721303344884 1;
+  counter-increment: cnt1721309878426 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3750,7 +3754,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1721303344884);
+  content: counter(cnt1721309878426);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5848,6 +5852,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
 }
 @media (min-width: 360px) {
 
+  .xs\:mx-13 {
+    margin-left: 3.125rem;
+    margin-right: 3.125rem;
+  }
+
   .xs\:mx-6 {
     margin-left: 1.5rem;
     margin-right: 1.5rem;
@@ -5859,6 +5868,9 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 5;
   }
+    .xs\:article-full-width {
+        grid-column: full-width;
+    }
 }
 @media (min-width: 480px) {
 
@@ -5872,14 +5884,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-bottom: 1.25rem;
   }
 
-  .sm480\:mb-14 {
-    margin-bottom: 3.5rem;
-  }
-
-  .sm480\:mb-5 {
-    margin-bottom: 1.25rem;
-  }
-
   .sm480\:mb-7 {
     margin-bottom: 1.75rem;
   }
@@ -5908,18 +5912,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-top: 1.375rem;
   }
 
-  .sm480\:mt-6 {
-    margin-top: 1.5rem;
-  }
-
   .sm480\:mt-7 {
     margin-top: 1.75rem;
   }
 
-  .sm480\:mt-8 {
-    margin-top: 2rem;
-  }
-
   .sm480\:h-5 {
     height: 1.25rem;
   }
@@ -5932,10 +5928,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     height: 100%;
   }
 
-  .sm480\:w-2\/3 {
-    width: 66.666667%;
-  }
-
   .sm480\:w-5 {
     width: 1.25rem;
   }
@@ -6104,6 +6096,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-right: 3.5rem;
   }
 
+  .sm\:mx-26 {
+    margin-left: 6.5rem;
+    margin-right: 6.5rem;
+  }
+
   .sm\:mx-8 {
     margin-left: 2rem;
     margin-right: 2rem;
@@ -6136,6 +6133,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-bottom: 2rem;
   }
 
+  .sm\:ml-0 {
+    margin-left: 0px;
+  }
+
   .sm\:ml-4 {
     margin-left: 1rem;
   }
@@ -6164,10 +6165,22 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-top: 3.5rem;
   }
 
+  .sm\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .sm\:mt-6 {
     margin-top: 1.5rem;
   }
 
+  .sm\:mt-7 {
+    margin-top: 1.75rem;
+  }
+
+  .sm\:mt-8 {
+    margin-top: 2rem;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -6285,10 +6298,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     padding-bottom: 0.5rem;
   }
 
-  .sm\:pb-9 {
-    padding-bottom: 2.25rem;
-  }
-
   .sm\:pl-0 {
     padding-left: 0px;
   }
@@ -7759,6 +7768,18 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     border-left-width: 1px;
   }
 }
+.\[\&\+\.hr-copytext-teaser-half\]\:mt-4+.hr-copytext-teaser-half {
+  margin-top: 1rem;
+}
+@media (min-width: 640px) {
+
+  .sm\:\[\&\+\.hr-copytext-teaser-half\]\:mt-0+.hr-copytext-teaser-half {
+    margin-top: 0px;
+  }
+}
+.\[\&\+h2\]\:mt-4+h2 {
+  margin-top: 1rem;
+}
 .\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1[\:has\(\%2B.-hideOnMobile\)] {
   order: 1;
 }

package/dist/assets/js/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -8,7 +8,7 @@ import { deleteCookie } from '../../generic/hrQuery.subfeature'
 const DataPolicySettings = function (context) {
     const { options } = context,
         { element: rootElement } = context,
-        container = hr$('#datapolicy-settings-dialog',document)[0],
+        container = hr$('#datapolicy-settings-dialog', document)[0],
         dialog = new A11yDialog(container),
         bodyElement = document.getElementsByTagName('html')[0],
         settingsCookie = new SettingsCookie(),
@@ -17,7 +17,7 @@ const DataPolicySettings = function (context) {
         toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', container)[0],
         providerTitle = hr$('.js-providerTitle', container)[0]
 
-        let isWebview = window.parent.document.documentElement.classList.contains('webview'),
+    let isWebview = window.parent.document.documentElement.classList.contains('webview'),
         appSettingsCookie = {},
         dataDataPolicyCookie = {},
         dataTrackingCookie = {},
@@ -25,20 +25,20 @@ const DataPolicySettings = function (context) {
 
     //Überprüfung ob die alten Cookies zusammengeführt werden müssen
     const checkForExistingCookies = function () {
-        if(getJSONCookie('datapolicy') || getJSONCookie('tracking')){
+        if (getJSONCookie('datapolicy') || getJSONCookie('tracking')) {
             console.log("hessenschau bisher => Beide Cookies existieren")
             deleteOldCookiesandTransferData()
         }
-        else{
+        else {
             console.log("hessenschau neu => nach der Löschung der beiden alten Cookies muß hier gelesen werden")
-            if(getJSONCookie('hrSettings')) {
+            if (getJSONCookie('hrSettings')) {
                 getAllToggleValuesFromSettings()
             }
             else {
                 console.log("hessenschau neu => wenn kein hrSettings erzeugt wurde")
-                let whitelist = ["agf","ati","ard_mediathek","arte_concert","arte_concert_new","datawrapper_cdn"]
+                let whitelist = ["agf", "ati", "ard_mediathek", "arte_concert", "arte_concert_new", "datawrapper_cdn"]
                 for (let i = 0; i < toggleSwitches.length; ++i) {
-                    if(toggleSwitches[i].id == "agf" || toggleSwitches[i].id == "ati" || toggleSwitches[i].id == "ard_mediathek" || toggleSwitches[i].id == "arte_concert" || toggleSwitches[i].id == "arte_concert_new" || toggleSwitches[i].id == "datawrapper_cdn"){
+                    if (toggleSwitches[i].id == "agf" || toggleSwitches[i].id == "ati" || toggleSwitches[i].id == "ard_mediathek" || toggleSwitches[i].id == "arte_concert" || toggleSwitches[i].id == "arte_concert_new" || toggleSwitches[i].id == "datawrapper_cdn") {
                         setCookieForSettings(toggleSwitches[i].id, true)
                     }
                     else {
@@ -54,7 +54,7 @@ const DataPolicySettings = function (context) {
     const deleteOldCookiesandTransferData = function () {
         dataDataPolicyCookie = getJSONCookie('datapolicy') || {}
         dataTrackingCookie = getJSONCookie('tracking') || {}
-        let objMerge 
+        let objMerge
         // Beide bestehenden JSONs aus Tracking und Service werden zusammengeführt.
         objMerge = JSON.stringify(dataTrackingCookie) + JSON.stringify(dataDataPolicyCookie);
         objMerge = objMerge.replace(/\}\{/, ",");
@@ -92,10 +92,10 @@ const DataPolicySettings = function (context) {
         let settingId
         let settingState
         for (let i = 0; i < toggleSwitches.length; ++i) {
-          settingId = toggleSwitches[i].id
-          settingState = dataSettingsCookie.settingId
-            document.getElementById(toggleSwitches[i].id).checked = settingState 
-              
+            settingId = toggleSwitches[i].id
+            settingState = dataSettingsCookie.settingId
+            document.getElementById(toggleSwitches[i].id).checked = settingState
+
             setAllToggleEventListeners(toggleSwitches[i])
             initializeAllToggleEventListeners(i)
 
@@ -106,7 +106,7 @@ const DataPolicySettings = function (context) {
                 toggleSwitches[i].getAttribute('initial') == 'checked'
             ) {
                 toggleSwitches[i].checked = true
-                setCookieForSettings(toggleSwitches[i].id,toggleSwitches[i].checked)
+                setCookieForSettings(toggleSwitches[i].id, toggleSwitches[i].checked)
             }
         }
         toggleAllSwitch.checked = allTogglesExternalServiceChecked()
@@ -192,23 +192,23 @@ const DataPolicySettings = function (context) {
             readAppSettingsButtonCookie()
             if (appSettingsCookie['hidePrivacySettingsButton'] === true) {
                 settingsButton.classList.add('hidden')
-                document.querySelectorAll('.js-settings-inner-button').forEach(function(jsSettingsButton) {
+                document.querySelectorAll('.js-settings-inner-button').forEach(function (jsSettingsButton) {
                     jsSettingsButton.classList.add('hidden')
                 });
-                document.querySelectorAll('.js-content-settings-button').forEach(function(jsContentSettingsButton) {
-                    jsContentSettingsButton.style.display = 'none'                    
+                document.querySelectorAll('.js-content-settings-button').forEach(function (jsContentSettingsButton) {
+                    jsContentSettingsButton.style.display = 'none'
                 });
             } else {
                 settingsButton.classList.remove('hidden')
-                document.querySelectorAll('.js-settings-inner-button').forEach(function(jsSettingsButton) {
-                    if(jsSettingsButton.classList.contains('hidden')) {
-                    jsSettingsButton.classList.remove('hidden')
+                document.querySelectorAll('.js-settings-inner-button').forEach(function (jsSettingsButton) {
+                    if (jsSettingsButton.classList.contains('hidden')) {
+                        jsSettingsButton.classList.remove('hidden')
                     }
                 });
-                document.querySelectorAll('.js-content-settings-button').forEach(function(jsContentSettingsButton) {
-                    if(!jsContentSettingsButton.classList.contains('hidden')){
-                    jsContentSettingsButton.style.display = 'inline-block'    
-                    }                
+                document.querySelectorAll('.js-content-settings-button').forEach(function (jsContentSettingsButton) {
+                    if (!jsContentSettingsButton.classList.contains('hidden')) {
+                        jsContentSettingsButton.style.display = 'inline-block'
+                    }
                 });
             }
         }
@@ -217,11 +217,11 @@ const DataPolicySettings = function (context) {
     const onDialogShow = function (event) {
         bodyElement.classList.add('optionOpen')
         const opener = event.detail == null && event.detail.target.closest('[data-a11y-dialog-show]') ? event.detail.target.closest('[data-a11y-dialog-show]') : null
-        const pianoTracking = null != opener && undefined !== opener.dataset.pianoTracking ? JSON.parse(opener.dataset.pianoTracking) : {label:"Datenschutzerklärung"}
-        if(undefined !== pianoTracking.secondLevelId){
+        const pianoTracking = null != opener && undefined !== opener.dataset.pianoTracking ? JSON.parse(opener.dataset.pianoTracking) : { label: "Datenschutzerklärung" }
+        if (undefined !== pianoTracking.secondLevelId) {
             console.log(pianoTracking)
             uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label, pianoTracking.secondLevelId)
-        }else{
+        } else {
             console.log(pianoTracking)
             uxAction('Einstellungsdialog geöffnet - ' + pianoTracking.label)
         }
@@ -247,14 +247,14 @@ const DataPolicySettings = function (context) {
         )
         return vars
     }
-   
+
     // steuert die Darstellung des Buttons für die hs-App ///
     showSettingsButton()
     // Überprüfen ob die alten Cookies vorhanden sind
     checkForExistingCookies()
     initializeEventListeners()
     shouldDialogBeOpendOnLoad()
-   
+
 }
 
-export default DataPolicySettings
+export default DataPolicySettings

package/dist/views/components/content/copytext/components/audio.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
 {{/if}}

package/dist/views/components/content/copytext/components/audioeventlivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
 {{/if}}

package/dist/views/components/content/copytext/components/cite.hbs

@@ -1,4 +1,4 @@
-<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-6 mb-2 sm480:mt-7 sm480:mb-7{{else}}mr-0 sm:mr-5 mb-2 sm:mb-5 mt-5 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-6 mb-2 sm480:mt-7 sm480:mb-7{{else}}hr-copytext-teaser-half mr-0 sm:mr-5 mb-2 sm:mb-5 mt-5 w-full sm:w-1/2 sm:float-left{{/if}}">
     {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
     <blockquote>

package/dist/views/components/content/copytext/components/common/paragraphbox_wrapper.hbs

@@ -1,3 +1,3 @@
-<div class="ml-1 sm:ml-6 px-4 sm:px-6 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}clear-both mt-12 mb-8 sm:mt-14 sm:mb-14 {{else}}mb-8 sm:mb-5 sm:mt-6 mt-12 mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="ml-1 sm:ml-6 px-4 sm:px-6 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
     {{~> @partial-block ~}}
 </div>

package/dist/views/components/content/copytext/components/image/image.hbs

@@ -1,7 +1,7 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-14 sm480:mb-14 clear-both article-full-width sm:article-narrow"
+                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext-portrait"
@@ -9,7 +9,7 @@
                 _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-6 sm480:mb-5 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="hr-copytext-teaser-half mt-12 mb-8 sm:mt-6 sm:mb-5 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext-portrait"
@@ -19,7 +19,7 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-14 sm480:mb-14 clear-both article-full-width sm:article-narrow"
+                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext"
@@ -27,7 +27,7 @@
                 _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-6 sm480:mb-5 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="hr-copytext-teaser-half mt-12 mb-8 sm:mt-6 sm:mb-5 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext"

package/dist/views/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -1,9 +1,9 @@
 {{#if this.isText}}
-    <p class="mt-4 sm480:mt-5 text-lg leading-normal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
+    <p class="mt-4 sm:mt-5 text-lg leading-normal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
 {{/if}}
 {{#if this.isUl}}
-    <ul class="pl-9 mt-4 sm480:mt-5 overflow-hidden text-lg leading-normal list-disc copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
+    <ul class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
 {{/if}}
 {{#if this.isOl}}
-    <ol class="pl-9 mt-4 sm480:mt-5 overflow-hidden text-lg leading-normal list-decimal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
+    <ol class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
 {{/if}}

package/dist/views/components/content/copytext/components/podcastepisode.hbs

@@ -1,3 +1,3 @@
-<div class="{{#if this.showFullSize.isTrue }}clear-both mt-12 mb-8 sm:mt-14 sm:mb-14{{else}}sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
+<div class="{{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
     {{> components/teaser/podcast/podcast _headlineTag="h3" _isCopytext=true }} 
 </div>

package/dist/views/components/content/copytext/components/posterteaser.hbs

@@ -1,3 +1,3 @@
-<div class="w-5/6 sm480:w-2/3 mx-auto {{#if this.showFullSize.isTrue }}clear-both pb-8 sm:pb-9 mt-12 sm:mt-14 {{else}}sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5{{/if}}">
+<div class="article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hr-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
     {{> components/teaser/teaser_poster _isCopytext=true }} 
 </div>    

package/dist/views/components/content/copytext/components/video/video.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{/if}} 

package/dist/views/components/content/copytext/components/videolivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{/if}} 

package/dist/views/components/page/base/page_header.hbs

@@ -1,4 +1,4 @@
-<header class="mt-3 sm480:mt-8">
+<header class="mt-1 sm:mt-8">
     {{#with this.label}}
         {{#> components/label/label_group _css="mb-2"}}
             {{> components/label/label _type=this.type _text=(loca this.loca)}}

package/dist/views/components/page/components/metadatabox.hbs

@@ -1,5 +1,5 @@
 {{#unless this.hideMetadatabox}}
-    <aside class="clear-both mt-5 border-y border-gray-scorpion dark:border-text-dark">
+    <aside class="clear-both mt-4 border-y border-gray-scorpion dark:border-text-dark sm:mt-5">
         <div class="flex clear-both w-full my-4 sm:my-4">
             <div class="self-center">
                 {{> components/page/components/author _hideFrom=false }}

package/dist/views/components/page/story/story_article.hbs

@@ -10,7 +10,7 @@
         {{#with this.teaseritemDS }}
             {{#if this.isImage}}
                 {{> components/content/copytext/components/image/figure
-                    _cssClass="article-full-width md:article-breakout mt-6 sm480:mt-7 "
+                    _cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
                     _cssClassCaption="mx-5 md:mx-0"
                     _type="story"
                     _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")

package/dist/views_static/components/content/copytext/components/audio.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
 {{/if}}

package/dist/views_static/components/content/copytext/components/audioeventlivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
 {{/if}}

package/dist/views_static/components/content/copytext/components/cite.hbs

@@ -1,4 +1,4 @@
-<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-6 mb-2 sm480:mt-7 sm480:mb-7{{else}}mr-0 sm:mr-5 mb-2 sm:mb-5 mt-5 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-6 mb-2 sm480:mt-7 sm480:mb-7{{else}}hr-copytext-teaser-half mr-0 sm:mr-5 mb-2 sm:mb-5 mt-5 w-full sm:w-1/2 sm:float-left{{/if}}">
     {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
     <blockquote>

package/dist/views_static/components/content/copytext/components/common/paragraphbox_wrapper.hbs

@@ -1,3 +1,3 @@
-<div class="ml-1 sm:ml-6 px-4 sm:px-6 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}clear-both mt-12 mb-8 sm:mt-14 sm:mb-14 {{else}}mb-8 sm:mb-5 sm:mt-6 mt-12 mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="ml-1 sm:ml-6 px-4 sm:px-6 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
     {{~> @partial-block ~}}
 </div>