diff --git a/assets/favicon.ico b/assets/favicon.ico index e81400c..49f7fc1 100644 Binary files a/assets/favicon.ico and b/assets/favicon.ico differ diff --git a/assets/fonts/Coiny-Regular-subset.ttf b/assets/fonts/Coiny-Regular-subset.ttf new file mode 100644 index 0000000..7600c33 Binary files /dev/null and b/assets/fonts/Coiny-Regular-subset.ttf differ diff --git a/assets/fonts/Coiny-Regular.ttf b/assets/fonts/Coiny-Regular.ttf new file mode 100644 index 0000000..d753a24 Binary files /dev/null and b/assets/fonts/Coiny-Regular.ttf differ diff --git a/assets/mike-czyz.webp b/assets/mike-czyz.webp index 5b8a2f5..9b7d6be 100644 Binary files a/assets/mike-czyz.webp and b/assets/mike-czyz.webp differ diff --git a/index.html b/index.html index 154219f..5e20df0 100644 --- a/index.html +++ b/index.html @@ -115,7 +115,7 @@
Michał Czyż
- + 🌙 Dark Mode
diff --git a/main.js b/main.js index 1339a2c..4bcb1ba 100644 --- a/main.js +++ b/main.js @@ -1,39 +1,41 @@ const root = document.documentElement; -const themeText = document.querySelector('.theme-text'); -const themeIcon = document.querySelector('.material-icons'); +const themeText = document.querySelector(".theme-text"); +const themeIcon = document.querySelector(".material-icons"); -const isDarkMode = () => root.classList.contains('dark'); +const isDarkMode = () => root.classList.contains("dark"); const setDarkMode = () => { - root.classList.add('dark'); - themeText.textContent = 'Dark Mode'; - themeIcon.innerHTML = ''; + root.classList.add("dark"); + themeText.textContent = "Dark Mode"; + themeIcon.innerHTML = "🌙"; }; const setLightMode = () => { - root.classList.remove('dark'); - themeText.textContent = 'Light Mode'; - themeIcon.innerHTML = ''; + root.classList.remove("dark"); + themeText.textContent = "Light Mode"; + themeIcon.innerHTML = "☀️"; }; const toggleTheme = () => { if (isDarkMode()) { setLightMode(); - localStorage.setItem('preferredTheme', 'light'); + localStorage.setItem("preferredTheme", "light"); } else { setDarkMode(); - localStorage.setItem('preferredTheme', 'dark'); + localStorage.setItem("preferredTheme", "dark"); } }; const checkPreferredTheme = () => { - const preferredTheme = localStorage.getItem('preferredTheme'); - if (preferredTheme === 'dark') { + const preferredTheme = localStorage.getItem("preferredTheme"); + if (preferredTheme === "dark") { setDarkMode(); - } else if (preferredTheme === 'light') { + } else if (preferredTheme === "light") { setLightMode(); } else { - const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; + const prefersDarkScheme = window.matchMedia( + "(prefers-color-scheme: dark)" + ).matches; if (prefersDarkScheme) { setDarkMode(); } else { @@ -46,5 +48,5 @@ document.querySelector("#year").innerHTML = new Date().getFullYear(); checkPreferredTheme(); -const themeButton = document.querySelector('.theme'); -themeButton.addEventListener('click', toggleTheme); +const themeButton = document.querySelector(".theme"); +themeButton.addEventListener("click", toggleTheme); diff --git a/styles.css b/styles.css index f6af333..e416df6 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,12 @@ -@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap"); -@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); -@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap'); +/* Coiny Regular */ +@font-face { + font-family: 'Coiny'; + src: url('/assets/fonts/Coiny-Regular-subset.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + * { transition: background-color 0.15s ease-in-out; @@ -75,11 +81,11 @@ body { width: 100%; min-height: 100vh; /* height: 100vh; */ + font-family: system-ui, sans-serif; background-color: var(--base); color: var(--text); display: grid; place-items: center; - font-family: "Schibsted Grotesk", sans-serif; overflow: auto; overflow-anchor: none; } @@ -112,7 +118,7 @@ body { } a { - color: var(--pine); + color: var(--foam); transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out; @@ -264,7 +270,8 @@ a:focus { } .material-icons { - font-family: "Material Icons"; + font-size: 1.25em; + font-style: normal; } .theme-text {