commit 296dd6c70767304aab3cae565cf6663cdba43b5b
parent dff6ee84cb2b16ace8ede81761a99de479e6f159
Author: Nirmal Kumar R <tildezero@gmail.com>
Date: Sun, 4 Aug 2024 00:04:55 +0530
Initial revamp of design
Diffstat:
31 files changed, 306 insertions(+), 490 deletions(-)
diff --git a/404.html b/404.html
@@ -9,11 +9,12 @@
</head>
<body>
- <header>
- <div>
- <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/name.png" alt="My Full Name - Nirmal Kumar R">
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
+ <p>NIRMAL KUMAR R</p>
+ </a>
<section class="content-wrapper">
<div class="content-title">
diff --git a/blog.html b/blog.html
@@ -4,24 +4,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/png" href="https://ik.imagekit.io/mysticmode/home/favicon.png">
+ <link rel="icon" type="image/png" href="/img/favicon.png">
<title>Nirmal Kumar R - blog</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
- <header>
- <div>
- <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/name.png" alt="My Full Name - Nirmal Kumar R">
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
+ <p>NIRMAL KUMAR R</p>
+ </a>
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<main>
diff --git a/blog/50-years.html b/blog/50-years.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - 50 Years</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/creativity.html b/blog/creativity.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Creativity</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/hello-from-mysticmode.html b/blog/hello-from-mysticmode.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Hello from mysticmode</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/in-praise-of-silent-voice.html b/blog/in-praise-of-silent-voice.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - In praise of silent voice</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/interview-with-annamalai-swami-by-jim-lemkin.html b/blog/interview-with-annamalai-swami-by-jim-lemkin.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Interview with Annamalai Swami by Jim Lemkin</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/is-it-really-smart-work.html b/blog/is-it-really-smart-work.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Is it really smart work?</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/mid-of-the-crisis.html b/blog/mid-of-the-crisis.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Mid of the crisis</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/my-admiration-and-respect-for-bruce-lee.html b/blog/my-admiration-and-respect-for-bruce-lee.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - My admiration and respect for Bruce Lee</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/nothing-can-beat-this.html b/blog/nothing-can-beat-this.html
@@ -3,23 +3,22 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/png" href="https://ik.imagekit.io/mysticmode/home/favicon.png">
+ <link rel="icon" type="image/png" href="/img/favicon.png">
<title>Nirmal Kumar R - Nothing can beat this</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
- <header>
- <div>
- <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/name.png" alt="My Full Name - Nirmal Kumar R">
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/occurrence-and-non-occurrence.html b/blog/occurrence-and-non-occurrence.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Occurrence and non-occurrence</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/blog/time-goes-by-and-does-life-grow-in-you.html b/blog/time-goes-by-and-does-life-grow-in-you.html
@@ -6,28 +6,23 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Time goes by and does life grow in you?</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/devlog.html b/devlog.html
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/png" href="https://ik.imagekit.io/mysticmode/home/favicon.png">
- <title>Nirmal Kumar R - blog</title>
- <link rel="stylesheet" href="/style.css">
-</head>
-
-<body>
- <header>
- <div>
- <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/name.png" alt="My Full Name - Nirmal Kumar R">
- </div>
- </header>
-
- <nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
- </nav>
-
- <main>
- Softwares and utilities:
- <ul>
- <li>
- <a href="https://github.com/mysticmode/emptyfm">emptyfm</a>
- </li>
- </ul>
- </main>
-
- <footer>
- <hr>
- © Nirmal Kumar R. All original text, is licensed under a <a
- href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
- Source code of this website can be found <a href="https://github.com/mysticmode/mysticmode.github.io">here</a>.
- </footer>
-</body>
-
-</html>
diff --git a/font/Rubik-Bold.woff2 b/font/Rubik-Bold.woff2
Binary files differ.
diff --git a/font/Rubik-Regular.woff2 b/font/Rubik-Regular.woff2
Binary files differ.
diff --git a/img/favicon.png b/img/favicon.png
Binary files differ.
diff --git a/img/nklogo.png b/img/nklogo.png
Binary files differ.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/png" href="https://ik.imagekit.io/mysticmode/home/favicon.png">
+ <link rel="icon" type="image/png" href="/img/favicon.png">
<title>Nirmal Kumar R</title>
<link rel="stylesheet" href="/style.css">
</head>
@@ -12,24 +12,19 @@
<body>
<a rel="me" href="https://mastodon.social/@tildezero" style="display:none;">Mastodon</a>
- <header>
- <div>
- <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/name.png" alt="My Full Name - Nirmal Kumar R">
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
+ <p>NIRMAL KUMAR R</p>
+ </a>
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
- <section class="home">
- <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/ashram.jpg" alt="A picture of an ashram garden">
- </section>
-
<section class="content-wrapper">
<div class="content">
<p>This is my personal website. A place where you can read all my public musings. Rest of it is my internal flight
diff --git a/poems.html b/poems.html
@@ -4,24 +4,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/png" href="https://ik.imagekit.io/mysticmode/home/favicon.png">
+ <link rel="icon" type="image/png" href="/img/favicon.png">
<title>Nirmal Kumar R - blog</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
- <header>
- <div>
- <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/name.png" alt="My Full Name - Nirmal Kumar R">
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
+ <p>NIRMAL KUMAR R</p>
+ </a>
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<main>
diff --git a/poems/a-place-in-my-heart.html b/poems/a-place-in-my-heart.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - A place in my heart</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/dont-just-get-going.html b/poems/dont-just-get-going.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Don't just get going</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/free-yourself.html b/poems/free-yourself.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Free yourself</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/life-is-preciously-short.html b/poems/life-is-preciously-short.html
@@ -4,24 +4,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
- <link rel="icon" type="image/png" href="https://ik.imagekit.io/mysticmode/home/favicon.png">
+ <link rel="icon" type="image/png" href="/img/favicon.png">
<title>Nirmal Kumar R - Life is preciously short</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
- <header>
- <div>
- <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/name.png" alt="My Full Name - Nirmal Kumar R">
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
+ <p>NIRMAL KUMAR R</p>
+ </a>
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/love-for-a-stranger.html b/poems/love-for-a-stranger.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Love for a stranger</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/my-life-is-not-shrinking.html b/poems/my-life-is-not-shrinking.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - My life is not shrinking</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/path-and-love.html b/poems/path-and-love.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Path and Love</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/polar-bliss.html b/poems/polar-bliss.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Polar bliss</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/seeker.html b/poems/seeker.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Seeker</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/poems/solitude.html b/poems/solitude.html
@@ -6,29 +6,24 @@
<link
rel="icon"
type="image/png"
- href="https://ik.imagekit.io/mysticmode/home/favicon.png"
+ href="/img/favicon.png"
/>
<title>Nirmal Kumar R - Solitude</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
- <header>
- <div>
- <img
- loading="lazy"
- src="https://ik.imagekit.io/mysticmode/home/name.png"
- alt="My Full Name - Nirmal Kumar R"
- />
+ <a href="/" class="header">
+ <div class="logo">
+ <img src="/img/nklogo.png" width="75px" />
</div>
- </header>
-
+ <p>NIRMAL KUMAR R</p>
+ </a>
+
<nav>
- <a href="/">Home</a>
- <a href="/blog.html">Blog</a>
- <a href="/poems.html">Poems</a>
- <a href="/devlog.html">Devlog</a>
- <a href="mailto:nirmal@posteo.net">Contact</a>
+ <a href="/blog.html">[ Blog ]</a>
+ <a href="/poems.html">[ Poems ]</a>
+ <a href="mailto:nirmal@posteo.net">[ Contact ]</a>
</nav>
<section class="content-wrapper">
diff --git a/style.css b/style.css
@@ -1,137 +1,99 @@
* {
- margin: 0;
- padding: 0;
box-sizing: border-box;
}
-body {
- font-family: sans-serif;
- font-size: 14px;
- line-height: 1.4;
- max-width: 30em;
+@font-face {
+ font-family: 'nkfont';
+ font-style: normal;
+ font-weight: normal;
+ src: url('/font/Rubik-Regular.woff2') format('woff2');
}
-header {
- margin: 1em;
+@font-face {
+ font-family: 'nkfont';
+ font-style: normal;
+ font-weight: bold;
+ src: url('/font/Rubik-Bold.woff2') format('woff2');
}
-
-nav {
- display: flex;
- align-items: start;
- justify-content: center;
- margin: 2em 0 3em;
+
+html,
+body {
+ margin: 0;
+ padding: 0;
}
-nav a {
- background-color: #BF1717;
- font-family: sans-serif;
- color: white;
- font-size: 0.8rem;
- text-align: center;
- text-shadow: 0px 0px 1px #cccccc;
- min-width: 70px;
- padding: 0.3em 0.5em 0.2em;
- text-decoration: none;
- box-shadow: 1px 2px 2px #eba2a2 inset;
- border-bottom: 4px solid #992727;
- border-right: 2px solid #992727;
- border-left: 1px solid #992727;
- border-top: 1px solid #ac3e3e;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
+body {
+ font-family: 'nkfont', sans-serif;
+ font-size: 18px;
+ line-height: 1.5;
+ color: #444;
+ width: 670px;
+ margin: 1em;
}
-p {
- margin: 1em 0;
+a {
+ display: inline-block;
+ color: #0060FF;
+ text-decoration: none;
+ padding-bottom: 0px;
}
-img {
- display: block;
- width: 400px;
+a:hover {
+ transform:translateY(2px);
}
-ul {
- list-style-type: none;
+.header {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ border: none;
}
-li {
- line-height: 1.6;
+.header p {
+ font-size: 20px;
+ color: #0061FF;
+ letter-spacing: 1px;
+ margin-left: 10px;
}
-ul li:before {
- background-color: #BF1717;
- border-radius: 0;
- content: "";
- display: inline-block;
- margin-right: 5px;
- margin-bottom: 2px;
- height: 6px;
- width: 6px;
+.logo {
+ border-radius: 50%;
+ background: #0061FF;
+ height: 75px;
+ width: 75px;
}
-.home {
- margin-top: 1em;
+.logo > img {
+ border-radius: 50%;
+ mix-blend-mode: screen;
}
-.home,
-main,
-.content-wrapper {
- margin-left: 1em;
+.header:hover {
+ transform: none;
}
-.content-wrapper h3 {
- color: #663333;
- font-weight: bold;
+.header:hover img {
+ border: none;
+ mix-blend-mode: normal;
}
-.date {
- color: #7d7d7d;
+.header:hover p {
+ color: #444;
}
-.contact {
- background-color: #ffcc33;
- padding: 0.6em;
- font-size: 0.8rem;
+nav {
+ display: block;
+ margin: 2em 0;
}
-footer {
- color: #cccccc;
- margin: 3em 0 3em 1em;
- font-size: 0.8rem;
+nav a {
+ margin-right: 1em;
}
-footer hr {
- margin-bottom: 1em;
+nav a:last-child {
+ margin-right: 0;
}
-@media screen and (max-width: 425px) {
- body {
- width: 100%;
- max-width: none;
- }
-
- img {
- width: 284px;
- margin: 0 auto;
- }
-
- nav {
- flex-direction: column;
- align-items: center;
- }
-
- .home,
- main,
- .content-wrapper {
- margin-left: 0;
- width: 100%;
- padding: 1em;
- }
-
- footer {
- margin: 0 0 2em 0;
- padding: 1em;
- width: 100%;
- }
-}
+.home img {
+ width: 100%;
+}
+\ No newline at end of file
