diff --git a/index.html b/index.html
index 676062e..8969a25 100644
--- a/index.html
+++ b/index.html
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
- <button data-set-theme="light">Light Mode</button>
- <button data-set-theme="dark" >Dark Mode</button>
+ <header>
+ <nav style="display: flex; gap: 15px;">
+ <a href="#">
+ Uutiset
+ </a>
+ <a href="#">
+ Mielipidekirjoitukset
+ </a>
+ <a href="#">
+ Pentulive
+ </a>
+ <a href="#">
+ Sanajuuri
+ </a>
+ </nav>
+ <nav id="theme-nav">
+ <button id="theme-button">Light Mode</button>
+ </nav>
+ </header>
<main class="uutis-lista">
<a href="#">
<article class="uutis-kortti">
diff --git a/static/aurinko.svg b/static/aurinko.svg
new file mode 100644
index 0000000..65c97c7
--- /dev/null
+++ b/static/aurinko.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-icon lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
\ No newline at end of file
diff --git a/static/kuu.svg b/static/kuu.svg
new file mode 100644
index 0000000..07b397d
--- /dev/null
+++ b/static/kuu.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon lucide-moon"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
index 3473deb..61057e5 100644
--- a/static/styles.css
+++ b/static/styles.css
}
body {
+ background-color: var(--background);
+ margin: 0;
+}
+
+main {
max-width: 500px;
- padding: 20px;
margin: auto;
- background-color: var(--background);
+ padding: 20px;
}
a {
text-decoration: none;
}
+nav {
+ height: fit-content;
+}
+
.uutis-lista {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
background-color: var(--card);
- transition: 0.2s;
+ transition: box-shadow 0.2s;
}
.uutis-kortti:hover {
.uutis-tiedot {
padding: 10px 20px;
+}
+
+header {
+ background-color: var(--card);
+ padding: 20px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 200px;
+ font-size: 0.9em;
+ align-items: center;
}
\ No newline at end of file
diff --git a/static/theme.js b/static/theme.js
index 21a813b..11b3457 100644
--- a/static/theme.js
+++ b/static/theme.js
-const lightModeBtn = document.querySelector("[data-set-theme='light']");
-const darkModeBtn = document.querySelector("[data-set-theme='dark']");
+const themeButton = document.getElementById("theme-button");
const html = document.documentElement;
+let theme
const setTheme = (theme) => {
document.documentElement.removeAttribute('data-theme');
const loadTheme = () => {
const savedTheme = localStorage.getItem('theme');
-
+ theme = savedTheme
if (savedTheme) {
setTheme(savedTheme);
}
};
-lightModeBtn.addEventListener('click', () => setTheme('light'));
-darkModeBtn.addEventListener('click', () => setTheme('dark'));
+themeButton.addEventListener('click', () => {
+ if (theme === "dark") {
+ setTheme("light")
+ theme = "light"
+ } else {
+ setTheme("dark")
+ theme = "dark"
+ }
+});
loadTheme();
\ No newline at end of file