WordPress.org

Making WordPress.org

Changeset 4758


Ignore:
Timestamp:
01/24/2017 12:40:22 AM (4 years ago)
Author:
mapk
Message:

Breathe: Handbook sidebar nav redesign.

The floating sidebar nav was causing readability issues and so I redesigned it to be anchored better and be more evident that it's a sidebar nav. Also redesigned the Topic in-page box to be lighter so it doesn't detract from the content as much. Still working on a better solution.

Props grapplerulrich

See #2389, #2410

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/style.css

    r4756 r4758  
    256256    text-transform: uppercase;
    257257    letter-spacing: 1px;
    258     background-color: #82878c;
     258    background-color: transparent;
    259259    padding: 1rem 12px;
    260260    margin-bottom: 0;
    261     color: #fff;
     261    color: inherit;
    262262}
    263263
     
    266266}
    267267.widget_search input[type="search"], #subscribe-email input[type="email"] {
    268     width: 100%;
     268    width: 90%;
    269269    box-sizing: border-box;
    270270    padding: 1rem;
    271271    font-size: 14px;
     272    border: 1px solid #eee;
     273}
     274
     275#secondary-content .widget {
     276    background: transparent;
    272277}
    273278
     
    842847}
    843848
     849.single-handbook div.table-of-contents {
     850    background-color: #fff;
     851    box-shadow: 0 0 8px rgba(0,0,0,0.1);
     852    border-radius: 3px;
     853}
     854
    844855@media (min-width: 971px) {
    845856    .post-type-archive-handbook div.table-of-contents,
     
    925936}
    926937#secondary .menu-table-of-contents-container ul li {
    927   border-top: 1px solid #eee;
     938  border-top: 1px solid rgba(0,0,0,0.05);
    928939  padding: 0;
    929940  position: relative;
    930941}
    931942#secondary .menu-table-of-contents-container ul ul {
    932     margin-left: 0;
     943    margin-left: 12px;
     944    border-left: 1px solid rgba(0,0,0,0.05);
    933945}
    934946.menu-table-of-contents-container ul li .expandable {
     
    942954  right: 0;
    943955  cursor: pointer;
    944   border-left: 1px solid #eee;
    945   border-right: 1px solid #eee;
    946956  padding: 8px;
    947957  display: inline-block;
    948958  width: auto;
    949959  height: 100%;
    950   background-color: #fff;
     960  color: #0073aa;
     961  background-color: #fafafa;
     962  border-left: 1px solid rgba(0,0,0,0.05);
    951963}
    952964.menu-table-of-contents-container ul li .dashicons:hover {
     
    956968.menu-table-of-contents-container ul li.open > div > .dashicons {
    957969  transform: rotate(180deg);
     970  border-right: 1px solid rgba(0,0,0,0.05);
     971  border-left: none;
     972}
     973.menu-table-of-contents-container .open .expandable .dashicons {
     974    background: #fff;
     975    color: #0073aa;
    958976}
    959977.menu-table-of-contents-container ul a {
     
    961979  width: 100%;
    962980  padding: 8px 40px 8px 8px;
    963   color: #23282d;
    964981  text-decoration: none;
    965982}
     
    969986}
    970987.menu-table-of-contents-container ul a.active {
    971   color: #fff !important;
    972   background-color: #0073aa;
     988  color: #555 !important;
     989  background-color: #fff;
    973990}
    974991.menu-table-of-contents-container > ul > li:last-child {
    975   border-bottom: 1px solid #eee;
     992  border-bottom: 1px solid rgba(0,0,0,0.05);
    976993}
    977994.menu-table-of-contents-container > ul > li .children > li > a {
     
    981998  padding-left: 8px;
    982999}
    983 .menu-table-of-contents-container > ul > li > div > a, .menu-table-of-contents-container > ul > li > a {
    984   border-left: 5px solid transparent;
    985   transition: border-color 0.2s ease;
    986 }
     1000
    9871001.menu-table-of-contents-container > ul > li.open > div > a {
    988   border-left: 5px solid #0073aa;
    9891002  color: #0073aa;
    9901003}
    9911004.menu-table-of-contents-container > ul > li.open > div > a:hover {
    9921005  color: #fff;
    993 }
    994 .menu-table-of-contents-container > ul > li ul {
    995   background-color: #f6f6f6;
    996 }
    997 .menu-table-of-contents-container > ul > li > ul > li > ul {
    998   padding-left: 16px;
    999   background-color: #fff;
    1000 }
    1001 .menu-table-of-contents-container > ul > li > ul > li > ul li {
    1002   background-color: #f6f6f6;
    1003 }
    1004 .menu-table-of-contents-container > ul > li > ul > li > ul a {
    1005   border-left: 5px solid #d5d5d5;
    1006 }
    1007 .menu-table-of-contents-container > ul > li > ul > li > ul a:hover, .menu-table-of-contents-container > ul > li > ul > li > ul a.active {
    1008   border-left: 5px solid #0073aa;
    10091006}
    10101007.menu-table-of-contents-container ul.default-open {
     
    10191016  display: none;
    10201017}
     1018
     1019/* New handbook design */
     1020.handbook-template-default #page {
     1021    background: linear-gradient(to right, #fafafa 40%, #fff 40%);
     1022    max-width: 100%;
     1023    padding: 0;
     1024}
     1025
     1026.handbook-template-default #main {
     1027    max-width: 960px;
     1028    margin: 0 auto;
     1029    display: flex;
     1030}
     1031
     1032.handbook-template-default header {
     1033    margin: 0;
     1034}
     1035
     1036.handbook-template-default #secondary {
     1037    margin: 0;
     1038}
     1039
     1040.handbook-template-default #primary {
     1041    padding: 4rem 0 4rem 4rem;
     1042    background: #fff;
     1043    box-sizing: border-box;
     1044}
     1045
     1046@media(max-width: 876px) {
     1047    .handbook-template-default #primary {
     1048        padding: 4rem 20px;
     1049    }
     1050}
     1051
     1052.handbook-template-default #secondary-content {
     1053    padding-top: 4rem;
     1054}
     1055
     1056.handbook-template-default .widget_wporg_handbook_pages {
     1057    background-color: transparent;
     1058}
     1059
     1060.single-handbook nav.o2-post-actions button {
     1061    top: 10px;
     1062}
     1063.handbook-template-default .make-welcome {
     1064    margin: 0 !important;
     1065}
     1066
     1067
Note: See TracChangeset for help on using the changeset viewer.