Making WordPress.org


Ignore:
Timestamp:
11/10/2014 11:10:21 PM (10 years ago)
Author:
coffee2code
Message:

developer.wordpress.org: Add responsive styles for Dashicons resource page

fixes #711.
props ryelle.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/page-dashicons.scss

    r814 r969  
    2222        bottom: $spacing * 2;
    2323        padding: 0 2.5em;
    24         width: 30em;
     24        width: 50%;
    2525
    2626        #search {
     
    4242        margin-top: 0 !important;
    4343        padding: 1.5em $spacing;
    44         width: 30em;
     44        width: 50%;
    4545    }
    4646
     
    4848        float:left;
    4949        padding: 1.5em $spacing;
    50         width: 30em;
     50        width: 50%;
    5151
    5252        .dashicons {
     
    6060            float:right;
    6161            margin-top: $spacing*2;
    62             width: 10em;
     62            width: 35%;
    6363        }
    6464
     
    139139        display: block;
    140140        font: 14px/1.5 monospace;
    141         width: 600px;
     141        max-width: 600px;
    142142        white-space: pre;
    143143        border: 1px solid #ccc;
     
    147147    }
    148148
     149    @media ( max-width: 900px ) {
     150        .icon-filter {
     151            position: relative;
     152            left: auto;
     153            bottom: auto;
     154            padding-left: $spacing;
     155            padding-right: $spacing;
     156            padding-bottom: $spacing;
     157            width: 100%;
     158        }
     159
     160        .entry-content {
     161            float: none;
     162            padding-bottom: 0;
     163            width: 100%;
     164        }
     165
     166        #glyph {
     167            float: none;
     168            width: 100%;
     169            text-align: center;
     170
     171            .dashicons {
     172                font-size: 240px;
     173                width: 240px;
     174                height: 240px;
     175                overflow: visible;
     176            }
     177
     178            .info {
     179                float: none;
     180                margin-top: 0;
     181                width: 100%;
     182            }
     183
     184            span.link {
     185                display: inline-block;
     186                margin-right: 10px;
     187                margin-bottom: 10px;
     188                margin-left: 10px;
     189
     190                &:nth-of-type(2) {
     191                    margin-left: 0;
     192                }
     193                &:last-of-type {
     194                    margin-right: 0;
     195                }
     196            }
     197        }
     198    }
     199
     200    @media ( max-width: 400px ) {
     201        #glyph,
     202        .entry-content,
     203        .icon-filter {
     204            padding-left: 0;
     205            padding-right: 0;
     206        }
     207    }
     208
    149209}
Note: See TracChangeset for help on using the changeset viewer.