diff options
| author | R-man3000 <rasmus.luha@gmail.com> | 2026-06-12 14:35:35 +0300 |
|---|---|---|
| committer | R-man3000 <rasmus.luha@gmail.com> | 2026-06-12 14:35:35 +0300 |
| commit | 0cc9d2b094c35adfe6d3b548d7d40219cc611d32 (patch) | |
| tree | 4d993931711eb395beedf4ce3b3879fab50998d5 | |
| parent | 0b93b2583fa57bcfa8a70ebed3f90e5e78d76bfe (diff) | |
barebones site start
| -rw-r--r-- | index.html | 57 | ||||
| -rw-r--r-- | script.js | 25 | ||||
| -rw-r--r-- | style.css | 91 |
3 files changed, 173 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..1447fcd --- /dev/null +++ b/index.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Luhamus</title> + <link rel="stylesheet" href="style.css" /> +</head> +<body> + <div id="app"> + <nav> + <a href="#/">Home</a> + <a href="#/blog">Blog</a> + <a href="#/about">About</a> + </nav> + + + <section class="page" id="page-home"> + <h1>Hello and welcome!</h1> + <p>My name is <strong>Rasmus Luha</strong>.<br> I am studying Computer Science with a focus on DevOps.</p> + <p> + You can reach me at + <a href="mailto:you@example.com">TODO@TODO.com</a>. + </p> + </section> + + + <section class="page" id="page-blog"> + <h1>Writing</h1> + <ul class="post-list"> + <li> + <a href="#/blog/post-1">Your first post title</a> + <span class="post-date">Jun 2026</span> + </li> + <li> + <a href="#/blog/post-2">Another post title</a> + <span class="post-date">May 2026</span> + </li> + </ul> + </section> + + + <section class="page" id="page-about"> + <h1>About</h1> + <p>A bit more about my background, interest, work.</p> + </section> + + + <section class="page" id="page-404"> + <h1>Page not found</h1> + <p><a href="#/">Go home</a></p> + </section> + </div> + +<script src="script.js"></script> +</body> +</html> diff --git a/script.js b/script.js new file mode 100644 index 0000000..b37a235 --- /dev/null +++ b/script.js @@ -0,0 +1,25 @@ +const routes = { + '/': 'page-home', + '/blog': 'page-blog', + '/about': 'page-about', +}; + +function navigate() { + const hash = location.hash.replace('#', '') || '/'; + + // Hide all pages + document.querySelectorAll('.page').forEach(el => el.classList.remove('active')); + + // Update nav + document.querySelectorAll('nav a').forEach(a => { + const path = a.getAttribute('href').replace('#', ''); + a.classList.toggle('active', path === hash); + }); + + // Show matching page, fall back to 404 + const pageId = routes[hash] || 'page-404'; + document.getElementById(pageId).classList.add('active'); +} + +window.addEventListener('hashchange', navigate); +navigate(); // run on load diff --git a/style.css b/style.css new file mode 100644 index 0000000..9dee0b5 --- /dev/null +++ b/style.css @@ -0,0 +1,91 @@ + /* ── Reset & base ── */ + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + + :root { + --bg: #ffffff; + --fg: #111111; + --muted: #666666; + --accent: #0057ff; + --max-w: 640px; + --gap: 1.5rem; + } + + body { + background: var(--bg); + color: var(--fg); + font-family: Georgia, 'Times New Roman', serif; + font-size: 1.05rem; + line-height: 1.7; + padding: 3rem 1.25rem; + } + + /* ── Layout ── */ + #app { + max-width: var(--max-w); + margin: 0 auto; + } + + /* ── Nav ── */ + nav { + margin-bottom: 3rem; + display: flex; + gap: 1.25rem; + } + + nav a { + color: var(--muted); + text-decoration: none; + font-family: system-ui, sans-serif; + font-size: 0.9rem; + letter-spacing: 0.03em; + transition: color 0.15s; + } + + nav a:hover, + nav a.active { color: var(--fg); } + + /* ── Page sections ── */ + .page { display: none; } + .page.active { display: block; } + + h1 { + font-size: 1.6rem; + font-weight: normal; + margin-bottom: 1rem; + } + + p { margin-bottom: var(--gap); } + + a { color: var(--accent); } + + /* ── Blog list ── */ + .post-list { list-style: none; } + + .post-list li { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 1rem; + padding: 0.6rem 0; + border-bottom: 1px solid #eee; + } + + .post-list a { + text-decoration: none; + color: var(--fg); + } + + .post-list a:hover { text-decoration: underline; } + + .post-date { + color: var(--muted); + font-family: system-ui, sans-serif; + font-size: 0.85rem; + white-space: nowrap; + } + + /* ── Mobile ── */ + @media (max-width: 480px) { + body { padding: 2rem 1rem; } + .post-list li { flex-direction: column; gap: 0.15rem; } + } |