refactor scss boldHeadline

enhavo · Nov 6, 2024 · 20b0397 · 20b0397
1 parent 09fda87
commit 20b0397
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 17 deletions.
diff --git a/assets/theme/styles/blocks/advanced-text.scss b/assets/theme/styles/blocks/advanced-text.scss
@@ -6,8 +6,8 @@
       .copy{font-weight: 700;font-size: 2.4rem;line-height: 1.33em}
     }
     .headline-breaker{grid-column: 2 / span 4;
-       .headline{@include boldHeadline;text-transform: uppercase}
-     }
+    .boldHeadline{@include typoHeadline;}
+    }
     .one-column {grid-column: 1 /span 3;
     }
     .one-column-wide {display: flex;flex-direction: column;
@@ -19,4 +19,8 @@
       .two-column-btn {margin-left: auto}
     }
   }
+  .theme-headline{
+   font-size: 2.4rem;
+    line-height: 1.33em;
+  }
 }
diff --git a/assets/theme/styles/blocks/form.scss b/assets/theme/styles/blocks/form.scss
@@ -1,7 +1,6 @@
 .block-form {
   .form-grid {display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px;
     .text-container {grid-column: 2 / span 4;
-      .headline {color: $textColor3;@include boldHeadline()}
       .text {margin-top: 30px;text-transform: capitalize;font-size: 1.6rem;line-height: 1.25em}
     }
     .form {grid-column: 2 / span 4;

diff --git a/assets/theme/styles/blocks/hero.scss b/assets/theme/styles/blocks/hero.scss
@@ -23,7 +23,7 @@
     .hero-black-text-container {
       display: flex;flex-direction: column;align-items: center;
       padding: 49px 0 0;
-      .headline {color: $textColor1;}
+      .theme-headline {color: $textColor1;}
       .overline {color: $textColor1;}
       .copy {
         width: 45%;
@@ -41,8 +41,5 @@
       width: 50%;
     }
   }
-  .headline {
-    padding: 10px 0 15px 0;
-    @include boldHeadline();
-  }
+  .padding {padding: 10px 0 15px 0;}
 }
diff --git a/assets/theme/styles/blocks/nag-screen.scss b/assets/theme/styles/blocks/nag-screen.scss
@@ -29,8 +29,8 @@
     .headline {
       width: 30%;
       margin-top: 10px;
-      text-align: center;text-transform: uppercase;
-      @include boldHeadline();}
+      text-align: center;
+    }
     .copy {margin-top: 25px;text-align: center;width: 62%;}
   }
 }
diff --git a/assets/theme/styles/core/mixins.scss b/assets/theme/styles/core/mixins.scss
@@ -1,5 +1,5 @@
-@mixin boldHeadline{font-size: 5rem;line-height: 1.28em;font-weight: $fontWeight;}
 @mixin typoHeadline{font-size:$fontSizeHeadline1;color: $textColor3;font-family: $fontFamily1; line-height: $lineHeightHeadline1;font-weight: $fontWeight; letter-spacing: 0.45px; text-transform: uppercase;
+  &.boldHeadline{font-size: 5rem;line-height: 1.28em;font-weight: $fontWeight;text-transform: uppercase;}
   &.padding{padding: 5px 0 15px;}
 }
 @mixin typoOverline{font-size:$fontSizeOverline;color: $textColor3;font-family: $fontFamily1; line-height: $lineHeightOverline;font-weight: $fontWeight; letter-spacing: 0.375px; text-transform: uppercase;}

diff --git a/assets/theme/styles/theme/theme.scss b/assets/theme/styles/theme/theme.scss
@@ -26,8 +26,6 @@ body{padding-top: 123px;background: white;margin: 0;color: #000;font-family: "Op
             }
           }
           .sub-menu {
-            //background: black;
-            //position: absolute;
             display: none;
             top: calc(100% + 0.25rem);
             left: 0;

diff --git a/templates/theme/block/advanced-text.html.twig b/templates/theme/block/advanced-text.html.twig
@@ -3,7 +3,7 @@
         <div class="grid">
             <div class="{{ block.layout }}">
                 <div class="theme-overline">{{ block.overline|html_sanitize }}</div>
-                <div class="theme-headline padding headline">{{ block.headline|html_sanitize }}</div>
+                <div class="theme-headline boldHeadline padding">{{ block.headline|html_sanitize }}</div>
                 <div class="text-container">
                     {% if block.copy is iterable %}
                         {% for text in block.copy %}

diff --git a/templates/theme/block/form.html.twig b/templates/theme/block/form.html.twig
@@ -2,7 +2,7 @@
     <div class="theme-container">
         <div class="form-grid" data-controller="form">
             <div class="text-container">
-                <div class="theme-headline headline">{{ block.headline|html_sanitize }}</div>
+                <div class="theme-headline boldHeadline">{{ block.headline|html_sanitize }}</div>
                 <div class="theme-overline">{{ block.overline|html_sanitize }}</div>
                 <div class="text theme-headline">{{ block.text|html_sanitize }}</div>
             </div>

diff --git a/templates/theme/block/hero.html.twig b/templates/theme/block/hero.html.twig
@@ -6,7 +6,7 @@
             </div>
             <div class="text-container {{ block.layout }}-text-container">
                 <div class="overline">{{ block.overline|html_sanitize }}</div>
-                <div class="headline theme-headline ">{{ block.headline|html_sanitize }}</div>
+                <div class=" theme-headline padding boldHeadline">{{ block.headline|html_sanitize }}</div>
                 <div class="copy">{{ block.copy|html_sanitize }}</div>
                 {% if block.ctaTitle and block.ctaLink is not null %}
                     <div class="button-container">

diff --git a/templates/theme/block/nag-screen.html.twig b/templates/theme/block/nag-screen.html.twig
@@ -7,7 +7,7 @@
             <div class="flex">
                 <div class="text-container">
                     <div class="overline theme-overline">{{ block.overline|html_sanitize }}</div>
-                    <div class="headline ">{{ block.headline|html_sanitize }}</div>
+                    <div class="headline theme-headline boldHeadline">{{ block.headline|html_sanitize }}</div>
                     <div class="copy">{{ block.copy|html_sanitize }}</div>
                     <div class="button-container">
                         <a class="theme-cta theme-button"  href="{{ block.ctaLink }}" target="{{ block.ctaTarget }}">{{ block.ctaTitle }}</a>