hr-design-system-handlebars 0.47.4 → 0.47.7

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.47.7 (Mon Jun 13 2022)
+
+#### 🐛 Bug Fix
+
+- - adjusted teaserText size and Teaser Title Sizes [#242](https://github.com/mumprod/hr-design-system-handlebars/pull/242) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.47.6 (Wed Jun 08 2022)
+
+#### 🐛 Bug Fix
+
+- revision of alternative-teaser [#240](https://github.com/mumprod/hr-design-system-handlebars/pull/240) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.47.5 (Tue Jun 07 2022)
+
+#### 🐛 Bug Fix
+
+- some new code in header_alpine.js [#239](https://github.com/mumprod/hr-design-system-handlebars/pull/239) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.47.4 (Thu Jun 02 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1451,7 +1451,7 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
     font-size: 1rem;
-    line-height: 1.25rem;
+    line-height: 1.375rem;
 }
 .btn--xl {
     padding-left: 1.5rem;
@@ -1750,14 +1750,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     -ms-flex-negative: 0;
         flex-shrink: 0;
 }
-.basis-2\/5 {
-    -ms-flex-preferred-size: 40%;
-        flex-basis: 40%;
-}
 .basis-3\/5 {
     -ms-flex-preferred-size: 60%;
         flex-basis: 60%;
 }
+.basis-2\/5 {
+    -ms-flex-preferred-size: 40%;
+        flex-basis: 40%;
+}
 .-translate-x-1\/2 {
     --tw-translate-x: -50%;
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1896,6 +1896,9 @@ Ensure the default browser behavior of the `hidden` attribute.
        -moz-column-gap: 1rem;
             column-gap: 1rem;
 }
+.gap-y-3 {
+    row-gap: 0.75rem;
+}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-y-reverse: 0;
     border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2253,7 +2256,7 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 .text-base {
     font-size: 1rem;
-    line-height: 1.25rem;
+    line-height: 1.375rem;
 }
 .text-lg {
     font-size: 1.125rem;
@@ -2261,7 +2264,7 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 .text-xl {
     font-size: 1.25rem;
-    line-height: 1.75rem;
+    line-height: 1.675rem;
 }
 .text-2xl {
     font-size: 1.375rem;
@@ -2817,7 +2820,7 @@ Ensure the default browser behavior of the `hidden` attribute.
 
     .md\:text-base {
         font-size: 1rem;
-        line-height: 1.25rem;
+        line-height: 1.375rem;
     }
 
     .md\:text-4xl {

package/dist/views/components/site_header/header_alpine.js

@@ -1,5 +1,5 @@
 //Main Alpine Init Listener
-document.addEventListener('alpine:init', () => {       
+document.addEventListener('alpine:init', () => {
     // Alpine.stores for global variables 
     Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
     Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
@@ -7,23 +7,24 @@ document.addEventListener('alpine:init', () => {
     Alpine.store('searchFieldOpen', false);
     Alpine.store('serviceNavIsOpen', false);
     Alpine.store('searchID', {
-        current: '{{nextRandom}}'        
+        current: '{{nextRandom}}'
     });
     Alpine.store('serviceID', {
         open: false,
-        current: '0'        
+        current: '0'
     });
     Alpine.store('navIsVisible', true);
+    Alpine.store('subNavIsVisible', false);
 
     // context for the main header element
     Alpine.data('mainNavigationHandler', () =>({
-        
+
         debounce (callback, wait) {
             let timeoutId = null;
             return (...args) => {
                 window.clearTimeout(timeoutId);
                 timeoutId = window.setTimeout(() => {
-                callback.apply(null, args);
+                    callback.apply(null, args);
                 }, wait);
             };
 
@@ -33,14 +34,15 @@ document.addEventListener('alpine:init', () => {
             let height = top.innerHeight
 
             window.addEventListener('scroll', this.debounce( () => {
-                let winScroll = document.body.scrollTop || document.documentElement.scrollTop 
+                let winScroll = document.body.scrollTop || document.documentElement.scrollTop
                 winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
                 //let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
                 this.percent = Math.round((winScroll / height) * 100)
                 lastScrollTop = winScroll
-                //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent) 
+                //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent)
                 this.$store.navIsVisible = !this.isNavHidden()
-                //console.log(this.$store.navIsVisible);      
+                this.$store.subNavIsVisible = !this.isSubNavHidden()
+                //console.log(this.$store.navIsVisible);
             },50))
         },
         percent: 0,
@@ -52,22 +54,33 @@ document.addEventListener('alpine:init', () => {
                 return this.shouldServiceNavBeHidden()
             }
         },
+        isSubNavHidden() {
+            if(this.$screen('lg')){
+                if (document.querySelector('.isSelectedAndOpen') !== null) {
+                    return false
+                } else {
+                    return true
+                }
+            } else {
+                return true
+            }
+        },
         shouldBrandNavBeHidden() {
-            return this.percent > 0 
+            return this.percent > 0
         },
         shouldSectionNavBeHidden() {
             return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
         },
         shouldServiceNavBeHidden() {
-            return (this.percent > 90  && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false) 
+            return (this.percent > 90  && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
         },
         shouldServiceIconsBeHidden() {
-            return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false  && this.scrollingDown == false) 
+            return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false  && this.scrollingDown == false)
         },
         shouldFlyoutBeHidden() {
             return (this.percent > 50  && this.scrollingDown && this.$screen('lg') )
         },
-        resetNav() { 
+        resetNav() {
             if(window.innerWidth > 1023) {
                 this.$refs.sectionnavigation.setAttribute("style","")
             } else {
@@ -85,8 +98,8 @@ document.addEventListener('alpine:init', () => {
                 this.$store.clientWidth = nowClientWidth
             }
             else{
-            // timeout is used to dispatch events after the resize is done
-                let timeout 
+                // timeout is used to dispatch events after the resize is done
+                let timeout
                 clearTimeout(timeout)
                 timeout = setTimeout(() => {
                     this.$refs.sectionnavigation.classList.remove('hidden')
@@ -100,29 +113,29 @@ document.addEventListener('alpine:init', () => {
                 nextNowClientHeight = nowClientHeight
                 this.$store.clientWidth = nowClientWidth
             }
-        }, 
+        },
         toggleSectionNav() {
-        //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )  
-        //true = sectionNav öffnet (maxheight = scrollheight)   
-            console.log('toggleSectionNav, Event: ' + this.$event.detail )    
-            if(this.$event.detail === false) {                   
-                if (window.innerWidth < 1024) { 
+            //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )
+            //true = sectionNav öffnet (maxheight = scrollheight)
+            console.log('toggleSectionNav, Event: ' + this.$event.detail )
+            if(this.$event.detail === false) {
+                if (window.innerWidth < 1024) {
                     this.$refs.sectionnavigation.style.maxHeight='0px'
-                } else { 
+                } else {
                     this.$refs.sectionnavigation.style.maxHeight = ''
                 }
             } else {
                 let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
                 let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
-                let brandNavHeight = this.percent > 0 ? 40 : 0 
-            
+                let brandNavHeight = this.percent > 0 ? 40 : 0
+
                 if(navheight > winheightcorr){
                     this.$refs.sectionnavigation.style.overflowY = 'scroll'
                     this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
-                    
+
                 } else {
                     this.$refs.sectionnavigation.style.overflowY = 'hidden'
-                    this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px' 
+                    this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
                 }
             }
         },
@@ -142,39 +155,39 @@ document.addEventListener('alpine:init', () => {
             }
             if(this.$screen('lg') && mode == true){
                 this.enableScrolling()
-            }            
-        }          
+            }
+        }
 
     }))
 
     // context for the overlay
     Alpine.data('overlayHandler', () => ({
-                shouldOverlayBeShown() {
-                        return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
-                    },
-                overlayWasClicked() {
-                    this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
-                    this.$dispatch('burger-close')
-                    this.$dispatch('close-servicemenu')
-                    // this.$dispatch('toggleScrolling', true )
-                    this.toggleScrolling(true)
-                }
-        }))
+        shouldOverlayBeShown() {
+            return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
+        },
+        overlayWasClicked() {
+            this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
+            this.$dispatch('burger-close')
+            this.$dispatch('close-servicemenu')
+            // this.$dispatch('toggleScrolling', true )
+            this.toggleScrolling(true)
+        }
+    }))
 
     // context for all dropdowns
     Alpine.data('dropdown', () => ({
         dropped: false,
         toggle() {
-            this.dropped = ! this.dropped; 
+            this.dropped = ! this.dropped;
         },
         toggleServiceNav(){
             this.dropped = ! this.dropped;
             this.$store.searchFieldOpen = false;
-            
-            this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null; 
-            
+
+            this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
+
             this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
-            
+
             console.log('currentID: '+ this.$store.serviceID.current)
             console.log('target-id: '+this.$event.target.id)
             console.log('element-id: '+this.$el.id)
@@ -183,70 +196,71 @@ document.addEventListener('alpine:init', () => {
             this.$store.serviceID.current = this.$el.id
 
             this.toggleScrolling(!this.$store.serviceNavIsOpen)
-            
+
             let myFlyout = document.querySelector('#flyout-'+this.$el.id)
-            let brandNavHeight = this.percent > 0 ? 40 : 0 
+            let brandNavHeight = this.percent > 0 ? 40 : 0
 
             if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
                 window.setTimeout(function(){
                     if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
                         myFlyout.style.height = 'auto'
-                        window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px' 
+                        window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
                         myFlyout.style.overflowY = 'scroll'
                     } else {
                         myFlyout.style.maxHeight = ''
-                      //myFlyout.style.overflowY = 'hidden'
-                        }
+                        //myFlyout.style.overflowY = 'hidden'
+                    }
                 },150)
             }
         }
     }))
 
     // There are several Flyouts sharing the same functionality and context, so put the data in an Alpine.data to make it reusable
-    Alpine.data('flyoutHandler', () => ({   
+    Alpine.data('flyoutHandler', () => ({
         init() {
-            //Initial: x-collapse only on mobile/tablet 
+            //Initial: x-collapse only on mobile/tablet
             if(window.innerWidth < 1024) {
                 this.$el.setAttribute("x-collapse","")
-            }  
+            }
         },
         sectionNavFlyoutWatcher() {
             //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
             this.$watch('dropped', value => {
                 let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
                 let brandNavHeight = this.percent > 0 ? 40 : 0
-                if(window.innerWidth < 1024) { 
-                    if(value == true ) { 
-                    
+                if(window.innerWidth < 1024) {
+                    if(value == true ) {
+
                         if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
                             this.$refs.sectionnavigation.style.maxHeight = a +'px'
                             this.$refs.sectionnavigation.style.overflowY = 'hidden'
                         } else {
                             this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
                             this.$refs.sectionnavigation.style.overflowY = 'scroll'
-                        } 
+                        }
                     } else {
                         if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
                             this.$refs.sectionnavigation.style.overflowY = 'hidden'
                         } else {
-                            this.$refs.sectionnavigation.style.overflowY = 'scroll' 
+                            this.$refs.sectionnavigation.style.overflowY = 'scroll'
                         }
                     }
                 }
-            })   
+
+            })
         },
         setFlyoutAnimationStyle() {
             //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
             if(window.innerWidth > 1023) {
                 if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
                     this.$el.removeAttribute("x-collapse.duration.500ms")
-                    delete this.$el._x_transition; 
-                    this.$el.style.removeProperty('overflow'); 
-                    this.$el.style.removeProperty('height'); 
+                    delete this.$el._x_transition;
+                    this.$el.style.removeProperty('overflow');
+                    this.$el.style.removeProperty('height');
                     if (! this.$el._x_isShown) this.$el.style.display = 'none'
                     if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
                 }
-                
+
             } else {
                 if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
             }

package/dist/views/components/teaser/components/teaser_comments.hbs

@@ -1,6 +1,6 @@
 {{#with this.commentLink}}
     <span class="whitespace-nowrap">
-        {{#>components/base/link css="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
+        {{#>components/base/link css="hover:underline decoration-1" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="comment" }}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>
             <span class="text-toplineColor">{{../../this.commentNumber}}</span>

package/dist/views/components/teaser/components/teaser_text.hbs

@@ -1,8 +1,8 @@
 <span
     class='{{inline-switch
             size
-            '["hero","100","25"]'
-            '["block md:text-base","hidden md:block md:text-base","hidden","hidden md:block"]'
+            '["hero","25"]'
+            '["block","hidden","hidden md:block"]'
         }}
-        text-sm mt-3 font-copy'
+        text-base mt-3 font-copy'
 >{{text}}</span>

package/dist/views/components/teaser/components/teaser_topline.hbs

@@ -1,5 +1,5 @@
 <span 
-    class="leading-5.5 pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
+    class="pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
     aria-label="{{readMore}}: {{text}}"
 >
     {{text}}

package/dist/views/components/teaser/teaser_alternativ.hbs

@@ -1,20 +1,22 @@
-<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 flex-row ","md:col-span-4 flex-row","md:col-span-6 flex-row","flex-row"]'}} ">
-    <figure class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9","basis-3/5 ar-16-9", "ar-16-9"]'}} ">
-        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}
-            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../_noDelay addClassImg="" ~}}
+<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6 flex-row","flex-row"]'}} ">
+    <figure class="{{inline-switch this.teaserSize '["hero"]' '["basis-3/5 ar-16-9", "ar-16-9"]'}} ">
+        {{#>components/base/link css="" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
+            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
         {{/components/base/link}}  
     </figure>
-    <div class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-3/5 md:flex-full" , "basis-2/5"]'}} ">
-        <header class="md:px-0 {{inline-switch teasersize '["25"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
-                headlineTag=this.headlineTag 
-                label=this.label 
-                readMore=this.link.readMoreText.readMoreScreenreader 
-                size=this.teaserSize 
-                title=this.title 
-                topline=this.topline}}            
+    <div class="{{inline-switch this.teaserSize '["hero"]' '["basis-2/5"]'}} ">
+        <header class="px-5 md:px-0">
+            {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
+                {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
+                    headlineTag=this.headlineTag 
+                    label=this.label 
+                    readMore=this.link.readMoreText.readMoreScreenreader 
+                    size=this.teaserSize 
+                    title=this.title 
+                    topline=this.topline}} 
+            {{/components/base/link}}               
         </header>
-        <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
+        <section class="px-5 md:px-0">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

package/dist/views/components/teaser/teaser_standard.hbs

@@ -1,4 +1,4 @@
-<article class="col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="{{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
         {{#>components/base/link isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
             {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.47.4",
+    "version": "0.47.7",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/stories/Typography.stories.mdx

@@ -18,9 +18,9 @@ Zur Auszeichnung von Fließtexten stehen die folgenden Utility Klassen zur verf
 | `font-copy` | `font-family: DIN, sans-serif`                      |                    | Setzt die Eigenschaft `font-family`                   |
 | `text-xs`   | `font-size: 0.75rem` <br /> `line-height: 1rem`     | `12px`<br />`16px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-sm`   | `font-size: 0.875rem` <br /> `line-height: 1.88rem` | `14px`<br />`19px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-base` | `font-size: 1rem` <br /> `line-height: 1.25rem`     | `16px`<br />`20px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-lg`   | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-xl`   | `font-size: 1.25rem` <br /> `line-height: 1.75rem`  | `20px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-base` | `font-size: 1rem` <br /> `line-height: 1.375rem`    | `16px`<br />`22px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-lg`   | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-xl`   | `font-size: 1.25rem` <br /> `line-height: 1.75rem`  | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
 
 ### Verwendung
 
@@ -90,11 +90,11 @@ Zur Auszeichnung von Überschriften stehen die folgenden Utility Klassen zur ver
 | :------------------ | :-------------------------------------------------- | ------------------ | :---------------------------------------------------- |
 | `font-headingSerif` | `font-family: RobotoSlab, serif`                    |                    | Setzt die Eigenschaft `font-family`                   |
 | `font-heading`      | `font-family: RobotoCond, sans-serif`               |                    | Setzt die Eigenschaft `font-family`                   |
-| `text-lg`           | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.75rem`  | `20px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-2xl`          | `font-size: 1.375rem` <br /> `line-height: 2rem`    | `22px`<br />`32px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-lg`           | `font-size: 1.125rem` <br /> `line-height: 1.5rem`  | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.675rem` | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-2xl`          | `font-size: 1.375rem` <br /> `line-height: 1.75rem` | `22px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-3xl`          | `font-size: 1.875rem` <br /> `line-height: 2.25rem` | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-4xl`          | `font-size: 2.125rem` <br /> `line-height: 2.25rem` | `34px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-4xl`          | `font-size: 2.125rem` <br /> `line-height: 2.375rem`| `34px`<br />`38px` | Setzt die Eigenschaften `font-size` und `line-height` |
 
 ### Verwendung RobotoSlab
 

package/src/stories/views/components/site_header/header_alpine.js

@@ -1,5 +1,5 @@
 //Main Alpine Init Listener
-document.addEventListener('alpine:init', () => {       
+document.addEventListener('alpine:init', () => {
     // Alpine.stores for global variables 
     Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
     Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
@@ -7,23 +7,24 @@ document.addEventListener('alpine:init', () => {
     Alpine.store('searchFieldOpen', false);
     Alpine.store('serviceNavIsOpen', false);
     Alpine.store('searchID', {
-        current: '{{nextRandom}}'        
+        current: '{{nextRandom}}'
     });
     Alpine.store('serviceID', {
         open: false,
-        current: '0'        
+        current: '0'
     });
     Alpine.store('navIsVisible', true);
+    Alpine.store('subNavIsVisible', false);
 
     // context for the main header element
     Alpine.data('mainNavigationHandler', () =>({
-        
+
         debounce (callback, wait) {
             let timeoutId = null;
             return (...args) => {
                 window.clearTimeout(timeoutId);
                 timeoutId = window.setTimeout(() => {
-                callback.apply(null, args);
+                    callback.apply(null, args);
                 }, wait);
             };
 
@@ -33,14 +34,15 @@ document.addEventListener('alpine:init', () => {
             let height = top.innerHeight
 
             window.addEventListener('scroll', this.debounce( () => {
-                let winScroll = document.body.scrollTop || document.documentElement.scrollTop 
+                let winScroll = document.body.scrollTop || document.documentElement.scrollTop
                 winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
                 //let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
                 this.percent = Math.round((winScroll / height) * 100)
                 lastScrollTop = winScroll
-                //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent) 
+                //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent)
                 this.$store.navIsVisible = !this.isNavHidden()
-                //console.log(this.$store.navIsVisible);      
+                this.$store.subNavIsVisible = !this.isSubNavHidden()
+                //console.log(this.$store.navIsVisible);
             },50))
         },
         percent: 0,
@@ -52,22 +54,33 @@ document.addEventListener('alpine:init', () => {
                 return this.shouldServiceNavBeHidden()
             }
         },
+        isSubNavHidden() {
+            if(this.$screen('lg')){
+                if (document.querySelector('.isSelectedAndOpen') !== null) {
+                    return false
+                } else {
+                    return true
+                }
+            } else {
+                return true
+            }
+        },
         shouldBrandNavBeHidden() {
-            return this.percent > 0 
+            return this.percent > 0
         },
         shouldSectionNavBeHidden() {
             return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
         },
         shouldServiceNavBeHidden() {
-            return (this.percent > 90  && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false) 
+            return (this.percent > 90  && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
         },
         shouldServiceIconsBeHidden() {
-            return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false  && this.scrollingDown == false) 
+            return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false  && this.scrollingDown == false)
         },
         shouldFlyoutBeHidden() {
             return (this.percent > 50  && this.scrollingDown && this.$screen('lg') )
         },
-        resetNav() { 
+        resetNav() {
             if(window.innerWidth > 1023) {
                 this.$refs.sectionnavigation.setAttribute("style","")
             } else {
@@ -85,8 +98,8 @@ document.addEventListener('alpine:init', () => {
                 this.$store.clientWidth = nowClientWidth
             }
             else{
-            // timeout is used to dispatch events after the resize is done
-                let timeout 
+                // timeout is used to dispatch events after the resize is done
+                let timeout
                 clearTimeout(timeout)
                 timeout = setTimeout(() => {
                     this.$refs.sectionnavigation.classList.remove('hidden')
@@ -100,29 +113,29 @@ document.addEventListener('alpine:init', () => {
                 nextNowClientHeight = nowClientHeight
                 this.$store.clientWidth = nowClientWidth
             }
-        }, 
+        },
         toggleSectionNav() {
-        //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )  
-        //true = sectionNav öffnet (maxheight = scrollheight)   
-            console.log('toggleSectionNav, Event: ' + this.$event.detail )    
-            if(this.$event.detail === false) {                   
-                if (window.innerWidth < 1024) { 
+            //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )
+            //true = sectionNav öffnet (maxheight = scrollheight)
+            console.log('toggleSectionNav, Event: ' + this.$event.detail )
+            if(this.$event.detail === false) {
+                if (window.innerWidth < 1024) {
                     this.$refs.sectionnavigation.style.maxHeight='0px'
-                } else { 
+                } else {
                     this.$refs.sectionnavigation.style.maxHeight = ''
                 }
             } else {
                 let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
                 let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
-                let brandNavHeight = this.percent > 0 ? 40 : 0 
-            
+                let brandNavHeight = this.percent > 0 ? 40 : 0
+
                 if(navheight > winheightcorr){
                     this.$refs.sectionnavigation.style.overflowY = 'scroll'
                     this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
-                    
+
                 } else {
                     this.$refs.sectionnavigation.style.overflowY = 'hidden'
-                    this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px' 
+                    this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
                 }
             }
         },
@@ -142,39 +155,39 @@ document.addEventListener('alpine:init', () => {
             }
             if(this.$screen('lg') && mode == true){
                 this.enableScrolling()
-            }            
-        }          
+            }
+        }
 
     }))
 
     // context for the overlay
     Alpine.data('overlayHandler', () => ({
-                shouldOverlayBeShown() {
-                        return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
-                    },
-                overlayWasClicked() {
-                    this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
-                    this.$dispatch('burger-close')
-                    this.$dispatch('close-servicemenu')
-                    // this.$dispatch('toggleScrolling', true )
-                    this.toggleScrolling(true)
-                }
-        }))
+        shouldOverlayBeShown() {
+            return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
+        },
+        overlayWasClicked() {
+            this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
+            this.$dispatch('burger-close')
+            this.$dispatch('close-servicemenu')
+            // this.$dispatch('toggleScrolling', true )
+            this.toggleScrolling(true)
+        }
+    }))
 
     // context for all dropdowns
     Alpine.data('dropdown', () => ({
         dropped: false,
         toggle() {
-            this.dropped = ! this.dropped; 
+            this.dropped = ! this.dropped;
         },
         toggleServiceNav(){
             this.dropped = ! this.dropped;
             this.$store.searchFieldOpen = false;
-            
-            this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null; 
-            
+
+            this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
+
             this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
-            
+
             console.log('currentID: '+ this.$store.serviceID.current)
             console.log('target-id: '+this.$event.target.id)
             console.log('element-id: '+this.$el.id)
@@ -183,70 +196,71 @@ document.addEventListener('alpine:init', () => {
             this.$store.serviceID.current = this.$el.id
 
             this.toggleScrolling(!this.$store.serviceNavIsOpen)
-            
+
             let myFlyout = document.querySelector('#flyout-'+this.$el.id)
-            let brandNavHeight = this.percent > 0 ? 40 : 0 
+            let brandNavHeight = this.percent > 0 ? 40 : 0
 
             if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
                 window.setTimeout(function(){
                     if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
                         myFlyout.style.height = 'auto'
-                        window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px' 
+                        window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
                         myFlyout.style.overflowY = 'scroll'
                     } else {
                         myFlyout.style.maxHeight = ''
-                      //myFlyout.style.overflowY = 'hidden'
-                        }
+                        //myFlyout.style.overflowY = 'hidden'
+                    }
                 },150)
             }
         }
     }))
 
     // There are several Flyouts sharing the same functionality and context, so put the data in an Alpine.data to make it reusable
-    Alpine.data('flyoutHandler', () => ({   
+    Alpine.data('flyoutHandler', () => ({
         init() {
-            //Initial: x-collapse only on mobile/tablet 
+            //Initial: x-collapse only on mobile/tablet
             if(window.innerWidth < 1024) {
                 this.$el.setAttribute("x-collapse","")
-            }  
+            }
         },
         sectionNavFlyoutWatcher() {
             //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
             this.$watch('dropped', value => {
                 let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
                 let brandNavHeight = this.percent > 0 ? 40 : 0
-                if(window.innerWidth < 1024) { 
-                    if(value == true ) { 
-                    
+                if(window.innerWidth < 1024) {
+                    if(value == true ) {
+
                         if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
                             this.$refs.sectionnavigation.style.maxHeight = a +'px'
                             this.$refs.sectionnavigation.style.overflowY = 'hidden'
                         } else {
                             this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
                             this.$refs.sectionnavigation.style.overflowY = 'scroll'
-                        } 
+                        }
                     } else {
                         if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
                             this.$refs.sectionnavigation.style.overflowY = 'hidden'
                         } else {
-                            this.$refs.sectionnavigation.style.overflowY = 'scroll' 
+                            this.$refs.sectionnavigation.style.overflowY = 'scroll'
                         }
                     }
                 }
-            })   
+
+            })
         },
         setFlyoutAnimationStyle() {
             //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
             if(window.innerWidth > 1023) {
                 if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
                     this.$el.removeAttribute("x-collapse.duration.500ms")
-                    delete this.$el._x_transition; 
-                    this.$el.style.removeProperty('overflow'); 
-                    this.$el.style.removeProperty('height'); 
+                    delete this.$el._x_transition;
+                    this.$el.style.removeProperty('overflow');
+                    this.$el.style.removeProperty('height');
                     if (! this.$el._x_isShown) this.$el.style.display = 'none'
                     if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
                 }
-                
+
             } else {
                 if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
             }

package/src/stories/views/components/teaser/components/teaser_comments.hbs

@@ -1,6 +1,6 @@
 {{#with this.commentLink}}
     <span class="whitespace-nowrap">
-        {{#>components/base/link css="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
+        {{#>components/base/link css="hover:underline decoration-1" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="comment" }}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>
             <span class="text-toplineColor">{{../../this.commentNumber}}</span>

package/src/stories/views/components/teaser/components/teaser_text.hbs

@@ -1,8 +1,8 @@
 <span
     class='{{inline-switch
             size
-            '["hero","100","25"]'
-            '["block md:text-base","hidden md:block md:text-base","hidden","hidden md:block"]'
+            '["hero","25"]'
+            '["block","hidden","hidden md:block"]'
         }}
-        text-sm mt-3 font-copy'
+        text-base mt-3 font-copy'
 >{{text}}</span>

package/src/stories/views/components/teaser/components/teaser_topline.hbs

@@ -1,5 +1,5 @@
 <span 
-    class="leading-5.5 pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
+    class="pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
     aria-label="{{readMore}}: {{text}}"
 >
     {{text}}

package/src/stories/views/components/teaser/teaser_alternativ.hbs

@@ -1,20 +1,22 @@
-<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 flex-row ","md:col-span-4 flex-row","md:col-span-6 flex-row","flex-row"]'}} ">
-    <figure class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9","basis-3/5 ar-16-9", "ar-16-9"]'}} ">
-        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}
-            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../_noDelay addClassImg="" ~}}
+<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6 flex-row","flex-row"]'}} ">
+    <figure class="{{inline-switch this.teaserSize '["hero"]' '["basis-3/5 ar-16-9", "ar-16-9"]'}} ">
+        {{#>components/base/link css="" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
+            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
         {{/components/base/link}}  
     </figure>
-    <div class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-3/5 md:flex-full" , "basis-2/5"]'}} ">
-        <header class="md:px-0 {{inline-switch teasersize '["25"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
-                headlineTag=this.headlineTag 
-                label=this.label 
-                readMore=this.link.readMoreText.readMoreScreenreader 
-                size=this.teaserSize 
-                title=this.title 
-                topline=this.topline}}            
+    <div class="{{inline-switch this.teaserSize '["hero"]' '["basis-2/5"]'}} ">
+        <header class="px-5 md:px-0">
+            {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
+                {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
+                    headlineTag=this.headlineTag 
+                    label=this.label 
+                    readMore=this.link.readMoreText.readMoreScreenreader 
+                    size=this.teaserSize 
+                    title=this.title 
+                    topline=this.topline}} 
+            {{/components/base/link}}               
         </header>
-        <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
+        <section class="px-5 md:px-0">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

package/src/stories/views/components/teaser/teaser_alternativ.stories.mdx

@@ -8,8 +8,6 @@ import heroTeaserWithLabel from './fixtures/teaser_alternative_hero_serif_label.
 import heroTeaserWithComments from './fixtures/teaser_alternative_hero_serif_comments.json'
 import teaser100 from './fixtures/teaser_alternative_100_serif.json'
 import teaser50 from './fixtures/teaser_alternative_50_serif.json'
-import teaser33 from './fixtures/teaser_alternative_33_serif.json'
-import teaser25 from './fixtures/teaser_alternative_25_serif.json'
 
 <Meta
     title="Komponenten/Teaser/Alternativ"
@@ -20,7 +18,7 @@ import teaser25 from './fixtures/teaser_alternative_25_serif.json'
         teasersize: {
             control: {
                 type: 'select',
-                options: ['hero', '100', '50', '33', '25'],
+                options: ['hero', '100', '50'],
             },
             description: 'Teaser Größe',
             table: {
@@ -70,10 +68,4 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
     <Story name="Alternativ 50" args={teaser50.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
-    <Story name="Alternativ 33" args={teaser33.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Alternativ 25" args={teaser25.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-</Preview>
+</Preview>

package/src/stories/views/components/teaser/teaser_standard.hbs

@@ -1,4 +1,4 @@
-<article class="col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="{{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
         {{#>components/base/link isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
             {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}

package/tailwind.config.js

@@ -40,8 +40,9 @@ module.exports = {
             fontSize: {  
                 'xs':['0.75rem', '1.063rem'], 
                 'sm':['0.875rem', '1.188rem'], 
-                'base':['1rem', '1.25rem'],                 
-                'lg':['1.125rem', '1.5rem'],              
+                'base':['1rem', '1.375rem'],                 
+                'lg':['1.125rem', '1.5rem'],  
+                'xl':['1.25rem', '1.675rem'],              
                 '2xl':['1.375rem', '1.75rem'],
                 '4xl':['2.125rem', '2.375rem'],
             },