Making WordPress.org

Ticket #53: wp4-style.diff

File wp4-style.diff, 12.8 KB (added by cyberchimps, 11 years ago)

Responsive Menu - Mobile first

  • wp4.css

     
    1515        line-height: 22px;
    1616        color: #444;
    1717}
     18
    1819/* -------------------------------------------- */
    1920
    2021html, body {
     
    169170/* */
    170171
    171172.wrapper {
    172         width: 960px;
     173        max-width: 960px;
    173174        margin: 0 auto;
    174175        clear: both;
    175176}
    176177
    177178#wporg-header {
    178         height: 120px;
    179         min-width: 960px;
     179        position: relative;
     180        height: 140px;
     181        width: 100%;
    180182        background: #222222;
     183        text-align: center;
    181184}
    182185
    183186#wporg-header h1 {
    184         padding-left: 10px;
     187        display: inline-block;
     188        width: 303px;
    185189}
    186190
    187191#wporg-header h1 a {
     
    191195        width: 303px;
    192196        height: 88px;
    193197        text-indent: -9999px;
    194         float: left;
    195198}
    196199.no-static #wporg-header h1 a {
    197200        background-image: url(//wordpress.org/style/images/wp-header-logo.png?1);
     
    206209}
    207210
    208211#wporg-header h2.rosetta {
    209     font-size: 30px;
    210     color: #dfdfdf;
    211     font-family: Georgia, "Times New Roman", serif;
     212        font-size: 30px;
     213        color: #dfdfdf;
     214        font-family: Georgia, "Times New Roman", serif;
    212215}
    213216
    214217#wporg-header h2.rosetta a {
    215     padding: 36px 27px 0;
    216     float: left;
    217     display: block;
    218     height: 52px; /* 88 header height - 36 top padding */
    219     color: #dfdfdf;
     218        padding: 36px 27px 0;
     219        float: left;
     220        display: block;
     221        height: 52px; /* 88 header height - 36 top padding */
     222        color: #dfdfdf;
    220223}
    221224
     225#head-search {
     226        height: 48px;
     227}
     228
     229#head-search form {
     230        width:288px;
     231        display: inline-block;
     232        margin-left: 20px;
     233        border-bottom: 1px solid #3f3f3f;
     234}
     235
     236#head-search input.text {
     237        background: #131313;
     238        border: 0;
     239        margin-right: 0;
     240        margin-bottom: 0;
     241        width: 262px;
     242        height: 24px;
     243        color: #999999;
     244        float: left;
     245        font-size: 12px;
     246        outline: none;
     247        font-family: "Open Sans", sans-serif;
     248        border-radius: 0px;
     249}
     250
     251#head-search input.text::-moz-placeholder {
     252        color: #eee;
     253}
     254
     255#head-search .button {
     256        float: left;
     257        text-shadow: none !important;
     258        border: none;
     259        height: 24px;
     260        width: 26px;
     261        background: #131313;
     262        background-image: url(http://s.wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);
     263        background-position: 100% 2px;
     264        background-repeat: no-repeat;
     265        border-radius:0;
     266        padding: 0;
     267}
     268.no-static #head-search .button {
     269        background-image: url(//wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);
     270}
     271
    222272#wporg-header ul {
     273        position: absolute;
    223274        list-style: none;
    224         width: 100%;
    225         margin: -15px 0 0;
    226         padding: 0;
    227         float:left;
     275        min-width: 200px;
     276        max-width: 75%;
     277        margin: 0;
     278        padding: 20px 0 0;
     279        text-align: left;
     280        background: #222222;
    228281}
    229282
    230283#wporg-header ul li {
    231         float: left;
    232284        position:relative;
    233285}
    234286
     
    237289        font-weight: 600;
    238290        display: block;
    239291        line-height: 34px;
    240         padding: 0 6px;
     292        padding: 10px 30px;
    241293        margin: 0 4px;
    242294        font-size: 13px;
    243295        color: #ddd;
    244         height: 48px;
     296        height: 34px;
    245297}
    246298
    247299#wporg-header ul li#download a.current {
    248300        color: #eee;
    249301}
    250302
    251 #wporg-header ul.nav-submenu li a {
    252         height: 34px;
    253 }
    254 
    255303#wporg-header ul li a:active {
    256304        color: #000;
    257305}
     
    264312        color: #2faadd;
    265313}
    266314
    267 #wporg-header ul li#download .uparrow {
    268         display:none;
     315#wporg-header ul li a.subcurrent {
     316        font-weight: bold;
    269317}
    270318
    271 #wporg-header ul li a.current ~ .uparrow {
    272         width: 0;
    273         height: 0;
    274         border-left: 9px solid transparent;
    275         border-right: 9px solid transparent;
    276         border-bottom: 9px solid #f7f7f7;
    277         margin: -9px auto 0 auto;
     319/* TODO Submenu is hidden as we think it is better just to offer main menu items at mobile level. Change display to block to see sub nav */
     320#wporg-header .nav-submenu {
     321        display: none;
     322        position: static;
     323        padding-top: 0;
     324        margin-top: -15px;
     325        margin-bottom: 10px;
    278326}
    279327
    280 #wporg-header ul li:hover .nav-submenu ~ .uparrow, #wporg-header ul li .nav-submenu:hover ~ .uparrow {
    281         width: 0;
    282         height: 0;
    283         border-left: 9px solid transparent;
    284         border-right: 9px solid transparent;
    285         border-bottom: 9px solid #444;
    286         margin: -10px auto 0 auto;
     328#wporg-header ul.nav-submenu li a {
     329        margin-left: 20px;
     330        height: 24px;
     331        line-height: 24px;
    287332}
    288333
    289 #wporg-header ul li a.subcurrent {
    290         font-weight: bold;
    291 }
    292 
    293334#wporg-header ul li#download {
     335        display: none;
    294336        height: 34px;
    295337        padding: 0 0 34px;
    296338        float: right;
     
    307349        color: #eee;
    308350}
    309351
    310 #wporg-header .nav-submenu {
    311         display:none;
    312         min-width: 0;
    313         background: #444;
    314         margin-top: -1px;
    315         border: #444 solid 1px;
    316         border-top:0;
     352#mobile-menu-button {
     353        display: inline-block;
     354        float: left;
     355        margin-top: 20px;
     356        margin-left: 20px;
     357        width: 16px;
     358        height: 16px;
     359        vertical-align: top;
     360        text-align: center;
     361        text-decoration: inherit;
     362        font-weight: normal;
     363        font-style: normal;
     364        font-size: 16px;
     365        font-family: 'dashicons';
     366        line-height: 1;
     367        -webkit-transition: color .1s ease-in 0;
     368        -moz-transition: color .1s ease-in 0;
     369        -webkit-font-smoothing: antialiased;
    317370}
    318371
    319 #wporg-header ul li:hover .nav-submenu, #wporg-header ul li .nav-submenu:hover  {
    320         display:block;
    321         position:absolute;
    322         top:46px;
    323         left:0;
    324         z-index:11;
    325         width:auto;
     372#mobile-menu-button:before {
     373        display: inline-block;
     374        float: left;
     375        -moz-box-sizing: border-box;
     376        box-sizing: border-box;
     377        margin: 0;
     378        padding: 3px;
     379        width: 39px;
     380        height: 32px;
     381        outline: none;
     382        border: none;
     383        color: #888;
     384        content: '\f228';
     385        vertical-align: middle;
     386        text-decoration: none;
     387        font: normal 50px/1 'Dashicons';
     388        -webkit-font-smoothing: antialiased;
    326389}
    327390
    328 #wporg-header ul li .nav-submenu li {
    329         float:none;
     391#download-mobile {
     392        background: #f7f7f7;
     393        border-bottom: 1px solid #dddddd;
    330394}
    331395
     396#download-mobile .wrapper {
     397        padding: 20px 0;
     398        text-align: center;
     399}
     400
     401#download-mobile span.download-ready {
     402        font-size: 1.6em;
     403        margin-right: 20px;
     404}
     405
     406#download-mobile a.download-button {
     407        height: inherit;
     408        padding: 10px 15px;
     409        font-size: 1.6em;
     410}
     411
     412@media screen and (min-width:767px) {
     413
     414        /* TODO Remove as js is needed to shift content back when menu is closed */
     415        .wrapper {
     416                margin-left: auto;
     417        }
     418
     419        #wporg-header {
     420                height: 120px;
     421                text-align: inherit;
     422        }
     423
     424        #wporg-header h1 {
     425                float: left;
     426                padding-left: 10px;
     427        }
     428
     429        #head-search {
     430                float: right;
     431                margin-right: 14px;
     432                height: 48px;
     433                padding-top: 30px;
     434        }
     435
     436        #head-search form {
     437                margin-left: 0;
     438        }
     439
     440        #wporg-header ul {
     441                position: static;
     442                display: block;
     443                float:left;
     444                margin: -15px 0 0;
     445                padding: 0;
     446                min-width: 0;
     447                max-width: inherit;
     448                width: 100%;
     449                list-style: none;
     450        }
     451
     452        #wporg-header ul li {
     453                float: left;
     454                position:relative;
     455        }
     456
     457        #wporg-header ul li a {
     458                font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
     459                font-weight: 600;
     460                display: block;
     461                line-height: 34px;
     462                padding: 0 6px;
     463                margin: 0 4px;
     464                font-size: 13px;
     465                color: #ddd;
     466                height: 46px;
     467        }
     468
     469        #wporg-header ul li#download .uparrow {
     470                display:none;
     471        }
     472
     473        #wporg-header ul li a.current ~ .uparrow {
     474                width: 0;
     475                height: 0;
     476                border-left: 9px solid transparent;
     477                border-right: 9px solid transparent;
     478                border-bottom: 9px solid #f7f7f7;
     479                margin: -9px auto 0 auto;
     480        }
     481
     482        #wporg-header ul li:hover .nav-submenu ~ .uparrow, #wporg-header ul li .nav-submenu:hover ~ .uparrow {
     483                width: 0;
     484                height: 0;
     485                border-left: 9px solid transparent;
     486                border-right: 9px solid transparent;
     487                border-bottom: 9px solid #444;
     488                margin: -10px auto 0 auto;
     489        }
     490
     491        #wporg-header .nav-submenu {
     492                display:none;
     493                min-width: 0;
     494                background: #444;
     495                margin-top: -1px;
     496                border: #444 solid 1px;
     497                border-top:0;
     498        }
     499
     500        #wporg-header ul li:hover .nav-submenu, #wporg-header ul li .nav-submenu:hover  {
     501                display:block;
     502                position:absolute;
     503                top:46px;
     504                left:0;
     505                z-index:11;
     506                width:auto;
     507        }
     508
     509        #wporg-header ul li .nav-submenu li {
     510                float:none;
     511        }
     512
     513        #wporg-header ul.nav-submenu li a {
     514                margin-left: 6;
     515                height: 34px;
     516                line-height: 34px;
     517        }
     518
     519        #mobile-menu-button {
     520                display: none;
     521        }
     522}
     523
     524@media screen and (min-width:800px) {
     525        #wporg-header ul li#download {
     526                display: list-item;
     527        }
     528
     529        #download-mobile {
     530                display: none;
     531        }
     532}
     533
    332534#home-welcome {
    333535        background: #f7f7f7;
    334536        min-width: 960px;
     
    416618.button-group.button-large .button,
    417619.col-2 p.button, .col-13 p.button {
    418620        height: 30px;
    419     line-height: 28px;
    420     padding: 0 12px 2px;
     621        line-height: 28px;
     622        padding: 0 12px 2px;
    421623}
    422624
    423625.button.button-small,
     
    448650/* 2.0 - Default Button Style */
    449651
    450652.submit input,
    451 input[type=button], 
     653input[type=button],
    452654input[type=submit],
    453655.button,
    454656.button-secondary {
     
    459661        background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
    460662        background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
    461663        border-color: #bbb;
    462         color: #333;
     664        color: #333;
    463665        text-shadow: 0 1px 0 #fff;
    464666}
    465667
    466668.submit input:hover,
    467 input[type=button]:hover, 
     669input[type=button]:hover,
    468670input[type=submit]:hover,
    469671.submit input:focus,
    470 input[type=button]:focus, 
     672input[type=button]:focus,
    471673input[type=submit]:focus,
    472674.button.hover,
    473675.button:hover,
     
    487689}
    488690
    489691.submit input:focus,
    490 input[type=button]:focus, 
     692input[type=button]:focus,
    491693input[type=submit]:focus,
    492694.button.focus,
    493695.button:focus,
     
    497699}
    498700
    499701.submit input:active,
    500 input[type=button]:active, 
     702input[type=button]:active,
    501703input[type=submit]:active,
    502704.button.active,
    503705.button.active:hover,
     
    515717        color: #333;
    516718        text-shadow: 0 -1px 0 #fff;
    517719        -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    518         box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     720        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    519721}
    520722
    521723.submit input:disabled,
    522 input[type=button]:disabled, 
     724input[type=button]:disabled,
    523725input[type=submit]:disabled,
    524726.button[disabled],
    525727.button:disabled,
     
    556758        border-color: #21759b;
    557759        border-bottom-color: #1e6a8d;
    558760        -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    559         box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    560         color: #fff;
     761        box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     762        color: #fff;
    561763        text-decoration: none;
    562764        text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    563765}
     
    579781        background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
    580782        border-color: #1b607f;
    581783        -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    582         box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     784        box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    583785        color: #fff;
    584786        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    585787}
     
    611813        border-color: #124560 #2382ae #2382ae #2382ae;
    612814        color: rgba(255,255,255,0.95);
    613815        -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    614         box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     816        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    615817        text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    616818}
    617819
     
    779981        position: absolute;
    780982        left: 0;
    781983        top: 0;
    782         background-image: url(http://s.wordpress.org/style/images/steps.png);
    783         background-size: 93px 31px;
    784         background-repeat: no-repeat;
     984        background-image: url(http://s.wordpress.org/style/images/steps.png);
     985        background-size: 93px 31px;
     986        background-repeat: no-repeat;
    785987}
    786988.no-static #home-below ol.steps li span {
    787989        background-image: url(//wordpress.org/style/images/steps.png);
     
    791993                background-image: url(http://s.wordpress.org/style/images/steps-2x.png);
    792994        }
    793995        .no-static #home-below ol.steps li span {
    794             background-image: url(//wordpress.org/style/images/steps-2x.png);
     996                background-image: url(//wordpress.org/style/images/steps-2x.png);
    795997        }
    796998}
    797999
     
    8771079}
    8781080
    8791081#headline .login a {
    880         color: #21759b; 
    881 } 
     1082        color: #21759b;
     1083}
    8821084
    883 #headline .login a:visited { 
    884         color: #4ca6cf; 
    885 } 
     1085#headline .login a:visited {
     1086        color: #4ca6cf;
     1087}
    8861088
    8871089#headline input.text {
    8881090        background: #fff;
     
    10421244                background-image: url(//wordpress.org/style/images/codeispoetry-2x.png?2);
    10431245        }
    10441246}
    1045 
    1046 #head-search {
    1047         float: right;
    1048         margin-right: 14px;
    1049         height: 48px;
    1050         padding-top: 30px;
    1051 }
    1052 
    1053 #head-search form {
    1054         width:288px;
    1055         display: inline-block;
    1056         border-bottom: 1px solid #3f3f3f;
    1057 }
    1058 
    1059 #head-search input.text {
    1060         background: #131313;
    1061         border: 0;
    1062         margin-right: 0;
    1063         margin-bottom: 0;
    1064         width: 262px;
    1065         height: 18px;
    1066         color: #999999;
    1067         float: left;
    1068         font-size: 12px;
    1069         outline: none;
    1070         font-family: "Open Sans", sans-serif;
    1071         border-radius: 0px;
    1072 }
    1073 
    1074 #head-search input.text::-moz-placeholder {
    1075         color: #eee;
    1076 }
    1077 
    1078 #head-search .button {
    1079         float: left;
    1080         text-shadow: none !important;
    1081         border: none;
    1082         height: 24px;
    1083         width: 20px;
    1084         background: #131313;
    1085         background-image: url(http://s.wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);
    1086         background-position: 100% 2px;
    1087         background-repeat: no-repeat;
    1088         border-radius:0;
    1089         padding: 0;
    1090 }
    1091 .no-static #head-search .button {
    1092         background-image: url(//wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);
    1093 }
    10941247blockquote {
    10951248        background: #f5f5f5;
    10961249        border: 1px solid #dadada;
     
    15481701        margin-bottom: 10px;
    15491702}
    15501703
    1551 body .meta a { 
     1704body .meta a {
    15521705        color: #777;
    15531706        border-bottom: 1px solid #dfdfdf;
    15541707}