WordPress.org

Making WordPress.org

Changeset 1469


Ignore:
Timestamp:
04/03/2015 04:27:27 PM (7 years ago)
Author:
coffee2code
Message:

wp4.css: Responsive enhancements and add responsive styling for selected w.org pages (/about/*, /news).

  • Remove page-specific class qualifiers (e.g. '.wporg-page-download') for rules that can be applied more broadly.
  • Rework some rules to properly apply without page-specific class qualifiers.
  • Add some responsive handling for some markup unique to certain /about/* and /news pages.
File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/style/wp4.css

    r1460 r1469  
    13731373#books p, #otherbooks p {
    13741374    padding-right: 22px;
     1375    padding-left: 22px;
    13751376    margin-bottom: 7px;
    13761377    line-height: 1.4em;
     
    14061407    margin: 32px 0;
    14071408    overflow: auto;
    1408     width: 670px;
     1409    /*width: 670px;*/
    14091410}
    14101411
     
    18381839}
    18391840
    1840 .wporg-responsive.wporg-page-download .col-7, body.wporg-responsive.wporg-page-parent-download .col-8 {
    1841     margin-left: 160px;
    1842 }
    1843 .wporg-responsive.wporg-page-download .col-2, body.wporg-responsive.wporg-page-parent-download .col-2 {
     1841.wporg-responsive .col-7,
     1842body.wporg-responsive .col-8,
     1843body.wporg-responsive .col-10 {
     1844    margin-left: 174px;
     1845}
     1846body.wporg-responsive .col-2 {
    18441847    position: absolute;
    18451848}
    18461849
     1850.wporg-responsive .col-10 .col-5 {
     1851    width: 50%;
     1852    box-sizing: border-box;
     1853    padding-right: 14px;
     1854}
     1855.wporg-responsive .col-10 .col-5:last-child {
     1856    padding-right: 0;
     1857    padding-left: 14px;
     1858}
     1859.wporg-responsive.wporg-page-parent-about .col-7,
     1860.wporg-responsive.wporg-page-parent-about .col-8,
     1861.wporg-responsive.wporg-page-parent-about .col-10 {
     1862    min-height: 550px;
     1863}
     1864
     1865.wporg-responsive.wporg-page-about-logos h3.graphics img {
     1866    float: right;
     1867    margin-top: -40px;
     1868    margin-left: 40px;
     1869}
     1870.wporg-responsive.wporg-page-about-logos .all-logos ul.logo li {
     1871    min-height: 39px;
     1872}
     1873.wporg-responsive.wporg-page-about-logos .all-logos ul.logo li.img {
     1874    min-height: 150px;
     1875}
     1876.wporg-responsive.wporg-page-about-logos ul.logo li.img {
     1877    line-height: 0;
     1878    text-align: center;
     1879}
    18471880@media screen and (max-width: 974px) {
    18481881    body.wporg-responsive #pagebody .wrapper {
     
    18551888    body.wporg-responsive .col-3,
    18561889    body.wporg-responsive .col-7,
     1890    body.wporg-responsive .col-8,
     1891    body.wporg-responsive .col-9,
    18571892    body.wporg-responsive .col-10,
    18581893    body.wporg-responsive .col-12 {
    18591894        width: inherit;
    18601895        float: none;
    1861     }
    1862 
    1863     body.wporg-responsive.wporg-page-parent-download .col-2 {
     1896        word-wrap: break-word;
     1897    }
     1898
     1899    body.wporg-responsive .col-2 {
    18641900        position: inherit;
    18651901        width: 100%;
    18661902    }
    18671903
    1868     body.wporg-responsive.wporg-page-parent-download .col-8 {
     1904    body.wporg-responsive .col-8,
     1905    body.wporg-responsive .col-9,
     1906    body.wporg-responsive .col-10 {
    18691907        margin-left: 14px;
    18701908        margin-right: 14px;
    1871         width: inherit;
     1909    }
     1910
     1911    .wporg-responsive.wporg-page-parent-about .col-7,
     1912    .wporg-responsive.wporg-page-parent-about .col-8,
     1913    .wporg-responsive.wporg-page-parent-about .col-10 {
     1914        min-height: inherit;
    18721915    }
    18731916
     
    18821925     */
    18831926
    1884     .wporg-responsive.wporg-page-download .col-2 {
     1927    .wporg-responsive .col-7 ~.col-2 {
    18851928        position: inherit;
    18861929        float: left;
     
    18901933        padding: 0 14px;
    18911934    }
    1892     .wporg-responsive.wporg-page-download .col-3 {
     1935    .wporg-responsive .col-7 ~ .col-3 {
    18931936        float: right;
    18941937        width: 50%;
     
    18971940        padding: 0 14px;
    18981941    }
    1899     .wporg-responsive.wporg-page-download .col-7 {
     1942    .wporg-responsive .col-7 {
    19001943        margin-left: 14px;
    19011944        margin-right: 14px;
     
    19061949    }
    19071950
     1951    .wporg-responsive .storycontent {
     1952        padding-right: 0;
     1953    }
     1954
     1955}
     1956@media screen and (max-width: 700px) {
     1957    .wporg-responsive.wporg-page-about-logos h3.graphics {
     1958        padding-top: 0;
     1959    }
     1960    .wporg-responsive.wporg-page-about-logos h3.graphics img {
     1961        display: block;
     1962        float: none;
     1963        margin: 0 auto 14px;
     1964    }
    19081965}
    19091966@media screen and (max-width: 480px) {
    1910     .wporg-responsive.wporg-page-download .col-7 {
     1967    .wporg-responsive .col-7 {
    19111968        border-bottom: 0;
    19121969    }
    1913     .wporg-responsive.wporg-page-download #sidebar, .wporg-responsive.wporg-page-download .col-7 {
     1970    .wporg-responsive #sidebar, .wporg-responsive .col-7 {
    19141971        float: none;
    19151972    }
    1916     .wporg-responsive.wporg-page-download #sidebar {
     1973    .wporg-responsive #sidebar {
    19171974        width: 100%;
    19181975    }
    1919     .wporg-responsive.wporg-page-download .col-3 {
     1976
     1977    .wporg-responsive .col-10 .col-5, .wporg-responsive .col-10 .col-5:last-child {
     1978        width: 100%;
     1979        padding: 0;
     1980    }
     1981
     1982    .wporg-responsive .col-7 ~ .col-3 {
    19201983        margin-top: 2em;
    19211984        border-top: 1px solid #ccc;
     
    19351998        display: none;
    19361999    }
    1937 }
     2000
     2001    .wporg-page-about-books #books li {
     2002        padding: 0 18px 18px;
     2003        box-sizing: border-box;
     2004    }
     2005    .wporg-page-about-books #books .image {
     2006        border-right: 0;
     2007        float: none;
     2008        width: inherit;
     2009    }
     2010    .wporg-page-about-books #books p {
     2011        padding-right: 0;
     2012        padding-left: 0;
     2013    }
     2014
     2015    .wporg-responsive.wporg-page-about-logos ul.logo {
     2016        width: 100%;
     2017    }
     2018}
Note: See TracChangeset for help on using the changeset viewer.