_style.scss (3101B)
1 /* Block Alignments */ 2 3 /** 4 * These selectors set the default max width for content appearing inside a post or page. 5 */ 6 .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), 7 *[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { 8 @extend %responsive-aligndefault-width; 9 } 10 11 /** 12 * .alignleft 13 */ 14 .alignleft { 15 16 /*rtl:ignore*/ 17 text-align: left; 18 19 margin-top: 0; 20 } 21 22 // Targeting the .entry-content class is necessary to ensure these styles 23 // only apply when the block isn't nested. 24 .entry-content > .alignleft { 25 max-width: var(--responsive--aligndefault-width); 26 @extend %responsive-alignleft; 27 } 28 29 @include media(mobile) { 30 31 .alignleft { 32 33 /*rtl:ignore*/ 34 float: left; 35 36 /*rtl:ignore*/ 37 margin-right: var(--global--spacing-horizontal); 38 margin-bottom: var(--global--spacing-vertical); 39 } 40 41 .entry-content > .alignleft { 42 max-width: calc(50% - var(--responsive--alignleft-margin)); 43 } 44 } 45 46 /** 47 * .aligncenter 48 */ 49 .aligncenter { 50 clear: both; 51 display: block; 52 float: none; 53 margin-right: auto; 54 margin-left: auto; 55 text-align: center; 56 } 57 58 /** 59 * .alignright 60 */ 61 .alignright { 62 63 margin-top: 0; 64 margin-bottom: var(--global--spacing-vertical); 65 } 66 67 // Targeting the .entry-content class is necessary to ensure these styles 68 // only apply when the block isn't nested. 69 .entry-content > .alignright { 70 max-width: var(--responsive--aligndefault-width); 71 @extend %responsive-alignright; 72 } 73 74 @include media(mobile) { 75 76 .alignright { 77 78 /*rtl:ignore*/ 79 float: right; 80 81 /*rtl:ignore*/ 82 margin-left: var(--global--spacing-horizontal); 83 } 84 85 .entry-content > .alignright { 86 max-width: calc(50% - var(--responsive--alignright-margin)); 87 } 88 } 89 90 // Make sure siblings of floated elements are top-aligned when nested 91 [class*="inner-container"] > .alignleft + *, 92 [class*="inner-container"] > .alignright + * { 93 margin-top: 0; 94 } 95 96 /** 97 * .alignwide 98 */ 99 .alignwide { 100 clear: both; 101 @extend %responsive-alignwide-width; 102 } 103 104 .alignwide [class*="inner-container"] > .alignwide { 105 @extend %responsive-alignwide-width-nested; 106 } 107 108 /** 109 * .alignfull 110 */ 111 .alignfull { 112 clear: both; 113 @extend %responsive-alignfull-width-mobile; 114 @extend %responsive-alignfull-width; 115 } 116 117 .alignfull [class*="inner-container"] > .alignwide { 118 @extend %responsive-alignwide-width-nested; 119 } 120 121 // Content alignment 122 .has-left-content { 123 justify-content: flex-start; 124 } 125 126 .has-right-content { 127 justify-content: flex-end; 128 } 129 130 // Parallax 131 .has-parallax { 132 background-attachment: fixed; 133 } 134 135 // Drop caps 136 .has-drop-cap:not(:focus)::first-letter { 137 font-family: var(--heading--font-family); 138 font-weight: var(--heading--font-weight); 139 line-height: 0.66; 140 text-transform: uppercase; 141 font-style: normal; 142 float: left; 143 margin: 0.1em 0.1em 0 0; 144 font-size: calc(1.2 * var(--heading--font-size-h1)); 145 } 146 147 .has-drop-cap:not(:focus)::after { 148 content: ""; 149 display: table; 150 clear: both; 151 padding-top: 14px; 152 } 153 154 .desktop-only { 155 display: none; 156 157 @include media(mobile) { 158 display: block; 159 } 160 }