Sansify legacy modernization page and make FAQ cleaner

innoq · Mar 26, 2024 · 439e5b5 · 439e5b5
1 parent 01a3fb9
commit 439e5b5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss b/components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss
@@ -1,6 +1,10 @@
 .legacy-modernization-page {
  background: $gradient-2;
 
+ p {
+ @extend %body-font-sans;
+ }
+
  .longquote__zigzag {
  @include zigzag($gradient-header-background-color);
  }
@@ -15,20 +19,27 @@
 .faq-section {
  padding-right: $spacer-md;
  padding-left: $spacer-md;
- border-top: 6px solid $brand-primary;
- border-bottom: 6px solid $brand-primary;
 }
 
 .text-grid {
  display: grid;
  grid-template-columns: 1fr;
- row-gap: $spacer-lg;
+ row-gap: $spacer-md;
+
+ &__heading {
+ @extend %heading-font-bold;
+
+ & + p {
+ margin-top: $spacer-xxs;
+ }
+ }
 }
 
 @media screen and (min-width: $grid-breakpoint-md-lg) {
  .text-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
+ row-gap: $spacer-lg;
  column-gap: $spacer-lg;
  }
 }
diff --git a/components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html b/components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html
@@ -219,39 +219,39 @@ <h2>FAQ Legacy-Modernisierung</h2>
  <p>{{intro_text}}</p>
  <div class="text-grid">
  <div>
- <h3 class="textbox-sequence__header">Lorem ipsum test bla mehr text lorem?</h3>
+ <h3 class="text-grid__heading">Lorem ipsum test bla mehr text lorem?</h3>
  <p>{{text}}</p>
  </div>
  <div>
- <h3 class="textbox-sequence__header">Bla bla mehr text lorem?</h3>
+ <h3 class="text-grid__heading">Bla bla mehr text lorem?</h3>
  <p>{{intro_text}}</p>
  </div>
  <div>
- <h3 class="textbox-sequence__header">Fragen über Fragen?</h3>
+ <h3 class="text-grid__heading">Fragen über Fragen?</h3>
  <p>{{intro_text}}</p>
  </div>
  <div>
- <h3 class="textbox-sequence__header">Und noch eine?</h3>
+ <h3 class="text-grid__heading">Und noch eine?</h3>
  <p>{{text}}</p>
  </div>
  <div>
- <h3 class="textbox-sequence__header">Hallo?</h3>
+ <h3 class="text-grid__heading">Hallo?</h3>
  <p>{{text}}</p>
  </div>
  <div>
- <h3 class="textbox-sequence__header">Goodbye!</h3>
+ <h3 class="text-grid__heading">Goodbye!</h3>
  <p>{{intro_text}}</p>
  </div>
  <div>
- <h3 class="textbox-sequence__header">Und noch eine?</h3>
+ <h3 class="text-grid__heading">Und noch eine?</h3>
  <p>{{intro_text}}</p>
  </div>
  <div>
- <h3 class="textbox-sequence__header">Hallo?</h3>
+ <h3 class="text-grid__heading">Hallo?</h3>
  <p>{{intro_text}}</p>
  </div>
  <div>
- <h3 class="textbox-sequence__header">Goodbye!</h3>
+ <h3 class="text-grid__heading">Goodbye!</h3>
  <p>{{text}}</p>
  </div>
  </div>

diff --git a/lib/styles/01-base/_fonts.scss b/lib/styles/01-base/_fonts.scss
@@ -23,6 +23,13 @@
  font-style: normal;
 }
 
+%body-font-sans,
+.body-font-bold {
+ font-family: $font-family-sans-serif;
+ font-weight: normal;
+ font-style: normal;
+}
+
 %body-font-bold-italic,
 .body-font-bold-italic {
  font-family: $font-family-serif;