osnova 2
This commit is contained in:
20
index.html
Normal file
20
index.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Glavna Stran</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/main.css">
|
||||
<script src="./scripts/preload.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-header"></div>
|
||||
|
||||
<main>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="./scripts/index.js"></script>
|
||||
<script src="./scripts/main.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
0
scripts/index.js
Normal file
0
scripts/index.js
Normal file
64
scripts/main.js
Normal file
64
scripts/main.js
Normal file
@@ -0,0 +1,64 @@
|
||||
const headerHtml = `
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-left">
|
||||
<a class="nav-title" href="/">Slovar Slovenskega Novega Jezika</a>
|
||||
</div>
|
||||
<div class="nav-right" aria-label="Primary navigation">
|
||||
<a class="nav-btn" href="/about.html">O nas</a>
|
||||
<a class="nav-btn" href="/contact.html">Kontakt</a>
|
||||
<a class="nav-btn" href="/extras.html">Dodatki</a>
|
||||
|
||||
<button id="theme-toggle" class="toggle-btn" onclick="toggleTheme()" aria-label="Toggle colour scheme" aria-pressed="false">
|
||||
<div class="track"><div class="knob"></div></div>
|
||||
<span class="toggle-icon" id="toggle-icon" aria-hidden="true">☀</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
`;
|
||||
|
||||
function getCurrentTheme() {
|
||||
return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
function updateToggleState(theme) {
|
||||
const icon = document.getElementById('toggle-icon');
|
||||
const toggleButton = document.getElementById('theme-toggle');
|
||||
|
||||
if (!icon || !toggleButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
icon.textContent = theme === 'dark' ? '🌙' : '☀';
|
||||
toggleButton.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
|
||||
toggleButton.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Naslov
|
||||
document.title = ` ${document.title}`;
|
||||
|
||||
// Konstrukcija vseh stvari
|
||||
for (let element of document.getElementsByClassName("page-header")) {
|
||||
element.innerHTML = headerHtml;
|
||||
}
|
||||
|
||||
updateToggleState(getCurrentTheme());
|
||||
});
|
||||
|
||||
function toggleTheme() {
|
||||
const current = getCurrentTheme();
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
updateToggleState(next);
|
||||
}
|
||||
|
||||
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
||||
if (!localStorage.getItem('theme')) {
|
||||
const theme = e.matches ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
updateToggleState(theme);
|
||||
}
|
||||
});
|
||||
5
scripts/preload.js
Normal file
5
scripts/preload.js
Normal file
@@ -0,0 +1,5 @@
|
||||
(function() {
|
||||
const saved = localStorage.getItem('theme') || 'light';
|
||||
const osPref = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', saved ?? osPref);
|
||||
})();
|
||||
208
styles/main.css
Normal file
208
styles/main.css
Normal file
@@ -0,0 +1,208 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg-color: #333;
|
||||
--text-color: #fff;
|
||||
--nav-bg: #2b2b2b;
|
||||
--nav-btn-bg: #3a3a3a;
|
||||
--nav-btn-hover-bg: #474747;
|
||||
--nav-btn-border: #555;
|
||||
--nav-btn-hover-border: #666;
|
||||
--toggle-track: #4a4a4a;
|
||||
--toggle-knob: #f4f4f4;
|
||||
--toggle-icon-color: #f5f5f5;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--bg-color: #fff;
|
||||
--text-color: #333;
|
||||
--nav-bg: #f0f0f0;
|
||||
--nav-btn-bg: #e0e0e0;
|
||||
--nav-btn-hover-bg: #d0d0d0;
|
||||
--nav-btn-border: #ccc;
|
||||
--nav-btn-hover-border: #bbb;
|
||||
--toggle-track: #d3d3d3;
|
||||
--toggle-knob: #ffffff;
|
||||
--toggle-icon-color: #444;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: "Georgia", "Times New Roman", serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
|
||||
/* Smooth Theme Transition */
|
||||
transition: background-color 0.25s ease, color 0.25s ease
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
|
||||
/* Smooth Theme Transition */
|
||||
transition: background-color 0.25s ease, color 0.25s ease
|
||||
}
|
||||
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
/*padding: 8px 12px;*/
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
width: min(1000px, calc(100% - 16px));
|
||||
margin: 0 auto;
|
||||
padding: 10px 14px;
|
||||
/*border: 1px solid #444;
|
||||
border-radius: 10px;*/
|
||||
background: var(--nav-bg);
|
||||
|
||||
/* Smooth Theme Transition */
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-left,
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0px 4px;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
/* Smooth Theme Transition */
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
padding: 0.45rem 0.8rem;
|
||||
border: 1px solid var(--nav-btn-border);
|
||||
border-radius: 4px;
|
||||
background: var(--nav-btn-bg);
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
|
||||
/* Smooth Theme Transition */
|
||||
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover,
|
||||
.nav-btn:focus-visible {
|
||||
background: var(--nav-btn-hover-bg);
|
||||
border-color: var(--nav-btn-hover-border);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
header {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.nav-left,
|
||||
.nav-right {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Theme toggle button ── */
|
||||
|
||||
.toggle-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 36px;
|
||||
padding: 4px 8px 4px 4px;
|
||||
border: 1px solid var(--nav-btn-border);
|
||||
border-radius: 20px;
|
||||
background: var(--nav-btn-bg);
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover,
|
||||
.toggle-btn:focus-visible {
|
||||
background: var(--nav-btn-hover-bg);
|
||||
border-color: var(--nav-btn-hover-border);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toggle-btn .track {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
background: var(--toggle-track);
|
||||
position: relative;
|
||||
transition: background-color 0.25s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-btn .knob {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--toggle-knob);
|
||||
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .toggle-btn .knob {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.toggle-btn .toggle-icon {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
color: var(--toggle-icon-color);
|
||||
width: 1.1em;
|
||||
text-align: center;
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
Reference in New Issue
Block a user