fake-wikidot-standard
rating: +1+x

Name: fake-wikidot-standard

Author: LiurdLiurd
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: sidebar topbar

Supports top bar menu *: yes
Supports side bar menu *: yes
* depends on tags: topbar and sidebar

Description:

How to install

  • go to: your wiki admin panel » appearance » themes
  • choose External CSS theme
  • supply the following URL as the CSS location
https://files.themes.obscurative.ru/local--code/fake-wikidot-standard

Code

+ show the code

Notes

/* toggle sidebar */

@media (min-width:768px) {
#content-wrap {
    grid-template-columns: 1fr;
}

#main-content {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

#top-bar div.mobile-top-bar {
    display: inline;
}

#top-bar div.mobile-top-bar ul{
    display: none;
}

#side-bar {
    position: fixed;
    top: 0;
    left: -100vw;
    transition: left 0.25s;
    background: var(--main-background);
    border-right: 2px solid var(--standard-accent);
}

#side-bar:target {
    left:0;
    z-index: 40;
}

#top-bar .open-menu a {
  position: fixed;
  top: 0.5rem;
  left: 0.3rem;
  color: var(--topbar-color);
  font-size: 1.6rem;
  line-height: 2rem;
  border: 0.2rem solid var(--standard-accent);
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  text-align: center;
  background: var(--standard-secondary);
  z-index: 30;
  text-decoration: none;
  transition: background-color 0.25s;
}

#top-bar .open-menu a:hover {
  text-decoration: none;
  background-color: var(--standard-accent);
}

    #side-bar::after {
        content: '';
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
    }

}

#side-bar a.close-menu {
    transition: backdrop-filter 0.25s 0.25s, background 0.25s 0.25s;
}

#side-bar:target a.close-menu {
    display: block;
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    height: 100%;
    z-index: -1;
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, .2)
}

@media (max-width:768px) {

  #side-bar {
    position: fixed;
    top:0;
    left: -100vw;
    width: var(--sidebar-width);
    height:100vh;
    transition: left 0.25s;
    background: var(--main-background);
  }

  #side-bar:target {
    position: fixed;
    top:0;
    left:0;
    width: var(--sidebar-width);
    height:100vh;
    z-index: 100;
  }

}
/* centered header */

#header h2,#header h1 {
    margin-left: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 100%;
}

#header h1 {
    grid-column-start: 2;
    grid-column-end: 12;
    text-align: center;
}

#header h2 {
    grid-column-start: 2;
    grid-column-end: 12;
    text-align: center;
}

#header-extra-div-1 {
    background-position-x: center;
}

#container .open-menu a {
    z-index: 100;
}
/* stretch topbar */

#top-bar div {
    justify-content: center;
}

#top-bar ul {
    margin: 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

#top-bar ul li {
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

#top-bar ul li a{
   padding: 0;
   width: inherit;
}

#top-bar ul li:first-of-type ul {
    left: 0;
}

#top-bar ul li ul li a,
#top-bar ul li ul li a {
    text-align: center;
}

#top-bar ul li ul {
    min-width: 100%;
    width: auto;
}

#top-bar ul li ul li a{
    min-width: fit-content;
    width: auto;
}

Similar themes

80.jpg
installbutton.png

Gnl 109557431160

Author: MukapogxMukapogx
Rating: 0, Comments: 0

Tags: sidebar topbar
80.jpg
installbutton.png

Paperui

Author: (user deleted)
Rating: 1, Comments: 1

Tags: sidebar topbar

Browse themes by tag

Comments

Add a New Comment
sidebartopbar
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License