WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/30/2018 02:13:07 AM (3 years ago)
Author:
allancole
Message:

Importing Twenty Nineteen, our new default theme for 2019, set for 5.0.

Let Gutenberg shine with this simple, fast, and powerful theme. Initial development occurred on GitHub. See: https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss

    r43808 r43842  
    1818    .entry-meta,
    1919    .entry-title {
    20         color: white;
     20        color: $color__background-body;
    2121    }
    2222
    2323    .main-navigation a,
     24    .main-navigation a + svg,
    2425    .social-navigation a,
    2526    .site-title a,
    26     .hentry a {
    27         color: white;
     27    .site-featured-image a {
     28        color: $color__background-body;
    2829        transition: opacity $link_transition ease-in-out;
    2930
    3031        &:hover,
    31         &:active {
    32             color: white;
     32        &:active,
     33        &:hover + svg,
     34        &:active + svg {
     35            color: $color__background-body;
    3336            opacity: 0.6;
    3437        }
    3538
    36         &:focus {
    37             color: white;
    38         }
    39     }
    40 
    41     // add focus state to social media icons
     39        &:focus,
     40        &:focus + svg {
     41            color: $color__background-body;
     42        }
     43    }
     44
     45    /* add focus state to social media icons */
    4246    .social-navigation a {
    4347        &:focus {
    44             color: white;
     48            color: $color__background-body;
    4549            opacity: 1;
    46             border-bottom: 1px solid white;
     50            border-bottom: 1px solid $color__background-body;
    4751        }
    4852    }
    4953
    5054    .social-navigation svg,
    51     .hentry svg {
     55    .site-featured-image svg {
    5256        /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
    5357        -webkit-filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
    54             filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
    55     }
    56 
    57     /* Post header styles */
    58     .hentry .entry-header {
    59 
     58                filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
     59    }
     60
     61    /* Entry header */
     62
     63    .site-featured-image .entry-header {
     64
     65        margin-bottom: 0;
    6066        margin-left: 0;
    6167        margin-right: 0;
     
    7076
    7177            &:before {
    72                 background: white;
     78                background: $color__background-body;
     79            }
     80        }
     81
     82        /* Entry meta */
     83
     84        .entry-meta {
     85
     86            font-weight: 500;
     87
     88            > span {
     89
     90                margin-right: $size__spacing-unit;
     91                display: inline-block;
     92
     93                &:last-child {
     94                    margin-right: 0;
     95                }
     96            }
     97
     98            a {
     99
     100                @include link-transition;
     101                color: currentColor;
     102
     103                &:hover {
     104                    text-decoration: none;
     105                }
     106            }
     107
     108            .svg-icon {
     109                position: relative;
     110                display: inline-block;
     111                vertical-align: middle;
     112                margin-right: 0.5em;
     113            }
     114
     115            .discussion-avatar-list {
     116                display: none;
     117            }
     118        }
     119
     120        &.has-discussion {
     121
     122            @include media (tablet) {
     123
     124                .entry-meta {
     125                    display: flex;
     126                    position: relative;
     127                }
     128
     129                .entry-title {
     130                    padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
     131                }
     132
     133                .entry-meta .comment-count {
     134                    position: absolute;
     135                    right: 0;
     136                }
     137
     138                .entry-meta .discussion-avatar-list {
     139                    display: block;
     140                    position: absolute;
     141                    bottom: 100%;
     142                }
    73143            }
    74144        }
     
    79149    .custom-logo-link {
    80150
    81         background: white;
    82         box-shadow: 0 0 0 0 rgba(white, 0);
     151        background: $color__background-body;
     152        box-shadow: 0 0 0 0 rgba($color__background-body, 0);
    83153
    84154        &:hover,
    85155        &:active,
    86156        &:focus {
    87             box-shadow: 0 0 0 2px rgba(white, 1);
     157            box-shadow: 0 0 0 2px rgba($color__background-body, 1);
    88158        }
    89159    }
    90160
    91161    /* Make sure important elements are above pseudo elements used for effects. */
    92     .site-branding,
    93     .hentry .entry-header {
     162    .site-branding {
     163        position: relative;
    94164        z-index: 10;
     165    }
     166
     167    .site-featured-image .entry-header {
     168        position: relative;
     169        z-index: 9;
    95170    }
    96171
     
    98173    .site-branding-container:before,
    99174    .site-branding-container:after,
    100     .hentry:before,
    101     .hentry:after,
     175    .site-featured-image:before,
     176    .site-featured-image:after,
    102177    &:after {
    103178        display: block;
     
    118193
    119194    /* First layer: grayscale. */
    120     .site-branding-container:before {
     195    .site-branding-container:before {
    121196        background-position: center;
    122197        background-repeat: no-repeat;
    123198        background-size: cover;
    124         filter: grayscale(100%);
    125199        z-index: 1;
     200
     201        /* When image filters are active, make it grayscale to colorize it blue. */
     202        .image-filters-enabled & {
     203            filter: grayscale(100%);
     204        }
    126205    }
    127206
    128207    /* Second layer: screen. */
    129     .hentry:before {
     208    .image-filters-enabled & .site-featured-image:before {
    130209        background: $color__link;
    131210        mix-blend-mode: screen;
    132211        opacity: 0.1;
    133         z-index: 2;
    134212    }
    135213
    136214    /* Third layer: multiply. */
    137     .hentry:after {
    138         background: $color__link;
     215    /* When image filters are inactive, a black overlay is added. */
     216    .site-featured-image:after {
     217        background: #000;
    139218        mix-blend-mode: multiply;
    140         opacity: 1;
    141         z-index: 3;
     219        opacity: .7;
     220
     221        /* When image filters are active, a blue overlay is added. */
     222        .image-filters-enabled & {
     223            background: $color__link;
     224            opacity: .8;
     225            z-index: 3;
     226
     227            /* Browsers supporting mix-blend-mode don't need opacity < 1 */
     228            @supports (mix-blend-mode: multiply) {
     229                opacity: 1;
     230            }
     231        }
    142232    }
    143233
    144234    /* Fourth layer: overlay. */
    145     .site-branding-container:after {
    146         background: rgba(white, 0.35);
     235    .image-filters-enabled & .site-branding-container:after {
     236        background: rgba(#000, 0.35);
    147237        mix-blend-mode: overlay;
    148238        opacity: 0.5;
    149239        z-index: 4;
     240
     241        /* Browsers supporting mix-blend-mode can have a light overlay */
     242        @supports (mix-blend-mode: overlay) {
     243            background: rgba($color__background-body, 0.35);
     244        }
    150245    }
    151246
    152247    /* Fifth layer: readability overlay */
    153248    &:after {
    154         background: mix($color__link, black, 12%);
    155 
     249        background: #000;
    156250        /**
    157251         * Add a transition to the readability overlay, to add a subtle
     
    159253         */
    160254        transition: opacity 1200ms ease-in-out;
    161 
     255        opacity: 0.7;
    162256        z-index: 5;
    163         opacity: 0.38;
    164 
    165         @include media(tablet) {
    166             opacity: 0.18;
    167         }
    168 
    169         @include media(desktop) {
    170             opacity: 0.1;
    171         }
    172     }
     257
     258        /* When image filters are active, a blue overlay is added. */
     259        .image-filters-enabled & {
     260            background: mix($color__link, black, 12%);
     261            opacity: 0.38;
     262
     263            @include media(tablet) {
     264                opacity: 0.18;
     265            }
     266        }
     267    }
     268
    173269
    174270    ::-moz-selection {
    175         background: rgba(white, 0.17);
     271        background: rgba($color__background-body, 0.17);
    176272    }
    177273
    178274    ::selection {
    179         background: rgba(white, 0.17);
     275        background: rgba($color__background-body, 0.17);
    180276    }
    181277}
Note: See TracChangeset for help on using the changeset viewer.