/* No context defined. */
  • Content:
    %article-layout-simple {
      display: flex;
      flex-direction: column;
      padding: 0 $spacer-sm $spacer-base $spacer-sm;
    
      > * {
        margin-bottom: 0; //FIXME
      }
    
      > * + * {
        margin-top: $spacer-md;
      }
    
      blockquote,
      super-quote,
      long-quote {
        @extend %container-vertical-spacing-lg;
    
        max-width: 45rem;
        align-self: center;
      }
    
      //Wrapper for contant that should not stretch
      .centered-content {
        display: flex;
        align-items: center;
        justify-content: center;
    
        > * {
          margin-bottom: 0; //FIXME
        }
      }
    
      .centered-content-75 {
        display: flex;
        width: 75%;
        align-self: center;
        justify-self: center;
      }
    
      // Breakpoints
      @media screen and (min-width: $grid-breakpoint-md){
        padding-right: $spacer-xxl;
        padding-left: $spacer-xxl;
      }
    
      @supports (display: grid) {
        @media screen and (min-width: $grid-breakpoint-lg-xl) {
          display: grid;
          padding-right: $spacer-sm;
          padding-left: $spacer-sm;
          grid-template-columns: 1fr 7rem 50rem 7rem 1fr; //magic numbers
          grid-template-rows: auto;
    
          // Centered textwurst items
          h1,
          h2,
          h3,
          h4,
          h5,
          h6,
          p,
          ul,
          ol,
          check-list,
          bold-list,
          table,
          blockquote,
          super-quote,
          long-quote,
          pull-quote,
          info-box,
          pre,
          code,
          wall-of-consent,
          hr,
          .author-bio,
          .author-section,
          .footnote-section,
          .footnotes,
          .centered-content,
          .centered-content-75,
          .zigzag {
            grid-column: 3 / 4;
          }
          // Centered elements that are a bit wider than the textwurst
          figure,
          .two-column-image-divider-asymmetric,
          .case-teaser {
            grid-column: 2 / 5;
          }
        }
      }
    }
    
    
  • URL: /components/raw/article-layout-simple/_article-layout-simple.scss
  • Filesystem Path: components/02-layouts/page-layouts/article-layout-simple/_article-layout-simple.scss
  • Size: 1.8 KB
  • Handle: @article-layout-simple
  • Preview:
  • Filesystem Path: components/02-layouts/page-layouts/article-layout-simple/article-layout-simple.html

No notes defined.