From 0cc9d2b094c35adfe6d3b548d7d40219cc611d32 Mon Sep 17 00:00:00 2001 From: R-man3000 Date: Fri, 12 Jun 2026 14:35:35 +0300 Subject: barebones site start --- index.html | 57 +++++++++++++++++++++++++++++++++++++++ script.js | 25 +++++++++++++++++ style.css | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 173 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..1447fcd --- /dev/null +++ b/index.html @@ -0,0 +1,57 @@ + + + + + + Luhamus + + + +
+ + + +
+

Hello and welcome!

+

My name is Rasmus Luha.
I am studying Computer Science with a focus on DevOps.

+

+ You can reach me at + TODO@TODO.com. +

+
+ + +
+

Writing

+ +
+ + +
+

About

+

A bit more about my background, interest, work.

+
+ + +
+

Page not found

+

Go home

+
+
+ + + + 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; } + } -- cgit v1.2.3