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 @@
-
+ 🌙
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 {