- Timestamp:
- 11/12/2018 11:19:13 PM (6 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
branches/5.0/src/wp-content/themes/twentynineteen/style-editor.scss
r43860 r43892 9 9 @import "sass/mixins/mixins-master"; 10 10 11 /* 12 * Chrome renders extra-wide characters for the Hoefler Text font. 13 * This results in a jumping cursor when typing in both the Classic and block 14 * editors. The following font-face override fixes the issue by manually inserting 15 * a custom font that includes just a Hoefler Text space replacement for that 16 * character instead. 17 */ 18 @font-face { 19 font-family: 'NonBreakingSpaceOverride'; 20 src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format('woff2'), 21 url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format('woff'); 22 23 } 24 11 25 /** === Editor Frame === */ 12 26 13 27 body { 14 28 15 // Non-standard media query necessary to override a Gutenberg breakpoint style. 16 @media screen and (min-width: 600px) { 29 .wp-block[data-align="full"] { 30 width: 100%; 31 } 32 33 @include media(mobile) { 34 padding-top: 0; 35 36 :not(.editor-inner-blocks) > .editor-block-list__layout, // Target only the top level layout element, or nested blocks will also be affected. 37 .editor-post-title { 38 padding-left: 0; 39 padding-right: 0; 40 } 41 42 .editor-writing-flow { 43 padding-top: 50px; 44 overflow: hidden; 45 } 46 17 47 .wp-block[data-align="full"] { 18 width: calc( 100% + 90px );19 max-width: calc( 100% + 90px );48 position: relative; 49 left: 45px; 20 50 } 21 51 } 22 52 23 53 @include media(tablet) { 24 overflow-x: hidden; 25 26 .editor-writing-flow { 54 55 :not(.editor-inner-blocks) > .editor-block-list__layout, // Target only the top level layout element, or nested blocks will also be affected. 56 .editor-post-title { 57 padding-left: 46px; 58 padding-right: 46px; 59 } 60 61 .editor-block-list__layout, 62 .editor-post-title { 27 63 max-width: 80%; 28 64 margin: 0 10%; … … 67 103 } 68 104 105 // Only the top level blocks need specific widths, therefore override for every nested block. 69 106 .wp-block { 70 107 width: 100%; … … 76 113 body { 77 114 font-size: $font__size_base; 78 font-family: $font__body; 115 font-family: 'NonBreakingSpaceOverride', $font__body; 116 line-height: $font__line-height-body; 79 117 color: $color__text-main; 80 118 } … … 148 186 } 149 187 150 .has-primary-background-color { 151 188 .has-primary-background-color { 189 152 190 p, 153 h1, 191 h1, 154 192 h2, 155 193 h3, 156 194 h4, 157 195 h5, 158 h6, 196 h6, 159 197 a, 160 198 a:hover { … … 188 226 font-family: $font__heading; 189 227 font-size: $font__size-xxl; 228 font-weight: 700; 190 229 } 191 230 } … … 198 237 } 199 238 239 /** === Heading === */ 240 241 .wp-block-heading { 242 strong { 243 font-weight: bolder; 244 } 245 } 200 246 /** === Paragraph === */ 201 247 … … 218 264 .wp-block-cover-text { 219 265 font-family: $font__heading; 220 font-size: $font__size- xl;266 font-size: $font__size-lg; 221 267 font-weight: bold; 222 268 line-height: 1.4; 223 } 224 225 &.has-left-content { 269 padding-left: $size__spacing-unit; 270 padding-right: $size__spacing-unit; 271 272 strong { 273 font-weight: bolder; 274 } 275 276 @include media(tablet) { 277 margin-left: auto; 278 margin-right: auto; 279 padding: 0; 280 } 281 } 282 283 @include media(tablet) { 284 padding-left: 10%; 285 padding-right: 10%; 226 286 227 287 h2, 228 288 .wp-block-cover-text { 229 padding: 1em; 230 } 231 } 232 233 &.has-right-content { 289 font-size: $font__size-xl; 290 } 291 } 292 } 293 294 .wp-block[data-type="core/cover"][data-align="left"], 295 .wp-block[data-type="core/cover"][data-align="right"] { 296 297 .editor-block-list__block-edit { 298 width: calc(4 * (100vw / 12)); 299 } 300 301 .wp-block-cover { 302 width: 100%; 303 max-width: 100%; 304 } 305 } 306 307 .wp-block[data-type="core/cover"][data-align="wide"], 308 .wp-block[data-type="core/cover"][data-align="full"] { 309 310 @include media(tablet) { 234 311 235 312 h2, 236 313 .wp-block-cover-text { 237 padding: 1em; 238 } 239 } 240 } 241 242 .wp-block[data-type="core/cover"][data-align="left"], 243 .wp-block[data-type="core/cover"][data-align="right"] { 244 245 h2, 246 .wp-block-cover-text { 247 width: 100%; 248 max-width: 305px; 249 } 250 } 251 252 .wp-block[data-type="core/cover"][data-align="wide"], 253 .wp-block[data-type="core/cover"][data-align="full"] { 314 max-width: calc(8 * (100vw / 12)); 315 } 316 } 254 317 255 318 @include media(desktop) { 319 256 320 h2, 257 321 .wp-block-cover-text { 258 padding: 0;259 width: calc(6 * (100vw / 12));260 322 max-width: calc(6 * (100vw / 12)); 323 } 324 } 325 } 326 327 .wp-block[data-type="core/cover"][data-align="full"] { 328 329 @include media(tablet) { 330 331 .wp-block-cover { 332 padding-left: calc(10% + 64px); 333 padding-right: calc(10% + 64px); 261 334 } 262 335 } … … 347 420 .wp-block-pullquote { 348 421 border: none; 422 color: #000; 423 424 blockquote { 425 margin-top: calc(3 * #{ $size__spacing-unit}); 426 margin-bottom: calc(3.33 * #{ $size__spacing-unit}); 427 hyphens: auto; 428 word-break: break-word; 429 } 430 431 &:not(.is-style-solid-color) .wp-block-pullquote__citation { 432 color: $color__text-light; 433 } 349 434 350 435 &.is-style-solid-color { 351 436 352 437 blockquote { 353 width: calc(100 vw- (2 * #{ $size__spacing-unit}));354 max-width: 80%;438 width: calc(100% - (2 * #{ $size__spacing-unit})); 439 max-width: calc( 100% - (2 * #{ $size__spacing-unit})); 355 440 356 441 @include media(tablet) { 357 width: calc(8 * (100vw / 12)); 358 } 359 360 @include media(desktop) { 361 width: calc(6 * (100vw / 12)); 442 max-width: 80%; 362 443 } 363 444 } … … 370 451 background-color: $color__link; 371 452 } 372 }373 374 blockquote {375 hyphens: auto;376 word-break: break-word;377 453 } 378 454 } … … 412 488 413 489 .editor-block-list__block-edit { 490 width: calc(4 * (100vw / 12)); 414 491 max-width: 50%; 415 492 … … 430 507 } 431 508 } 509 510 .wp-block[data-type="core/pullquote"][data-align="full"] { 511 512 @include media(tablet) { 513 514 .wp-block-pullquote blockquote { 515 max-width: calc(80% - 128px); 516 } 517 } 518 } 519 432 520 433 521 /** === File === */ … … 502 590 503 591 li { 592 color: $color__text-light; 504 593 font-family: $font__heading; 505 594 font-size: calc(#{$font__size_base} * #{$font__size-ratio}); 506 595 font-weight: bold; 507 596 line-height: $font__line-height-heading; 508 509 &:not(.menu-item-has-children) { 510 padding-bottom: ( .75 * $size__spacing-unit ); 597 padding-bottom: ( .75 * $size__spacing-unit ); 598 599 &.menu-item-has-children, 600 &:last-child { 601 padding-bottom: 0; 511 602 } 512 603 … … 519 610 } 520 611 } 612 } 613 614 .wp-block-categories { 615 616 ul { 617 padding-top: ( .75 * $size__spacing-unit ); 618 @include nestedSubMenuPadding(); 619 } 620 621 li ul { 622 list-style: none; 623 padding-left: 0; 624 margin-bottom: ( -.75 * $size__spacing-unit ); 625 } 626 521 627 } 522 628
Note: See TracChangeset
for help on using the changeset viewer.