vertical-margins.scss (3707B)
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 }