WordPress.org
Get WordPress

Making WordPress.org

Changeset 3261


Ignore:
Timestamp:
05/26/2016 08:44:49 PM (8 years ago)
Author:
obenland
Message:

Plugin Directory: Responsive styles hardening.

  • Switches to using em in media queries for browser compatibility.
  • Adds padding .site-main to line up with global header.
  • Simplifies some margin/padding setups on small screens.

See #1719.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

    r3260 r3261  
    232232}
    233233
    234 @media (min-width: 737px) {
     234@media screen and (min-width: 48em) {
    235235  html {
    236236    font-size: 21px;
    … …  
    787787  5.0 - Responsive Button Styles
    788788---------------------------------------------------------------------------- */
    789 @media screen and (max-width: 782px) {
     789@media screen and (max-width: 48em) {
    790790  .button,
    791791  .button.button-large,
    … …  
    10291029}
    10301030
    1031 @media screen and (min-width: 37.5em) {
     1031@media screen and (min-width: 48em) {
    10321032  .menu-toggle {
    10331033    display: none;
    … …  
    10451045    border: 0;
    10461046    display: inline-block;
    1047     margin-right: 31.5px;
    1048     margin-right: 1.5rem;
     1047    margin-right: 16px;
     1048    margin-right: 1rem;
    10491049    padding: 0;
    10501050  }
    … …  
    11801180}
    11811181
    1182 @media (min-width: 67rem) {
     1182@media screen and (min-width: 48em) {
    11831183  .home .widget-area {
    11841184    padding: 0 0 3.0517578125rem 0;
    … …  
    11951195}
    11961196
    1197 @media (min-width: 67rem) {
     1197@media screen and (min-width: 48em) {
    11981198  .home .widget-area .widget {
    11991199    margin-right: 5%;
    … …  
    13561356  margin: 0 auto;
    13571357  max-width: 960px;
    1358   padding: 0 2rem;
    1359 }
    1360 
    1361 @media (min-width: 67rem) {
     1358  padding: 0 1.5625rem;
     1359}
     1360
     1361@media screen and (min-width: 48em) {
    13621362  .site-header .site-branding {
    1363     padding: 0;
     1363    padding: 0 10px;
    13641364  }
    13651365}
    … …  
    14251425}
    14261426
    1427 @media (min-width: 67rem) {
     1427@media screen and (min-width: 48em) {
    14281428  .site-header .search-form .search-field {
    14291429    border-radius: 2px 0 0 2px;
    … …  
    15131513}
    15141514
    1515 @media (min-width: 67rem) {
     1515@media screen and (min-width: 48em) {
    15161516  .site-main {
    1517     padding: 3.0517578125rem 0;
    1518   }
    1519   .page .site-main {
    1520     padding: 0 0 3.0517578125rem 0;
     1517    padding: 3.0517578125rem 10px;
    15211518  }
    15221519}
    15231520
    15241521.single .site-main {
    1525   padding: 0 0 1.5625rem;
    1526 }
    1527 
    1528 @media (min-width: 67rem) {
    1529   .single .site-main {
    1530     padding: 1.5625rem 0;
    1531   }
     1522  padding-top: 1.5625rem;
     1523}
     1524
     1525.page .site-main {
     1526  padding-top: 0;
    15321527}
    15331528
    … …  
    15381533}
    15391534
    1540 @media (min-width: 67rem) {
     1535@media screen and (min-width: 48em) {
    15411536  .home .type-plugin,
    15421537  .search .type-plugin,
    … …  
    15681563}
    15691564
    1570 @media (min-width: 21rem) {
     1565@media screen and (min-width: 21em) {
    15711566  .home .type-plugin .entry-thumbnail,
    15721567  .search .type-plugin .entry-thumbnail,
    … …  
    16541649.single .type-plugin .plugin-header {
    16551650  border-bottom: 2px solid #eee;
    1656   padding: 1.5625rem 1.5625rem 1.143rem;
    1657 }
    1658 
    1659 @media (min-width: 67rem) {
    1660   .single .type-plugin .plugin-header {
    1661     padding: 0 0 1.143rem 0;
    1662   }
     1651  padding-bottom: 1.143rem;
    16631652}
    16641653
    … …  
    16711660}
    16721661
    1673 @media (min-width: 26rem) {
     1662@media screen and (min-width: 26em) {
    16741663  .single .type-plugin .plugin-header .plugin-thumbnail {
    16751664    display: block;
    … …  
    16971686
    16981687.single .type-plugin .entry-content {
    1699   max-width: 800px;
    1700   max-width: 50rem;
    1701   padding: 0 1.5625rem;
    1702 }
    1703 
    1704 @media (min-width: 67rem) {
     1688  max-width: 768px;
     1689  max-width: 48rem;
     1690}
     1691
     1692@media screen and (min-width: 48em) {
    17051693  .single .type-plugin .entry-content {
    17061694    float: left;
    … …  
    17671755}
    17681756
    1769 @media (min-width: 67rem) {
     1757@media screen and (min-width: 48em) {
    17701758  .single .type-plugin .entry-meta {
    17711759    float: right;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/forms/_buttons.scss

    r3251 r3261  
    323323---------------------------------------------------------------------------- */
    324324
    325 @media screen and ( max-width: 782px ) {
     325@media screen and ( max-width: $ms-breakpoint ) {
    326326
    327327    .button,

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/navigation/_menus.scss

    r3257 r3261  
    112112}
    113113
    114 @media screen and (min-width: 37.5em) {
     114@media screen and ( min-width: $ms-breakpoint ) {
    115115    .menu-toggle {
    116116        display: none;
    … …  
    129129                border: 0;
    130130                display: inline-block;
    131                 margin-right: 31.5px;
    132                 margin-right: 1.5rem;
     131                margin-right: 16px;
     132                margin-right: 1rem;
    133133                padding: 0;
    134134

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/_header.scss

    r3259 r3261  
    7171        margin: 0 auto;
    7272        max-width: $size__site-main;
    73         padding: 0 2rem;
     73        padding: 0 ms(4);
    7474
    75         @media ( min-width: 67rem ) {
    76             padding: 0;
     75        @media screen and ( min-width: $ms-breakpoint ) {
     76            padding: 0 10px;
    7777        }
    7878    }
    … …  
    134134        }
    135135
    136         @media ( min-width: 67rem ) {
     136        @media screen and ( min-width: $ms-breakpoint ) {
    137137            .search-field {
    138138                border-radius: 2px 0 0 2px;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_main.scss

    r3258 r3261  
    66    padding: ms(10) ms(4);
    77
    8     @media ( min-width: 67rem ) {
    9         padding: ms(10) 0;
    10 
    11         .page & {
    12             padding: 0 0 ms(10) 0;
    13         }
     8    @media screen and ( min-width: 48em ) {
     9        padding: ms(10) 10px;
    1410    }
    1511
    1612    .single & {
    17         padding: 0 0 ms(4);
     13        padding-top: ms(4);
     14    }
    1815
    19         @media ( min-width: 67rem ) {
    20             padding: ms(4) 0;
    21         }
     16    .page & {
     17        padding-top: 0;
    2218    }
    2319

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-index.scss

    r3254 r3261  
    44    margin-bottom: 4%;
    55
    6     @media ( min-width: 67rem ) {
     6    @media screen and ( min-width: $ms-breakpoint ) {
    77        display: inline-block;
    88        margin-right: 4%;
    … …  
    2525    }
    2626
    27     @media ( min-width: 21rem ) {
     27    @media screen and ( min-width: 21em ) {
    2828        .entry-thumbnail {
    2929            display: inline-block;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-single.scss

    r3260 r3261  
    2323        @extend .clear;
    2424        border-bottom: 2px solid #eee;
    25         padding: ms(4) ms(4) ms(1);
    26 
    27         @media ( min-width: 67rem ) {
    28             padding: 0 0 ms(1) 0;
    29         }
     25        padding-bottom: ms(1);
    3026
    3127        .plugin-thumbnail {
    … …  
    3632            width: 96px;
    3733
    38             @media ( min-width: 26rem ) {
     34            @media screen and ( min-width: 26em ) {
    3935                display: block;
    4036            }
    … …  
    6460
    6561    .entry-content {
    66         max-width: 800px;
    67         max-width: 50rem;
    68         padding: 0 ms(4);
     62        max-width: 768px;
     63        max-width: 48rem;
    6964
    70         @media ( min-width: 67rem ) {
     65        @media screen and ( min-width: $ms-breakpoint ) {
    7166            float: left;
    7267            padding: 0;
    … …  
    132127        padding: 0 ms(4);
    133128
    134         @media ( min-width: 67rem ) {
     129        @media screen and ( min-width: $ms-breakpoint ) {
    135130            float: right;
    136131            padding: 0;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/secondary/_widgets.scss

    r3254 r3261  
    1111    padding: 0 ms(4) ms(10) ms(4);
    1212
    13     @media ( min-width: 67rem ) {
     13    @media screen and ( min-width: $ms-breakpoint ) {
    1414        padding: 0 0 ms(10) 0;
    1515    }
    … …  
    2121        vertical-align: top;
    2222
    23         @media ( min-width: 67rem ) {
     23        @media screen and ( min-width: $ms-breakpoint ) {
    2424            margin-right: 5%;
    2525            width: 30%;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/typography/_typography.scss

    r3193 r3261  
    1616}
    1717
    18 @media( min-width: $ms-breakpoint ) {
     18@media screen and ( min-width: $ms-breakpoint ) {
    1919    html {
    2020        @include font-size(1.3125);

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/variables-site/_modular-scale.scss

    r3193 r3261  
    44$ms-base: 1rem 1.143rem;
    55$ms-ratio: 1.25;
    6 $ms-breakpoint: 737px;
     6$ms-breakpoint: 48em;
Note: See TracChangeset for help on using the changeset viewer.