[Summary view] [Print] [Text view]

   1  // CSS Grid
   2  
   3  body {
   4    display: flex;
   5    flex-direction: column;
   6  
   7    &.wrapper-fluid {
   8  
   9      .site-grid {
  10        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
  11        grid-gap: 0 ($cassiopeia-grid-gutter*2);
  12      }
  13  
  14      .grid-child {
  15        max-width: none;
  16      }
  17  
  18      header > .grid-child,
  19      footer > .grid-child {
  20        padding-right: $cassiopeia-grid-gutter*2;
  21        padding-left: $cassiopeia-grid-gutter*2;
  22      }
  23    }
  24  
  25    &:not(.has-sidebar-left) .site-grid .container-component {
  26      grid-column-start: main-start;
  27    }
  28  
  29    &:not(.has-sidebar-right) .site-grid .container-component {
  30      grid-column-end: main-end;
  31    }
  32  }
  33  
  34  .site-grid {
  35    margin-bottom: auto;
  36  }
  37  
  38  @supports (display: grid) {
  39    .site-grid {
  40      display: grid;
  41      grid-template-areas: ". banner banner banner banner ."
  42        ". top-a top-a top-a top-a ."
  43        ". top-b top-b top-b top-b ."
  44        ". comp comp comp comp ."
  45        ". side-r side-r side-r side-r ."
  46        ". side-l side-l side-l side-l ."
  47        ". bot-a bot-a bot-a bot-a ."
  48        ". bot-b bot-b bot-b bot-b .";
  49      grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
  50      grid-gap: 0 $cassiopeia-grid-gutter;
  51  
  52      > [class^="container-"],
  53      > [class*=" container-"] {
  54        width: 100%;
  55        max-width: none;
  56        column-gap: $cassiopeia-grid-gutter;
  57      }
  58  
  59      > .full-width {
  60        grid-column: full-start / full-end;
  61      }
  62  
  63      @include media-breakpoint-up(lg) {
  64        grid-template-areas: ". banner banner banner banner ."
  65          ". top-a top-a top-a top-a ."
  66          ". top-b top-b top-b top-b ."
  67          ". side-l comp comp side-r ."
  68          ". bot-a bot-a bot-a bot-a ."
  69          ". bot-b bot-b bot-b bot-b .";
  70      }
  71    }
  72  }
  73  
  74  .container-banner {
  75    grid-area: banner;
  76  }
  77  
  78  .container-top-a {
  79    grid-area: top-a;
  80  }
  81  
  82  .container-top-b {
  83    grid-area: top-b;
  84  }
  85  
  86  .container-component {
  87    grid-area: comp;
  88  }
  89  
  90  .container-sidebar-left {
  91    grid-area: side-l;
  92  }
  93  
  94  .container-sidebar-right {
  95    grid-area: side-r;
  96  }
  97  
  98  .container-main-top {
  99    grid-area: main-t;
 100  }
 101  
 102  .container-main-bottom {
 103    grid-area: main-b;
 104  }
 105  
 106  .container-breadcrumbs {
 107    grid-area: bread;
 108  }
 109  
 110  .container-bottom-a {
 111    grid-area: bot-a;
 112  }
 113  
 114  .container-bottom-b {
 115    grid-area: bot-b;
 116  }