function setFontFromCookies() {
var fontSize = Cookies.get('font-size'); if (fontSize == undefined) { var fontSize = 0.9; } var fontFamily = Cookies.get('font-family'); if (fontFamily == undefined) { var fontFamily = 'monospace'; } if (fontFamily == 'monospace') { var lineHeight = Number(fontSize) + 0.4; } else { var lineHeight = Number(fontSize) + 1; } console.log(fontFamily); console.log(fontSize + 'rem'); console.log(lineHeight + 'rem'); let body = document.getElementsByClassName("posts")[0]; body.style.fontSize = fontSize + 'rem'; body.style.fontFamily = fontFamily; body.style.lineHeight = lineHeight + 'rem';
}
function showDropDown() {
document.getElementById("dropdown").classList.toggle("show");
}
function setFontSize(size) {
switch (size) { case 'small': Cookies.set('font-size', 0.8); setFontFromCookies(); break; case 'medium': Cookies.set('font-size', 0.9); setFontFromCookies(); break; case 'large': Cookies.set('font-size', 1.0); setFontFromCookies(); break; }
}
function setFont(font) {
switch (font) { case 'mono': Cookies.set('font-family', 'monospace'); setFontFromCookies(); break; case 'sans': Cookies.set('font-family', 'sans-serif'); setFontFromCookies(); break; }
}
// Close the dropdown menu if the user clicks outside of it window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } }
}
setFontFromCookies(); document.getElementById(“changefont”).innerHTML = '<div class=“dropdown”><button onclick=“showDropDown()” class=“dropbtn”>☰</button><div id=“dropdown” class=“dropdown-content”><span>Font Size<br /><button onclick=“setFontSize(x27smallx27)” class=“font-size-small”>A</button><button onclick=“setFontSize(x27mediumx27)” class=“font-size-medium”>A</button><button onclick=“setFontSize(x27largex27)” class=“font-size-large”>A</button></span><span>Font<br /><button onclick=“setFont(x27monox27)” class=“font-mono”>mono</button><button onclick=“setFont(x27sansx27)” class=“font-sans”>sans-serif</button></span></div></div>'; var css = '.font-size-small{font-size:.9rem;border:none;background:#ddd;cursor:pointer}.font-size-medium{font-size:1rem;border:none;background:#ddd;cursor:pointer}.font-size-large{font-size:1.1rem;border:none;background:#ddd;cursor:pointer}.font-mono{font-family:monospace;border:none;cursor:pointer}.font-sans{font-family:sans-serif;border:none;cursor:pointer}.dropbtn{padding:0;font-size:16px;border:none;cursor:pointer;background:0 0;color:var(–text-color)}.dropdown{position:relative;display:inline-block}.dropdown-content{text-align:center;display:none;position:absolute;background-color:#eee;min-width:180px;z-index:1;margin-left:-160px}.dropdown-content span{color:#000;padding:12px 16px;text-decoration:none;display:block}.show{display:block}'; var head = document.getElementsByTagName(‘head’); var s = document.createElement('style'); s.setAttribute('type', 'text/css'); s.appendChild(document.createTextNode(css)); head.appendChild(s);