youwen5/blog
1
0
Fork 0
mirror of https://github.com/youwen5/blog.git synced 2024-11-24 18:03:50 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add font selector

Browse source
This commit is contained in:
Youwen Wu 2024-06-13 21:32:09 -07:00
parent d5477fbf9f
commit 3e76429c9b
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
6 changed files with 65 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/css/default.css
View file

@ -1,5 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@tailwind base;
@tailwind components;

37
src/js/main.js
View file

@ -55,3 +55,40 @@ themeButton.addEventListener("click", () => {
break
}
})
const clearFonts = () => {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
}
const updateFonts = (currentFont) => {
if (currentFont && currentFont === "serif") {
clearFonts()
document.body.classList.add("font-serif")
}
if (currentFont && currentFont === "sans") {
clearFonts()
document.body.classList.add("font-sans")
}
if (!currentFont) {
clearFonts()
}
}
let currentFont = localStorage.getItem("font")
updateFonts()
const fontButton = document.getElementById("font-toggle")
fontButton.addEventListener("click", () => {
currentFont = localStorage.getItem("font")
if (currentFont === "sans") {
currentFont = "serif"
fontButton.innerText = "serif"
localStorage.setItem("font", "serif")
} else {
currentFont = "sans"
fontButton.innerText = "sans"
localStorage.setItem("font", "sans")
}
updateFonts(currentFont)
})

2
src/out/bundle.css
View file

File diff suppressed because one or more lines are too long

2
src/out/bundle.js
View file

@ -1 +1 @@
const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},m=()=>{document.documentElement.classList.add("dark")};let a="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const c=document.getElementById("theme-toggle");c.addEventListener("click",(()=>{switch(a=(a+1)%3,a){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),c.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),c.innerText="theme: light"):(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),c.innerText="theme: light")}}));
const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},s=()=>{document.documentElement.classList.add("dark")};let o="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const a=document.getElementById("theme-toggle");a.addEventListener("click",(()=>{switch(o=(o+1)%3,o){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),a.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),a.innerText="theme: light"):(localStorage.setItem("theme","dark"),s(),a.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),s(),a.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),a.innerText="theme: light")}}));const n=()=>{document.body.classList.remove("font-sans"),document.body.classList.remove("font-serif")},m=e=>{e&&"serif"===e&&(n(),document.body.classList.add("font-serif")),e&&"sans"===e&&(n(),document.body.classList.add("font-sans")),e||n()};let c=localStorage.getItem("font");m();const l=document.getElementById("font-toggle");l.addEventListener("click",(()=>{c=localStorage.getItem("font"),"sans"===c?(c="serif",l.innerText="serif",localStorage.setItem("font","serif")):(c="sans",l.innerText="sans",localStorage.setItem("font","sans")),m(c)}));

24
src/templates/default.html
View file

@ -75,6 +75,25 @@
} else {
themeButton.innerText = "theme: system"
}
var fontButton = document.getElementById("font-toggle")
const font = localStorage.getItem("font")
if (font && font === "serif") {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
document.body.classList.add("font-serif")
fontButton.innerText = "serif"
}
if (font && font === "sans") {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
document.body.classList.add("font-sans")
fontButton.innerText = "sans"
}
if (!font) {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
fontButton.innerText = "serif"
}
}
MathJax = {
startup: {
@ -115,6 +134,11 @@
id="theme-toggle"
class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
></button>
<span class="ml-2 font-serif">|</span>
<button
id="font-toggle"
class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
></button>
</header>
$body$
<footer class="mt-14 md:mt-24 pb-12">

2
tailwind.config.js
View file

@ -5,7 +5,7 @@ module.exports = {
theme: {
extend: {
fontFamily: {
sans: ["Inter", "sans-serif"],
sans: ["Open Sans", "sans-serif"],
serif: ["Merriweather", "serif"],
},
colors: {