From 30a19112216e12d19459474f7308ec57cd8aaf9d Mon Sep 17 00:00:00 2001 From: R-man3000 Date: Fri, 12 Jun 2026 17:00:31 +0300 Subject: site redo --- about.html | 36 ++++++++ blog.html | 26 ++++++ blog/post-1.html | 32 +++++++ footer.html | 1 + img/githubGreen.jpg | Bin 0 -> 11368 bytes index.html | 56 +++--------- nav.html | 4 + script.js | 38 ++++---- style.css | 249 +++++++++++++++++++++++++++++++++------------------- 9 files changed, 284 insertions(+), 158 deletions(-) create mode 100644 about.html create mode 100644 blog.html create mode 100644 blog/post-1.html create mode 100644 footer.html create mode 100755 img/githubGreen.jpg create mode 100644 nav.html diff --git a/about.html b/about.html new file mode 100644 index 0000000..a54a94d --- /dev/null +++ b/about.html @@ -0,0 +1,36 @@ + + + + + + About - Luhamus + + + +
+ + + + +
+

About

+

I will at some point replace this paragraph here with a bit more information about + my background, interests work and so on.
+

+ +
+

Mail: TODO

+
+ +
+

Github:

+ +
+
+
+ + + + diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..d8ee4c0 --- /dev/null +++ b/blog.html @@ -0,0 +1,26 @@ + + + + + + Blog - Luhamus + + + +
+ + +
+

Writing

+ +
+
+ + + + diff --git a/blog/post-1.html b/blog/post-1.html new file mode 100644 index 0000000..e4efdb8 --- /dev/null +++ b/blog/post-1.html @@ -0,0 +1,32 @@ + + + + + + Your first post title — Your Name + + + +
+ + +
+
+

Your first post title

+

June 12, 2026

+ +

Your post content starts here.

+ +

A subheading

+ +

More content.

+ + 
some code block if you need it
+ +

← Back to blog

+
+
+
+ + + diff --git a/footer.html b/footer.html new file mode 100644 index 0000000..c7a8972 --- /dev/null +++ b/footer.html @@ -0,0 +1 @@ + diff --git a/img/githubGreen.jpg b/img/githubGreen.jpg new file mode 100755 index 0000000..4c7ca0f Binary files /dev/null and b/img/githubGreen.jpg differ diff --git a/index.html b/index.html index 8f7d055..1873efc 100644 --- a/index.html +++ b/index.html @@ -4,55 +4,23 @@ 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

-
+
+

Hello and welcome!

+

My name is Rasmus Luha.
I am (graduated but nevertheless still) studying Computer Science with a focus on DevOps.

+ +
- - + + diff --git a/nav.html b/nav.html new file mode 100644 index 0000000..ae3a804 --- /dev/null +++ b/nav.html @@ -0,0 +1,4 @@ +Home +About +Blog +Git server diff --git a/script.js b/script.js index b37a235..7b52657 100644 --- a/script.js +++ b/script.js @@ -1,25 +1,17 @@ -const routes = { - '/': 'page-home', - '/blog': 'page-blog', - '/about': 'page-about', -}; +// Fetch navbar +fetch('/nav.html') + .then(r => r.text()) + .then(html => { + document.getElementById('nav').innerHTML = html; -function navigate() { - const hash = location.hash.replace('#', '') || '/'; + // Mark the current page link as active + const current = window.location.pathname; + document.querySelectorAll('nav a').forEach(a => { + if (a.getAttribute('href') === current) { + a.classList.add('active'); + } + }) + }) - // 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 +// Fetch footer +document.getElementById('footer').innerHTML = '© 2026 Luhamus'; diff --git a/style.css b/style.css index 9dee0b5..10c22d6 100644 --- a/style.css +++ b/style.css @@ -1,91 +1,158 @@ - /* ── 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; } - } +/* Reset & base */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + --bg: #f0f0eb; + --fg: #111111; + --muted: #666666; + --accent: #0057ff; +} + +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; +} + +#app { + max-width: 640px; + margin: 0 auto; +} + +/* Nav */ +nav { + margin-bottom: 3rem; + display: flex; + gap: 1.25rem; + font-weight: bold; +} + +nav a { + color: var(--muted); + text-decoration: none; + font-family: system-ui, sans-serif; + font-size: 1.0rem; + letter-spacing: 0.03em; + transition: color 0.15s; +} + +nav a:hover, +nav a.active { color: var(--fg); } + + +/* Footer */ +footer { + margin-top: 4rem; + padding-top: 1rem; + color: var(--muted); + font-family: system-ui, sans-serif; + font-size: 0.85rem; + text-align: center; + /* border-top: 1px solid #eee; */ +} + + + +/* Banner */ +.banner { + width: 100%; + height: 200px; + background: linear-gradient(135deg, #a8c5a0, #c8dfc4); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + border-radius: 4px; +} + +.banner span { + color: white; + font-size: 2.5rem; + font-family: system-ui, sans-serif; + font-weight: bold; + letter-spacing: 0.1em; + text-transform: uppercase; + border: 3px solid white; + padding: 0.4rem 1.2rem; +} + + + + +/* Base elemets */ +h1 { + font-size: 2rem; + font-weight: normal; + margin-bottom: 1rem; +} + +h2 { + font-size: 1.4rem; + font-weight: normal; + margin: 2rem 0 0.5rem; +} + +p { margin-bottom: 1.5rem; } + +a { color: var(--accent); } + + + +/* About page */ +.contact-item { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.contactImg { + width: 3rem; + height: auto; +} + + +/* 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, +.post-meta { + color: var(--muted); + font-family: system-ui, sans-serif; + font-size: 0.85rem; + white-space: nowrap; + margin-bottom: 2rem; +} + +/*Code*/ +pre { + background: #f5f5f5; + padding: 1rem; + overflow-x: auto; + font-size: 0.9rem; + margin-bottom: 1.5rem; +} + +/* Mobile─*/ +@media (max-width: 480px) { + body { padding: 2rem 1rem; } + .post-list li { flex-direction: column; gap: 0.15rem; } +} -- cgit v1.2.3