/* No context defined. */
  • Content:
    %article-layout {
      display: flex;
      flex-direction: column;
      padding: 0 $spacer-sm $spacer-base $spacer-sm;
    
      > * {
        margin-bottom: 0; // TODO: Remove this after cleanup
      }
    
      > * + * {
        margin-top: $spacer-base;
      }
    
      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 11rem 5rem 2rem 50rem 2rem 5rem 11rem 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,
          .zigzag,
          .centered-content-75 {
            grid-column: 5 / 6;
          }
          // Centered elements that are a bit wider than the textwurst
          figure,
          .two-column-image-divider-asymmetric,
          .case-teaser {
            grid-column: 3/ 8;
          }
    
          // Left aligned elements
          .toc {
            align-self: start;
            grid-column: 2 / 4;
            grid-row: 2 / 100;
          }
    
          // Right aligned elements
          .info-note {
            align-self: start;
            grid-column: 7 / 9;
            grid-row: 2/ 100;
          }
        }
      }
    }
    
    
  • URL: /components/raw/article-layout/_article-layout.scss
  • Filesystem Path: components/02-layouts/page-layouts/article-layout/_article-layout.scss
  • Size: 2.1 KB
  • Handle: @article-layout
  • Preview:
  • Filesystem Path: components/02-layouts/page-layouts/article-layout/article-layout.html

No notes defined.