SCP基金会

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1*/
 
#top-bar.open-menua{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.2emsolid#888;
 background-color:#fff;
 border-radius:3em;
 color:#888;
}@media (min-width: 768px) {#top-bar.mobile-top-bar{display:block;
 }#top-bar.mobile-top-barli{display:none;
 }#main-content{max-width:708px;
 margin:0auto;
 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:1em1em01em;
 background-color: rgba(0,0,0,0.1);
 transition:left0.4s ease-in-out;
 
 scrollbar-width:thin;
 }#side-bar:target{left:0;
 }#top-bar.close-menu{margin-left:19.75em;
 opacity:0;
 }#side-bar:target.close-menu{display:block;
 position:fixed;
 width:100%;
 height:100%;
 top:0;
 left:0;
 z-index: -1;
 }#top-bar.open-menua:hover {
 text-decoration: none;
 }
}
 
@supportsselector(:focus-within) {
 
@media (min-width:768px) {
 #top-bar .open-menu a {
 pointer-events: none;
 }#side-bar:not(:target) .close-menu{display:block;
 pointer-events:none;
 user-select:none;
 z-index: -1;
 }
 
 /*Thispseudo-elementismeanttooverlaytheregularsidebarbuttonsothefixedpositioning (top, left, rightand/orbottom) hastomatch*/
 
 #side-bar.close-menu::before{content: "";
 position:fixed;
 z-index:5;
 display:block;
 
 top:0.5em;
 left:0.5em;
 
 border:0.2emsolidtransparent;
 width:30px;
 height:30px;
 font-size:30px;
 line-height:0.9em;
 
 pointer-events:all;
 cursor:pointer;
 }#side-bar:focus-within{left:0;
 }#side-bar:focus-within.close-menu::before{pointer-events:none;
 }
}
 
}