entry.scss (4097B)
1 .entry-title { 2 3 color: var(--entry-header--color); 4 font-size: var(--entry-header--font-size); 5 letter-spacing: var(--heading--letter-spacing-h2); 6 line-height: var(--heading--line-height-h2); 7 overflow-wrap: break-word; 8 9 a { 10 color: var(--entry-header--color-link); 11 text-underline-offset: 0.15em; 12 13 &:hover { 14 color: var(--entry-header--color-hover); 15 } 16 17 &:focus { 18 color: var(--entry-header--color-focus); 19 } 20 21 &:active { 22 color: var(--entry-header--color-link); 23 } 24 } 25 } 26 27 .singular .entry-title { 28 font-size: var(--global--font-size-page-title); 29 } 30 31 h1.entry-title { 32 line-height: var(--heading--line-height-h1); 33 font-weight: var(--heading--font-weight-page-title); 34 } 35 36 /** 37 * Entry Content 38 */ 39 40 .entry-content, 41 .entry-summary { 42 font-family: var(--entry-content--font-family); 43 } 44 45 .entry-content { 46 47 p { 48 word-wrap: break-word; 49 } 50 51 // Overwrite iframe embeds that have inline styles. 52 > iframe[style] { 53 54 margin: var(--global--spacing-vertical) 0 !important; 55 max-width: 100% !important; 56 } 57 58 // Classic editor audio embeds. 59 .wp-audio-shortcode { 60 @extend %responsive-aligndefault-width; 61 } 62 } 63 64 .entry-footer { 65 66 color: var(--global--color-primary); 67 clear: both; 68 float: none; 69 font-size: var(--global--font-size-xs); 70 display: block; 71 72 > span { 73 display: inline-block; 74 } 75 76 a { 77 color: currentColor; 78 79 &:hover, 80 &:focus { 81 color: var(--global--color-primary-hover); 82 } 83 84 &:active { 85 color: currentColor; 86 } 87 } 88 } 89 90 // Extra specificity to override rules in _vertical-margins.scss 91 .site-main > article > .entry-footer { 92 margin-top: var(--global--spacing-vertical); 93 padding-top: var(--global--spacing-unit); 94 padding-bottom: calc(3 * var(--global--spacing-vertical)); 95 border-bottom: var(--separator--height) solid var(--separator--border-color); 96 } 97 98 body:not(.single) .site-main > article:last-of-type .entry-footer { 99 border-bottom: var(--separator--height) solid transparent; 100 } 101 102 .single .site-main > article > .entry-footer { 103 margin-top: calc(3.4 * var(--global--spacing-vertical)); 104 margin-bottom: calc(3.4 * var(--global--spacing-vertical)); 105 padding-bottom: 0; 106 padding-top: calc(0.8 * var(--global--spacing-vertical)); 107 border-top: 3px solid var(--separator--border-color); 108 border-bottom: var(--separator--height) solid transparent; 109 display: grid; 110 grid-template-columns: repeat(2, 1fr); 111 column-gap: calc(2 * var(--global--spacing-horizontal)); 112 113 .post-taxonomies, 114 .full-size-link { 115 justify-content: flex-end; 116 text-align: right; 117 } 118 119 .full-size-link:first-child:last-child { 120 grid-column: span 2; 121 } 122 123 .posted-on, 124 .byline, 125 .cat-links, 126 .tags-links { 127 display: block; 128 } 129 130 @include media(mobile-only) { 131 display: block; 132 133 .full-size-link { 134 display: block; 135 } 136 137 .post-taxonomies, 138 .full-size-link { 139 text-align: left; 140 } 141 } 142 } 143 144 /** 145 * Post Thumbnails 146 */ 147 148 .post-thumbnail { 149 @extend %responsive-aligndefault-width; 150 text-align: center; 151 152 .entry-header &, 153 .singular & { 154 @extend %responsive-alignwide-width-nested; 155 } 156 157 .wp-post-image { 158 display: block; 159 width: auto; 160 max-width: 100%; 161 margin-left: auto; 162 margin-right: auto; 163 margin-top: calc(2 * var(--global--spacing-vertical)); 164 } 165 } 166 167 /** 168 * Author 169 */ 170 171 .author-bio { 172 position: relative; 173 font-size: var(--global--font-size-xs); 174 max-width: var(--responsive--aligndefault-width); 175 176 .site-main > article > & { 177 margin-top: calc(2 * var(--global--spacing-vertical)); 178 } 179 180 // Avatars are optional and can be turned off. 181 &.show-avatars { 182 183 .avatar { 184 display: inline-block; 185 vertical-align: top; 186 border-radius: 50%; 187 } 188 189 .author-bio-content { 190 display: inline-block; 191 padding-left: var(--global--spacing-horizontal); 192 max-width: calc(var(--responsive--aligndefault-width) - 90px); 193 } 194 } 195 196 .author-bio-content { 197 198 .author-title { 199 font-family: var(--entry-author-bio--font-family); 200 font-size: var(--entry-author-bio--font-size); 201 display: inline; 202 } 203 204 .author-description { 205 font-size: var(--global--font-size-xs); 206 margin-top: calc(0.5 * var(--global--spacing-vertical)); 207 margin-bottom: calc(0.5 * var(--global--spacing-vertical)); 208 } 209 } 210 }