WordPress.org
Get WordPress

Making WordPress.org

Changeset 6512


Ignore:
Timestamp:
02/01/2018 09:04:12 PM (7 years ago)
Author:
coffee2code
Message:

developer.wordpress.org: Adapt to new handbook styles as introduced in the Make team sites.

  • Revamps style of handbook sidebar (including making menu collapsible) and in-content table of contents
  • Removes search pane (with imminent switch to search widget) for handbooks
  • Moves breadcrumbs into main content area for handbooks
  • Moves #masthead out of, and before, #page
  • Restyles masthead to have blue background
  • Restyles slide down search pane to not match new masthead
  • Introduces dropdown menu for masthead menu at smaller viewports (as used in WP-CLI Commands)
  • Minor front page revamp of colors (more coming)

Fixes #2969,
See #2459, #3377.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
3 added
10 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php

    r6312 r6512  
    315315    wp_enqueue_script( 'wporg-developer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
    316316    wp_enqueue_script( 'wporg-developer-search', get_template_directory_uri() . '/js/search.js', array(), '20150430', true );
     317    wp_enqueue_script( 'wporg-developer-chapters', get_stylesheet_directory_uri() . '/js/chapters.js', array( 'jquery' ), '20180201' );
     318    wp_enqueue_script( 'wporg-developer-menu', get_template_directory_uri() . '/js/menu.js', array( 'jquery' ), '20180201', true );
    317319}
    318320

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/header.php

    r5820 r6512  
    1313?>
    1414
    15 <div id="page" <?php body_class( 'hfeed site devhub-wrap' ); ?>>
     15<header id="masthead" class="site-header" role="banner">
     16    <?php if ( get_query_var( 'is_handbook' ) ) : ?>
     17    <a href="#" id="secondary-toggle" onclick="return false;"><strong><?php _e( 'Menu', 'wporg' ); ?></strong></a>
     18    <?php endif; ?>
     19    <div class="site-branding">
     20        <?php $tag = is_front_page() ? 'span' : 'h1'; ?>
     21        <<?php echo $tag; ?> class="site-title">
     22            <a href="<?php echo esc_url( DevHub\get_site_section_url() ); ?>" rel="home"><?php echo DevHub\get_site_section_title(); ?></a>
     23        </<?php echo $tag; ?>>
     24
     25        <nav id="site-navigation" class="main-navigation" role="navigation">
     26            <button class="menu-toggle dashicons dashicons-arrow-down-alt2" aria-controls="primary-menu" aria-expanded="false" aria-label="<?php esc_attr_e( 'Primary Menu', 'wporg' ); ?>"></button>
     27            <?php
     28            $active_menu = is_post_type_archive( 'command' ) || is_singular( 'command' ) ? 'devhub-cli-menu' : 'devhub-menu';
     29            wp_nav_menu( array(
     30                'theme_location'  => $active_menu,
     31                'container_class' => 'menu-container',
     32                'container_id'    => 'primary-menu',
     33            ) ); ?>
     34        </nav>
     35    </div>
     36</header><!-- #masthead -->
     37
     38<div id="page" class="hfeed site devhub-wrap">
    1639    <a href="#main" class="screen-reader-text"><?php _e( 'Skip to content', 'wporg' ); ?></a>
    1740
    1841    <?php do_action( 'before' ); ?>
    19     <header id="masthead" class="site-header" role="banner">
    20         <div class="inner-wrap">
    21             <div class="site-branding">
    22                 <?php $tag = is_front_page() ? 'span' : 'h1'; ?>
    23                 <<?php echo $tag; ?> class="site-title">
    24                     <a href="<?php echo esc_url( DevHub\get_site_section_url() ); ?>" rel="home"><?php echo DevHub\get_site_section_title(); ?></a>
    25                 </<?php echo $tag; ?>>
    26             </div>
    27             <div class="devhub-menu">
    28                 <?php
    29                 $active_menu = is_post_type_archive( 'command' ) || is_singular( 'command' ) ? 'devhub-cli-menu' : 'devhub-menu';
    30                 wp_nav_menu( array(
    31                     'theme_location'  => $active_menu,
    32                     'container_class' => 'menu-container',
    33                 ) ); ?>
    34             </div>
    35         </div><!-- .inner-wrap -->
    36     </header><!-- #masthead -->
    3742    <?php
    3843    if ( DevHub\should_show_search_bar() ) : ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/template-tags.php

    r6383 r6512  
    13521352        $taxonomies = array( 'wp-parser-since', 'wp-parser-package', 'wp-parser-source-file' );
    13531353
    1354         return ! ( is_search() || is_404() ) && ( is_singular( $post_types ) || is_post_type_archive( $post_types ) || is_tax( $taxonomies ) || get_query_var( 'is_handbook' ) );
     1354        return ! ( is_search() || is_404() ) && ( is_singular( $post_types ) || is_post_type_archive( $post_types ) || is_tax( $taxonomies ) );
    13551355    }
    13561356

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/navigation.js

    r554 r6512  
    1111        return;
    1212
    13     button = container.getElementsByTagName( 'h1' )[0];
     13    button = container.getElementsByTagName( 'button' )[0];
    1414    if ( 'undefined' === typeof button )
    1515        return;

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

    r6310 r6512  
    4343    #content-area,
    4444    .inner-wrap {
    45         margin: 0 auto;
     45        margin: 2rem auto 0;
    4646        max-width: 60em;
    4747    }
    … …  
    192192            border-bottom-color: #1e6a8d;
    193193            -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    194             box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    195             color: #fff;
     194            box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     195            color: #fff;
    196196            text-decoration: none;
    197197            text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    … …  
    207207                border-color: #1b607f;
    208208                -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    209                 box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     209                box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    210210                color: #fff;
    211211                text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    … …  
    332332    }
    333333    .hentry {
    334         margin: 0 0 1.5em;
     334        margin: 0;
    335335    }
    336336    .byline,
    … …  
    493493        }
    494494        .site-title {
    495             color: #555555;
    496             float: left;
    497             font-size: 28px;
    498             line-height: 1em;
    499             padding-left: 9px;
    500             padding-top: 18px;
    501             text-shadow: 0 1px 0 #FFFFFF;
    502             font-weight: 300;
    503         }
    504 
    505     }
     495            color: #555555;
     496            float: left;
     497            font-size: 28px;
     498            line-height: 1em;
     499            padding-left: 9px;
     500            padding-top: 18px;
     501            text-shadow: 0 1px 0 #FFFFFF;
     502            font-weight: 300;
     503        }
     504    }
     505
    506506    .breadcrumbs {
    507507        .active {
    … …  
    512512    }
    513513    .breadcrumb-trail {
    514         margin-bottom: 1.25em;
     514        margin-bottom: 2rem;
     515
     516        a {
     517            text-decoration: none;
     518        }
    515519    }
    516520    h1.entry-title,
    … …  
    560564    }
    561565    .section.blue {
    562         background: #0073aa;
     566        /*background: #0073aa;*/
    563567        padding: 30px 0;
    564568        padding: 3rem 0;
    … …  
    589593                display: block;
    590594                margin: 0 auto;
     595                opacity: 0.4;
    591596            }
    592597        }
    … …  
    723728    }
    724729
    725     &.single, &.archive {
    726730        div#inner-search {
    727             background-color: #2e6183;
    728             margin-top: -1em;
     731            background-color: #666;
    729732            margin-bottom: 1em;
    730733            padding-top: 2px;
    … …  
    737740                cursor: pointer;
    738741                div#inner-search-icon {
    739                     background-color: #2e6183;
     742                    background-color: #666;
    740743                    color: #ffffff;
    741744                    text-align: center;
    … …  
    761764            }
    762765        }
    763     }
    764766
    765767    .archive-filter-form {
    … …  
    890892
    891893    }
    892     #sidebar {
    893         border: 1px solid #d0d0d0;
    894         box-shadow: 0px 0px 5px #d0d0d0;
    895         background-color: #f0f0f0;
    896         h2.widget-title {
    897             background-color: #d0d0d0;
    898             color: #8a8989;
    899             text-align: center;
    900             text-transform: uppercase;
    901             font-size: 14px;
    902             letter-spacing: 2px;
    903             margin-bottom: 1.5rem;
    904             line-height: 26px;
    905             line-height: 2.6rem;
    906         }
    907         .menu > li {
    908             padding-bottom: 1em;
    909         }
    910         ul {
    911             list-style-type: none;
    912             margin: 0 10px;
    913             padding: 5px 0;
    914             counter-reset: item;
    915             li {
    916                 &:before {
    917                     content: counter(item);
    918                     counter-increment: item;
    919                     background-color: #d0d0d0;
    920                     width: 25px;
    921                     display: inline-block;
    922                     color: #fff;
    923                     margin-right: 10px;
    924                     text-align: center;
    925                     padding: 3px 0;
    926                     font-size: 13px;
    927                     border-radius: 50%;
    928                     vertical-align: top;
    929                 }
    930                 a {
    931                     font-size: 16px;
    932                     color: #4b4b4b;
    933                     font-weight: bold;
    934                 }
    935                 & > a {
    936                     display: inline-block;
    937                     width: 75%;
    938                 }
    939                 ul {
    940                     list-style-type: none;
    941                     padding: 0;
    942                     margin: 0 0 0 35px;
    943                     li {
    944                         padding-left: 20px;
    945                         &:before {
    946                             content: none;
    947                         }
    948                         a {
    949                             font-weight: normal;
    950                             font-size: 14px;
    951                             display: inline;
    952                             margin-left: -20px;
    953                         }
    954                         ul {
    955                             margin-left: 20px;
    956                         }
    957                     }
    958                 }
    959             }
    960         }
    961         .current-menu-item > a {
    962             font-weight: bold !important;
    963             color: #246998;
    964         }
    965     }
    966894
    967895    .reference-landing .box ul {
    … …  
    1022950    .box.transparent {
    1023951        background: none;
    1024         color: #fff;
     952        color: #333;
    1025953
    1026954        h2,
    1027955        h3,
    1028956        h4 {
    1029             color: #fff;
     957            color: #32373c;
    1030958        }
    1031959    }
    … …  
    11481076            margin-top: 30px;
    11491077        }
    1150         .table-of-contents {
    1151             width: 260px;
    1152             margin-left: 30px;
    1153 
    1154             h2 {
    1155                 padding: 3px 0;
    1156             }
    1157 
    1158             & > ul {
    1159                 margin-bottom: 0;
    1160             }
    1161         }
    1162         ul.items {
    1163             margin: 1em 20px !important;
    1164 
    1165             li {
    1166                 padding-bottom: 0px !important;
    1167             }
    1168             & > li {
    1169                 padding-bottom: 8px !important;
    1170             }
    1171             a {
    1172                 &:hover {
    1173                     color: #d54e21 !important;
    1174                 }
    1175             }
    1176         }
    11771078        .toc-jump {
    11781079            display: inline-block;
    … …  
    12771178
    12781179    // User contributed notes
    1279     &.single-wp-parser-function, &.single-wp-parser-method, &.single-wp-parser-hook, &.single-wp-parser-class {
     1180    .single-wp-parser-function, .single-wp-parser-method, .single-wp-parser-hook, .single-wp-parser-class {
    12801181
    12811182        .bad-note .comment-content {
    … …  
    15361437            float: left;
    15371438            overflow: hidden;
    1538             width: 30%;
     1439            width: 27%;
    15391440            margin-left: -55px;
    15401441            margin: 0;
    … …  
    15641465    }
    15651466
    1566     .table-of-contents {
    1567         float: right;
    1568         width: 200px;
    1569         background: #f5f5f5;
    1570         border-style: none;
    1571         margin: 0 0 1em 1.85em;
    1572         z-index: 1;
    1573         position: relative;
    1574 
    1575         h2 {
    1576             padding: 4px 0;
    1577             text-align: center;
    1578             text-transform: uppercase;
    1579             font-size: 1em;
    1580             letter-spacing: 3px;
    1581             background: #d0d0d0;
    1582             color: #8a8989;
    1583         }
    1584 
    1585         ul,
    1586         ol {
    1587             margin: 6px 20px;
    1588             ul,
    1589             ol {
    1590                 margin-right: 0;
    1591                 margin-top: 0;
    1592             }
    1593         }
    1594     }
    1595 
    1596     // Handbook ToC items.
    1597     ul.items {
    1598         margin-bottom: 8px !important;
    1599         margin-top: 16px;
    1600         list-style-type: none !important;
    1601         padding-right: 10px;
    1602 
    1603         li {
    1604             padding-bottom: 6px !important;
    1605             font-weight: 600;
    1606 
    1607             ul li,
    1608             ul li ul li {
    1609                 padding-bottom: 0 !important;
    1610                 font-weight: normal;
    1611             }
    1612 
    1613             a {
    1614                 &:hover {
    1615                     color: #d54e21;
    1616                 }
    1617             }
    1618         }
    1619     }
    1620 
    16211467    .user-note-voting {
    16221468        font-size: 1.2em;
    … …  
    16721518    }
    16731519}
     1520
     1521/** Site Header **/
     1522
     1523.site-header {
     1524    background: #0073aa;
     1525    float: none;
     1526    margin: 0 0 4em;
     1527    padding: 18px 0;
     1528    width: auto;
     1529    margin: 0;
     1530}
     1531.site-branding {
     1532    height: 32px;
     1533    box-sizing: border-box;
     1534    margin: 0 auto;
     1535    max-width: 960px;
     1536    padding: 0 10px;
     1537    position: relative;
     1538}
     1539.site-title {
     1540    line-height: 1;
     1541    margin: 0;
     1542    padding: 0;
     1543    font-family: 'Open Sans', sans-serif;
     1544    display: inline-block;
     1545    text-align: left;
     1546    color: black;
     1547
     1548    a {
     1549        color: #fff;
     1550        font-size: 28px;
     1551        font-weight: 300;
     1552        line-height: 1;
     1553        border-bottom: 0;
     1554    }
     1555
     1556    @media screen and (max-width: 769px) {
     1557        margin-left: 10px;
     1558    }
     1559}
     1560.menu-container {
     1561    background: #0073aa;
     1562    clear: both;
     1563    float: right;
     1564    width: 100%;
     1565
     1566    ul {
     1567        display: none;
     1568        list-style: none;
     1569        margin: 0;
     1570        padding-left: 0;
     1571
     1572        li {
     1573            border-top: 1px solid rgba(255, 255, 255, 0.2);
     1574            padding: 16px;
     1575        }
     1576    }
     1577
     1578    a {
     1579        color: rgba(255, 255, 255, 0.8);
     1580        display: block;
     1581        text-decoration: none;
     1582        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
     1583        font-size: 12.8px;
     1584
     1585        &:hover,
     1586        &:active {
     1587            color: #fff;
     1588            border-bottom: 1px solid #fff;
     1589           
     1590            @media screen and (max-width: 48em) {
     1591                border-bottom: 0;
     1592            }
     1593        }
     1594    }
     1595
     1596    @media screen and (min-width: 48em) {
     1597        float: right;
     1598        position: relative;
     1599        width: auto;
     1600        top: auto;
     1601        margin-right: 4px;
     1602
     1603        ul {
     1604            display: inline-block;
     1605            font-size: 0;
     1606            margin-top: 5px;
     1607
     1608            li {
     1609                border: 0;
     1610                display: inline-block;
     1611                font-size: 1.4rem;
     1612                margin-right: 2.1rem;
     1613                padding: 0;
     1614
     1615                &:last-of-type {
     1616                    margin: 0;
     1617                }
     1618            }
     1619        }
     1620    }
     1621}
     1622.main-navigation {
     1623    clear: both;
     1624    position: absolute;
     1625    left: 0;
     1626    width: 100%;
     1627    top: 50px;
     1628    z-index: 10;
     1629
     1630    &.toggled ul {
     1631        display: block;
     1632    }
     1633}
     1634
     1635.menu-toggle.dashicons {
     1636    background: transparent;
     1637    border: none;
     1638    color: #fff;
     1639    font-size: 25px;
     1640    height: 5.5rem;
     1641    overflow: hidden;
     1642    position: absolute;
     1643    right: 0.5rem;
     1644    top: -60px;
     1645    width: 5.5rem;
     1646    -webkit-appearance: none;
     1647}
     1648.toggled .menu-toggle.dashicons:before {
     1649    content: "\f343";
     1650}
     1651
     1652@media screen and (min-width: 48em) {
     1653    .menu-toggle.dashicons {
     1654        display: none;
     1655    }
     1656    .main-navigation {
     1657        float: right;
     1658        position: relative;
     1659        width: auto;
     1660        top: auto;
     1661
     1662        &.toggled {
     1663            padding: 1px 0;
     1664        }
     1665
     1666        ul {
     1667            display: inline-block;
     1668            font-size: 0;
     1669
     1670            li {
     1671                border: 0;
     1672                display: inline-block;
     1673                font-size: 1rem;
     1674                margin-right: 1rem;
     1675                padding: 0;
     1676
     1677                &:last-of-type {
     1678                    margin-right: 0;
     1679                }
     1680            }
     1681        }
     1682
     1683        button.button-search {
     1684            display: inline-block;
     1685        }
     1686    }
     1687}
     1688
     1689
     1690/** Handbook **/
     1691
     1692aside[id^="handbook"] .widget-title,
     1693aside[id^="nav_menu"] .widget-title {
     1694    font-size: 16px;
     1695    text-transform: uppercase;
     1696    letter-spacing: 1px;
     1697    background-color: transparent;
     1698    padding: 1rem 12px;
     1699    margin-bottom: 0;
     1700    color: inherit;
     1701}
     1702
     1703.post-type-archive-handbook .site-main .widget-area,
     1704.single-handbook .site-main .widget-area {
     1705    float: left;
     1706    margin-right: 4%;
     1707}
     1708.handbook-header {
     1709    line-height: 2em;
     1710
     1711    h1 {
     1712        margin-top: 0;
     1713    }
     1714}
     1715
     1716.single-handbook {
     1717    .content-area h1 {
     1718        margin-top: 0;
     1719        padding-top: 0;
     1720    }
     1721
     1722    .o2-post {
     1723        border-top: none;
     1724    }
     1725
     1726    .handbook-name-container + #primary {
     1727        padding-top: 5rem;
     1728    }
     1729}
     1730
     1731.post-type-archive-handbook .handbook-name a:not(:hover),
     1732.single-handbook .handbook-name a:not(:hover) {
     1733    color: inherit;
     1734}
     1735
     1736.handbook-name-container {
     1737    position: absolute;
     1738    right: 0;
     1739    width: 75%;
     1740    margin-left: 25%;
     1741    background-color: #fff;
     1742}
     1743
     1744/** Table of Contents */
     1745
     1746.site-main .table-of-contents {
     1747    float: right;
     1748    width: 250px;
     1749    border: 1px solid #eee;
     1750    margin: 0 0 15px 15px;
     1751    z-index: 1;
     1752    position: relative;
     1753    color: #555d66;
     1754    font-size: 0.9em;
     1755    background-color: #fff;
     1756    box-shadow: 0 0 8px rgba(0,0,0,0.1);
     1757    border-radius: 3px;
     1758
     1759    @media (min-width: 971px) {
     1760        margin: -15px -30px 15px 15px;
     1761    }
     1762
     1763    h2 {
     1764        margin: 0;
     1765        padding: 0.7rem 1.2rem;
     1766        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
     1767        font-size: 1.3em;
     1768        color: #32373c;
     1769        text-transform: uppercase;
     1770        border-bottom: 1px solid #eee;
     1771        margin-bottom: 0;
     1772    }
     1773}
     1774
     1775.post-type-archive-handbook ul.items,
     1776.single-handbook ul.items,
     1777.table-of-contents ul.items {
     1778    margin: 0;
     1779    list-style-type: none;
     1780    padding: 1.2rem;
     1781
     1782    li {
     1783        padding: 4px;
     1784
     1785        a {
     1786            text-decoration: none;
     1787
     1788            &:hover {
     1789                color: #0073aa;
     1790                text-decoration: underline;
     1791            };
     1792        }
     1793
     1794        ul li,
     1795        ul li ul li {
     1796            padding-bottom: 0;
     1797        }
     1798    }
     1799}
     1800
     1801/* Highlight current heading and adjust scroll position for fixed toolbar */
     1802.toc-heading:target {
     1803    position: relative;
     1804    padding-top: 50px;
     1805    margin-top: -50px;
     1806}
     1807
     1808/* Remove negative margin because there is no jump link before these headlines */
     1809.entry-content h2.toc-heading:first-of-type:target,
     1810.entry-content h3.toc-heading:first-of-type:target,
     1811h2.toc-heading + h3.toc-heading:target {
     1812    margin-top: 0;
     1813}
     1814
     1815.toc-heading:target:before {
     1816    content: '';
     1817    position: absolute;
     1818    left: -10px;
     1819    top: 50px;
     1820    border-left: 5px solid #0073aa;
     1821    height: 50%;
     1822    height: calc(100% - 50px);
     1823}
     1824
     1825.toc-jump {
     1826    position: relative;
     1827    height: 50px;
     1828}
     1829
     1830.toc-jump:after {
     1831    content: '';
     1832    display: table;
     1833    clear: both;
     1834}
     1835
     1836.toc-jump a {
     1837    z-index: 1;
     1838}
     1839
     1840@media (max-width: 480px) {
     1841    .table-of-contents {
     1842        display: none;
     1843    }
     1844}
     1845
     1846/** Menu */
     1847
     1848#secondary aside.widget_wporg_handbook_pages,
     1849#secondary aside.widget_nav_menu {
     1850    font-size: 16px;
     1851}
     1852
     1853.widget_wporg_handbook_pages h1,
     1854.widget_nav_menu h1 {
     1855    font-size: 1.6em;
     1856    font-weight: bold;
     1857    margin-bottom: 0.6em;
     1858}
     1859
     1860div[class*="-table-of-contents-container"] {
     1861    font-size: 0.8em;
     1862
     1863    ul {
     1864        margin-left: 0;
     1865        padding-left: 0;
     1866        list-style: none;
     1867
     1868        li {
     1869            .expandable {
     1870                display: flex;
     1871                flex-direction: row-reverse;
     1872                align-items: stretch;
     1873                position: relative;
     1874            }
     1875
     1876            .dashicons {
     1877                position: absolute;
     1878                right: 0;
     1879                cursor: pointer;
     1880                padding: 8px;
     1881                display: inline-block;
     1882                font-size: 20px;
     1883                width: auto;
     1884                height: 100%;
     1885                color: #0073aa;
     1886                background-color: #fafafa;
     1887                border: 0;
     1888                border-left: 1px solid rgba(0,0,0,0.05);
     1889                border-radius: 0;
     1890                box-shadow: none;
     1891                -webkit-appearance: none;
     1892            }
     1893
     1894            .dashicons:hover,
     1895            .dashicons:focus {
     1896                color: #fff;
     1897                background-color: #0073aa;
     1898            }
     1899
     1900            &.open > div > .dashicons {
     1901                transform: rotate(180deg);
     1902                border-right: 1px solid rgba(0,0,0,0.05);
     1903                border-left: none;
     1904            }
     1905        }
     1906
     1907        a {
     1908            display: block;
     1909            width: 100%;
     1910            font-size: 1.05em;
     1911            padding: 8px 40px 8px 8px;
     1912            text-decoration: none;
     1913
     1914            &:hover,
     1915            &:focus {
     1916                color: #fff;
     1917                background-color: #0073aa;
     1918            }
     1919            &.active {
     1920                color: #555;
     1921                background-color: #fff;
     1922            }
     1923        }
     1924
     1925        &.default-open {
     1926            display: block !important;
     1927        }
     1928    }
     1929    .open .expandable .dashicons:not(:focus) {
     1930        background: #fff;
     1931        color: #0073aa;
     1932    }
     1933    & > ul > li {
     1934        &:last-child {
     1935            border-bottom: 1px solid rgba(0,0,0,0.05);
     1936        }
     1937        .children > li > a,
     1938        .sub-menu > li > a {
     1939            padding-left: 13px;
     1940        }
     1941        .children > li > ul > li > a,
     1942        .sub-menu > li > ul > li > a {
     1943            padding-left: 8px;
     1944        }
     1945
     1946        &.open > div > a {
     1947            &:not(:focus) {
     1948                color: #0073aa;
     1949            }
     1950            &:hover {
     1951                color: #fff;
     1952                background-color: #0073aa;
     1953            }
     1954        }
     1955    }
     1956    .current-menu-item ul,
     1957    .current-menu-ancestor ul {
     1958        display: block;
     1959    }
     1960    .children,
     1961    .sub-menu {
     1962        overflow: hidden;
     1963        display: none;
     1964    }
     1965
     1966}
     1967
     1968#secondary {
     1969    div[class*="-table-of-contents-container"] {
     1970        ul {
     1971            li {
     1972                border-top: 1px solid rgba(0,0,0,0.05);
     1973                padding: 0;
     1974                position: relative;
     1975            }
     1976            ul {
     1977                margin-left: 12px;
     1978                border-left: 1px solid rgba(0,0,0,0.05);
     1979            }
     1980        }
     1981    }
     1982}
     1983
     1984/* New handbook design */
     1985.single-handbook {
     1986    #page {
     1987        background: linear-gradient(to right, #fafafa 35%, #fff 35%);
     1988        max-width: 100%;
     1989        padding: 0;
     1990        overflow: auto;
     1991    }
     1992
     1993    #content {
     1994        max-width: 960px;
     1995        margin: 0 auto;
     1996        display: flex;
     1997        padding-top: 0;
     1998    }
     1999
     2000    header {
     2001        margin: 0;
     2002    }
     2003
     2004    #secondary {
     2005        clear: left;
     2006        margin: 0;
     2007        background: #fafafa;
     2008        overflow: hidden;
     2009        width: 25%;
     2010        padding-top: 2rem;
     2011    }
     2012
     2013    #primary {
     2014        padding: 4rem 0 4rem 4rem;
     2015        background: #fff;
     2016        box-sizing: border-box;
     2017        width: 72%;
     2018
     2019        @media(max-width: 876px) {
     2020            padding: 4rem 20px;
     2021            width: 100%;
     2022        }
     2023    }
     2024
     2025    .widget_wporg_handbook_pages
     2026    .widget_nav_menu {
     2027        background-color: transparent;
     2028    }
     2029
     2030    nav.o2-post-actions button {
     2031        top: 10px;
     2032    }
     2033    .make-welcome {
     2034        margin: 0 !important;
     2035    }
     2036}
     2037/** /Handbook **/
    16742038
    16752039.rest-api-handbook-reference {
    … …  
    16952059    }
    16962060
     2061}
     2062
     2063/* Menu toggle */
     2064
     2065#secondary-toggle {
     2066    display: none;
     2067}
     2068body.responsive-show {
     2069    position: fixed;
     2070    top: 32px;
     2071
     2072    #secondary {
     2073        left: 0;
     2074    }
     2075    #primary-modal {
     2076        display: block;
     2077    }
     2078    #o2-expand-editor {
     2079        display: none;
     2080    }
     2081}
     2082@media only screen and (max-width: 782px) {
     2083    #secondary {
     2084        top: 46px;
     2085    }
     2086
     2087    body.responsive-show {
     2088        position: fixed;
     2089        top: 46px;
     2090        left: 0;
     2091        right: 0;
     2092        bottom: 0;
     2093
     2094        #secondary {
     2095            left: 0;
     2096        }
     2097    }
     2098}
     2099@media only screen and (max-width: 480px) {
     2100    body.responsive-show #secondary {
     2101        top: 46px;
     2102    }
     2103    body.responsive-show #wpadminbar {
     2104        top: -46px;
     2105    }
     2106}
     2107
     2108@media (max-width: 876px) {
     2109    #secondary {
     2110        position: fixed;
     2111        z-index: 10;
     2112        bottom: 0px;
     2113        overflow-y: auto;
     2114        transition: all .25s ease;
     2115        top: 32px;
     2116        left: -100%;
     2117        width: 60%;
     2118        min-width: 300px;
     2119        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
     2120    }
     2121
     2122    #secondary-toggle {
     2123        display: block;
     2124        float: left;
     2125        margin-left: 17px;
     2126        margin-right: 0;
     2127        width: 48px;
     2128        height: 48px;
     2129        white-space: nowrap;
     2130        position: relative;
     2131        z-index: 1;
     2132
     2133        &:before {
     2134            content: '\f333';
     2135            -webkit-font-smoothing: antialiased;
     2136            font: normal 32px/1 'dashicons';
     2137            position: relative;
     2138            top: 0;
     2139            color: #fff;
     2140        }
     2141        strong {
     2142            display: none;
     2143        }
     2144    }
     2145    #page {
     2146        overflow-x: hidden;
     2147    }
     2148    body.responsive-show {
     2149        overflow-y: visible;
     2150        position: static;
     2151
     2152        #page {
     2153            overflow-x: visible;
     2154        }
     2155        #secondary-toggle:before {
     2156            color: #0073aa;
     2157        }
     2158    }
     2159
     2160    .content-area {
     2161        width: 100%;
     2162    }
     2163
     2164    #primary,
     2165    #secondary {
     2166        -webkit-backface-visibility: hidden;
     2167    }
    16972168}
    16982169

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/single-plugin-handbook.php

    r2569 r6512  
    88get_header(); ?>
    99
    10     <div id="content-area" class="has-sidebar">
     10<?php get_sidebar( 'handbook' ); ?>
     11
     12        <main id="primary" <?php post_class( 'site-main' ); ?> role="main">
    1113
    1214        <?php breadcrumb_trail(); ?>
    13 
    14         <main id="main" <?php post_class( 'site-main' ); ?> role="main">
    1515
    1616        <?php while ( have_posts() ) : the_post(); ?>
    … …  
    2323
    2424        </main><!-- #main -->
    25         <?php get_sidebar(); ?>
    26     </div><!-- #primary -->
     25
    2726<?php get_footer(); ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/single-rest-api-handbook.php

    r4343 r6512  
    88get_header(); ?>
    99
    10     <div id="content-area" class="has-sidebar">
     10<?php get_sidebar( 'handbook' ); ?>
     11
     12        <main id="primary" <?php post_class( 'site-main' ); ?> role="main">
    1113
    1214        <?php breadcrumb_trail(); ?>
    13 
    14         <main id="main" <?php post_class( 'site-main' ); ?> role="main">
    1515
    1616        <?php while ( have_posts() ) : the_post(); ?>
    … …  
    2323
    2424        </main><!-- #main -->
    25         <?php get_sidebar(); ?>
    26     </div><!-- #primary -->
     25
    2726<?php get_footer(); ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/single-theme-handbook.php

    r2569 r6512  
    88get_header(); ?>
    99
    10     <div id="content-area" class="has-sidebar">
     10<?php get_sidebar( 'handbook' ); ?>
     11
     12        <main id="primary" <?php post_class( 'site-main' ); ?> role="main">
    1113
    1214        <?php breadcrumb_trail(); ?>
    13 
    14         <main id="main" <?php post_class( 'site-main' ); ?> role="main">
    1515
    1616        <?php while ( have_posts() ) : the_post(); ?>
    … …  
    2323
    2424        </main><!-- #main -->
    25         <?php get_sidebar(); ?>
    26     </div><!-- #primary -->
     25
    2726<?php get_footer(); ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/single.php

    r1675 r6512  
    88get_header(); ?>
    99
    10     <div id="content-area" <?php body_class(); ?>>
     10    <div id="content-area" <?php body_class( 'code-reference' ); ?>>
    1111
    1212        <?php breadcrumb_trail(); ?>

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

    r6310 r6512  
    349349.devhub-wrap #content-area,
    350350.devhub-wrap .inner-wrap {
    351   margin: 0 auto;
     351  margin: 2rem auto 0;
    352352  max-width: 60em;
    353353}
    … …  
    687687
    688688.devhub-wrap .hentry {
    689   margin: 0 0 1.5em;
     689  margin: 0;
    690690}
    691691
    … …  
    859859
    860860.devhub-wrap .breadcrumb-trail {
    861   margin-bottom: 1.25em;
     861  margin-bottom: 2rem;
     862}
     863
     864.devhub-wrap .breadcrumb-trail a {
     865  text-decoration: none;
    862866}
    863867
    … …  
    910914
    911915.devhub-wrap .section.blue {
    912   background: #0073aa;
     916  /*background: #0073aa;*/
    913917  padding: 30px 0;
    914918  padding: 3rem 0;
    … …  
    941945  display: block;
    942946  margin: 0 auto;
     947  opacity: 0.4;
    943948}
    944949
    … …  
    10801085}
    10811086
    1082 .devhub-wrap.single div#inner-search, .devhub-wrap.archive div#inner-search {
    1083   background-color: #2e6183;
    1084   margin-top: -1em;
     1087.devhub-wrap div#inner-search {
     1088  background-color: #666;
    10851089  margin-bottom: 1em;
    10861090  padding-top: 2px;
    10871091}
    10881092
    1089 .devhub-wrap.single div#inner-search .section.search-section, .devhub-wrap.archive div#inner-search .section.search-section {
     1093.devhub-wrap div#inner-search .section.search-section {
    10901094  color: #ffffff;
    10911095}
    10921096
    1093 .devhub-wrap.single div#inner-search div#inner-search-icon-container, .devhub-wrap.archive div#inner-search div#inner-search-icon-container {
     1097.devhub-wrap div#inner-search div#inner-search-icon-container {
    10941098  margin: 0 auto;
    10951099  max-width: 60em;
    … …  
    10971101}
    10981102
    1099 .devhub-wrap.single div#inner-search div#inner-search-icon-container div#inner-search-icon, .devhub-wrap.archive div#inner-search div#inner-search-icon-container div#inner-search-icon {
    1100   background-color: #2e6183;
     1103.devhub-wrap div#inner-search div#inner-search-icon-container div#inner-search-icon {
     1104  background-color: #666;
    11011105  color: #ffffff;
    11021106  text-align: center;
    … …  
    11131117}
    11141118
    1115 .devhub-wrap.single div#inner-search div#inner-search-icon-container div#inner-search-icon .dashicons-search, .devhub-wrap.archive div#inner-search div#inner-search-icon-container div#inner-search-icon .dashicons-search {
     1119.devhub-wrap div#inner-search div#inner-search-icon-container div#inner-search-icon .dashicons-search {
    11161120  height: auto;
    11171121  width: auto;
    11181122}
    11191123
    1120 .devhub-wrap.single div#inner-search div#inner-search-icon-container div#inner-search-icon .dashicons-search:before, .devhub-wrap.archive div#inner-search div#inner-search-icon-container div#inner-search-icon .dashicons-search:before {
     1124.devhub-wrap div#inner-search div#inner-search-icon-container div#inner-search-icon .dashicons-search:before {
    11211125  font-size: 36px;
    11221126  line-height: 36px;
    … …  
    12611265}
    12621266
    1263 .devhub-wrap #sidebar {
    1264   border: 1px solid #d0d0d0;
    1265   box-shadow: 0px 0px 5px #d0d0d0;
    1266   background-color: #f0f0f0;
    1267 }
    1268 
    1269 .devhub-wrap #sidebar h2.widget-title {
    1270   background-color: #d0d0d0;
    1271   color: #8a8989;
    1272   text-align: center;
    1273   text-transform: uppercase;
    1274   font-size: 14px;
    1275   letter-spacing: 2px;
    1276   margin-bottom: 1.5rem;
    1277   line-height: 26px;
    1278   line-height: 2.6rem;
    1279 }
    1280 
    1281 .devhub-wrap #sidebar .menu > li {
    1282   padding-bottom: 1em;
    1283 }
    1284 
    1285 .devhub-wrap #sidebar ul {
    1286   list-style-type: none;
    1287   margin: 0 10px;
    1288   padding: 5px 0;
    1289   counter-reset: item;
    1290 }
    1291 
    1292 .devhub-wrap #sidebar ul li:before {
    1293   content: counter(item);
    1294   counter-increment: item;
    1295   background-color: #d0d0d0;
    1296   width: 25px;
    1297   display: inline-block;
    1298   color: #fff;
    1299   margin-right: 10px;
    1300   text-align: center;
    1301   padding: 3px 0;
    1302   font-size: 13px;
    1303   border-radius: 50%;
    1304   vertical-align: top;
    1305 }
    1306 
    1307 .devhub-wrap #sidebar ul li a {
    1308   font-size: 16px;
    1309   color: #4b4b4b;
    1310   font-weight: bold;
    1311 }
    1312 
    1313 .devhub-wrap #sidebar ul li > a {
    1314   display: inline-block;
    1315   width: 75%;
    1316 }
    1317 
    1318 .devhub-wrap #sidebar ul li ul {
    1319   list-style-type: none;
    1320   padding: 0;
    1321   margin: 0 0 0 35px;
    1322 }
    1323 
    1324 .devhub-wrap #sidebar ul li ul li {
    1325   padding-left: 20px;
    1326 }
    1327 
    1328 .devhub-wrap #sidebar ul li ul li:before {
    1329   content: none;
    1330 }
    1331 
    1332 .devhub-wrap #sidebar ul li ul li a {
    1333   font-weight: normal;
    1334   font-size: 14px;
    1335   display: inline;
    1336   margin-left: -20px;
    1337 }
    1338 
    1339 .devhub-wrap #sidebar ul li ul li ul {
    1340   margin-left: 20px;
    1341 }
    1342 
    1343 .devhub-wrap #sidebar .current-menu-item > a {
    1344   font-weight: bold !important;
    1345   color: #246998;
    1346 }
    1347 
    13481267.devhub-wrap .reference-landing .box ul {
    13491268  padding: 0;
    … …  
    14111330.devhub-wrap .box.transparent {
    14121331  background: none;
    1413   color: #fff;
     1332  color: #333;
    14141333}
    14151334
    … …  
    14171336.devhub-wrap .box.transparent h3,
    14181337.devhub-wrap .box.transparent h4 {
    1419   color: #fff;
     1338  color: #32373c;
    14201339}
    14211340
    … …  
    15591478}
    15601479
    1561 .devhub-wrap .wp-parser-class .table-of-contents, .devhub-wrap .wp-parser-function .table-of-contents, .devhub-wrap .wp-parser-hook .table-of-contents, .devhub-wrap .wp-parser-method .table-of-contents {
    1562   width: 260px;
    1563   margin-left: 30px;
    1564 }
    1565 
    1566 .devhub-wrap .wp-parser-class .table-of-contents h2, .devhub-wrap .wp-parser-function .table-of-contents h2, .devhub-wrap .wp-parser-hook .table-of-contents h2, .devhub-wrap .wp-parser-method .table-of-contents h2 {
    1567   padding: 3px 0;
    1568 }
    1569 
    1570 .devhub-wrap .wp-parser-class .table-of-contents > ul, .devhub-wrap .wp-parser-function .table-of-contents > ul, .devhub-wrap .wp-parser-hook .table-of-contents > ul, .devhub-wrap .wp-parser-method .table-of-contents > ul {
    1571   margin-bottom: 0;
    1572 }
    1573 
    1574 .devhub-wrap .wp-parser-class ul.items, .devhub-wrap .wp-parser-function ul.items, .devhub-wrap .wp-parser-hook ul.items, .devhub-wrap .wp-parser-method ul.items {
    1575   margin: 1em 20px !important;
    1576 }
    1577 
    1578 .devhub-wrap .wp-parser-class ul.items li, .devhub-wrap .wp-parser-function ul.items li, .devhub-wrap .wp-parser-hook ul.items li, .devhub-wrap .wp-parser-method ul.items li {
    1579   padding-bottom: 0px !important;
    1580 }
    1581 
    1582 .devhub-wrap .wp-parser-class ul.items > li, .devhub-wrap .wp-parser-function ul.items > li, .devhub-wrap .wp-parser-hook ul.items > li, .devhub-wrap .wp-parser-method ul.items > li {
    1583   padding-bottom: 8px !important;
    1584 }
    1585 
    1586 .devhub-wrap .wp-parser-class ul.items a:hover, .devhub-wrap .wp-parser-function ul.items a:hover, .devhub-wrap .wp-parser-hook ul.items a:hover, .devhub-wrap .wp-parser-method ul.items a:hover {
    1587   color: #d54e21 !important;
    1588 }
    1589 
    15901480.devhub-wrap .wp-parser-class .toc-jump, .devhub-wrap .wp-parser-function .toc-jump, .devhub-wrap .wp-parser-hook .toc-jump, .devhub-wrap .wp-parser-method .toc-jump {
    15911481  display: inline-block;
    … …  
    16731563}
    16741564
    1675 .devhub-wrap.single-wp-parser-function .bad-note .comment-content, .devhub-wrap.single-wp-parser-method .bad-note .comment-content, .devhub-wrap.single-wp-parser-hook .bad-note .comment-content, .devhub-wrap.single-wp-parser-class .bad-note .comment-content {
     1565.devhub-wrap .single-wp-parser-function .bad-note .comment-content, .devhub-wrap .single-wp-parser-method .bad-note .comment-content, .devhub-wrap .single-wp-parser-hook .bad-note .comment-content, .devhub-wrap .single-wp-parser-class .bad-note .comment-content {
    16761566  opacity: .6;
    16771567}
    16781568
    1679 .devhub-wrap.single-wp-parser-function .bad-note .comment-content:hover, .devhub-wrap.single-wp-parser-method .bad-note .comment-content:hover, .devhub-wrap.single-wp-parser-hook .bad-note .comment-content:hover, .devhub-wrap.single-wp-parser-class .bad-note .comment-content:hover {
     1569.devhub-wrap .single-wp-parser-function .bad-note .comment-content:hover, .devhub-wrap .single-wp-parser-method .bad-note .comment-content:hover, .devhub-wrap .single-wp-parser-hook .bad-note .comment-content:hover, .devhub-wrap .single-wp-parser-class .bad-note .comment-content:hover {
    16801570  opacity: 1;
    16811571}
    16821572
    1683 .devhub-wrap.single-wp-parser-function .comment-list,
    1684 .devhub-wrap.single-wp-parser-function .comment-list ol, .devhub-wrap.single-wp-parser-method .comment-list,
    1685 .devhub-wrap.single-wp-parser-method .comment-list ol, .devhub-wrap.single-wp-parser-hook .comment-list,
    1686 .devhub-wrap.single-wp-parser-hook .comment-list ol, .devhub-wrap.single-wp-parser-class .comment-list,
    1687 .devhub-wrap.single-wp-parser-class .comment-list ol {
     1573.devhub-wrap .single-wp-parser-function .comment-list,
     1574.devhub-wrap .single-wp-parser-function .comment-list ol, .devhub-wrap .single-wp-parser-method .comment-list,
     1575.devhub-wrap .single-wp-parser-method .comment-list ol, .devhub-wrap .single-wp-parser-hook .comment-list,
     1576.devhub-wrap .single-wp-parser-hook .comment-list ol, .devhub-wrap .single-wp-parser-class .comment-list,
     1577.devhub-wrap .single-wp-parser-class .comment-list ol {
    16881578  list-style: none;
    16891579  margin: 0 0 1.5em 0;
    … …  
    16911581}
    16921582
    1693 .devhub-wrap.single-wp-parser-function .comment-list li,
    1694 .devhub-wrap.single-wp-parser-function #comment-preview, .devhub-wrap.single-wp-parser-method .comment-list li,
    1695 .devhub-wrap.single-wp-parser-method #comment-preview, .devhub-wrap.single-wp-parser-hook .comment-list li,
    1696 .devhub-wrap.single-wp-parser-hook #comment-preview, .devhub-wrap.single-wp-parser-class .comment-list li,
    1697 .devhub-wrap.single-wp-parser-class #comment-preview {
     1583.devhub-wrap .single-wp-parser-function .comment-list li,
     1584.devhub-wrap .single-wp-parser-function #comment-preview, .devhub-wrap .single-wp-parser-method .comment-list li,
     1585.devhub-wrap .single-wp-parser-method #comment-preview, .devhub-wrap .single-wp-parser-hook .comment-list li,
     1586.devhub-wrap .single-wp-parser-hook #comment-preview, .devhub-wrap .single-wp-parser-class .comment-list li,
     1587.devhub-wrap .single-wp-parser-class #comment-preview {
    16981588  margin-top: 2.5rem;
    16991589  background: #fff;
    … …  
    17031593}
    17041594
    1705 .devhub-wrap.single-wp-parser-function .comment-list li article,
    1706 .devhub-wrap.single-wp-parser-function #comment-preview article, .devhub-wrap.single-wp-parser-method .comment-list li article,
    1707 .devhub-wrap.single-wp-parser-method #comment-preview article, .devhub-wrap.single-wp-parser-hook .comment-list li article,
    1708 .devhub-wrap.single-wp-parser-hook #comment-preview article, .devhub-wrap.single-wp-parser-class .comment-list li article,
    1709 .devhub-wrap.single-wp-parser-class #comment-preview article {
     1595.devhub-wrap .single-wp-parser-function .comment-list li article,
     1596.devhub-wrap .single-wp-parser-function #comment-preview article, .devhub-wrap .single-wp-parser-method .comment-list li article,
     1597.devhub-wrap .single-wp-parser-method #comment-preview article, .devhub-wrap .single-wp-parser-hook .comment-list li article,
     1598.devhub-wrap .single-wp-parser-hook #comment-preview article, .devhub-wrap .single-wp-parser-class .comment-list li article,
     1599.devhub-wrap .single-wp-parser-class #comment-preview article {
    17101600  overflow: auto;
    17111601}
    17121602
    1713 .devhub-wrap.single-wp-parser-function #comment-preview,
    1714 .js .devhub-wrap.single-wp-parser-function .comment-form-comment, .devhub-wrap.single-wp-parser-method #comment-preview,
    1715 .js .devhub-wrap.single-wp-parser-method .comment-form-comment, .devhub-wrap.single-wp-parser-hook #comment-preview,
    1716 .js .devhub-wrap.single-wp-parser-hook .comment-form-comment, .devhub-wrap.single-wp-parser-class #comment-preview,
    1717 .js .devhub-wrap.single-wp-parser-class .comment-form-comment {
     1603.devhub-wrap .single-wp-parser-function #comment-preview,
     1604.js .devhub-wrap .single-wp-parser-function .comment-form-comment, .devhub-wrap .single-wp-parser-method #comment-preview,
     1605.js .devhub-wrap .single-wp-parser-method .comment-form-comment, .devhub-wrap .single-wp-parser-hook #comment-preview,
     1606.js .devhub-wrap .single-wp-parser-hook .comment-form-comment, .devhub-wrap .single-wp-parser-class #comment-preview,
     1607.js .devhub-wrap .single-wp-parser-class .comment-form-comment {
    17181608  margin-top: 0;
    17191609  border: 1px solid #ccc;
    … …  
    17221612}
    17231613
    1724 .devhub-wrap.single-wp-parser-function #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-method #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-hook #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-class #comment-preview.tab-section-selected {
     1614.devhub-wrap .single-wp-parser-function #comment-preview.tab-section-selected, .devhub-wrap .single-wp-parser-method #comment-preview.tab-section-selected, .devhub-wrap .single-wp-parser-hook #comment-preview.tab-section-selected, .devhub-wrap .single-wp-parser-class #comment-preview.tab-section-selected {
    17251615  border-radius: 3px;
    17261616}
    17271617
    1728 .devhub-wrap.single-wp-parser-function #comment-preview .comment-content, .devhub-wrap.single-wp-parser-method #comment-preview .comment-content, .devhub-wrap.single-wp-parser-hook #comment-preview .comment-content, .devhub-wrap.single-wp-parser-class #comment-preview .comment-content {
     1618.devhub-wrap .single-wp-parser-function #comment-preview .comment-content, .devhub-wrap .single-wp-parser-method #comment-preview .comment-content, .devhub-wrap .single-wp-parser-hook #comment-preview .comment-content, .devhub-wrap .single-wp-parser-class #comment-preview .comment-content {
    17291619  min-height: 6em;
    17301620}
    17311621
    1732 .devhub-wrap.single-wp-parser-function label[for=comment],
    1733 .devhub-wrap.single-wp-parser-function .comment-form-comment,
    1734 .devhub-wrap.single-wp-parser-function .comment-preview, .devhub-wrap.single-wp-parser-method label[for=comment],
    1735 .devhub-wrap.single-wp-parser-method .comment-form-comment,
    1736 .devhub-wrap.single-wp-parser-method .comment-preview, .devhub-wrap.single-wp-parser-hook label[for=comment],
    1737 .devhub-wrap.single-wp-parser-hook .comment-form-comment,
    1738 .devhub-wrap.single-wp-parser-hook .comment-preview, .devhub-wrap.single-wp-parser-class label[for=comment],
    1739 .devhub-wrap.single-wp-parser-class .comment-form-comment,
    1740 .devhub-wrap.single-wp-parser-class .comment-preview {
     1622.devhub-wrap .single-wp-parser-function label[for=comment],
     1623.devhub-wrap .single-wp-parser-function .comment-form-comment,
     1624.devhub-wrap .single-wp-parser-function .comment-preview, .devhub-wrap .single-wp-parser-method label[for=comment],
     1625.devhub-wrap .single-wp-parser-method .comment-form-comment,
     1626.devhub-wrap .single-wp-parser-method .comment-preview, .devhub-wrap .single-wp-parser-hook label[for=comment],
     1627.devhub-wrap .single-wp-parser-hook .comment-form-comment,
     1628.devhub-wrap .single-wp-parser-hook .comment-preview, .devhub-wrap .single-wp-parser-class label[for=comment],
     1629.devhub-wrap .single-wp-parser-class .comment-form-comment,
     1630.devhub-wrap .single-wp-parser-class .comment-preview {
    17411631  margin-bottom: 1em;
    17421632}
    17431633
    1744 .js .devhub-wrap.single-wp-parser-function .comment-form-comment, .js .devhub-wrap.single-wp-parser-method .comment-form-comment, .js .devhub-wrap.single-wp-parser-hook .comment-form-comment, .js .devhub-wrap.single-wp-parser-class .comment-form-comment {
     1634.js .devhub-wrap .single-wp-parser-function .comment-form-comment, .js .devhub-wrap .single-wp-parser-method .comment-form-comment, .js .devhub-wrap .single-wp-parser-hook .comment-form-comment, .js .devhub-wrap .single-wp-parser-class .comment-form-comment {
    17451635  padding: 0 .7em .7em;
    17461636}
    17471637
    1748 .devhub-wrap.single-wp-parser-function .tablist .spinner, .devhub-wrap.single-wp-parser-method .tablist .spinner, .devhub-wrap.single-wp-parser-hook .tablist .spinner, .devhub-wrap.single-wp-parser-class .tablist .spinner {
     1638.devhub-wrap .single-wp-parser-function .tablist .spinner, .devhub-wrap .single-wp-parser-method .tablist .spinner, .devhub-wrap .single-wp-parser-hook .tablist .spinner, .devhub-wrap .single-wp-parser-class .tablist .spinner {
    17491639  background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
    17501640  -webkit-background-size: 20px 20px;
    … …  
    17541644}
    17551645
    1756 .devhub-wrap.single-wp-parser-function .comment-list .avatar, .devhub-wrap.single-wp-parser-method .comment-list .avatar, .devhub-wrap.single-wp-parser-hook .comment-list .avatar, .devhub-wrap.single-wp-parser-class .comment-list .avatar {
     1646.devhub-wrap .single-wp-parser-function .comment-list .avatar, .devhub-wrap .single-wp-parser-method .comment-list .avatar, .devhub-wrap .single-wp-parser-hook .comment-list .avatar, .devhub-wrap .single-wp-parser-class .comment-list .avatar {
    17571647  float: left;
    17581648  margin: -2px 1em 0 0;
    … …  
    17611651}
    17621652
    1763 .devhub-wrap.single-wp-parser-function .comment-meta, .devhub-wrap.single-wp-parser-method .comment-meta, .devhub-wrap.single-wp-parser-hook .comment-meta, .devhub-wrap.single-wp-parser-class .comment-meta {
     1653.devhub-wrap .single-wp-parser-function .comment-meta, .devhub-wrap .single-wp-parser-method .comment-meta, .devhub-wrap .single-wp-parser-hook .comment-meta, .devhub-wrap .single-wp-parser-class .comment-meta {
    17641654  padding: .5em 1em;
    17651655  background-color: #f7f7f7;
    … …  
    17671657}
    17681658
    1769 .devhub-wrap.single-wp-parser-function .comment-content, .devhub-wrap.single-wp-parser-method .comment-content, .devhub-wrap.single-wp-parser-hook .comment-content, .devhub-wrap.single-wp-parser-class .comment-content {
     1659.devhub-wrap .single-wp-parser-function .comment-content, .devhub-wrap .single-wp-parser-method .comment-content, .devhub-wrap .single-wp-parser-hook .comment-content, .devhub-wrap .single-wp-parser-class .comment-content {
    17701660  margin-left: 60px;
    17711661  margin-left: 3.75rem;
    … …  
    17751665}
    17761666
    1777 .devhub-wrap.single-wp-parser-function .comment-footer, .devhub-wrap.single-wp-parser-method .comment-footer, .devhub-wrap.single-wp-parser-hook .comment-footer, .devhub-wrap.single-wp-parser-class .comment-footer {
     1667.devhub-wrap .single-wp-parser-function .comment-footer, .devhub-wrap .single-wp-parser-method .comment-footer, .devhub-wrap .single-wp-parser-hook .comment-footer, .devhub-wrap .single-wp-parser-class .comment-footer {
    17781668  margin: 0 1em;
    17791669  padding: 0 0 1em 0;
    … …  
    17821672}
    17831673
    1784 .devhub-wrap.single-wp-parser-function .comment-footer a, .devhub-wrap.single-wp-parser-method .comment-footer a, .devhub-wrap.single-wp-parser-hook .comment-footer a, .devhub-wrap.single-wp-parser-class .comment-footer a {
     1674.devhub-wrap .single-wp-parser-function .comment-footer a, .devhub-wrap .single-wp-parser-method .comment-footer a, .devhub-wrap .single-wp-parser-hook .comment-footer a, .devhub-wrap .single-wp-parser-class .comment-footer a {
    17851675  float: right;
    17861676}
    17871677
    1788 .devhub-wrap.single-wp-parser-function .comment-footer p, .devhub-wrap.single-wp-parser-method .comment-footer p, .devhub-wrap.single-wp-parser-hook .comment-footer p, .devhub-wrap.single-wp-parser-class .comment-footer p {
     1678.devhub-wrap .single-wp-parser-function .comment-footer p, .devhub-wrap .single-wp-parser-method .comment-footer p, .devhub-wrap .single-wp-parser-hook .comment-footer p, .devhub-wrap .single-wp-parser-class .comment-footer p {
    17891679  margin-bottom: 0;
    17901680}
    17911681
    1792 .devhub-wrap.single-wp-parser-function .comment-content ol, .devhub-wrap.single-wp-parser-method .comment-content ol, .devhub-wrap.single-wp-parser-hook .comment-content ol, .devhub-wrap.single-wp-parser-class .comment-content ol {
     1682.devhub-wrap .single-wp-parser-function .comment-content ol, .devhub-wrap .single-wp-parser-method .comment-content ol, .devhub-wrap .single-wp-parser-hook .comment-content ol, .devhub-wrap .single-wp-parser-class .comment-content ol {
    17931683  list-style: decimal inside;
    17941684  margin: 0 0 1.5em 0;
    … …  
    17981688}
    17991689
    1800 .devhub-wrap.single-wp-parser-function .comment-content ul, .devhub-wrap.single-wp-parser-method .comment-content ul, .devhub-wrap.single-wp-parser-hook .comment-content ul, .devhub-wrap.single-wp-parser-class .comment-content ul {
     1690.devhub-wrap .single-wp-parser-function .comment-content ul, .devhub-wrap .single-wp-parser-method .comment-content ul, .devhub-wrap .single-wp-parser-hook .comment-content ul, .devhub-wrap .single-wp-parser-class .comment-content ul {
    18011691  list-style: square inside;
    18021692  margin: 0 0 1.5em 0;
    … …  
    18061696}
    18071697
    1808 .devhub-wrap.single-wp-parser-function .comment-content li, .devhub-wrap.single-wp-parser-method .comment-content li, .devhub-wrap.single-wp-parser-hook .comment-content li, .devhub-wrap.single-wp-parser-class .comment-content li {
     1698.devhub-wrap .single-wp-parser-function .comment-content li, .devhub-wrap .single-wp-parser-method .comment-content li, .devhub-wrap .single-wp-parser-hook .comment-content li, .devhub-wrap .single-wp-parser-class .comment-content li {
    18091699  border: none;
    18101700  padding: 0;
    18111701}
    18121702
    1813 .devhub-wrap.single-wp-parser-function #respond, .devhub-wrap.single-wp-parser-method #respond, .devhub-wrap.single-wp-parser-hook #respond, .devhub-wrap.single-wp-parser-class #respond {
     1703.devhub-wrap .single-wp-parser-function #respond, .devhub-wrap .single-wp-parser-method #respond, .devhub-wrap .single-wp-parser-hook #respond, .devhub-wrap .single-wp-parser-class #respond {
    18141704  overflow: hidden;
    18151705}
    18161706
    1817 .devhub-wrap.single-wp-parser-function #respond .log-in-out a, .devhub-wrap.single-wp-parser-method #respond .log-in-out a, .devhub-wrap.single-wp-parser-hook #respond .log-in-out a, .devhub-wrap.single-wp-parser-class #respond .log-in-out a {
     1707.devhub-wrap .single-wp-parser-function #respond .log-in-out a, .devhub-wrap .single-wp-parser-method #respond .log-in-out a, .devhub-wrap .single-wp-parser-hook #respond .log-in-out a, .devhub-wrap .single-wp-parser-class #respond .log-in-out a {
    18181708  font-style: italic;
    18191709}
    18201710
    1821 .devhub-wrap.single-wp-parser-function #reply-title small a, .devhub-wrap.single-wp-parser-method #reply-title small a, .devhub-wrap.single-wp-parser-hook #reply-title small a, .devhub-wrap.single-wp-parser-class #reply-title small a {
     1711.devhub-wrap .single-wp-parser-function #reply-title small a, .devhub-wrap .single-wp-parser-method #reply-title small a, .devhub-wrap .single-wp-parser-hook #reply-title small a, .devhub-wrap .single-wp-parser-class #reply-title small a {
    18221712  font-style: italic;
    18231713}
    18241714
    1825 .devhub-wrap.single-wp-parser-function #respond #submit, .devhub-wrap.single-wp-parser-method #respond #submit, .devhub-wrap.single-wp-parser-hook #respond #submit, .devhub-wrap.single-wp-parser-class #respond #submit {
     1715.devhub-wrap .single-wp-parser-function #respond #submit, .devhub-wrap .single-wp-parser-method #respond #submit, .devhub-wrap .single-wp-parser-hook #respond #submit, .devhub-wrap .single-wp-parser-class #respond #submit {
    18261716  float: left;
    18271717  margin: 0 0 1.5em;
    18281718}
    18291719
    1830 .devhub-wrap.single-wp-parser-function .comment-author, .devhub-wrap.single-wp-parser-method .comment-author, .devhub-wrap.single-wp-parser-hook .comment-author, .devhub-wrap.single-wp-parser-class .comment-author {
     1720.devhub-wrap .single-wp-parser-function .comment-author, .devhub-wrap .single-wp-parser-method .comment-author, .devhub-wrap .single-wp-parser-hook .comment-author, .devhub-wrap .single-wp-parser-class .comment-author {
    18311721  float: left;
    18321722  line-height: 1.8;
    18331723}
    18341724
    1835 .devhub-wrap.single-wp-parser-function #add-user-note, .devhub-wrap.single-wp-parser-method #add-user-note, .devhub-wrap.single-wp-parser-hook #add-user-note, .devhub-wrap.single-wp-parser-class #add-user-note {
     1725.devhub-wrap .single-wp-parser-function #add-user-note, .devhub-wrap .single-wp-parser-method #add-user-note, .devhub-wrap .single-wp-parser-hook #add-user-note, .devhub-wrap .single-wp-parser-class #add-user-note {
    18361726  font-size: 1.6rem;
    18371727}
    18381728
    1839 .devhub-wrap.single-wp-parser-function .text-button, .devhub-wrap.single-wp-parser-method .text-button, .devhub-wrap.single-wp-parser-hook .text-button, .devhub-wrap.single-wp-parser-class .text-button {
     1729.devhub-wrap .single-wp-parser-function .text-button, .devhub-wrap .single-wp-parser-method .text-button, .devhub-wrap .single-wp-parser-hook .text-button, .devhub-wrap .single-wp-parser-class .text-button {
    18401730  background: #fff none repeat scroll 0 0;
    18411731  border-color: #ccc #ccc #bbb;
    … …  
    18461736}
    18471737
    1848 .devhub-wrap.single-wp-parser-function .comment-form ul, .devhub-wrap.single-wp-parser-method .comment-form ul, .devhub-wrap.single-wp-parser-hook .comment-form ul, .devhub-wrap.single-wp-parser-class .comment-form ul {
     1738.devhub-wrap .single-wp-parser-function .comment-form ul, .devhub-wrap .single-wp-parser-method .comment-form ul, .devhub-wrap .single-wp-parser-hook .comment-form ul, .devhub-wrap .single-wp-parser-class .comment-form ul {
    18491739  margin-left: 1.5em;
    18501740}
    … …  
    19051795  float: left;
    19061796  overflow: hidden;
    1907   width: 30%;
     1797  width: 27%;
    19081798  margin-left: -55px;
    19091799  margin: 0;
    … …  
    19311821  text-align: right;
    19321822  float: right;
    1933 }
    1934 
    1935 .devhub-wrap .table-of-contents {
    1936   float: right;
    1937   width: 200px;
    1938   background: #f5f5f5;
    1939   border-style: none;
    1940   margin: 0 0 1em 1.85em;
    1941   z-index: 1;
    1942   position: relative;
    1943 }
    1944 
    1945 .devhub-wrap .table-of-contents h2 {
    1946   padding: 4px 0;
    1947   text-align: center;
    1948   text-transform: uppercase;
    1949   font-size: 1em;
    1950   letter-spacing: 3px;
    1951   background: #d0d0d0;
    1952   color: #8a8989;
    1953 }
    1954 
    1955 .devhub-wrap .table-of-contents ul,
    1956 .devhub-wrap .table-of-contents ol {
    1957   margin: 6px 20px;
    1958 }
    1959 
    1960 .devhub-wrap .table-of-contents ul ul,
    1961 .devhub-wrap .table-of-contents ul ol,
    1962 .devhub-wrap .table-of-contents ol ul,
    1963 .devhub-wrap .table-of-contents ol ol {
    1964   margin-right: 0;
    1965   margin-top: 0;
    1966 }
    1967 
    1968 .devhub-wrap ul.items {
    1969   margin-bottom: 8px !important;
    1970   margin-top: 16px;
    1971   list-style-type: none !important;
    1972   padding-right: 10px;
    1973 }
    1974 
    1975 .devhub-wrap ul.items li {
    1976   padding-bottom: 6px !important;
    1977   font-weight: 600;
    1978 }
    1979 
    1980 .devhub-wrap ul.items li ul li,
    1981 .devhub-wrap ul.items li ul li ul li {
    1982   padding-bottom: 0 !important;
    1983   font-weight: normal;
    1984 }
    1985 
    1986 .devhub-wrap ul.items li a:hover {
    1987   color: #d54e21;
    19881823}
    19891824
    … …  
    20431878}
    20441879
     1880/** Site Header **/
     1881.site-header {
     1882  background: #0073aa;
     1883  float: none;
     1884  margin: 0 0 4em;
     1885  padding: 18px 0;
     1886  width: auto;
     1887  margin: 0;
     1888}
     1889
     1890.site-branding {
     1891  height: 32px;
     1892  box-sizing: border-box;
     1893  margin: 0 auto;
     1894  max-width: 960px;
     1895  padding: 0 10px;
     1896  position: relative;
     1897}
     1898
     1899.site-title {
     1900  line-height: 1;
     1901  margin: 0;
     1902  padding: 0;
     1903  font-family: 'Open Sans', sans-serif;
     1904  display: inline-block;
     1905  text-align: left;
     1906  color: black;
     1907}
     1908
     1909.site-title a {
     1910  color: #fff;
     1911  font-size: 28px;
     1912  font-weight: 300;
     1913  line-height: 1;
     1914  border-bottom: 0;
     1915}
     1916
     1917@media screen and (max-width: 769px) {
     1918  .site-title {
     1919    margin-left: 10px;
     1920  }
     1921}
     1922
     1923.menu-container {
     1924  background: #0073aa;
     1925  clear: both;
     1926  float: right;
     1927  width: 100%;
     1928}
     1929
     1930.menu-container ul {
     1931  display: none;
     1932  list-style: none;
     1933  margin: 0;
     1934  padding-left: 0;
     1935}
     1936
     1937.menu-container ul li {
     1938  border-top: 1px solid rgba(255, 255, 255, 0.2);
     1939  padding: 16px;
     1940}
     1941
     1942.menu-container a {
     1943  color: rgba(255, 255, 255, 0.8);
     1944  display: block;
     1945  text-decoration: none;
     1946  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
     1947  font-size: 12.8px;
     1948}
     1949
     1950.menu-container a:hover, .menu-container a:active {
     1951  color: #fff;
     1952  border-bottom: 1px solid #fff;
     1953}
     1954
     1955@media screen and (max-width: 48em) {
     1956  .menu-container a:hover, .menu-container a:active {
     1957    border-bottom: 0;
     1958  }
     1959}
     1960
     1961@media screen and (min-width: 48em) {
     1962  .menu-container {
     1963    float: right;
     1964    position: relative;
     1965    width: auto;
     1966    top: auto;
     1967    margin-right: 4px;
     1968  }
     1969  .menu-container ul {
     1970    display: inline-block;
     1971    font-size: 0;
     1972    margin-top: 5px;
     1973  }
     1974  .menu-container ul li {
     1975    border: 0;
     1976    display: inline-block;
     1977    font-size: 1.4rem;
     1978    margin-right: 2.1rem;
     1979    padding: 0;
     1980  }
     1981  .menu-container ul li:last-of-type {
     1982    margin: 0;
     1983  }
     1984}
     1985
     1986.main-navigation {
     1987  clear: both;
     1988  position: absolute;
     1989  left: 0;
     1990  width: 100%;
     1991  top: 50px;
     1992  z-index: 10;
     1993}
     1994
     1995.main-navigation.toggled ul {
     1996  display: block;
     1997}
     1998
     1999.menu-toggle.dashicons {
     2000  background: transparent;
     2001  border: none;
     2002  color: #fff;
     2003  font-size: 25px;
     2004  height: 5.5rem;
     2005  overflow: hidden;
     2006  position: absolute;
     2007  right: 0.5rem;
     2008  top: -60px;
     2009  width: 5.5rem;
     2010  -webkit-appearance: none;
     2011}
     2012
     2013.toggled .menu-toggle.dashicons:before {
     2014  content: "\f343";
     2015}
     2016
     2017@media screen and (min-width: 48em) {
     2018  .menu-toggle.dashicons {
     2019    display: none;
     2020  }
     2021  .main-navigation {
     2022    float: right;
     2023    position: relative;
     2024    width: auto;
     2025    top: auto;
     2026  }
     2027  .main-navigation.toggled {
     2028    padding: 1px 0;
     2029  }
     2030  .main-navigation ul {
     2031    display: inline-block;
     2032    font-size: 0;
     2033  }
     2034  .main-navigation ul li {
     2035    border: 0;
     2036    display: inline-block;
     2037    font-size: 1rem;
     2038    margin-right: 1rem;
     2039    padding: 0;
     2040  }
     2041  .main-navigation ul li:last-of-type {
     2042    margin-right: 0;
     2043  }
     2044  .main-navigation button.button-search {
     2045    display: inline-block;
     2046  }
     2047}
     2048
     2049/** Handbook **/
     2050aside[id^="handbook"] .widget-title,
     2051aside[id^="nav_menu"] .widget-title {
     2052  font-size: 16px;
     2053  text-transform: uppercase;
     2054  letter-spacing: 1px;
     2055  background-color: transparent;
     2056  padding: 1rem 12px;
     2057  margin-bottom: 0;
     2058  color: inherit;
     2059}
     2060
     2061.post-type-archive-handbook .site-main .widget-area,
     2062.single-handbook .site-main .widget-area {
     2063  float: left;
     2064  margin-right: 4%;
     2065}
     2066
     2067.handbook-header {
     2068  line-height: 2em;
     2069}
     2070
     2071.handbook-header h1 {
     2072  margin-top: 0;
     2073}
     2074
     2075.single-handbook .content-area h1 {
     2076  margin-top: 0;
     2077  padding-top: 0;
     2078}
     2079
     2080.single-handbook .o2-post {
     2081  border-top: none;
     2082}
     2083
     2084.single-handbook .handbook-name-container + #primary {
     2085  padding-top: 5rem;
     2086}
     2087
     2088.post-type-archive-handbook .handbook-name a:not(:hover),
     2089.single-handbook .handbook-name a:not(:hover) {
     2090  color: inherit;
     2091}
     2092
     2093.handbook-name-container {
     2094  position: absolute;
     2095  right: 0;
     2096  width: 75%;
     2097  margin-left: 25%;
     2098  background-color: #fff;
     2099}
     2100
     2101/** Table of Contents */
     2102.site-main .table-of-contents {
     2103  float: right;
     2104  width: 250px;
     2105  border: 1px solid #eee;
     2106  margin: 0 0 15px 15px;
     2107  z-index: 1;
     2108  position: relative;
     2109  color: #555d66;
     2110  font-size: 0.9em;
     2111  background-color: #fff;
     2112  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
     2113  border-radius: 3px;
     2114}
     2115
     2116@media (min-width: 971px) {
     2117  .site-main .table-of-contents {
     2118    margin: -15px -30px 15px 15px;
     2119  }
     2120}
     2121
     2122.site-main .table-of-contents h2 {
     2123  margin: 0;
     2124  padding: 0.7rem 1.2rem;
     2125  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
     2126  font-size: 1.3em;
     2127  color: #32373c;
     2128  text-transform: uppercase;
     2129  border-bottom: 1px solid #eee;
     2130  margin-bottom: 0;
     2131}
     2132
     2133.post-type-archive-handbook ul.items,
     2134.single-handbook ul.items,
     2135.table-of-contents ul.items {
     2136  margin: 0;
     2137  list-style-type: none;
     2138  padding: 1.2rem;
     2139}
     2140
     2141.post-type-archive-handbook ul.items li,
     2142.single-handbook ul.items li,
     2143.table-of-contents ul.items li {
     2144  padding: 4px;
     2145}
     2146
     2147.post-type-archive-handbook ul.items li a,
     2148.single-handbook ul.items li a,
     2149.table-of-contents ul.items li a {
     2150  text-decoration: none;
     2151}
     2152
     2153.post-type-archive-handbook ul.items li a:hover,
     2154.single-handbook ul.items li a:hover,
     2155.table-of-contents ul.items li a:hover {
     2156  color: #0073aa;
     2157  text-decoration: underline;
     2158}
     2159
     2160.post-type-archive-handbook ul.items li ul li,
     2161.post-type-archive-handbook ul.items li ul li ul li,
     2162.single-handbook ul.items li ul li,
     2163.single-handbook ul.items li ul li ul li,
     2164.table-of-contents ul.items li ul li,
     2165.table-of-contents ul.items li ul li ul li {
     2166  padding-bottom: 0;
     2167}
     2168
     2169/* Highlight current heading and adjust scroll position for fixed toolbar */
     2170.toc-heading:target {
     2171  position: relative;
     2172  padding-top: 50px;
     2173  margin-top: -50px;
     2174}
     2175
     2176/* Remove negative margin because there is no jump link before these headlines */
     2177.entry-content h2.toc-heading:first-of-type:target,
     2178.entry-content h3.toc-heading:first-of-type:target,
     2179h2.toc-heading + h3.toc-heading:target {
     2180  margin-top: 0;
     2181}
     2182
     2183.toc-heading:target:before {
     2184  content: '';
     2185  position: absolute;
     2186  left: -10px;
     2187  top: 50px;
     2188  border-left: 5px solid #0073aa;
     2189  height: 50%;
     2190  height: calc(100% - 50px);
     2191}
     2192
     2193.toc-jump {
     2194  position: relative;
     2195  height: 50px;
     2196}
     2197
     2198.toc-jump:after {
     2199  content: '';
     2200  display: table;
     2201  clear: both;
     2202}
     2203
     2204.toc-jump a {
     2205  z-index: 1;
     2206}
     2207
     2208@media (max-width: 480px) {
     2209  .table-of-contents {
     2210    display: none;
     2211  }
     2212}
     2213
     2214/** Menu */
     2215#secondary aside.widget_wporg_handbook_pages,
     2216#secondary aside.widget_nav_menu {
     2217  font-size: 16px;
     2218}
     2219
     2220.widget_wporg_handbook_pages h1,
     2221.widget_nav_menu h1 {
     2222  font-size: 1.6em;
     2223  font-weight: bold;
     2224  margin-bottom: 0.6em;
     2225}
     2226
     2227div[class*="-table-of-contents-container"] {
     2228  font-size: 0.8em;
     2229}
     2230
     2231div[class*="-table-of-contents-container"] ul {
     2232  margin-left: 0;
     2233  padding-left: 0;
     2234  list-style: none;
     2235}
     2236
     2237div[class*="-table-of-contents-container"] ul li .expandable {
     2238  display: flex;
     2239  flex-direction: row-reverse;
     2240  align-items: stretch;
     2241  position: relative;
     2242}
     2243
     2244div[class*="-table-of-contents-container"] ul li .dashicons {
     2245  position: absolute;
     2246  right: 0;
     2247  cursor: pointer;
     2248  padding: 8px;
     2249  display: inline-block;
     2250  font-size: 20px;
     2251  width: auto;
     2252  height: 100%;
     2253  color: #0073aa;
     2254  background-color: #fafafa;
     2255  border: 0;
     2256  border-left: 1px solid rgba(0, 0, 0, 0.05);
     2257  border-radius: 0;
     2258  box-shadow: none;
     2259  -webkit-appearance: none;
     2260}
     2261
     2262div[class*="-table-of-contents-container"] ul li .dashicons:hover,
     2263div[class*="-table-of-contents-container"] ul li .dashicons:focus {
     2264  color: #fff;
     2265  background-color: #0073aa;
     2266}
     2267
     2268div[class*="-table-of-contents-container"] ul li.open > div > .dashicons {
     2269  transform: rotate(180deg);
     2270  border-right: 1px solid rgba(0, 0, 0, 0.05);
     2271  border-left: none;
     2272}
     2273
     2274div[class*="-table-of-contents-container"] ul a {
     2275  display: block;
     2276  width: 100%;
     2277  font-size: 1.05em;
     2278  padding: 8px 40px 8px 8px;
     2279  text-decoration: none;
     2280}
     2281
     2282div[class*="-table-of-contents-container"] ul a:hover, div[class*="-table-of-contents-container"] ul a:focus {
     2283  color: #fff;
     2284  background-color: #0073aa;
     2285}
     2286
     2287div[class*="-table-of-contents-container"] ul a.active {
     2288  color: #555;
     2289  background-color: #fff;
     2290}
     2291
     2292div[class*="-table-of-contents-container"] ul.default-open {
     2293  display: block !important;
     2294}
     2295
     2296div[class*="-table-of-contents-container"] .open .expandable .dashicons:not(:focus) {
     2297  background: #fff;
     2298  color: #0073aa;
     2299}
     2300
     2301div[class*="-table-of-contents-container"] > ul > li:last-child {
     2302  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     2303}
     2304
     2305div[class*="-table-of-contents-container"] > ul > li .children > li > a,
     2306div[class*="-table-of-contents-container"] > ul > li .sub-menu > li > a {
     2307  padding-left: 13px;
     2308}
     2309
     2310div[class*="-table-of-contents-container"] > ul > li .children > li > ul > li > a,
     2311div[class*="-table-of-contents-container"] > ul > li .sub-menu > li > ul > li > a {
     2312  padding-left: 8px;
     2313}
     2314
     2315div[class*="-table-of-contents-container"] > ul > li.open > div > a:not(:focus) {
     2316  color: #0073aa;
     2317}
     2318
     2319div[class*="-table-of-contents-container"] > ul > li.open > div > a:hover {
     2320  color: #fff;
     2321  background-color: #0073aa;
     2322}
     2323
     2324div[class*="-table-of-contents-container"] .current-menu-item ul,
     2325div[class*="-table-of-contents-container"] .current-menu-ancestor ul {
     2326  display: block;
     2327}
     2328
     2329div[class*="-table-of-contents-container"] .children,
     2330div[class*="-table-of-contents-container"] .sub-menu {
     2331  overflow: hidden;
     2332  display: none;
     2333}
     2334
     2335#secondary div[class*="-table-of-contents-container"] ul li {
     2336  border-top: 1px solid rgba(0, 0, 0, 0.05);
     2337  padding: 0;
     2338  position: relative;
     2339}
     2340
     2341#secondary div[class*="-table-of-contents-container"] ul ul {
     2342  margin-left: 12px;
     2343  border-left: 1px solid rgba(0, 0, 0, 0.05);
     2344}
     2345
     2346/* New handbook design */
     2347.single-handbook #page {
     2348  background: linear-gradient(to right, #fafafa 35%, #fff 35%);
     2349  max-width: 100%;
     2350  padding: 0;
     2351  overflow: auto;
     2352}
     2353
     2354.single-handbook #content {
     2355  max-width: 960px;
     2356  margin: 0 auto;
     2357  display: flex;
     2358  padding-top: 0;
     2359}
     2360
     2361.single-handbook header {
     2362  margin: 0;
     2363}
     2364
     2365.single-handbook #secondary {
     2366  clear: left;
     2367  margin: 0;
     2368  background: #fafafa;
     2369  overflow: hidden;
     2370  width: 25%;
     2371  padding-top: 2rem;
     2372}
     2373
     2374.single-handbook #primary {
     2375  padding: 4rem 0 4rem 4rem;
     2376  background: #fff;
     2377  box-sizing: border-box;
     2378  width: 72%;
     2379}
     2380
     2381@media (max-width: 876px) {
     2382  .single-handbook #primary {
     2383    padding: 4rem 20px;
     2384    width: 100%;
     2385  }
     2386}
     2387
     2388.single-handbook .widget_wporg_handbook_pages
     2389.widget_nav_menu {
     2390  background-color: transparent;
     2391}
     2392
     2393.single-handbook nav.o2-post-actions button {
     2394  top: 10px;
     2395}
     2396
     2397.single-handbook .make-welcome {
     2398  margin: 0 !important;
     2399}
     2400
     2401/** /Handbook **/
    20452402.rest-api-handbook-reference .table-of-contents {
    20462403  float: none;
    … …  
    20612418.rest-api-handbook-reference .table-of-contents ul.items li ul li:last-child::after {
    20622419  content: '';
     2420}
     2421
     2422/* Menu toggle */
     2423#secondary-toggle {
     2424  display: none;
     2425}
     2426
     2427body.responsive-show {
     2428  position: fixed;
     2429  top: 32px;
     2430}
     2431
     2432body.responsive-show #secondary {
     2433  left: 0;
     2434}
     2435
     2436body.responsive-show #primary-modal {
     2437  display: block;
     2438}
     2439
     2440body.responsive-show #o2-expand-editor {
     2441  display: none;
     2442}
     2443
     2444@media only screen and (max-width: 782px) {
     2445  #secondary {
     2446    top: 46px;
     2447  }
     2448  body.responsive-show {
     2449    position: fixed;
     2450    top: 46px;
     2451    left: 0;
     2452    right: 0;
     2453    bottom: 0;
     2454  }
     2455  body.responsive-show #secondary {
     2456    left: 0;
     2457  }
     2458}
     2459
     2460@media only screen and (max-width: 480px) {
     2461  body.responsive-show #secondary {
     2462    top: 46px;
     2463  }
     2464  body.responsive-show #wpadminbar {
     2465    top: -46px;
     2466  }
     2467}
     2468
     2469@media (max-width: 876px) {
     2470  #secondary {
     2471    position: fixed;
     2472    z-index: 10;
     2473    bottom: 0px;
     2474    overflow-y: auto;
     2475    transition: all .25s ease;
     2476    top: 32px;
     2477    left: -100%;
     2478    width: 60%;
     2479    min-width: 300px;
     2480    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
     2481  }
     2482  #secondary-toggle {
     2483    display: block;
     2484    float: left;
     2485    margin-left: 17px;
     2486    margin-right: 0;
     2487    width: 48px;
     2488    height: 48px;
     2489    white-space: nowrap;
     2490    position: relative;
     2491    z-index: 1;
     2492  }
     2493  #secondary-toggle:before {
     2494    content: '\f333';
     2495    -webkit-font-smoothing: antialiased;
     2496    font: normal 32px/1 'dashicons';
     2497    position: relative;
     2498    top: 0;
     2499    color: #fff;
     2500  }
     2501  #secondary-toggle strong {
     2502    display: none;
     2503  }
     2504  #page {
     2505    overflow-x: hidden;
     2506  }
     2507  body.responsive-show {
     2508    overflow-y: visible;
     2509    position: static;
     2510  }
     2511  body.responsive-show #page {
     2512    overflow-x: visible;
     2513  }
     2514  body.responsive-show #secondary-toggle:before {
     2515    color: #0073aa;
     2516  }
     2517  .content-area {
     2518    width: 100%;
     2519  }
     2520  #primary,
     2521  #secondary {
     2522    -webkit-backface-visibility: hidden;
     2523  }
    20632524}
    20642525
Note: See TracChangeset for help on using the changeset viewer.