WordPress.org
Get WordPress

Making WordPress.org

Changeset 3254


Ignore:
Timestamp:
05/25/2016 10:20:09 PM (9 years ago)
Author:
obenland
Message:

Plugin Directory: Clean up responsive styles and use a more mobile-first approach.

See #1719.

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

Legend:

Unmodified
Added
Removed

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

    r3252 r3254  
    11861186  font-size: 12.8px;
    11871187  font-size: 0.8rem;
    1188   margin-right: 5%;
     1188  margin: 0;
    11891189  vertical-align: top;
    1190   width: 30%;
    11911190  /* Make sure select elements fit in widgets. */
    11921191}
    11931192
    1194 .home .widget-area .widget:last-child {
    1195   margin-right: 0;
     1193@media (min-width: 67rem) {
     1194  .home .widget-area .widget {
     1195    margin-right: 5%;
     1196    width: 30%;
     1197  }
     1198  .home .widget-area .widget:last-child {
     1199    margin-right: 0;
     1200  }
    11961201}
    11971202
    … …  
    15191524.search .type-plugin,
    15201525.archive .type-plugin {
    1521   display: inline-block;
    1522   margin-right: 4%;
    15231526  margin-bottom: 4%;
    1524   width: 48%;
    1525 }
    1526 
    1527 .home .type-plugin:nth-of-type(even),
    1528 .search .type-plugin:nth-of-type(even),
    1529 .archive .type-plugin:nth-of-type(even) {
    1530   margin-right: 0;
     1527}
     1528
     1529@media (min-width: 67rem) {
     1530  .home .type-plugin,
     1531  .search .type-plugin,
     1532  .archive .type-plugin {
     1533    display: inline-block;
     1534    margin-right: 4%;
     1535    width: 48%;
     1536  }
     1537  .home .type-plugin:nth-of-type(even),
     1538  .search .type-plugin:nth-of-type(even),
     1539  .archive .type-plugin:nth-of-type(even) {
     1540    margin-right: 0;
     1541  }
    15311542}
    15321543
    … …  
    15341545.search .type-plugin .entry-thumbnail,
    15351546.archive .type-plugin .entry-thumbnail {
    1536   margin: 0 4% 0 0;
    1537   display: inline-block;
     1547  display: none;
    15381548  max-width: 128px;
    1539   vertical-align: top;
    15401549}
    15411550
    … …  
    15461555  margin: auto;
    15471556  vertical-align: top;
    1548   width: 66%;
     1557}
     1558
     1559@media (min-width: 21rem) {
     1560  .home .type-plugin .entry-thumbnail,
     1561  .search .type-plugin .entry-thumbnail,
     1562  .archive .type-plugin .entry-thumbnail {
     1563    display: inline-block;
     1564    margin: 0 4% 0 0;
     1565    vertical-align: top;
     1566  }
     1567  .home .type-plugin .entry,
     1568  .search .type-plugin .entry,
     1569  .archive .type-plugin .entry {
     1570    width: calc(96% - 128px);
     1571  }
    15491572}
    15501573
    … …  
    16021625
    16031626.single .type-plugin .plugin-banner {
    1604   background-size: cover;
    1605   height: 310px;
     1627  background-size: 100%;
     1628  background-position: 50% 50%;
     1629  display: inline-block;
     1630  font-size: 0;
     1631  line-height: 0;
    16061632  margin: 0 auto 1.143rem;
    1607   max-width: 960px;
     1633  padding-top: 32.7%;
     1634  vertical-align: middle;
    16081635  width: 100%;
    16091636}
    … …  
    16221649.single .type-plugin .plugin-header .plugin-thumbnail {
    16231650  float: left;
     1651  display: none;
    16241652  height: 96px;
    16251653  margin-right: 1rem;
    16261654  width: 96px;
     1655}
     1656
     1657@media (min-width: 26rem) {
     1658  .single .type-plugin .plugin-header .plugin-thumbnail {
     1659    display: block;
     1660  }
    16271661}
    16281662
    … …  
    16471681
    16481682.single .type-plugin .entry-content {
    1649   float: left;
    1650   width: 65%;
     1683  max-width: 800px;
     1684  max-width: 50rem;
     1685  padding: 0 1.5625rem;
     1686}
     1687
     1688@media (min-width: 67rem) {
     1689  .single .type-plugin .entry-content {
     1690    float: left;
     1691    padding: 0;
     1692    width: 65%;
     1693  }
    16511694}
    16521695
    … …  
    17051748
    17061749.single .type-plugin .entry-meta {
    1707   float: right;
    1708   width: 30%;
     1750  padding: 0 1.5625rem;
     1751}
     1752
     1753@media (min-width: 67rem) {
     1754  .single .type-plugin .entry-meta {
     1755    float: right;
     1756    padding: 0;
     1757    width: 30%;
     1758  }
    17091759}
    17101760

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

    r3193 r3254  
    22.search .type-plugin,
    33.archive .type-plugin {
    4     display: inline-block;
    5     margin-right: 4%;
    64    margin-bottom: 4%;
    7     width: 48%;
    85
    9     &:nth-of-type( even ) {
    10         margin-right: 0;
     6    @media ( min-width: 67rem ) {
     7        display: inline-block;
     8        margin-right: 4%;
     9        width: 48%;
     10
     11        &:nth-of-type( even ) {
     12            margin-right: 0;
     13        }
    1114    }
    1215
    1316    .entry-thumbnail {
    14         margin: 0 4% 0 0;
    15         display: inline-block;
     17        display: none;
    1618        max-width: 128px;
    17         vertical-align: top;
    1819    }
    1920
    … …  
    2223        margin: auto;
    2324        vertical-align: top;
    24         width: 66%;
     25    }
     26
     27    @media ( min-width: 21rem ) {
     28        .entry-thumbnail {
     29            display: inline-block;
     30            margin: 0 4% 0 0;
     31            vertical-align: top;
     32        }
     33
     34        .entry {
     35             width: calc(96% - 128px);
     36         }
    2537    }
    2638

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

    r3252 r3254  
    55
    66    .plugin-banner {
    7         background-size: cover;
    8         height: 310px;
     7        background-size: 100%;
     8        background-position: 50% 50%;
     9        display: inline-block;
     10        font-size: 0;
     11        line-height: 0;
    912        margin: 0 auto ms(1);
    10         max-width: $size__site-main;
     13        padding-top: 32.7%;
     14        vertical-align: middle;
    1115        width: 100%;
    1216    }
    … …  
    2327        .plugin-thumbnail {
    2428            float: left;
     29            display: none;
    2530            height: 96px;
    2631            margin-right: 1rem;
    2732            width: 96px;
     33
     34            @media ( min-width: 26rem ) {
     35                display: block;
     36            }
    2837
    2938            .plugin-icon {
    … …  
    3241                width: 96px !important;
    3342            }
     43
    3444        }
    3545
    … …  
    5060
    5161    .entry-content {
    52         float: left;
    53         width: 65%;
     62        max-width: 800px;
     63        max-width: 50rem;
     64        padding: 0 ms(4);
     65
     66        @media ( min-width: 67rem ) {
     67            float: left;
     68            padding: 0;
     69            width: 65%;
     70        }
    5471
    5572        .read-more {
    … …  
    109126
    110127    .entry-meta {
    111         float: right;
    112         width: 30%;
     128        padding: 0 ms(4);
     129
     130        @media ( min-width: 67rem ) {
     131            float: right;
     132            padding: 0;
     133            width: 30%;
     134        }
    113135    }
    114136}

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

    r3205 r3254  
    1818        display: inline-block;
    1919        @include font-size( ms-unitless( ms(-2) ) );
    20         margin-right: 5%;
     20        margin: 0;
    2121        vertical-align: top;
    22         width: 30%;
    2322
    24         &:last-child {
    25             margin-right: 0;
     23        @media ( min-width: 67rem ) {
     24            margin-right: 5%;
     25            width: 30%;
     26
     27            &:last-child {
     28                margin-right: 0;
     29            }
    2630        }
    2731
Note: See TracChangeset for help on using the changeset viewer.