heavy yak shaving the old layout depts away (#249)

innoq · Jul 27, 2022 · e2ccbbe · e2ccbbe
1 parent 99cf275
commit e2ccbbe
Show file tree

Hide file tree

Showing 107 changed files with 316 additions and 388 deletions.
diff --git a/components/01-pages/article-page-default/article-page-default.html b/components/01-pages/article-page-default/article-page-default.html
@@ -262,7 +262,7 @@ <h3 class="tag-section__headline">TAGS</h3>
     </section>
 
     <aside class="container-md">
-        <section class="blocks">
+        <section class="tile-grid-sm">
             <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                 <a rel="author" class ="author-bio__head" itemprop="url" href="#">
                     <div class="author-bio__image avatar avatar--base">

diff --git a/components/01-pages/culture-pages/culture-page-default/culture-page-default.html b/components/01-pages/culture-pages/culture-page-default/culture-page-default.html
@@ -63,7 +63,7 @@ <h1>Was uns wichtig ist</h1>
     </div>
 
     <div class="page-layout-xl--default">
-        <div class="blocks">
+        <div class="tile-grid-md">
             <a href="#" class="big-content-teaser big-content-teaser--image bg-image-culture-05">
                 <div class="big-content-teaser__content filled-background">
                     <div class="big-content-teaser__body">

diff --git a/components/01-pages/culture-pages/work-page/_work-page.scss b/components/01-pages/culture-pages/work-page/_work-page.scss
@@ -34,10 +34,5 @@
       min-height: ms(42);
     }
   }
-
-  .list-teaser-podcast,
-  .list-teaser-abstract {
-    margin-bottom: 0;
-  }
 }
 
diff --git a/components/01-pages/magazine-page/magazine-page.html b/components/01-pages/magazine-page/magazine-page.html
@@ -1,7 +1,7 @@
 <main role="main">
     <div class="page-layout-xl--default">
         <h2 class="teaser-section-heading">Magazin</h2>
-        <div class="blocks">
+        <div class="tile-grid-sm">
             <a href="#" class="topic-teaser bg-image-edition-02">
                 <div class="topic-teaser__body">
                     <div class="topic-teaser__caption">Schwerpunktthema</div>
@@ -19,7 +19,7 @@ <h1 class="topic-teaser__header">Microservices – der aktuelle Stand</h1>
     <section class="stripe stripe--gray">
         <div class="page-layout-xl--default">
             <h2 class="teaser-section-heading">Artikel</h2>
-            <div class="blocks">
+            <div class="tile-grid-sm">
                 <a href="#" class="content-teaser content-teaser--inverted">
                     <div class="content-teaser__body">
                         <div class="content-teaser__caption">Artikel</div>
@@ -87,7 +87,7 @@ <h2 class="content-teaser__header">Artikel Headline</h2>
                 <a class="link-teaser" href="#">Alle Artikel ansehen</a>
             </div>
             <h2 class="teaser-section-heading">Podcast</h2>
-            <div class="blocks">
+            <div class="tile-grid-sm">
                 <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
                     <div class="podcast-teaser__body">
                         <div class="podcast-teaser__caption">Podcast</div>
@@ -138,7 +138,7 @@ <h3 class="podcast-teaser__subheadline">
                 <a class="link-teaser" href="#">Alle Podcasts ansehen</a>
             </div>
             <h2 class="teaser-section-heading">News</h2>
-            <div class="blocks">
+            <div class="tile-grid-sm">
                 <a href="#" class="content-teaser content-teaser--inverted">
                     <div class="content-teaser__body">
                         <div class="content-teaser__caption">News</div>
@@ -172,27 +172,25 @@ <h2 class="content-teaser__header">News Headline</h2>
             </div>
         </div>
     </section>
-    <div class="blocks">
-        <div class="case-teaser bg-image-edition-06">
-            <div class="case-teaser__wrapper">
-                <div class="case-teaser__body">
-                    <div class="case-teaser__caption">ARTIST COLLABORATION</div>
-                    <div>
-                        <div class="case-teaser__header">
-                            <h1 class="punch-in bg-image-edition-06">INNOQ Digital Art</h1>
-                        </div>
-                    </div>
-                    <div class="case-teaser__text">
-                        Die Kollaborationsreihe „INNOQ Digital Art“ hat zum Ziel, die Zusammenarbeit mit ausgewählten
-                        Medienkünstlern zu fördern. Gemeinsam werden Fragen zu technologischem Fortschritt und dessen
-                        gesellschaftlichen Auswirkungen aus verschiedenen Perspektiven betrachtet. Dabei steht die
-                        gemeinsame Entwicklung von Kunstwerken und der intensive Austausch zwischen INNOQ-Mitarbeitern
-                        und den Künstlern im Fokus.
-                    </div>
-                    <div class="case-teaser__footer">
-                        <a class="link-teaser" href="#">Mehr erfahren</a>
+    <div class="case-teaser bg-image-edition-06">
+        <div class="case-teaser__wrapper">
+            <div class="case-teaser__body">
+                <div class="case-teaser__caption">ARTIST COLLABORATION</div>
+                <div>
+                    <div class="case-teaser__header">
+                        <h1 class="punch-in bg-image-edition-06">INNOQ Digital Art</h1>
                     </div>
                 </div>
+                <div class="case-teaser__text">
+                    Die Kollaborationsreihe „INNOQ Digital Art“ hat zum Ziel, die Zusammenarbeit mit ausgewählten
+                    Medienkünstlern zu fördern. Gemeinsam werden Fragen zu technologischem Fortschritt und dessen
+                    gesellschaftlichen Auswirkungen aus verschiedenen Perspektiven betrachtet. Dabei steht die
+                    gemeinsame Entwicklung von Kunstwerken und der intensive Austausch zwischen INNOQ-Mitarbeitern
+                    und den Künstlern im Fokus.
+                </div>
+                <div class="case-teaser__footer">
+                    <a class="link-teaser" href="#">Mehr erfahren</a>
+                </div>
             </div>
         </div>
     </div>

diff --git a/...ages/podcast-pages/innoq-podcast/innoq-podcast-detail-page/innoq-podcast-detail-page.html b/...ages/podcast-pages/innoq-podcast/innoq-podcast-detail-page/innoq-podcast-detail-page.html
@@ -120,7 +120,7 @@ <h3 class="share-section__heading">Share on</h3>
                 </li>
             </ul>
         </section>
-        <section class="blocks">
+        <section class="tile-grid-sm">
             <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                 <a rel="author" class ="author-bio__head" itemprop="url" href="#">
                     <div class="author-bio__image avatar avatar--base">

diff --git a/components/01-pages/service-pages/services-overview-page/_services-overview-page.scss b/components/01-pages/service-pages/services-overview-page/_services-overview-page.scss
@@ -1,5 +0,0 @@
-.services-page {
-  .blocks {
-    margin-bottom: 0;
-  }
-}

diff --git a/components/01-pages/service-pages/services-overview-page/services-overview-page.html b/components/01-pages/service-pages/services-overview-page/services-overview-page.html
@@ -21,7 +21,7 @@ <h1 class="text-header__title">
     </header>
 
     <section class="page-layout-xl--default">
-        <div class="blocks">
+        <div class="tile-grid-md">
             <a href="#" class="big-content-teaser big-content-teaser--inverted">
                 <div class="big-content-teaser__content">
                     <div class="big-content-teaser__body">
@@ -70,7 +70,7 @@ <h1 class="punch-in bg-image-edition-04">Software&shy;architektur und -entwicklu
     </section>
 
     <section class="page-layout-xl--default">
-        <div class="blocks">
+        <div class="tile-grid-md">
             <a href="#" class="big-content-teaser big-content-teaser--image bg-image-edition-02">
                 <div class="big-content-teaser__content filled-background">
                     <div class="big-content-teaser__body">

diff --git a/components/01-pages/training-pages/training-detail-page/training-detail-page.html b/components/01-pages/training-pages/training-detail-page/training-detail-page.html
@@ -75,7 +75,7 @@ <h3>Lernziele</h3>
 
     <aside class="container-md">
         <h3>Ihre Trainer:innen</h3>
-        <section class="blocks">
+        <section class="tile-grid-sm">
             <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                 <a rel="author" class ="author-bio__head" itemprop="url" href="#">
                     <div class="author-bio__image avatar avatar--base">

diff --git a/components/01-pages/training-pages/trainings-overview-page/trainings-overview-page.html b/components/01-pages/training-pages/trainings-overview-page/trainings-overview-page.html
@@ -43,7 +43,7 @@ <h2 class="list-teaser-training__headline">Titel</h2>
                     <span class="link-teaser inverted-interaction-color">Termine &amp; Details</span>
                 </div>
             </a>
-            <div class="blocks">
+            <div class="tile-grid-sm">
                 <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                     <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                         <div class="case-tile-teaser__body">
@@ -77,10 +77,6 @@ <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                         </div>
                     </div>
                 </a>
-            </div>
-
-
-            <div class="blocks">
                 <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                     <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                         <div class="case-tile-teaser__body">
@@ -116,7 +112,7 @@ <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
     </article>
     <article class="page-layout-md--default">
             <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
-            <div class="blocks">
+            <div class="tile-grid-sm">
                 <div class="simple-teaser">
                     <div class="simple-teaser__body">
                         <a class="simple-teaser__link">
@@ -143,9 +139,6 @@ <h6>Das ist ein Untertitel</h6>
                         </button>
                     </div>
                 </div>
-            </div>
-
-            <div class="blocks">
                 <div class="simple-teaser">
                     <div class="simple-teaser__body">
                         <a class="simple-teaser__link">
@@ -172,9 +165,6 @@ <h6>Das ist ein Untertitel</h6>
                         </button>
                     </div>
                 </div>
-            </div>
-
-            <div class="blocks">
                 <div class="simple-teaser">
                     <div class="simple-teaser__body">
                         <a class="simple-teaser__link">
@@ -201,9 +191,6 @@ <h6>Das ist ein Untertitel</h6>
                         </button>
                     </div>
                 </div>
-            </div>
-
-            <div class="blocks">
                 <div class="simple-teaser">
                     <div class="simple-teaser__body">
                         <a class="simple-teaser__link">

diff --git a/components/02-layouts/component-layouts/container/_container.scss b/components/02-layouts/component-layouts/container/_container.scss
@@ -11,10 +11,6 @@
   padding: 0 $spacer-xs;
   margin: 0 auto;
 
-  > * {
-    margin-bottom: 0;
-  }
-
   > * + * {
     margin-top: $spacer-base;
   }

diff --git a/components/02-layouts/component-layouts/masonry-layout/_masonry-layout.scss b/components/02-layouts/component-layouts/masonry-layout/_masonry-layout.scss
@@ -2,10 +2,6 @@
   display: grid;
   grid-gap: $spacer-md;
 
-  .case-teaser {
-    margin-bottom: 0;
-  }
-
   .case-teaser__body {
     top: 0;
   }

diff --git a/components/02-layouts/page-layouts/_page-layout-default.scss b/components/02-layouts/page-layouts/_page-layout-default.scss
@@ -6,6 +6,10 @@
 .page-layout-md--default,
 .page-layout-md--no-margin {
   padding: $spacer-sm;
+
+  > * + * {
+    margin-top: $spacer-base;
+  }
 }
 
 //

diff --git a/components/02-layouts/page-layouts/article-layout/_article-layout.scss b/components/02-layouts/page-layouts/article-layout/_article-layout.scss
@@ -3,10 +3,6 @@
   flex-direction: column;
   padding: 0 $spacer-sm $spacer-base $spacer-sm;
 
-  > * {
-    margin-bottom: 0;
-  }
-
   > * + * {
     margin-top: $spacer-base;
   }

diff --git a/components/02-layouts/page-layouts/main-layout/_main-layout.scss b/components/02-layouts/page-layouts/main-layout/_main-layout.scss
@@ -4,7 +4,7 @@
   align-items: center;
 
   > * {
-    margin-bottom: 0; //FIXME Remove when margin-bottom es removed from copmponents
+    margin-bottom: 0; //FIXME Remove when margin-bottom is removed from copmponents
   }
 
   > * + * {

diff --git a/components/03-organisms/cover/_cover.scss b/components/03-organisms/cover/_cover.scss
@@ -136,10 +136,6 @@
   height: 100px;
   margin-bottom: 0;
 
-  .author-bio {
-    margin-bottom: 0;
-  }
-
   .author-bio--short {
     margin-top: 0;
   }

diff --git a/components/04-molecules/article&blog-post-elements/cta-section/_cta-section.scss b/components/04-molecules/article&blog-post-elements/cta-section/_cta-section.scss
@@ -3,7 +3,7 @@
   text-align: center;
 
   > * {
-    margin-bottom: 0;
+    margin-bottom: 0; //Fixme
   }
 
   > * + * {

diff --git a/components/04-molecules/article&blog-post-elements/info-box/info-box.scss b/components/04-molecules/article&blog-post-elements/info-box/info-box.scss
@@ -2,7 +2,6 @@ $info-box-icon-font-size: ms(3);
 
 info-box {
   display: block;
-  margin-bottom: $spacer-base;
 }
 
 .infobox__teaser {

diff --git a/components/04-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss b/components/04-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss
@@ -2,7 +2,6 @@ long-quote > blockquote,
 %longquote,
 .longquote {
   padding: 2px 0;
-  margin-bottom: $spacer-md;
   text-align: center;
 
   > p {

diff --git a/components/04-molecules/article&blog-post-elements/share-section/_share-section.scss b/components/04-molecules/article&blog-post-elements/share-section/_share-section.scss
@@ -1,7 +1,6 @@
 .share-section {
   width: 50%;
   margin: 0 auto;
-  margin-bottom: $spacer-xl;
   text-align: center;
 
   .icon-arrow-long-down {

diff --git a/components/04-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss b/components/04-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss
@@ -1,6 +1,5 @@
 .toc {
   max-width: 100%;
-  margin-bottom: $spacer-lg;
 }
 
 .toc__heading {

diff --git a/components/04-molecules/article&blog-post-elements/tag-section/_tag-section.scss b/components/04-molecules/article&blog-post-elements/tag-section/_tag-section.scss
@@ -1,7 +1,6 @@
 .tag-section {
   padding-top: $spacer-base;
   padding-bottom: $spacer-lg;
-  margin-bottom: $spacer-lg;
   background-color: $meta-tags-background-color;
 }
 

diff --git a/components/04-molecules/article&blog-post-elements/wall-of-consent/_wall-of-consent.scss b/components/04-molecules/article&blog-post-elements/wall-of-consent/_wall-of-consent.scss
@@ -1,5 +1,4 @@
 wall-of-consent {
   display: block;
   width: 100%;
-  margin-bottom: $spacer-sm; //TODO Remove that
 }
diff --git a/components/04-molecules/visual-elements/date-location-section/_date-location-section.scss b/components/04-molecules/visual-elements/date-location-section/_date-location-section.scss
@@ -4,11 +4,4 @@
   padding-top: $spacer-sm;
   border-top: 1px solid $date-location-section-border-color;
   border-bottom: 1px solid $date-location-section-border-color;
-  margin-bottom: $spacer-sm;
-}
-
-@media screen and (min-width: $grid-breakpoint-md) {
-  .date-location-section {
-    margin-bottom: $spacer-xl;
-  }
 }
diff --git a/...ecules/visual-elements/teaser/list-teaser/abstract-list-teaser/_abstract-list-teaser.scss b/...ecules/visual-elements/teaser/list-teaser/abstract-list-teaser/_abstract-list-teaser.scss
@@ -56,7 +56,6 @@
 .list-teaser-abstract__text {
   @extend %heading-font-regular;
 
-  margin-bottom: 0;
   font-size: $font-size-base;
 
   &::first-letter {

diff --git a/...04-molecules/visual-elements/teaser/list-teaser/topic-list-teaser/_topic-list-teaser.scss b/...04-molecules/visual-elements/teaser/list-teaser/topic-list-teaser/_topic-list-teaser.scss
@@ -10,7 +10,6 @@ $topic-teaser-height: ms(36);
   align-items: center;
   justify-content: center;
   padding: $spacer-md;
-  margin-bottom: $spacer-base;
   background-position: top left;
   background-repeat: no-repeat;
   background-size: cover;