Skip to content

Instantly share code, notes, and snippets.

@tommyip
Last active January 1, 2021 10:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tommyip/de4e2031ac38f5a8dd00c95898830959 to your computer and use it in GitHub Desktop.
Save tommyip/de4e2031ac38f5a8dd00c95898830959 to your computer and use it in GitHub Desktop.
Minimalist Wikipedia theme (hide header and sidebars + bigger fonts + limit max width)
#content {
margin-left: 0;
}
#mw-panel {
display: none;
}
#bodyContent {
font-size: 18px;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#firstHeading {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.header-toggle-container {
z-index: 999;
position: absolute;
top: 0;
left: 0;
}
.header-toggle-btn {
font-size: 1rem;
background-color: inherit;
border: 0;
cursor: pointer;
outline: none;
}
const head = document.getElementById("mw-head");
const pageBase = document.getElementById("mw-page-base");
function setHeader(show) {
const config = show ? "block" : "none";
head.style.display = config;
pageBase.style.display = config;
}
var isShowing = false;
setHeader(isShowing);
const container = document.createElement('div');
const toggleBtn = document.createElement('button');
const label = document.createTextNode('-');
container.className = "header-toggle-container";
toggleBtn.className = "header-toggle-btn";
container.appendChild(toggleBtn);
toggleBtn.appendChild(label);
toggleBtn.onclick = function () {
setHeader(isShowing = !isShowing);
};
document.body.insertBefore(container, pageBase);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment