BetterSidebar

HOLD THY HORSES

This is a template page used internally by the Topiary.

PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION
UwU

---

(Currently exist for posterity, don't use)

Better is subjective, but you know how it is.

This is a reimplementation of Sigma-9 sidebar layout.

The usual sidebar CSS method is completely disabled, and the button is purely decorative. Instead, the ::before pseudo-element is overlaid on top, which pulls out the sidebar on hover.
The page does not reset back to top when moving off the sidebar. This has since been fixed on mainsite.

To use, put the following:

[[include :topia:component:bettersidebar]]

(Not compatible with Black Highlighter, probably)

---

/* source: http://scpko.wikidot.com/theme:minimal-scp-foundation-by-cocoonist */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
        pointer-events: none;
}
 
div#side-bar {
    position: fixed;
    left: -19em;
    height: 100%;
    overflow-y: auto;
    top: 0;
    width: 17em;
    padding: 0.45em;
    display: block;
    z-index: 10;
    transition: left 0.5s ease-in-out;
}
div#side-bar:hover {
    left: 0;
}
 
div#side-bar:before {
    content: '≡';
    position: fixed;
    top: 0.5em;
    left: 0.5em;
    font-size: 30px;
    width: 36px;
    height: 36px;
    text-align: center;
    z-index: 6;
    transition: left 0.5s ease-in-out;
    opacity: 0;
    cursor: pointer;
}
 
div#side-bar:hover:before {
    transition-delay: 0.1s;
}
 
@media (min-width: 768px) {
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar li {
        display: none;
    }
}