[Summary view] [Print] [Text view]

   1  /**
   2   * Site Structure
   3   *
   4   * - Set vertical margins and responsive widths on
   5   *   top-level wrappers and content wrappers
   6   * - `--global--width-content` is a responsive variable
   7   * - See: globals/_global-width-responsive.scss
   8   */
   9  
  10  /**
  11   * Top Level Wrappers (header, main, footer)
  12   * - Set vertical padding and horizontal margins
  13   */
  14  .site-header,
  15  .site-main,
  16  .widget-area,
  17  .site-footer {
  18      padding-top: var(--global--spacing-vertical);
  19      padding-bottom: var(--global--spacing-vertical);
  20      margin-left: auto;
  21      margin-right: auto;
  22  }
  23  
  24  .site-header {
  25      padding-top: calc(0.75 * var(--global--spacing-vertical));
  26      padding-bottom: calc(2 * var(--global--spacing-vertical));
  27  
  28      @include media(mobile) {
  29          padding-bottom: calc(3 * var(--global--spacing-vertical));
  30      }
  31  }
  32  
  33  /**
  34   * Site-main children wrappers
  35   * - Add double vertical margins here for clearer hierarchy
  36   */
  37  .site-main > * {
  38      margin-top: calc(3 * var(--global--spacing-vertical));
  39      margin-bottom: calc(3 * var(--global--spacing-vertical));
  40  
  41      &:first-child {
  42          margin-top: 0;
  43      }
  44  
  45      &:last-child {
  46          margin-bottom: 0;
  47      }
  48  }
  49  
  50  /**
  51   * Set the default maximum responsive content-width
  52   */
  53  .default-max-width {
  54      @extend %responsive-aligndefault-width;
  55  }
  56  
  57  /**
  58   * Set the wide maximum responsive content-width
  59   */
  60  .wide-max-width {
  61      @extend %responsive-alignwide-width;
  62  }
  63  
  64  /**
  65   * Set the full maximum responsive content-width
  66   */
  67  .full-max-width {
  68      @extend %responsive-alignfull-width-mobile;
  69      @extend %responsive-alignfull-width;
  70  }
  71  
  72  /*
  73   * Block & non-gutenberg content wrappers
  74   * - Set margins
  75   */
  76  .entry-header,
  77  .post-thumbnail,
  78  .entry-content,
  79  .entry-footer,
  80  .author-bio {
  81      margin-top: var(--global--spacing-vertical);
  82      margin-right: auto;
  83      margin-bottom: var(--global--spacing-vertical);
  84      margin-left: auto;
  85  }
  86  
  87  /*
  88   * Block & non-gutenberg content wrapper children
  89   * - Sets spacing-vertical margin logic
  90   */
  91  .site-main > article > *, // apply vertical margins to article level
  92  .site-main > .not-found > *, // apply vertical margins to article level
  93  .entry-content > *,
  94  [class*="inner-container"] > *,
  95  .wp-block-template-part > *,
  96  .wp-block-post-template :where(li > *) { // using :where keeps specificity low.
  97  
  98      margin-top: calc(0.666 * var(--global--spacing-vertical));
  99      margin-bottom: calc(0.666 * var(--global--spacing-vertical));
 100  
 101      @include media(mobile) {
 102          margin-top: var(--global--spacing-vertical);
 103          margin-bottom: var(--global--spacing-vertical);
 104      }
 105  
 106      &:first-child {
 107          margin-top: 0;
 108      }
 109  
 110      &:last-child {
 111          margin-bottom: 0;
 112      }
 113  }
 114  
 115  .site-footer > *,
 116  .widget-area > * {
 117      margin-top: calc(0.666 * var(--global--spacing-vertical));
 118      margin-bottom: calc(0.666 * var(--global--spacing-vertical));
 119  
 120      @include media(mobile) {
 121          margin-top: var(--global--spacing-vertical);
 122          margin-bottom: var(--global--spacing-vertical);
 123      }
 124  }
 125  
 126  /*
 127   * Block & non-gutenberg content wrapper children
 128   * - Sets spacing-unit margins
 129   */
 130  //.site-header > *, // Removed, to align site title and menu.
 131  .entry-header > *,
 132  .post-thumbnail > *,
 133  .page-content > *,
 134  .comment-content > *,
 135  .widget > * {
 136      margin-top: var(--global--spacing-unit);
 137      margin-bottom: var(--global--spacing-unit);
 138  
 139      &:first-child {
 140          margin-top: 0;
 141      }
 142  
 143      &:last-child {
 144          margin-bottom: 0;
 145      }
 146  }
 147  
 148  
 149  /*
 150   * .entry-content children specific controls
 151   * - Adds special margin overrides for alignment utility classes
 152   */
 153  .entry-content > * {
 154  
 155      &.alignleft,
 156      &.alignright,
 157      &.alignleft:first-child + *,
 158      &.alignright:first-child + *,
 159      &.alignfull.has-background {
 160          margin-top: 0;
 161      }
 162  
 163      &:last-child,
 164      &.alignfull.has-background {
 165          margin-bottom: 0;
 166      }
 167  
 168      // Reset alignleft and alignright margins after alignfull
 169      &.alignfull + .alignleft,
 170      &.alignfull + .alignright {
 171          margin-top: var(--global--spacing-vertical);
 172      }
 173  }