WordPress.org

Make WordPress Core

Ticket #45043: 45043.2.patch

File 45043.2.patch, 34.2 KB (added by laurelfulford, 12 months ago)
  • src/wp-content/themes/twentyfifteen/css/blocks.css

     
     1/*
     2Theme Name: Twenty Fifteen
     3Description: Used to style Gutenberg Blocks.
     4*/
     5
     6/*--------------------------------------------------------------
     7>>> TABLE OF CONTENTS:
     8----------------------------------------------------------------
     91.0 General Block Styles
     102.0 Blocks - Common Blocks
     113.0 Blocks - Formatting
     124.0 Blocks - Layout Elements
     135.0 Blocks - Widgets
     146.0 Blocks - Colors
     15--------------------------------------------------------------*/
     16
     17/*--------------------------------------------------------------
     181.0 General Block Styles
     19--------------------------------------------------------------*/
     20
     21/* Captions */
     22
     23[class^="wp-block-"] figcaption {
     24        color: #707070;
     25        font-family: "Noto Sans", sans-serif;
     26        font-size: 12px;
     27        line-height: 1.5;
     28        margin-bottom: 0;
     29        padding: 0.5em 0;
     30}
     31
     32@media screen and (min-width: 46.25em) {
     33        [class^="wp-block-"] figcaption {
     34                font-size: 14px;
     35        }
     36}
     37
     38@media screen and (min-width: 55em) {
     39        [class^="wp-block-"] figcaption {
     40                font-size: 16px;
     41        }
     42}
     43
     44@media screen and (min-width: 59.6875em) {
     45        [class^="wp-block-"] figcaption {
     46                font-size: 12px;
     47        }
     48}
     49
     50@media screen and (min-width: 68.75em) {
     51        [class^="wp-block-"] figcaption {
     52                font-size: 14px;
     53        }
     54}
     55
     56@media screen and (min-width: 77.5em) {
     57        [class^="wp-block-"] figcaption {
     58                font-size: 16px;
     59        }
     60}
     61
     62/*--------------------------------------------------------------
     632.0 Blocks - Common Blocks
     64--------------------------------------------------------------*/
     65
     66/* Paragraph */
     67
     68p.has-drop-cap:not(:focus)::first-letter {
     69        font-size: 5em;
     70}
     71
     72/* Gallery */
     73
     74.wp-block-gallery {
     75        margin-bottom: 1.6em;
     76}
     77
     78/* Audio */
     79
     80.wp-block-audio audio {
     81        display: block;
     82        width: 100%;
     83}
     84
     85/* Cover Image */
     86
     87.wp-block-cover-image .wp-block-cover-image-text,
     88.wp-block-cover-image h2 {
     89        font-size: 29px;
     90        line-height: 1.2069;
     91}
     92
     93/* Quote */
     94
     95.wp-block-quote,
     96.wp-block-quote:not(.is-large):not(.is-style-large),
     97[class^="wp-block-"] blockquote {
     98        border-color: #707070;
     99}
     100
     101.wp-block-quote cite,
     102.wp-block-quote__citation {
     103        color: #333;
     104        font-family: "Noto Sans", sans-serif;
     105        font-size: 15px;
     106        font-style: normal;
     107        line-height: 1.6;
     108        text-transform: none;
     109}
     110
     111.wp-block-quote em,
     112.wp-block-quote i {
     113        font-style: normal;
     114}
     115
     116.wp-block-quote strong,
     117.wp-block-quote b {
     118        font-weight: 400;
     119}
     120
     121
     122@media screen and (min-width: 46.25em) {
     123        .edit-post-visual-editor .wp-block-quote p {
     124                font-size: 20px;
     125                line-height: 1.75;
     126        }
     127
     128        .wp-block-quote cite,
     129        .wp-block-quote__citation {
     130                font-size: 17px;
     131                line-height: 1.6471;
     132        }
     133}
     134
     135@media screen and (min-width: 55em) {
     136        .edit-post-visual-editor .wp-block-quote p {
     137                font-size: 22px;
     138                line-height: 1.8182;
     139        }
     140
     141        .wp-block-quote cite,
     142        .wp-block-quote__citation {
     143                font-size: 19px;
     144                line-height: 1.6842;
     145        }
     146}
     147
     148@media screen and (min-width: 59.6875em) {
     149        .edit-post-visual-editor .wp-block-quote p {
     150                font-size: 18px;
     151                line-height: 1.6667;
     152        }
     153
     154        .wp-block-quote cite,
     155        .wp-block-quote__citation {
     156                font-size: 15px;
     157                line-height: 1.6;
     158        }
     159}
     160
     161@media screen and (min-width: 68.75em) {
     162        .edit-post-visual-editor .wp-block-quote p {
     163                font-size: 20px;
     164                line-height: 1.75;
     165        }
     166
     167        .wp-block-quote cite,
     168        .wp-block-quote__citation {
     169                font-size: 17px;
     170                line-height: 1.6471;
     171        }
     172}
     173
     174@media screen and (min-width: 77.5em) {
     175        .edit-post-visual-editor .wp-block-quote p {
     176                font-size: 22px;
     177                line-height: 1.8182;
     178        }
     179
     180        .wp-block-quote cite,
     181        .wp-block-quote__citation {
     182                font-size: 19px;
     183                line-height: 1.6842;
     184        }
     185}
     186
     187/* Cover Image */
     188
     189.wp-block-cover-image.aligncenter,
     190.wp-block-cover-image.alignleft,
     191.wp-block-cover-image.alignright {
     192        display: flex;
     193}
     194
     195/* File */
     196
     197.wp-block-file a.wp-block-file__button {
     198        background-color: #333;
     199        border: 0;
     200        border-radius: 0;
     201        color: #fff;
     202        cursor: pointer;
     203        font-family: "Noto Sans", sans-serif;
     204        font-size: 12px;
     205        font-weight: 700;
     206        line-height: 1.5;
     207        padding: 0.7917em 1.5em;
     208        text-transform: uppercase;
     209        vertical-align: baseline;
     210}
     211
     212.wp-block-file a.wp-block-file__button:hover,
     213.wp-block-file a.wp-block-file__button:focus {
     214        background-color: #707070;
     215        background-color: rgba(51, 51, 51, 0.7);
     216        outline: 0;
     217}
     218
     219.rtl .wp-block-file * + .wp-block-file__button {
     220        margin-left: 0.75em;
     221        margin-right: 0;
     222}
     223
     224@media screen and (min-width: 46.25em) {
     225        .wp-block-file a.wp-block-file__button {
     226                font-size: 14px;
     227                font-size: 1.4rem;
     228                padding: 0.8214em 1.6429em;
     229        }
     230}
     231
     232@media screen and (min-width: 55em) {
     233        .wp-block-file a.wp-block-file__button {
     234                font-size: 16px;
     235                font-size: 1.6rem;
     236                padding: 0.8125em 1.625em;
     237        }
     238}
     239
     240@media screen and (min-width: 59.6875em) {
     241        .wp-block-file a.wp-block-file__button {
     242                font-size: 12px;
     243                font-size: 1.2rem;
     244                padding: 0.7917em 1.5833em;
     245        }
     246}
     247
     248@media screen and (min-width: 68.75em) {
     249        .wp-block-file a.wp-block-file__button {
     250                font-size: 14px;
     251                font-size: 1.4rem;
     252                padding: 0.8214em 1.5714em;
     253        }
     254}
     255
     256@media screen and (min-width: 77.5em) {
     257        .wp-block-file a.wp-block-file__button {
     258                font-size: 16px;
     259                font-size: 1.6rem;
     260                padding: 0.8125em 1.625em;
     261        }
     262}
     263
     264/*--------------------------------------------------------------
     2653.0 Blocks - Formatting
     266--------------------------------------------------------------*/
     267
     268/* Code */
     269
     270.wp-block-code {
     271        background-color: transparent;
     272        border: 0;
     273        padding: 0;
     274}
     275
     276.wp-block-code code {
     277        font-family: Inconsolata, monospace;
     278        font-size: inherit;
     279}
     280
     281/* Preformatted */
     282
     283.wp-block-preformatted {
     284        background-color: rgba(0, 0, 0, 0.01);
     285        border: 1px solid #eaeaea;
     286        line-height: 1.2;
     287        margin-bottom: 1.6em;
     288        max-width: 100%;
     289        overflow: auto;
     290        padding: 0.8em;
     291        white-space: pre;
     292        white-space: pre-wrap;
     293        word-wrap: break-word;
     294}
     295
     296/* Pullquote */
     297
     298.wp-block-pullquote {
     299        border: 0;
     300}
     301
     302.wp-block-pullquote blockquote {
     303        border: 0;
     304        margin-left: 0;
     305        margin-right: 0;
     306        padding-left: 0;
     307        padding-right: 0;
     308}
     309
     310.wp-block-pullquote cite {
     311        color: #333;
     312        font-family: "Noto Sans", sans-serif;
     313        font-size: 15px;
     314        font-style: normal;
     315        line-height: 1.6;
     316        text-transform: none;
     317}
     318
     319@media screen and (min-width: 46.25em) {
     320        .wp-block-pullquote cite {
     321                font-size: 17px;
     322                line-height: 1.6471;
     323        }
     324}
     325
     326@media screen and (min-width: 55em) {
     327        .wp-block-pullquote cite {
     328                font-size: 19px;
     329                line-height: 1.6842;
     330        }
     331}
     332
     333@media screen and (min-width: 59.6875em) {
     334        .wp-block-pullquote cite {
     335                font-size: 15px;
     336                line-height: 1.6;
     337        }
     338}
     339
     340@media screen and (min-width: 68.75em) {
     341        .wp-block-pullquote cite {
     342                font-size: 17px;
     343                line-height: 1.6471;
     344        }
     345}
     346
     347@media screen and (min-width: 77.5em) {
     348        .wp-block-pullquote cite {
     349                font-size: 19px;
     350                line-height: 1.6842;
     351        }
     352}
     353
     354/* Table */
     355
     356.wp-block-table th,
     357.wp-block-table td {
     358        border-color: #eaeaea;
     359        border-width: 0 1px 1px 0;
     360}
     361
     362/*--------------------------------------------------------------
     3634.0 Blocks - Layout Elements
     364--------------------------------------------------------------*/
     365
     366/* Button */
     367
     368.wp-block-button .wp-block-button__link {
     369        background-color: #333;
     370        border: 0;
     371        border-radius: 0;
     372        color: #fff;
     373        cursor: pointer;
     374        font-family: "Noto Sans", sans-serif;
     375        font-size: 12px;
     376        font-size: 1.2rem;
     377        font-weight: 700;
     378        line-height: 1.5;
     379        padding: 0.7917em 1.5em;
     380        text-transform: uppercase;
     381        vertical-align: baseline;
     382}
     383
     384.wp-block-button .wp-block-button__link:hover,
     385.wp-block-button .wp-block-button__link:focus {
     386        background-color: #707070;
     387        background-color: rgba(51, 51, 51, 0.7);
     388        outline: 0;
     389}
     390
     391@media screen and (min-width: 46.25em) {
     392        .wp-block-button .wp-block-button__link {
     393                font-size: 14px;
     394                font-size: 1.4rem;
     395                padding: 0.8214em 1.6429em;
     396        }
     397}
     398
     399@media screen and (min-width: 55em) {
     400        .wp-block-button .wp-block-button__link {
     401                font-size: 16px;
     402                font-size: 1.6rem;
     403                padding: 0.8125em 1.625em;
     404        }
     405}
     406
     407@media screen and (min-width: 59.6875em) {
     408        .wp-block-button .wp-block-button__link {
     409                font-size: 12px;
     410                font-size: 1.2rem;
     411                padding: 0.7917em 1.5833em;
     412        }
     413}
     414
     415@media screen and (min-width: 68.75em) {
     416        .wp-block-button .wp-block-button__link {
     417                font-size: 14px;
     418                font-size: 1.4rem;
     419                padding: 0.8214em 1.5714em;
     420        }
     421}
     422
     423@media screen and (min-width: 77.5em) {
     424        .wp-block-button .wp-block-button__link {
     425                font-size: 16px;
     426                font-size: 1.6rem;
     427                padding: 0.8125em 1.625em;
     428        }
     429}
     430
     431/* Seperators */
     432
     433.wp-block-separator {
     434        border: 0;
     435        max-width: 100px;
     436}
     437
     438.wp-block-separator.is-style-wide {
     439        max-width: 100%;
     440}
     441
     442/*--------------------------------------------------------------
     4435.0 Blocks - Widgets
     444--------------------------------------------------------------*/
     445
     446/* Comments */
     447
     448.wp-block-latest-comments {
     449        margin: 0;
     450}
     451
     452.wp-block-latest-comments__comment,
     453.wp-block-latest-comments__comment-excerpt,
     454.wp-block-latest-comments__comment-excerpt p {
     455        font-size: inherit;
     456}
     457
     458.wp-block-latest-comments__comment-meta a {
     459        border-bottom-color: transparent;
     460        font-weight: 700;
     461}
     462
     463.wp-block-latest-comments__comment-excerpt p:last-child {
     464        margin-bottom: 0;
     465}
     466
     467.wp-block-latest-comments__comment-date {
     468        color: #707070;
     469        font-family: "Noto Sans", sans-serif;
     470        font-size: 12px;
     471        line-height: 1.5;
     472        margin-bottom: 1.6em;
     473}
     474
     475@media screen and (min-width: 46.25em) {
     476        .wp-block-latest-comments__comment-date {
     477                font-size: 14px;
     478        }
     479}
     480
     481@media screen and (min-width: 55em) {
     482        .wp-block-latest-comments__comment-date {
     483                font-size: 16px;
     484        }
     485}
     486
     487@media screen and (min-width: 59.6875em) {
     488        .wp-block-latest-comments__comment-date {
     489                font-size: 12px;
     490        }
     491}
     492
     493@media screen and (min-width: 68.75em) {
     494        .wp-block-latest-comments__comment-date {
     495                font-size: 14px;
     496        }
     497}
     498
     499@media screen and (min-width: 77.5em) {
     500        .wp-block-latest-comments__comment-date {
     501                font-size: 16px;
     502        }
     503}
     504
     505.wp-block-latest-comments .wp-block-latest-comments__comment {
     506        border-top: 1px solid #eaeaea;
     507        border-top: 1px solid rgba(51, 51, 51, 0.1);
     508        margin-bottom: 0;
     509        padding: 1.6em 0;
     510}
     511
     512/*--------------------------------------------------------------
     5136.0 Blocks - Colors
     514--------------------------------------------------------------*/
     515
     516.has-dark-gray-color {
     517        color: #111;
     518}
     519
     520.has-dark-gray-background-color {
     521        background-color: #111;
     522}
     523
     524.has-light-gray-color {
     525        color: #f1f1f1;
     526}
     527
     528.has-light-gray-background-color {
     529        background-color: #f1f1f1;
     530}
     531
     532.has-white-color {
     533        color: #fff;
     534}
     535
     536.has-white-background-color {
     537        background-color: #fff;
     538}
     539
     540.has-yellow-color {
     541        color: #f4ca16;
     542}
     543
     544.has-yellow-background-color {
     545        background-color: #f4ca16;
     546}
     547
     548.has-dark-brown-color {
     549        color: #352712;
     550}
     551
     552.has-dark-brown-background-color {
     553        background-color: #352712;
     554}
     555
     556.has-medium-pink-color {
     557        color: #e53b51;
     558}
     559
     560.has-medium-pink-background-color {
     561        background-color: #e53b51;
     562}
     563
     564.has-light-pink-color {
     565        color: #ffe5d1;
     566}
     567
     568.has-light-pink-background-color {
     569        background-color: #ffe5d1;
     570}
     571
     572.has-dark-purple-color {
     573        color: #2e2256;
     574}
     575
     576.has-dark-purple-background-color {
     577        background-color: #2e2256;
     578}
     579
     580.has-purple-color {
     581        color: #674970;
     582}
     583
     584.has-purple-background-color {
     585        background-color: #674970;
     586}
     587
     588.has-blue-gray-color {
     589        color: #22313f;
     590}
     591
     592.has-blue-gray-background-color {
     593        background-color: #22313f;
     594}
     595
     596.has-bright-blue-color {
     597        color: #55c3dc;
     598}
     599
     600.has-bright-blue-background-color {
     601        background-color: #55c3dc;
     602}
     603
     604.has-light-blue-color {
     605        color: #e9f2f9;
     606}
     607
     608.has-light-blue-background-color {
     609        background-color: #e9f2f9;
     610}
  • src/wp-content/themes/twentyfifteen/css/editor-blocks.css

     
     1/*
     2Theme Name: Twenty Fifteen
     3Description: Used to style Gutenberg Blocks in the editor.
     4*/
     5
     6/*--------------------------------------------------------------
     7>>> TABLE OF CONTENTS:
     8----------------------------------------------------------------
     91.0 General Typography
     102.0 General Block Styles
     113.0 Blocks - Common Blocks
     124.0 Blocks - Formatting
     135.0 Blocks - Layout Elements
     146.0 Blocks - Widgets
     15--------------------------------------------------------------*/
     16
     17/*--------------------------------------------------------------
     181.0 General Typography
     19--------------------------------------------------------------*/
     20
     21.edit-post-visual-editor .editor-block-list__block,
     22.edit-post-visual-editor .editor-block-list__block p,
     23.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     24        font-size: 15px;
     25        line-height: 1.6;
     26}
     27
     28.edit-post-visual-editor .editor-block-list__block {
     29        color: #333;
     30}
     31
     32.editor-post-title__block .editor-post-title__input {
     33        color: #333;
     34        font-size: 26px;
     35        line-height: 1.1538;
     36}
     37
     38.edit-post-visual-editor h1,
     39.edit-post-visual-editor h2,
     40.edit-post-visual-editor h3,
     41.edit-post-visual-editor h4,
     42.edit-post-visual-editor h5,
     43.edit-post-visual-editor h6 {
     44        clear: both;
     45        font-weight: 700;
     46}
     47
     48.edit-post-visual-editor .editor-block-list__block h1 {
     49        font-size: 26px;
     50        line-height: 1.1538;
     51        padding: 0.9em 0 0.45em;
     52}
     53
     54.edit-post-visual-editor .editor-block-list__block h2 {
     55        font-size: 22px;
     56        line-height: 1.3636;
     57        padding: 1em 0 0.5em;
     58}
     59
     60.edit-post-visual-editor .editor-block-list__block h3 {
     61        font-size: 18px;
     62        line-height: 1.3333;
     63        padding: 1.3em 0 0.65em;
     64}
     65
     66.edit-post-visual-editor .editor-block-list__block h4,
     67.edit-post-visual-editor .editor-block-list__block h5,
     68.edit-post-visual-editor .editor-block-list__block h6 {
     69        font-size: 15px;
     70        line-height: 1.2;
     71        padding: 0.8em 0 0.4em;
     72}
     73
     74.edit-post-visual-editor .editor-block-list__block h5,
     75.edit-post-visual-editor .editor-block-list__block h6 {
     76        letter-spacing: 0.1em;
     77        text-transform: uppercase;
     78}
     79
     80.edit-post-visual-editor > h1:first-child,
     81.edit-post-visual-editor > h2:first-child,
     82.edit-post-visual-editor > h3:first-child,
     83.edit-post-visual-editor > h4:first-child,
     84.edit-post-visual-editor > h5:first-child,
     85.edit-post-visual-editor > h6:first-child {
     86        padding-top: 0;
     87}
     88
     89@media screen and (min-width: 46.25em) {
     90        .edit-post-visual-editor .editor-block-list__block,
     91        .edit-post-visual-editor .editor-block-list__block p,
     92        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     93                font-size: 17px;
     94                line-height: 1.6471;
     95        }
     96
     97        .editor-post-title__block .editor-post-title__input {
     98                font-size: 35px;
     99                line-height: 1.2;
     100        }
     101
     102        .edit-post-visual-editor .editor-block-list__block h1 {
     103                font-size: 35px;
     104                line-height: 1.2;
     105                padding: 0.8em 0 0.4em;
     106        }
     107
     108        .edit-post-visual-editor .editor-block-list__block h2 {
     109                font-size: 29px;
     110                line-height: 1.2069;
     111                padding: 1.0em 0 0.5em;
     112        }
     113
     114        .edit-post-visual-editor .editor-block-list__block h3 {
     115                font-size: 24px;
     116                line-height: 1.1667;
     117                padding: 1.15em 0 0.6em;
     118        }
     119
     120        .edit-post-visual-editor .editor-block-list__block h4 {
     121                font-size: 20px;
     122                line-height: 1.4;
     123                padding: .7em 0 0.35em;
     124        }
     125
     126        .edit-post-visual-editor .editor-block-list__block h5,
     127        .edit-post-visual-editor .editor-block-list__block h6 {
     128                font-size: 17px;
     129                line-height: 1.2353;
     130                padding: 0.8em 0 0.4em;
     131        }
     132}
     133
     134@media screen and (min-width: 55em) {
     135        .edit-post-visual-editor .editor-block-list__block,
     136        .edit-post-visual-editor .editor-block-list__block p,
     137        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     138                font-size: 19px;
     139                line-height: 1.6842;
     140        }
     141
     142        .editor-post-title__block .editor-post-title__input {
     143                font-size: 39px;
     144                line-height: 1.2308;
     145        }
     146
     147        .edit-post-visual-editor .editor-block-list__block h1 {
     148                font-size: 39px;
     149                line-height: 1.2308;
     150                padding: 0.8em 0 0.4em;
     151        }
     152
     153        .edit-post-visual-editor .editor-block-list__block h2 {
     154                font-size: 32px;
     155                line-height: 1.25;
     156                padding: 1em 0 0.5em;
     157        }
     158
     159        .edit-post-visual-editor .editor-block-list__block h3 {
     160                font-size: 27px;
     161                line-height: 1.1852;
     162                padding: 1.2em 0 0.6em;
     163        }
     164
     165        .edit-post-visual-editor .editor-block-list__block h4 {
     166                font-size: 22px;
     167                line-height: 1.4545;
     168                padding: 0.75em 0 0.35em;
     169        }
     170
     171        .edit-post-visual-editor .editor-block-list__block h5,
     172        .edit-post-visual-editor .editor-block-list__block h6 {
     173                font-size: 19px;
     174                line-height: 1.2632;
     175                padding: 0.8em 0 0.4em;
     176        }
     177}
     178
     179@media screen and (min-width: 59.6875em) {
     180        .edit-post-visual-editor .editor-block-list__block,
     181        .edit-post-visual-editor .editor-block-list__block p,
     182        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     183                font-size: 15px;
     184                line-height: 1.6;
     185        }
     186
     187        .editor-post-title__block .editor-post-title__input {
     188                font-size: 31px;
     189                line-height: 1.1613;
     190        }
     191
     192        .edit-post-visual-editor .editor-block-list__block h1 {
     193                font-size: 31px;
     194                line-height: 1.1613;
     195                padding: 0.8em 0 0.4em;
     196        }
     197
     198        .edit-post-visual-editor .editor-block-list__block h2 {
     199                font-size: 26px;
     200                line-height: 1.3846;
     201                padding: 0.9em 0 0.45em;
     202        }
     203
     204        .edit-post-visual-editor .editor-block-list__block h3 {
     205                font-size: 22px;
     206                line-height: 1.3636;
     207                padding: 1.1em 0 0.55em;
     208        }
     209
     210        .edit-post-visual-editor .editor-block-list__block h4 {
     211                font-size: 18px;
     212                line-height: 1.3333;
     213                padding: 0.65em 0 0.3em;
     214        }
     215
     216        .edit-post-visual-editor .editor-block-list__block h5,
     217        .edit-post-visual-editor .editor-block-list__block h6 {
     218                font-size: 15px;
     219                line-height: 1.2;
     220                padding: 0.8em 0 0.4em;
     221        }
     222}
     223
     224@media screen and (min-width: 68.75em) {
     225        .edit-post-visual-editor .editor-block-list__block,
     226        .edit-post-visual-editor .editor-block-list__block p,
     227        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     228                font-size: 17px;
     229                line-height: 1.6471;
     230        }
     231
     232        .editor-post-title__block .editor-post-title__input {
     233                font-size: 35px;
     234                line-height: 1.2;
     235        }
     236
     237        .edit-post-visual-editor .editor-block-list__block h1 {
     238                font-size: 35px;
     239                line-height: 1.2;
     240                padding: 0.8em 0 0.4em;
     241        }
     242
     243        .edit-post-visual-editor .editor-block-list__block h2 {
     244                font-size: 29px;
     245                line-height: 1.2069;
     246                padding: 1.0em 0 0.5em;
     247        }
     248
     249        .edit-post-visual-editor .editor-block-list__block h3 {
     250                font-size: 24px;
     251                line-height: 1.1667;
     252                padding: 1.2em 0 0.6em;
     253        }
     254
     255        .edit-post-visual-editor .editor-block-list__block h4 {
     256                font-size: 20px;
     257                line-height: 1.4;
     258                padding: 0.7em 0 0.35em;
     259        }
     260
     261        .edit-post-visual-editor .editor-block-list__block h5,
     262        .edit-post-visual-editor .editor-block-list__block h6 {
     263                font-size: 17px;
     264                line-height: 1.2353;
     265                padding: 0.8em 0 0.4em;
     266        }
     267}
     268
     269@media screen and (min-width: 77.5em) {
     270        .edit-post-visual-editor .editor-block-list__block,
     271        .edit-post-visual-editor .editor-block-list__block p,
     272        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     273                font-size: 19px;
     274                line-height: 1.6842;
     275        }
     276
     277        .editor-post-title__block .editor-post-title__input {
     278                font-size: 39px;
     279                line-height: 1.2308;
     280        }
     281
     282        .edit-post-visual-editor .editor-block-list__block h3 {
     283                font-size: 27px;
     284                line-height: 1.1852;
     285                padding: 1.2em 0 0.6em;
     286        }
     287
     288        .edit-post-visual-editor .editor-block-list__block h4 {
     289                font-size: 22px;
     290                line-height: 1.4545;
     291                padding: 0.75em 0 0.35em;
     292        }
     293
     294        .edit-post-visual-editor .editor-block-list__block h5,
     295        .edit-post-visual-editor .editor-block-list__block h6 {
     296                font-size: 19px;
     297                line-height: 1.2632;
     298                padding: 0.85em 0 0.45em;
     299        }
     300}
     301
     302/*--------------------------------------------------------------
     3032.0 General Block Styles
     304--------------------------------------------------------------*/
     305
     306/* Main column width */
     307
     308body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
     309body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
     310body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
     311        max-width: 690px; /* 660px + 30px for the editor padding */
     312}
     313
     314/* Link styles */
     315
     316.edit-post-visual-editor a,
     317.editor-block-list__block a,
     318.wp-block-freeform.block-library-rich-text__tinymce a {
     319        border-bottom: 1px solid #333;
     320        color: #333;
     321        text-decoration: none;
     322}
     323
     324/* List styles */
     325
     326.edit-post-visual-editor ul:not(.wp-block-gallery),
     327.editor-block-list__block ul:not(.wp-block-gallery),
     328.block-library-list ul,
     329.edit-post-visual-editor ol,
     330.editor-block-list__block ol,
     331.block-library-list ol {
     332        margin: 0 0 1.6em 1.3333em;
     333        padding: 0;
     334}
     335
     336.block-library-list .editor-rich-text__tinymce {
     337        padding: 0;
     338}
     339
     340.edit-post-visual-editor ul:not(.wp-block-gallery),
     341.editor-block-list__block ul:not(.wp-block-gallery),
     342.block-library-list ul {
     343        list-style: disc;
     344}
     345
     346.edit-post-visual-editor ol,
     347.editor-block-list__block ol,
     348.block-library-list ol {
     349        list-style: decimal;
     350}
     351
     352.edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
     353.editor-block-list__block ul:not(.wp-block-gallery) li > ul,
     354.block-library-list li > ul,
     355.edit-post-visual-editor li > ol,
     356.editor-block-list__block li > ol,
     357.block-library-list li > ol {
     358        margin-bottom: 0;
     359}
     360
     361.wp-block-freeform.block-library-rich-text__tinymce li,
     362.editor-block-list__block li {
     363        margin-bottom: 0;
     364}
     365
     366.rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
     367.rtl .editor-block-list__block ul:not(.wp-block-gallery),
     368.rtl .block-library-list ul,
     369.rtl .edit-post-visual-editor ol,
     370.rtl .editor-block-list__block ol,
     371.rtl .block-library-list ol {
     372        margin-left: 0;
     373        margin-right: 1.3333em;
     374}
     375
     376/* Quote */
     377
     378.rtl .editor-block-list__block blockquote {
     379        border-left: 0;
     380        padding-left: 0;
     381}
     382
     383/* Captions */
     384
     385[class^="wp-block-"] figcaption {
     386        color: #707070;
     387        font-family: "Noto Sans", sans-serif;
     388        font-size: 12px;
     389        margin-bottom: 0;
     390        padding: 0.5em 0;
     391}
     392
     393.editor-block-list__block [class^="wp-block-"] figcaption {
     394        line-height: 1.5;
     395}
     396
     397@media screen and (min-width: 46.25em) {
     398        [class^="wp-block-"] figcaption {
     399                font-size: 14px;
     400        }
     401}
     402
     403@media screen and (min-width: 55em) {
     404        [class^="wp-block-"] figcaption {
     405                font-size: 16px;
     406        }
     407}
     408
     409@media screen and (min-width: 59.6875em) {
     410        [class^="wp-block-"] figcaption {
     411                font-size: 12px;
     412        }
     413}
     414
     415@media screen and (min-width: 68.75em) {
     416        [class^="wp-block-"] figcaption {
     417                font-size: 14px;
     418        }
     419}
     420
     421@media screen and (min-width: 77.5em) {
     422        [class^="wp-block-"] figcaption {
     423                font-size: 16px;
     424        }
     425}
     426
     427/* Pre */
     428
     429[class^="wp-block-"] pre {
     430        font-size: inherit;
     431}
     432
     433/* Alignments */
     434
     435.wp-block-quote.alignright,
     436.wp-block-freeform.block-library-rich-text__tinymce .alignright {
     437        margin: 0.4211em 0 1.6842em 1.6842em;
     438}
     439
     440.wp-block-quote.alignleft,
     441.wp-block-freeform.block-library-rich-text__tinymce .alignleft {
     442        margin: 0.4211em 1.6842em 1.6842em 0;
     443}
     444
     445/*--------------------------------------------------------------
     4463.0 Blocks - Common Blocks
     447--------------------------------------------------------------*/
     448
     449/* Paragraph */
     450
     451p.has-drop-cap:not(:focus)::first-letter {
     452        font-size: 5em;
     453}
     454
     455/* Quotes */
     456
     457.wp-block-quote,
     458.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     459        color: #707070;
     460        margin-bottom: 1.6667em;
     461        padding-left: 0.7778em;
     462}
     463
     464.wp-block-quote:not(.is-large):not(.is-style-large),
     465.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     466        border-color: #707070;
     467}
     468
     469.edit-post-visual-editor .wp-block-quote p {
     470        font-size: 18px;
     471        font-style: italic;
     472        line-height: 1.6667;
     473        margin-bottom: 1.6667em;
     474}
     475
     476.edit-post-visual-editor .wp-block-quote > p:last-child {
     477        margin-bottom: 0;
     478}
     479
     480.wp-block-quote__citation {
     481        color: #333;
     482        font-family: "Noto Sans", sans-serif;
     483        font-size: 15px;
     484        font-style: normal;
     485        line-height: 1.6;
     486        text-transform: none;
     487}
     488
     489.wp-block-quote em,
     490.wp-block-quote i {
     491        font-style: normal;
     492}
     493
     494.wp-block-quote strong,
     495.wp-block-quote b {
     496        font-weight: 400;
     497}
     498
     499@media screen and (min-width: 46.25em) {
     500        .edit-post-visual-editor .wp-block-quote p {
     501                font-size: 20px;
     502                line-height: 1.75;
     503        }
     504
     505        .wp-block-quote__citation {
     506                font-size: 17px;
     507                line-height: 1.6471;
     508        }
     509}
     510
     511@media screen and (min-width: 55em) {
     512        .edit-post-visual-editor .wp-block-quote p {
     513                font-size: 22px;
     514                line-height: 1.8182;
     515        }
     516
     517        .wp-block-quote__citation {
     518                font-size: 19px;
     519                line-height: 1.6842;
     520        }
     521}
     522
     523@media screen and (min-width: 59.6875em) {
     524        .edit-post-visual-editor .wp-block-quote p {
     525                font-size: 18px;
     526                line-height: 1.6667;
     527        }
     528
     529        .wp-block-quote__citation {
     530                font-size: 15px;
     531                line-height: 1.6;
     532        }
     533}
     534
     535@media screen and (min-width: 68.75em) {
     536        .edit-post-visual-editor .wp-block-quote p {
     537                font-size: 20px;
     538                line-height: 1.75;
     539        }
     540
     541        .wp-block-quote__citation {
     542                font-size: 17px;
     543                line-height: 1.6471;
     544        }
     545}
     546
     547@media screen and (min-width: 77.5em) {
     548        .edit-post-visual-editor .wp-block-quote p {
     549                font-size: 22px;
     550                line-height: 1.8182;
     551        }
     552
     553        .wp-block-quote__citation {
     554                font-size: 19px;
     555                line-height: 1.6842;
     556        }
     557}
     558
     559/* Cover Image */
     560
     561.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p,
     562.wp-block-cover-image h2 {
     563        font-size: 29px;
     564        line-height: 1.2069;
     565}
     566
     567
     568/* File */
     569
     570.wp-block-file .editor-rich-text__tinymce {
     571        border-bottom: 1px solid #333;
     572}
     573
     574.wp-block-file .wp-block-file__button {
     575        background-color: #333;
     576        border: 0;
     577        border-radius: 0;
     578        color: #fff;
     579        cursor: pointer;
     580        font-family: "Noto Sans", sans-serif;
     581        font-size: 12px;
     582        font-weight: 700;
     583        line-height: 1.5;
     584        padding: 0.7917em 1.5em;
     585        text-transform: uppercase;
     586        vertical-align: baseline;
     587}
     588
     589@media screen and (min-width: 46.25em) {
     590        .wp-block-file .wp-block-file__button {
     591                font-size: 14px;
     592                padding: 0.8214em 1.6429em;
     593        }
     594}
     595
     596@media screen and (min-width: 55em) {
     597        .wp-block-file .wp-block-file__button {
     598                font-size: 16px;
     599                padding: 0.8125em 1.625em;
     600        }
     601}
     602
     603@media screen and (min-width: 59.6875em) {
     604        .wp-block-file .wp-block-file__button {
     605                font-size: 12px;
     606                padding: 0.7917em 1.5833em;
     607        }
     608}
     609
     610@media screen and (min-width: 68.75em) {
     611        .wp-block-file .wp-block-file__button {
     612                font-size: 14px;
     613                padding: 0.8214em 1.5714em;
     614        }
     615}
     616
     617@media screen and (min-width: 77.5em) {
     618        .wp-block-file .wp-block-file__button {
     619                font-size: 16px;
     620                padding: 0.8125em 1.625em;
     621        }
     622}
     623
     624/*--------------------------------------------------------------
     6254.0 Blocks - Formatting
     626--------------------------------------------------------------*/
     627
     628/* Code */
     629
     630.wp-block-code,
     631.wp-block-freeform.block-library-rich-text__tinymce code {
     632        background: transparent;
     633        border: 0;
     634        padding: 0;
     635}
     636
     637/* Pullquote */
     638
     639.wp-block-pullquote,
     640.editor-block-list__block .wp-block-pullquote blockquote {
     641        border: 0;
     642        margin: 0;
     643        padding-left: 0;
     644}
     645
     646.wp-block-pullquote .wp-block-pullquote__citation {
     647        color: #333;
     648        font-family: "Noto Sans", sans-serif;
     649        font-size: 15px;
     650        font-style: normal;
     651        line-height: 1.6;
     652        text-transform: none;
     653}
     654
     655@media screen and (min-width: 46.25em) {
     656        .wp-block-pullquote .wp-block-pullquote__citation {
     657                font-size: 17px;
     658                line-height: 1.6471;
     659        }
     660}
     661
     662@media screen and (min-width: 55em) {
     663        .wp-block-pullquote .wp-block-pullquote__citation {
     664                font-size: 19px;
     665                line-height: 1.6842;
     666        }
     667}
     668
     669@media screen and (min-width: 59.6875em) {
     670        .wp-block-pullquote .wp-block-pullquote__citation {
     671                font-size: 15px;
     672                line-height: 1.6;
     673        }
     674}
     675
     676@media screen and (min-width: 68.75em) {
     677        .wp-block-pullquote .wp-block-pullquote__citation {
     678                font-size: 17px;
     679                line-height: 1.6471;
     680        }
     681}
     682
     683@media screen and (min-width: 77.5em) {
     684        .wp-block-pullquote .wp-block-pullquote__citation {
     685                font-size: 19px;
     686                line-height: 1.6842;
     687        }
     688}
     689
     690/* Tables */
     691
     692.editor-block-list__block .wp-block-table th,
     693.editor-block-list__block .wp-block-table td {
     694        padding: 0;
     695}
     696
     697.rtl .editor-block-list__block .wp-block-table th {
     698        text-align: right;
     699}
     700
     701/*--------------------------------------------------------------
     7025.0 Blocks - Layout Elements
     703--------------------------------------------------------------*/
     704
     705/* Button */
     706
     707.wp-block-button .wp-block-button__link {
     708        background-color: #333;
     709        border: 0;
     710        border-radius: 0;
     711        color: #fff;
     712        cursor: pointer;
     713        font-family: "Noto Sans", sans-serif;
     714        font-size: 12px;
     715        font-weight: 700;
     716        line-height: 1.5;
     717        padding: 0.7917em 1.5em;
     718        text-transform: uppercase;
     719        vertical-align: baseline;
     720}
     721
     722@media screen and (min-width: 46.25em) {
     723        .wp-block-button .wp-block-button__link {
     724                font-size: 14px;
     725                padding: 0.8214em 1.6429em;
     726        }
     727}
     728
     729@media screen and (min-width: 55em) {
     730        .wp-block-button .wp-block-button__link {
     731                font-size: 16px;
     732                padding: 0.8125em 1.625em;
     733        }
     734}
     735
     736@media screen and (min-width: 59.6875em) {
     737        .wp-block-button .wp-block-button__link {
     738                font-size: 12px;
     739                padding: 0.7917em 1.5833em;
     740        }
     741}
     742
     743@media screen and (min-width: 68.75em) {
     744        .wp-block-button .wp-block-button__link {
     745                font-size: 14px;
     746                padding: 0.8214em 1.5714em;
     747        }
     748}
     749
     750@media screen and (min-width: 77.5em) {
     751        .wp-block-button .wp-block-button__link {
     752                font-size: 16px;
     753                padding: 0.8125em 1.625em;
     754        }
     755}
     756
     757/* Seperator */
     758
     759.wp-block-separator {
     760        max-width: 100px;
     761}
     762
     763.wp-block-separator.is-style-wide {
     764        max-width: 100%;
     765}
     766
     767
     768/*--------------------------------------------------------------
     7696.0 Blocks - Widgets
     770--------------------------------------------------------------*/
     771
     772/* Latest Posts */
     773
     774.edit-post-visual-editor .wp-block-latest-posts.is-grid {
     775        list-style: none;
     776        margin-left: 0;
     777        margin-right: 0;
     778}
     779
     780.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
     781        margin-bottom: 16px;
     782}
     783
     784/* Comments */
     785
     786.wp-block-latest-comments {
     787        margin: 0;
     788}
     789
     790.wp-block-latest-comments__comment,
     791.wp-block-latest-comments__comment-excerpt,
     792.wp-block-latest-comments__comment-excerpt p {
     793        font-size: inherit;
     794}
     795
     796.wp-block-latest-comments__comment-meta a {
     797        border-bottom-color: transparent;
     798        font-weight: 700;
     799}
     800
     801.wp-block-latest-comments__comment-excerpt p:last-child {
     802        margin-bottom: 0;
     803}
     804
     805.wp-block-latest-comments__comment-date {
     806        color: #707070;
     807        font-family: "Noto Sans", sans-serif;
     808        font-size: 12px;
     809        line-height: 1.5;
     810        margin-bottom: 1.6em;
     811}
     812
     813@media screen and (min-width: 46.25em) {
     814        .wp-block-latest-comments__comment-date {
     815                font-size: 14px;
     816        }
     817}
     818
     819@media screen and (min-width: 55em) {
     820        .wp-block-latest-comments__comment-date {
     821                font-size: 16px;
     822        }
     823}
     824
     825@media screen and (min-width: 59.6875em) {
     826        .wp-block-latest-comments__comment-date {
     827                font-size: 12px;
     828        }
     829}
     830
     831@media screen and (min-width: 68.75em) {
     832        .wp-block-latest-comments__comment-date {
     833                font-size: 14px;
     834        }
     835}
     836
     837@media screen and (min-width: 77.5em) {
     838        .wp-block-latest-comments__comment-date {
     839                font-size: 16px;
     840        }
     841}
     842
     843.wp-block-latest-comments .wp-block-latest-comments__comment {
     844        border-top: 1px solid #eaeaea;
     845        border-top: 1px solid rgba(51, 51, 51, 0.1);
     846        margin-bottom: 0;
     847        padding: 1.6em 0;
     848}
  • src/wp-content/themes/twentyfifteen/functions.php

     
    142142         */
    143143        add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) );
    144144
     145        // Load regular editor styles into the new block-based editor.
     146        add_theme_support( 'editor-styles' );
     147
     148        // Load default block styles.
     149        add_theme_support( 'wp-block-styles' );
     150
     151        // Add support for custom color scheme.
     152        add_theme_support( 'editor-color-palette', array(
     153                array(
     154                        'name'  => __( 'Dark Gray', 'twentyfifteen' ),
     155                        'slug'  => 'dark-gray',
     156                        'color' => '#111',
     157                ),
     158                array(
     159                        'name'  => __( 'Light Gray', 'twentyfifteen' ),
     160                        'slug'  => 'light-gray',
     161                        'color' => '#f1f1f1',
     162                ),
     163                array(
     164                        'name'  => __( 'White', 'twentyfifteen' ),
     165                        'slug'  => 'white',
     166                        'color' => '#fff',
     167                ),
     168                array(
     169                        'name'  => __( 'Yellow', 'twentyfifteen' ),
     170                        'slug'  => 'yellow',
     171                        'color' => '#f4ca16',
     172                ),
     173                array(
     174                        'name'  => __( 'Dark Brown', 'twentyfifteen' ),
     175                        'slug'  => 'dark-brown',
     176                        'color' => '#352712',
     177                ),
     178                array(
     179                        'name'  => __( 'Medium Pink', 'twentyfifteen' ),
     180                        'slug'  => 'medium-pink',
     181                        'color' => '#e53b51',
     182                ),
     183                array(
     184                        'name'  => __( 'Light Pink', 'twentyfifteen' ),
     185                        'slug'  => 'light-pink',
     186                        'color' => '#ffe5d1',
     187                ),
     188                array(
     189                        'name'  => __( 'Dark Purple', 'twentyfifteen' ),
     190                        'slug'  => 'dark-purple',
     191                        'color' => '#2e2256',
     192                ),
     193                array(
     194                        'name'  => __( 'Purple', 'twentyfifteen' ),
     195                        'slug'  => 'purple',
     196                        'color' => '#674970',
     197                ),
     198                array(
     199                        'name'  => __( 'Blue Gray', 'twentyfifteen' ),
     200                        'slug'  => 'blue-gray',
     201                        'color' => '#22313f',
     202                ),
     203                array(
     204                        'name'  => __( 'Bright Blue', 'twentyfifteen' ),
     205                        'slug'  => 'bright-blue',
     206                        'color' => '#55c3dc',
     207                ),
     208                array(
     209                        'name'  => __( 'Light Blue', 'twentyfifteen' ),
     210                        'slug'  => 'light-blue',
     211                        'color' => '#e9f2f9',
     212                ),
     213        ) );
     214
    145215        // Indicate widget sidebars can use selective refresh in the Customizer.
    146216        add_theme_support( 'customize-selective-refresh-widgets' );
    147217}
     
    259329        // Load our main stylesheet.
    260330        wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
    261331
     332        // Theme block stylesheet.
     333        wp_enqueue_style( 'twentyfifteen-block-style', get_theme_file_uri( '/css/blocks.css' ), array( 'twentyfifteen-style' ), '1.0' );
     334
    262335        // Load the Internet Explorer specific stylesheet.
    263336        wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    264337        wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );
     
    286359add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
    287360
    288361/**
     362 * Enqueue editor styles for Gutenberg
     363 *
     364 * @since Twenty Fifteen 2.1
     365 */
     366function twentyfifteen_block_editor_styles() {
     367        // Block styles.
     368        wp_enqueue_style( 'twentyfifteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     369        // Add custom fonts.
     370        wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );
     371}
     372add_action( 'enqueue_block_editor_assets', 'twentyfifteen_block_editor_styles' );
     373
     374
     375/**
    289376 * Add preconnect for Google Fonts.
    290377 *
    291378 * @since Twenty Fifteen 1.7