WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
05/02/2014 09:43:28 PM (12 years ago)
Author:
coffee2code
Message:

Code Reference: Various template and style improvements. props nicolealleyinteractivecom

  • Add plugin and theme handbook templates
  • Refactor templates
  • Refactor SCSS/CSS
  • SCSS/CSS cleanups
Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss
Files:
1 added
1 moved

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

    r572 r591  
    1 $header-font: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    2 $body-font: "Helvetica Neue",Helvetica,Arial,sans-serif;
    3 $code-font: monospace;
    4 $serif-font: Georgia,​Times,​serif;
    5 
    6 /* =Reset
    7 -------------------------------------------------------------- */
    8 
    9 html, body, div, span, applet, object, iframe,
    10 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    11 a, abbr, acronym, address, big, cite, code,
    12 del, dfn, em, font, ins, kbd, q, s, samp,
    13 small, strike, strong, sub, sup, tt, var,
    14 dl, dt, dd, ol, ul, li,
    15 fieldset, form, label, legend,
    16 table, caption, tbody, tfoot, thead, tr, th, td {
    17     border: 0;
    18     font-family: inherit;
    19     font-size: 100%;
    20     font-style: inherit;
    21     font-weight: inherit;
    22     margin: 0;
    23     outline: 0;
    24     padding: 0;
    25     vertical-align: baseline;
    26 }
    27 html {
    28     font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
    29     overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
    30     -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    31     -ms-text-size-adjust:     100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
    32 }
    33 
    34 body {
    35     background: #fff;
    36 }
    37 article,
    38 aside,
    39 details,
    40 figcaption,
    41 figure,
    42 footer,
    43 header,
    44 main,
    45 nav,
    46 section {
    47     display: block;
    48 }
    49 ol, ul {
    50     list-style: none;
    51 }
    52 table { /* tables still need 'cellspacing="0"' in the markup */
    53     border-collapse: separate;
    54     border-spacing: 0;
    55 }
    56 caption, th, td {
    57     font-weight: normal;
    58     text-align: left;
    59 }
    60 blockquote:before, blockquote:after,
    61 q:before, q:after {
    62     content: "";
    63 }
    64 blockquote, q {
    65     quotes: "" "";
    66 }
    67 a:focus {
    68     outline: thin dotted;
    69 }
    70 a:hover,
    71 a:active {
    72     outline: 0;
    73 }
    74 a img {
    75     border: 0;
    76 }
    77 
    78 
    79 /* =Global
    80 ----------------------------------------------- */
    81 
    82 body,
    83 button,
    84 input,
    85 select,
    86 textarea {
    87     color: #404040;
    88     font-family: $body-font;
    89     font-size: 16px;
    90     font-size: 1.6rem;
    91     line-height: 1.5;
    92 }
    93 
    94 
    95 
    96 
    97 /*
    98 *  =========== Devhub Custom ========== Devhub Custom ========== Devhub Custom =====
    99 *  =========== Devhub Custom ========== Devhub Custom ========== Devhub Custom =====
    100 *  =========== Devhub Custom ========== Devhub Custom ========== Devhub Custom =====
    101 *  =========== Devhub Custom ========== Devhub Custom ========== Devhub Custom =====
    102 *  =========== Devhub Custom ========== Devhub Custom ========== Devhub Custom =====
    103 *  =========== Devhub Custom ========== Devhub Custom ========== Devhub Custom =====
    104 *  =========== Devhub Custom ========== Devhub Custom ========== Devhub Custom =====
    105 */
    106 
    107 #page {
     1@import "reset";
     2@import "global";
     3
     4.devhub-wrap {
    1085    padding-bottom: 1.5em;
    109 }
    110 //Global Fonts
    111 .devhub-wrap {
    112     /*
    113     *  =========== Port _s defaults ========== Port _s defaults ========== Port _s defaults =====
    114     *  =========== Port _s defaults ========== Port _s defaults ========== Port _s defaults =====
    115     *  =========== Port _s defaults ========== Port _s defaults ========== Port _s defaults =====
    116     *  =========== Port _s defaults ========== Port _s defaults ========== Port _s defaults =====
    117     *  =========== Port _s defaults ========== Port _s defaults ========== Port _s defaults =====
    118     */
    119 
    120     /* Headings */
    121     h1, h2, h3, h4, h5, h6 {
    122         clear: both;
    123     }
    124     hr {
    125         background-color: #dfdfdf;
    126         border: 0;
    127         height: 1px;
    128         margin: 1.5em 0;
    129     }
    130 
    131     /* Text elements */
    132     p {
    133         margin-bottom: 1.5em;
    134     }
    135     ul, ol {
    136         margin: 0 0 1.5em 3em;
    137     }
    138     ul {
    139         list-style: disc;
    140     }
    141     ol {
    142         list-style: decimal;
    143     }
    144     li > ul,
    145     li > ol {
    146         margin-bottom: 0;
    147         margin-left: 1.5em;
    148     }
    149     dt {
    150         font-weight: bold;
    151     }
    152     dd {
    153         margin: 0 1.5em 1.5em;
    154     }
    155     b, strong {
    156         font-weight: bold;
    157     }
    158     dfn, cite, em, i {
    159         font-style: italic;
    160     }
    161     blockquote {
    162         margin: 0 1.5em;
    163     }
    164     address {
    165         margin: 0 0 1.5em;
    166     }
    167     pre {
    168         background: #eee;
    169         font-family: "Courier 10 Pitch", Courier, monospace;
    170         font-size: 15px;
    171         font-size: 1.5rem;
    172         line-height: 1.6;
    173         margin-bottom: 1.6em;
    174         max-width: 100%;
    175         overflow: auto;
    176         padding: 1.6em;
    177     }
    178     code, kbd, tt, var {
    179         font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    180     }
    181     abbr, acronym {
    182         border-bottom: 1px dotted #666;
    183         cursor: help;
    184     }
    185     mark, ins {
    186         background: #fff9c0;
    187         text-decoration: none;
    188     }
    189     sup,
    190     sub {
    191         font-size: 75%;
    192         height: 0;
    193         line-height: 0;
    194         position: relative;
    195         vertical-align: baseline;
    196     }
    197     sup {
    198         bottom: 1ex;
    199     }
    200     sub {
    201         top: .5ex;
    202     }
    203     small {
    204         font-size: 75%;
    205     }
    206     big {
    207         font-size: 125%;
    208     }
    209     figure {
    210         margin: 0;
    211     }
    212     table {
    213         margin: 0 0 1.5em;
    214         width: 100%;
    215     }
    216     th {
    217         font-weight: bold;
    218     }
    219     img {
    220         height: auto; /* Make sure images are scaled correctly. */
    221         max-width: 100%; /* Adhere to container width. */
    222     }
    223     button,
    224     input,
    225     select,
    226     textarea {
    227         font-size: 100%; /* Corrects font size not being inherited in all browsers */
    228         margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
    229         vertical-align: baseline; /* Improves appearance and consistency in all browsers */
    230         *vertical-align: middle; /* Improves appearance and consistency in all browsers */
    231     }
     6    *,
     7    *:before,
     8    *:after {
     9      -moz-box-sizing: border-box;
     10      -webkit-box-sizing: border-box;
     11      box-sizing: border-box;
     12    }
     13    #content-area,
     14    .inner-wrap {
     15        margin: 0 auto;
     16        max-width: 60em;
     17    }
     18    .page-header {
     19        margin-top: 1em;
     20    }
     21
     22    a {
     23        color: #21759b;
     24    }
     25
     26    .site-main {
     27        h2,
     28        h3,
     29        h4,
     30        h5,
     31        h6 {
     32            color: #1e1e1e;
     33            font-family: $header-font;
     34        }
     35
     36    }
     37
     38    h2.widget-title,
     39    h3.widget-title {
     40        font-family: $header-font;
     41    }
     42
     43    #headline h2 a {
     44        color: #555;
     45        font-weight: 300;
     46        font-size: 28px;
     47        line-height: 1em;
     48        text-shadow: #fff 0px 1px 0px;
     49        font-family: $header-font;
     50    }
     51
     52    h2 {
     53        font-size: 28px;
     54        font-size: 2.8rem;
     55        line-height: 32px;
     56        line-height: 3.2rem;
     57    }
     58    h3 {
     59        font-size: 22px;
     60        font-size: 2.2rem;
     61        line-height: 26px;
     62        line-height: 2.6rem;
     63    }
     64    h4 {
     65        font-size: 18px;
     66        font-size: 1.8rem;
     67        line-height: 22px;
     68        line-height: 2.2rem;
     69        border-bottom: none;
     70
     71        .dashicons {
     72            font-size: 22px;
     73            font-size: 2.2rem;
     74            line-height: 22px;
     75            line-height: 2.2rem;
     76            height: 22px;
     77            width: 22px;
     78            height: 2.2rem;
     79            width: 2.2rem;
     80        }
     81    }
     82
    23283    a.button,
    23384    button,
    … …  
    23586        line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
    23687    }
     88
    23789    a.button,
    23890    button,
    … …  
    252104        height: auto;
    253105        padding: .6em 1.8em;
    254     }
    255     button,
    256     input[type="button"],
    257     input[type="reset"],
    258     input[type="submit"] {
     106        text-decoration: none;
    259107        -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
    260     }
    261     a.button:hover,
    262     button:hover,
    263     input[type="button"]:hover,
    264     input[type="reset"]:hover,
    265     input[type="submit"]:hover {
    266         border-color: #ccc #bbb #aaa #bbb;
    267         background: #f0f0f0;
    268     }
    269     a.button:focus,
    270     button:focus,
    271     input[type="button"]:focus,
    272     input[type="reset"]:focus,
    273     input[type="submit"]:focus,
    274     button:active,
    275     input[type="button"]:active,
    276     input[type="reset"]:active,
    277     input[type="submit"]:active {
    278         border-color: #aaa #bbb #bbb #bbb;
    279         background: #f0f0f0;
     108        &:hover {
     109            border-color: #ccc #bbb #aaa #bbb;
     110            background: #f0f0f0;
     111        }
     112        &:focus, &:active {
     113            border-color: #aaa #bbb #bbb #bbb;
     114            background: #f0f0f0;
     115            -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
     116            box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
     117        }
     118        &.shiny-blue {
     119            background-color: #21759b;
     120            background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
     121            background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
     122            background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
     123            background-image:     -ms-linear-gradient(top, #2a95c5, #21759b);
     124            background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
     125            background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
     126            border-color: #21759b;
     127            border-bottom-color: #1e6a8d;
     128            -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     129            box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     130            color: #fff;
     131            text-decoration: none;
     132            text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     133            padding: 3px 8px;
     134            &:hover {
     135                background-color: #278ab7;
     136                background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
     137                background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
     138                background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b);
     139                background-image:     -ms-linear-gradient(top, #2e9fd2, #21759b);
     140                background-image:      -o-linear-gradient(top, #2e9fd2, #21759b);
     141                background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
     142                border-color: #1b607f;
     143                -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     144                box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     145                color: #fff;
     146                text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     147            }
     148        }
    280149    }
    281150    input[type="checkbox"],
    282151    input[type="radio"] {
     152        box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
    283153        padding: 0; /* Addresses excess padding in IE8/9 */
    284154    }
    … …  
    303173    input[type="search"],
    304174    textarea {
     175        padding: 3px;
    305176        color: #666;
    306177        border: 1px solid #ccc;
    307178        border-radius: 3px;
    308     }
    309     input[type="text"]:focus,
    310     input[type="email"]:focus,
    311     input[type="url"]:focus,
    312     input[type="password"]:focus,
    313     input[type="search"]:focus,
    314     textarea:focus {
    315         color: #111;
    316     }
    317     input[type="text"],
    318     input[type="email"],
    319     input[type="url"],
    320     input[type="password"],
    321     input[type="search"] {
    322         padding: 3px;
     179        &:focus {
     180            color: #111;
     181        }
    323182    }
    324183    textarea {
    … …  
    327186        vertical-align: top; /* Improves readability and alignment in all browsers */
    328187        width: 98%;
    329     }
    330 
    331 
    332     /* Alignment */
    333     .alignleft {
    334         display: inline;
    335         float: left;
    336         margin-right: 1.5em;
    337     }
    338     .alignright {
    339         display: inline;
    340         float: right;
    341         margin-left: 1.5em;
    342     }
    343     .aligncenter {
    344         clear: both;
    345         display: block;
    346         margin: 0 auto;
    347188    }
    348189
    … …  
    522363
    523364
    524     *,
    525     *:before,
    526     *:after {
    527       -moz-box-sizing: border-box;
    528       -webkit-box-sizing: border-box;
    529       box-sizing: border-box;
    530     }
    531 
    532     .site-main,
    533     .inner-wrap {
    534         margin: 0 auto;
    535         max-width: 60em;
    536     }
    537   .site-main {
    538     padding: 0 10px;
    539   }
    540     .page-header {
    541         margin-top: 1em;
    542     }
    543 
    544     a {
    545         color: #21759b;
    546     }
    547 
    548     .site-main {
    549         h2,
    550         h3,
    551         h4,
    552         h5,
    553         h6 {
    554             color: #1e1e1e;
    555             font-family: $header-font;
    556         }
    557 
    558     }
    559 
    560     h2.widget-title,
    561     h3.widget-title {
    562         font-family: $header-font;
    563     }
    564 
    565     #headline h2 a {
    566         color: #555;
    567         font-weight: 300;
    568         font-size: 28px;
    569         line-height: 1em;
    570         text-shadow: #fff 0px 1px 0px;
    571         font-family: $header-font;
    572     }
    573 
    574     h2 {
    575         font-size: 28px;
    576         font-size: 2.8rem;
    577         line-height: 32px;
    578         line-height: 3.2rem;
    579     }
    580     h3 {
    581         font-size: 22px;
    582         font-size: 2.2rem;
    583         line-height: 26px;
    584         line-height: 2.6rem;
    585     }
    586     h4 {
    587         font-size: 18px;
    588         font-size: 1.8rem;
    589         line-height: 22px;
    590         line-height: 2.2rem;
    591         border-bottom: none;
    592 
    593         .dashicons {
    594             font-size: 22px;
    595             font-size: 2.2rem;
    596             line-height: 22px;
    597             line-height: 2.2rem;
    598             height: 22px;
    599             width: 22px;
    600             height: 2.2rem;
    601             width: 2.2rem;
    602         }
    603     }
    604 
    605 
    606     button,
    607     input,
    608     select,
    609     textarea {
    610         font-size: 100%; /* Corrects font size not being inherited in all browsers */
    611         margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
    612         vertical-align: baseline; /* Improves appearance and consistency in all browsers */
    613         *vertical-align: middle; /* Improves appearance and consistency in all browsers */
    614         font-weight: 300;
    615     }
    616     button,
    617     input {
    618         line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
    619     }
    620     button,
    621     input[type="button"],
    622     input[type="reset"],
    623     input[type="submit"] {
    624         text-decoration: none;
    625     }
    626     button.shiny-blue,
    627     input[type="button"].shiny-blue,
    628     input[type="reset"].shiny-blue,
    629     input[type="submit"].shiny-blue {
    630         background-color: #21759b;
    631         background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
    632         background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
    633         background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
    634         background-image:     -ms-linear-gradient(top, #2a95c5, #21759b);
    635         background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
    636         background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
    637         border-color: #21759b;
    638         border-bottom-color: #1e6a8d;
    639         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    640         box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    641         color: #fff;
    642         text-decoration: none;
    643         text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    644         padding: 3px 8px;
    645     }
    646     button.shiny-blue:hover,
    647     input[type="button"].shiny-blue:hover,
    648     input[type="reset"].shiny-blue:hover,
    649     input[type="submit"].shiny-blue:hover {
    650         background-color: #278ab7;
    651         background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
    652         background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
    653         background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b);
    654         background-image:     -ms-linear-gradient(top, #2e9fd2, #21759b);
    655         background-image:      -o-linear-gradient(top, #2e9fd2, #21759b);
    656         background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
    657         border-color: #1b607f;
    658         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    659         box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    660         color: #fff;
    661         text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    662     }
    663     button:focus,
    664     input[type="button"]:focus,
    665     input[type="reset"]:focus,
    666     input[type="submit"]:focus,
    667     button:active,
    668     input[type="button"]:active,
    669     input[type="reset"]:active,
    670     input[type="submit"]:active {
    671         border-color: #0e3950;
    672         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    673         box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    674     }
    675     input[type="checkbox"],
    676     input[type="radio"] {
    677         box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
    678         padding: 0; /* Addresses excess padding in IE8/9 */
    679     }
    680     input[type="search"] {
    681         -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
    682         -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
    683         -moz-box-sizing:    content-box;
    684         box-sizing:         content-box;
    685     }
    686     input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    687         -webkit-appearance: none;
    688     }
    689     button::-moz-focus-inner,
    690     input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    691         border: 0;
    692         padding: 0;
    693     }
    694     input[type="text"],
    695     input[type="email"],
    696     input[type="url"],
    697     input[type="password"],
    698     input[type="search"],
    699     textarea {
    700         color: #666;
    701         border: 1px solid #ccc;
    702         border-radius: 3px;
    703     }
    704     input[type="text"]:focus,
    705     input[type="email"]:focus,
    706     input[type="url"]:focus,
    707     input[type="password"]:focus,
    708     input[type="search"]:focus,
    709     textarea:focus {
    710         color: #111;
    711     }
    712     input[type="text"],
    713     input[type="email"],
    714     input[type="url"],
    715     input[type="password"],
    716     input[type="search"] {
    717         padding: 3px;
    718     }
    719     textarea {
    720         overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
    721         padding-left: 3px;
    722         vertical-align: top; /* Improves readability and alignment in all browsers */
    723         width: 98%;
    724     }
    725365
    726366    /*
    … …  
    744384            }
    745385
    746             font-size: 13px;
    747             font-size: 1.3rem;
     386            font-size: 14px;
     387            font-size: 1.4rem;
    748388
    749389        }
    … …  
    762402    }
    763403    .breadcrumb-trail {
    764         font-size: 13px;
    765404        margin-top: 1em;
    766405    }
    … …  
    909548    }
    910549
    911     .section .home-primary-content {
    912         max-width: 600px;
    913         max-width: 60rem;
    914         margin: 0 auto;
    915     }
    916 
    917550    .section.light-gray {
    918551        background: #f2f2f2;
    … …  
    932565    }
    933566
     567    .section .home-primary-content {
     568        max-width: 600px;
     569        max-width: 60rem;
     570        margin: 0 auto;
     571    }
    934572
    935573    .box {
    … …  
    940578    }
    941579
    942     .reference-landing .section {
    943         max-width: 700px;
    944         max-width: 70rem;
    945         margin: 0 auto;
    946 
    947         h2,
    948         h3,
    949         h4 {
     580    .reference-landing {
     581        padding: 1em 0;
     582        .section {
     583            max-width: 700px;
     584            max-width: 70rem;
     585            margin: 0 auto;
     586            padding: 1.5em 0;
     587
     588            h2,
     589            h3,
     590            h4 {
     591                margin-bottom: 1em;
     592                color: #404040;
     593            }
     594
     595            h2.widget-title,
     596            h3.widget-title,
     597            h4.widget-title {
     598                margin-bottom: 0;
     599            }
     600            &.search-guide {
     601                padding-bottom: 0;
     602            }
     603            &.section.topic-guide, &.section.new-in-guide  {
     604                padding-top: 0;
     605            }
     606        }
     607        .searchform {
     608            overflow: hidden;
     609            height: auto;
    950610            margin-bottom: 1em;
    951             color: #404040;
    952         }
    953 
    954         h2.widget-title,
    955         h3.widget-title,
    956         h4.widget-title {
    957             margin-bottom: 0;
    958         }
    959     }
    960     .reference-landing .section.search-guide {
    961         padding-bottom: 0;
    962     }
    963     .reference-landing {
    964         .section.topic-guide, .section.new-in-guide  {
    965             padding-top: 0;
    966         }
    967     }
     611            input {
     612                height: 50px;
     613                height: 5rem;
     614                margin-bottom: 1em;
     615                width: 100%;
     616            }
     617            input[type="submit"] {
     618                width: 85px;
     619                width: 8.5rem;
     620                float: left;
     621            }
     622            label {
     623                width: 560px;
     624                width: 56rem;
     625                max-width: 100%;
     626                margin-right: 15px;
     627                display: inline-block;
     628                float: left;
     629                .search-field input[type="text"] {
     630                    width: 100%;
     631                }
     632
     633            }
     634        }
     635    }
     636
    968637    .reference-landing .box,
    969     .sidebar .box {
     638    .sidebar .box,
     639    .sidebar .widget_wporg_handbook_pages {
    970640        padding: 0;
     641        border: 2px solid #cccccc;
     642        background-color: #eeeeee;
     643        ul {
     644            padding: 2em;
     645        }
    971646
    972647
    … …  
    994669    }
    995670
    996     .reference-landing {
    997         padding: 1em 0;
    998     }
    999 
    1000     .reference-landing .section {
    1001         padding: 1.5em 0;
    1002     }
    1003671
    1004672    .no-bullets,
    … …  
    1027695    }
    1028696
    1029     .reference-landing .searchform,
    1030     .reference-landing .searchform input {
    1031         height: 50px;
    1032         height: 5rem;
    1033         margin-bottom: 1em;
    1034         width: 100%;
    1035     }
    1036 
    1037     .reference-landing .searchform label {
    1038         width: 560px;
    1039         width: 56rem;
    1040         max-width: 100%;
    1041         margin-right: 15px;
    1042         display: inline-block;
    1043         float: left;
    1044         .search-field input[type="text"] {
    1045             width: 100%;
    1046         }
    1047     }
    1048 
    1049     .reference-landing .searchform {
    1050         overflow: hidden;
    1051         height: auto;
    1052     }
    1053 
    1054     .reference-landing .searchform input[type="submit"] {
    1055         width: 85px;
    1056         width: 8.5rem;
    1057         float: left;
    1058     }
    1059 
    1060     .view-all-new-in {
    1061         font-style: italic;
    1062     }
    1063697
    1064698    .box.transparent {
    … …  
    1077711        border: 1px solid #d8d8d8;
    1078712        .widget-title {
    1079             color: #666;
     713            color: #666666;
    1080714            background: #d8d8d8;
    1081715            text-transform: uppercase;
    … …  
    1102736        h1 {
    1103737            margin: 24px 0;
    1104             padding-left: 100px;
    1105738            a {
    1106                 margin-left: -100px;
    1107739                color: #24831d;
    1108740                font-family: $code-font;
    1109741                font-size: 20px;
    1110                 .hook-func {
    1111                     color: #888;
    1112                 }
    1113742                .arg-type {
    1114743                    color: #cd2f23;
    … …  
    1157786    }
    1158787
    1159     @media ( max-width: 43em ) {
    1160 
    1161         .section .box,
    1162         .home-primary-content,
    1163         .reference-landing .section {
    1164             float: none;
    1165             width: 100%;
    1166             padding: 1.5em 10%;
    1167             clear: both;
    1168             text-align: center;
    1169             display: block;
    1170         }
    1171         .reference-landing .section .box,
    1172         .sidebar .box {
    1173             padding: 0;
    1174             margin-bottom: 1.5em;
    1175         }
    1176         .home-primary-content .entry-content,
    1177         .reference-landing .section {
    1178             text-align: left;
    1179         }
    1180 
    1181         .horizontal-list li {
    1182             display: block;
    1183             a {
    1184                 border-left: none;
    1185             }
    1186         }
    1187 
    1188         .horizontal-list li:first-child a {
    1189             padding: 0 40px;
    1190             padding: 0 4rem;
    1191         }
    1192 
    1193 
    1194         .reference-landing .searchform input[type="text"],
    1195         .reference-landing .searchform input[type="submit"] {
    1196             width: 100%;
    1197             margin-right: 0;
    1198             margin-bottom: 1em;
    1199             float: none;
    1200             clear: both;
    1201         }
    1202 
    1203     }
    1204 
    1205 
    1206788    /* Comments */
    1207789    .comment-list,
    … …  
    1309891    }
    1310892
     893    /*
     894     * Content
     895     *
     896     */
     897    #content-area.has-sidebar {
     898        float: none;
     899        margin: 0 auto;
     900        width: 60em;
     901    }
     902
     903    .has-sidebar {
     904
     905        main {
     906            float: right;
     907            width: 67%;
     908            margin: 0;
     909            clear: none;
     910            padding: 0 12px;
     911            padding: 0 1.2rem;
     912        }
     913        .widget-area {
     914            float: left;
     915            overflow: hidden;
     916            width: 30%;
     917            margin-left: -55px;
     918            margin: 0;
     919            clear: none;
     920
     921            .widget {
     922                width: 100%;
     923            }
     924        }
     925
     926    }
    1311927}
    1312928
    … …  
    1317933        width: 100%;
    1318934
    1319         .site-main,
     935        #content-area,
    1320936        .inner-wrap {
    1321937            max-width: 100%;
    1322938            padding: 0 1%;
    1323         }
    1324 
     939            .has-sidebar {
     940                width: 100%;
     941            }
     942        }
    1325943    }
    1326944}
    1327945
    1328 
    1329 
    1330 /*
    1331  * Content
    1332  *
    1333  */
    1334 .has-sidebar.content-area {
    1335     float: none;
    1336     margin: 0 auto;
    1337     width: 60em;
    1338 }
    1339 
    1340 .has-sidebar {
    1341 
    1342     .site-main {
    1343         float: right;
    1344         width: 67%;
    1345         margin: 0;
    1346         clear: none;
    1347         padding: 0 12px;
    1348         padding: 0 1.2rem;
    1349     }
    1350     .widget-area {
    1351         float: left;
    1352         overflow: hidden;
    1353         width: 30%;
    1354         margin-left: -55px;
    1355         margin: 0;
    1356         clear: none;
    1357 
    1358         .widget {
    1359             width: 100%;
    1360         }
    1361     }
    1362 
    1363 }
    1364 
    1365 @media ( max-width: 60em ) {
    1366     .has-sidebar.content-area {
    1367         width: 100%;
    1368     }
    1369 }
    1370 
    1371946@media ( max-width: 43em ) {
    1372947
    1373     .has-sidebar {
    1374 
    1375         .site-main {
     948    #content-area.has-sidebar {
     949
     950        main {
    1376951            float: right;
    1377952            width: 96%;
    … …  
    1394969    }
    1395970
     971    .section .box,
     972    .home-primary-content,
     973    .reference-landing .section {
     974        float: none;
     975        width: 100%;
     976        padding: 1.5em 10%;
     977        clear: both;
     978        text-align: center;
     979        display: block;
     980    }
     981    .reference-landing .section .box,
     982    .sidebar .box {
     983        padding: 0;
     984        margin-bottom: 1.5em;
     985    }
     986    .home-primary-content .entry-content,
     987    .reference-landing .section {
     988        text-align: left;
     989    }
     990
     991    .horizontal-list li {
     992        display: block;
     993        a {
     994            border-left: none;
     995        }
     996    }
     997
     998    .horizontal-list li:first-child a {
     999        padding: 0 40px;
     1000        padding: 0 4rem;
     1001    }
     1002
     1003
     1004    .reference-landing .searchform input[type="text"],
     1005    .reference-landing .searchform input[type="submit"] {
     1006        width: 100%;
     1007        margin-right: 0;
     1008        margin-bottom: 1em;
     1009        float: none;
     1010        clear: both;
     1011    }
    13961012}
Note: See TracChangeset for help on using the changeset viewer.