WordPress.org
Get WordPress

Making WordPress.org

Changeset 14309


Ignore:
Timestamp:
12/18/2024 04:59:53 AM (21 months ago)
Author:
johnjamesjacoby
Message:

BuddyPress.org/bbPress.org: small-screen bug fixes

  • Improve contrast of main nav
  • Prevent visible overflow on homepage
  • Numerous Trac nav & search improvments

Props slaffik, jtsternberg.

See: ​https://buddypress.trac.wordpress.org/ticket/9262

Location:
sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/functions.php

    r14298 r14309  
    5555
    5656        // Version of CSS
    57         $version = '202412160002';
     57        $version = '202412170001';
    5858
    5959        // Base theme styling

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/header-nav.php

    r14281 r14309  
    77                        <li><a href="<?php echo esc_url( '//codex.' . parse_url( home_url(), PHP_URL_HOST ) . '/' ); ?>"><?php esc_html_e( 'Codex', 'bborg' ); ?></a></li>
    88                        <li <?php if ( is_post_type_archive( 'post' ) || is_singular( 'post' ) || is_date() || is_tag() || is_category() || is_home() ) : ?>class="current"<?php endif; ?>><a href="<?php echo home_url( 'blog' ); ?>"><?php esc_html_e( 'News', 'bborg' ); ?></a></li>
    9                         <?php if ( function_exists( 'is_bbpress' ) ) : ?><li <?php if ( is_bbpress() ) : ?>class="current"<?php endif; ?>><a href="<?php bbp_forums_url(); ?>"><?php esc_html_e( 'Forums', 'bborg' ); ?></a></li><?php endif; ?>
     9                        <?php if ( function_exists( 'is_bbpress' ) ) : ?><li <?php if ( is_bbpress() && ! is_front_page() ) : ?>class="current"<?php endif; ?>><a href="<?php bbp_forums_url(); ?>"><?php esc_html_e( 'Forums', 'bborg' ); ?></a></li><?php endif; ?>
    1010                        <li class="download<?php if ( is_page( 'download' ) ) : ?> current<?php endif; ?>"><a href="<?php echo home_url( 'download' ); ?>"><?php esc_html_e( 'Download', 'bborg' ); ?></a></li>
    1111                </ul>

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/style-bbpress.css

    r14298 r14309  
    2121        /* Buttons */
    2222        --bbbase-button-background-color: rgba(0, 153, 51, 1);
    23         --bbbase-button-background-color-hover: rgba(0, 153, 51, 1);
     23        --bbbase-button-background-color-hover: rgba(0, 153, 51, 0.8);
    2424        --bbbase-button-color: rgba(235, 255, 235, 0.9);
    2525        --bbbase-button-color-hover: rgba(235, 255, 235, 0.9);

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/style-buddypress.css

    r14298 r14309  
    2020
    2121        /* Buttons */
    22         --bbbase-button-background-color: rgba(199, 66, 0, 1);
    23         --bbbase-button-background-color-hover: rgba(221, 130, 59, 0.9);
     22        --bbbase-button-background-color: rgba(221, 130, 59, 1);
     23        --bbbase-button-background-color-hover: rgba(221, 130, 59, 0.8);
    2424        --bbbase-button-color: rgba(255, 235, 235, 0.9);
    2525        --bbbase-button-color-hover: rgba(255, 235, 235, 0.9);

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/style-trac.css

    r14298 r14309  
    1010body.trac #ticket table.properties a:hover {
    1111        background-color: transparent;
     12}
     13
     14body.trac a.trac-rawlink:hover:before,
     15body.trac a.trac-ziplink:hover:before,
     16body.trac a.ext-link:hover:before,
     17body.trac a.mail-link:hover:before {
     18        border: none;
     19        text-decoration: none;
    1220}
    1321
    … …  
    6371body.trac li {
    6472        border: none;
     73}
     74
     75body.trac ul,
     76body.trac ol {
     77    padding-left: 20px;
     78    margin: 0;
    6579}
    6680
    … …  
    304318body.trac #mainnav ul,
    305319body.trac #mainnav ul li,
    306 body.trac #mainnav ul li a {
     320body.trac #mainnav ul li :link {
    307321        display: flex;
    308322        align-items: center;
    … …  
    313327}
    314328
    315 body.trac #mainnav ul li a {
     329body.trac #mainnav ul li :link {
    316330        box-sizing: border-box;
    317331        padding: 0 15px;
    318332        border: 1px solid transparent !important;
    319         border-top-left-radius: 8px !important;
    320         border-top-right-radius: 8px !important;
    321 }
    322 
    323 body.trac #mainnav li.active a {
     333        border-top-left-radius: 8px;
     334        border-top-right-radius: 8px;
     335}
     336
     337body.trac #mainnav li.active :link {
    324338        margin-top: 2px;
    325         background-color: #fff !important;
    326         color: #000 !important;
     339        background-color: #fff;
     340        color: #000;
    327341        border: 1px solid var(--bbbase-grey-border-color-low-contrast) !important;
    328342        border-bottom-color: transparent !important;
    329343}
    330344
    331 body.trac #mainnav li:not(.active) a:hover {
    332         background-color: #fafafa !important;
     345body.trac #mainnav li:not(.active) :link:hover {
     346        background-color: #fafafa;
    333347        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    334348        border-bottom: 1px solid transparent !important;
    … …  
    348362body.trac #main .date p {
    349363        margin: 0;
     364}
     365
     366body.trac #main p:first-child {
     367        margin-top: 0;
    350368}
    351369
    … …  
    412430}
    413431
     432body.trac #ctxtnav:not(:has(a)) {
     433        display: none;
     434}
     435
    414436body.trac #ctxtnav ul {
    415437        display: flex;
    … …  
    434456    top: auto;
    435457    right: auto;
    436     line-height:24px;
     458    line-height: 24px;
    437459    padding-top: .5em;
    438460}
    … …  
    593615
    594616/* Roadmap */
     617body.trac #content.roadmap .milestone {
     618        margin: 0 0 30px 0;
     619}
     620
    595621body.trac #content.roadmap .milestone .info h2 {
    596622        border: none;
    … …  
    598624}
    599625
     626body.trac #content.roadmap .milestone .info .date,
     627body.trac #content.roadmap .milestone .info .percent,
     628body.trac #content.roadmap .milestone .info .legend {
     629    font-size: 16px;
     630    font-style: normal;
     631}
    600632body.trac #content.roadmap .milestone .info .date {
    601633    color: #888;
    602     font-size: 16px;
    603     font-style: normal;
    604634        font-weight: 600;
    605     margin: 0 0 30px 0;
     635    margin: 0 20px 10px 20px;
     636}
     637
     638body.trac #content.roadmap .milestone .info .percent,
     639body.trac #content.roadmap .milestone .info .legend {
     640        margin: 10px;
     641}
     642
     643body.trac #content.roadmap .milestone .info .legend {
     644        color: var(--bbbase-brightest-white);
     645}
     646
     647body.trac #content.roadmap .milestone .info .legend span {
     648        margin: 0 0 0 10px;
     649        text-transform: capitalize;
     650}
     651
     652body.trac #content.roadmap .milestone .description {
     653    margin: 0 20px;
     654}
     655
     656body.trac table.progress,
     657body.trac .trac-groupprogress {
     658        border: none;
     659    width: 50%;
     660    max-width: 50%;
     661        margin: 0 15px;
     662        background: var(--bbbase-light-background-color-low-contrast);
     663}
     664
     665body.trac table.progress td.open {
     666    background: var(--bbbase-light-background-color-low-contrast);
     667}
     668
     669body.trac table.progress td.closed {
     670        background: var(--bbbase-button-background-color);
    606671}
    607672
    … …  
    623688    padding: 15px 20px;
    624689    overflow: auto;
     690}
     691
     692body.trac .wikipage {
     693        padding: 0;
     694        margin: 0 0 60px 0;
     695}
     696
     697body.trac .wikipage h1 {
     698    margin: 0 0 30px 0;
    625699}
    626700
    … …  
    805879}
    806880
     881body.trac #attachments:empty {
     882        display: none;
     883}
     884
    807885body.trac #content.ticket {
    808886        max-width: 940px;
    … …  
    896974body.trac #ticketchange .changes,
    897975body.trac div.change ul.changes {
    898     margin: 30px 0 0 0;
     976    margin: 20px 0;
    899977    padding: 30px;
    900978    border: 1px solid #009933;
    … …  
    904982    color: inherit;
    905983    word-break: break-word;
     984}
     985
     986body.trac #changelog h3,
     987body.trac #ticketchange h3 {
     988    border-bottom: 1px solid #d7d7d7;
     989    box-shadow: none;
     990    padding: 10px 0;
     991    margin-bottom: 15px;
     992    font-size: 100%;
     993    font-weight: normal;
    906994}
    907995
    … …  
    12001288                margin-left: 5px;
    12011289        }
     1290
     1291        body.trac #mainnav ul,
     1292        body.trac #mainnav ul li,
     1293        body.trac #mainnav ul li :link {
     1294                height: 100%;
     1295                width: 100%;
     1296                border-radius: 0 !important;
     1297                border: none !important;
     1298                margin: 0;
     1299        }
     1300        body.trac #mainnav ul li :link {
     1301                padding: 10px;
     1302                border: none !important;
     1303        }
     1304        body.trac #mainnav ul li.active :link,
     1305        body.trac #mainnav ul li:not(.active) :link:hover {
     1306                border: none !important;
     1307                margin: 0;
     1308        }
     1309        body.trac #mainnav li {
     1310                width: 100%;
     1311        }
     1312        body.trac #mainnav ul {
     1313                display: grid;
     1314                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     1315        }
     1316
     1317        body.trac #search input[type=submit] {
     1318                display: none;
     1319        }
    12021320}
    12031321

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/style.css

    r14298 r14309  
    137137}
    138138#header h1 a,
    139 #header h1 :link,
    140 #header h1 :link:hover,
    141 #wporg-header h1 :link,
    142 #wporg-header h1 :link:hover,
    143 #wporg-header h1 :link:visited {
     139#header h1 a:hover,
     140#wporg-header h1 a,
     141#wporg-header h1 a:hover {
    144142        border: 0;
    145143        text-decoration: none;
    … …  
    162160        height: 400px;
    163161        line-height: 0;
     162        overflow: hidden !important;
    164163}
    165164#headline-inner p {
    … …  
    175174        position: absolute;
    176175        bottom: 50px;
    177         font-size: 1.8em;
    178         padding: 15px 30px;
     176        font-size: 22px;
     177        padding: 25px 35px;
    179178        text-decoration: none;
    180179}
    … …  
    290289
    291290div.content {
     291        width: 100%;
    292292        order: 2;
    293293        margin-left: auto;
    … …  
    472472#mobile-menu-button {
    473473        display: none;
     474        border-radius: 0 !important; /* Override all other buttons */
    474475}
    475476
    … …  
    498499}
    499500#nav li a,
    500 #wporg-header #wporg-header-menu li :link,
    501 #wporg-header #wporg-header-menu li :visited {
     501#wporg-header #wporg-header-menu li a {
    502502        display: flex;
    503503        align-items: center;
    … …  
    513513#nav li a:hover,
    514514#nav li a.active,
    515 #wporg-header #wporg-header-menu li :link:hover,
    516 #wporg-header #wporg-header-menu li :link:active {
     515#wporg-header #wporg-header-menu li a:hover,
     516#wporg-header #wporg-header-menu li a:active {
     517        color: var(--bbbase-brightest-white);
    517518        background-color: var(--bbbase-brightest-white-blend);
    518519}
    … …  
    19711972                width: 960px;
    19721973        }
    1973         div.content {
     1974        body:not(.page-template-page-homepage) div.content {
    19741975                width: 700px;
    19751976        }
    … …  
    20262027                border: none;
    20272028                background: transparent;
     2029                color: var(--bbbase-darkest-black);
    20282030        }
    20292031
    … …  
    20482050        }
    20492051        #header #nav #bb-nav li a,
    2050         #wporg-header #wporg-header-menu li :link,
    2051         #wporg-header #wporg-header-menu li :visited {
     2052        #wporg-header #wporg-header-menu li a {
    20522053                margin: 0;
    20532054                padding: 0;
    … …  
    20572058        }
    20582059        #header #nav #bb-nav li.current a,
    2059         #header #nav #bb-nav li a:hover {
    2060                 color: var(--bbbase-brightest-white);
     2060        #header #nav #bb-nav li a:hover,
     2061        #wporg-header #wporg-header-menu li.current a,
     2062        #wporg-header #wporg-header-menu li a:hover {
     2063                color: var(--bbbase-button-color-hover);
     2064                background-color: var(--bbbase-button-background-color-hover);
    20612065        }
    20622066        #header #bb-nav,
    … …  
    20762080        #header #nav:focus #bb-menu-icon,
    20772081        #wporg-header #mobile-menu-button[aria-expanded="true"] {
    2078                 background-color: rgba(255,255,255,0.3);
     2082                background-color: var(--bbbase-brightest-white-blend);
    20792083        }
    20802084        #header #nav:hover #bb-menu-icon:before,
    20812085        #header #nav:focus #bb-menu-icon:before,
    20822086        #wporg-header #mobile-menu-button[aria-expanded="true"]:before {
    2083                 color: var(--bbbase-brightest-white);
     2087                color: var(--bbbase-darkest-black);
    20842088        }
    20852089}
Note: See TracChangeset for help on using the changeset viewer.