Make WordPress Core

Ticket #46363: 46363.2.diff

File 46363.2.diff, 1.6 KB (added by garrett-eclipse, 5 years ago)

Initial patch for reducing image file size by switching to 2 columns until 420px and then going to single column leaving us with a 308px image meaning 2x is 616px (or 600 if we round down)

  • src/wp-admin/css/about.css

     
    296296@media screen and (max-width: 782px) {
    297297        .about__section.has-2-columns.is-wider-right,
    298298        .about__section.has-2-columns.is-wider-left,
    299         .about__section.has-3-columns,
    300         .about__section.has-4-columns {
     299        .about__section.has-3-columns {
    301300                display: block;
    302301                padding-bottom: 16px;
    303302        }
    304303
    305         .about__section.has-3-columns .column:nth-of-type(n),
    306         .about__section.has-4-columns .column:nth-of-type(n) {
     304        .about__section.has-4-columns {
     305                -ms-grid-columns: (1fr)[2];
     306                grid-template-columns: repeat(2, 1fr);         
     307        }
     308
     309        .about__section.has-4-columns .column:nth-of-type(2n+1) {
     310                -ms-grid-column: 1;
     311                grid-column-start: 1;
     312        }
     313
     314        .about__section.has-4-columns .column:nth-of-type(2n) {
     315                -ms-grid-column: 2;
     316                grid-column-start: 2;
     317        }
     318
     319        .about__section.has-3-columns .column:nth-of-type(n) {
    307320                padding-top: 16px;
    308321                padding-bottom: 16px;
    309322        }
     
    327340        }
    328341}
    329342
     343@media screen and (max-width: 420px) {
     344        .about__section.has-4-columns {
     345                display: block;
     346                padding-bottom: 16px;
     347        }
     348
     349        .about__section.has-4-columns .column:nth-of-type(n) {
     350                padding-top: 16px;
     351                padding-bottom: 16px;
     352        }
     353}
     354
     355
    330356/* 1.2 - Typography & Elements */
    331357
    332358.about__container {
     
    11131139}
    11141140
    11151141.freedoms-php .column .freedoms-image {
    1116         background-image: url('../images/freedoms-2x.png');
     1142        background-image: url('../images/freedoms.png');
    11171143        background-size: 100%;
    11181144        padding-top: 100%;
    11191145}