Toggle Sidebar
HOLD THY HORSES
This is a template page used internally by the Topiary.
PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION
UwU
This is a component to make the mobile sidebar button active on desktop-size screen.
To use, put the following:
[[include :scp-wiki:component:toggle-sidebar]]
If used with a theme, it's recommended to put said theme after this [[include]].
(Use this version by Woedenaz if you're using Black Highlighter)
:target #page-content { color: red; } /* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */ #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; } @media (min-width: 768px) { #top-bar .mobile-top-bar { display: block; } #top-bar .mobile-top-bar li { display: none; } #main-content { max-width: 708px; margin: 0 auto; padding: 0; transition: max-width 0.2s ease-in-out; } #side-bar { display: block; position: fixed; top: 0; left: -20em; width: 17.75em; height: 100%; margin: 0; overflow-y: auto; z-index: 10; padding: 1em 1em 0 1em; background-color: rgba(0,0,0,0.1); transition: left 0.325s ease-in-out; scrollbar-width: thin; } #side-bar:target { left: 0; } #side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin-left: 19.75em; opacity: 0; z-index: -1; visibility: visible; } #side-bar:not(:target) .close-menu { display: none; } #top-bar .open-menu a:hover { text-decoration: none; } /*------------------------*/ /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */ @supports (-moz-appearance:none) { } #side-bar:focus-within { left: 0; } }
page revision: 22, last edited: 06 Jun 2022 07:56