/* No context defined. */
  • Content:
    %article-layout {
      display: grid;
      grid-template-columns: $spacer-sm [content-start] 1fr [content-center-start] 3fr [content-center-end] 1fr [content-end] $spacer-sm; //magic numbers
      grid-template-rows: repeat(10, auto);
    
      margin-top: $spacer-base;
      padding-bottom: $spacer-base;
    
      .author-section {
        grid-column: content-start / content-end;
      }
    
      .content {
        display: flex;
        grid-column: content-start / content-end;
        flex-direction: column;
        row-gap: $spacer-base;
      }
    
      // Left aligned elements
      .toc {
        grid-column: content-start / content-end;
      }
    
      .cta-sidebar {
        grid-column: content-center-start / content-center-end;
        grid-row: -1;
      }
    
      > * + * {
        margin-top: $spacer-md;
      }
    
      super-quote,
      long-quote,
      pull-quote {
        @extend %container-vertical-spacing-lg;
    
        justify-self: center;
      }
    
      //Wrapper for contant that should not stretch
      .centered-content {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    
      .centered-content-75 {
        display: flex;
        align-self: center;
        justify-self: center;
        width: 75%;
      }
    
      @media screen and (max-width: $grid-breakpoint-sm) {
        .cta-sidebar {
          grid-column: content-start / content-end;
          margin-top: $spacer-base;
        }
      }
    
      // Breakpoints
      @media screen and (min-width: $grid-breakpoint-md) {
        padding-right: $spacer-xxl;
        padding-left: $spacer-xxl;
      }
    
      @media screen and (min-width: $grid-breakpoint-lg-xl) {
        grid-template-columns: 1fr 11rem 5rem 2rem [content-start] 10rem [content-center-start] 30rem [content-center-end] 10rem [content-end] 2rem 5rem 11rem 1fr;
        padding-right: $spacer-sm;
        padding-left: $spacer-sm;
    
        .author-section {
          grid-column: 5 / 6;
          grid-row: 1 / 2;
        }
    
        .content {
          grid-area: content;
          grid-row: 2 / 5;
        }
    
        // Left aligned elements
        .toc,
        .cta-sidebar {
          align-self: start;
          margin-top: $spacer-md;
          //display: flex;
          //flex-direction: column;
        }
    
        .toc {
          grid-column: 2 / 4;
          grid-row: 2 / 3;
        }
    
        .cta-sidebar {
          grid-column: 2 / 4;
          grid-row: 3 / 4;
          margin-top: $spacer-base;
        }
    
        // Right aligned elements
        .info-note {
          grid-column: 7 / 9;
          grid-row: 2/ 100;
          align-self: start;
        }
      }
    }
    
  • URL: /components/raw/article-layout/_article-layout.scss
  • Filesystem Path: components/02-layouts/page-layouts/article-layout/_article-layout.scss
  • Size: 2.3 KB
  • Handle: @article-layout
  • Preview:
  • Filesystem Path: components/02-layouts/page-layouts/article-layout/article-layout.html

No notes defined.