Update the design of entire website

404.html

@@ -17,7 +17,7 @@
 
     <section class="content-wrapper">
       <div class="content-title">
-        <h3>404 Not Found</h3>
+        <div class="title">404 Not Found</div>
       </div>
       <div class="content">
         <p>Rumi said - "What you seek is seeking you"</p>

blog.html

@@ -19,7 +19,7 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <main>

blog/50-years.html

@@ -18,11 +18,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>50 Years <span class="date">[2023-07-20]</span></h3>
+      <div class="title">50 Years <span class="date">[2023-07-20]</span></div>
 
       <div class="content">
         <p>

blog/a-bite-of-unconscious-way.html

@@ -18,11 +18,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>A bite of unconscious way <span class="date">[2024-08-10]</span></h3>
+      <div class="title">A bite of unconscious way <span class="date">[2024-08-10]</span></div>
 
       <div class="content">
         <p>

blog/creativity.html

@@ -18,11 +18,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Creativity <span class="date">[2023-04-20]</span></h3>
+      <div class="title">Creativity <span class="date">[2023-04-20]</span></div>
 
       <div class="content">
         <p>

blog/hello-from-mysticmode.html

@@ -18,11 +18,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Hello from mysticmode <span class="date">[2021-11-28]</span></h3>
+      <div class="title">Hello from mysticmode <span class="date">[2021-11-28]</span></div>
 
       <div class="content">
         <p>
@@ -44,12 +44,6 @@
           email -- <em>tildezero at gmail dot com</em>
         </p>
         <p>Much love to you -- Nirmal</p>
-        <p>
-          UPDATE: This post was written on my old blog www.mysticmode.net, I
-          have changed my domain and this post and all others had been moved
-          here at 26th July 2024. My current email address to contact is nirmal
-          at posteo dot net
-        </p>
       </div>
     </section>
 

blog/in-praise-of-silent-voice.html

@@ -18,11 +18,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>In praise of silent voice <span class="date">[2022-10-20]</span></h3>
+      <div class="title">In praise of silent voice <span class="date">[2022-10-20]</span></div>
 
       <div class="content">
         <p>

blog/interview-with-annamalai-swami-by-jim-lemkin.html

@@ -18,14 +18,14 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>
+      <div class="title">
         Interview with Annamalai Swami by Jim Lemkin
         <span class="date">[2020-11-10]</span>
-      </h3>
+      </div>
 
       <div class="content">
         <p>

blog/is-it-really-smart-work.html

@@ -18,11 +18,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Is it really smart work? <span class="date">[2022-05-02]</span></h3>
+      <div class="title">Is it really smart work? <span class="date">[2022-05-02]</span></div>
 
       <div class="content">
         <p>

blog/mid-of-the-crisis.html

@@ -18,11 +18,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Mid of the crisis <span class="date">[2023-02-07]</span></h3>
+      <div class="title">Mid of the crisis <span class="date">[2023-02-07]</span></div>
 
       <div class="content">
         <p>

blog/my-admiration-and-respect-for-bruce-lee.html

@@ -18,14 +18,14 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>
+      <div class="title">
         My admiration and respect for Bruce Lee
         <span class="date">[2022-12-17]</span>
-      </h3>
+      </div>
 
       <div class="content">
         <p>

blog/nothing-can-beat-this.html

@@ -18,11 +18,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Nothing can beat this <span class="date">[2024-03-11]</span></h3>
+      <div class="title">Nothing can beat this <span class="date">[2024-03-11]</span></div>
 
       <div class="content">
 	

blog/occurrence-and-non-occurrence.html

@@ -18,13 +18,13 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>
+      <div class="title">
         Occurrence and non-occurrence <span class="date">[2022-05-04]</span>
-      </h3>
+      </div>
 
       <div class="content">
         <p>

blog/time-goes-by-and-does-life-grow-in-you.html

@@ -18,14 +18,14 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>
+      <div class="title">
         Time goes by and does life grow in you?
         <span class="date">[2022-07-09]</span>
-      </h3>
+      </div>
 
       <div class="content">
         <p>

index.html

@@ -23,7 +23,7 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
@@ -34,12 +34,12 @@
           cannot put it into words although I try my best.
         </p>
         <p>
-          <a href="https://river.sh">Oh, I write computer programs too!</a>
+          <a href="https://github.com/mysticmode">Oh, I write computer programs too!</a>
         </p>
         <p class="contact">
           You can connect with me on
           <a rel="me" href="https://mastodon.social/@tildezero">Mastodon</a> or
-          via <a href="mailto:nirmal@posteo.net">email</a>.
+          via <a href="mailto:tildezero@gmail.com">email</a>.
         </p>
       </div>
     </section>

poems.html

@@ -19,7 +19,7 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <main>

poems/a-place-in-my-heart.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>A place in my heart <span class="date">[2022-11-26]</span></h3>
+      <div class="title">A place in my heart <span class="date">[2022-11-26]</span></div>
 
       <div class="content">
         <p>

poems/dont-just-get-going.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Don't just get going <span class="date">[2022-01-05]</span></h3>
+      <div class="title">Don't just get going <span class="date">[2022-01-05]</span></div>
 
       <div class="content">
         <p>

poems/free-yourself.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Free yourself <span class="date">[2023-01-26]</span></h3>
+      <div class="title">Free yourself <span class="date">[2023-01-26]</span></div>
 
       <div class="content">
         <p>

poems/life-is-preciously-short.html

@@ -20,11 +20,11 @@
   <nav>
     <a href="/blog.html">Blog</a>
     <a href="/poems.html">Poems</a>
-    <a href="mailto:nirmal@posteo.net">Contact</a>
+    <a href="mailto:tildezero@gmail.com">Contact</a>
   </nav>
 
   <section class="content-wrapper">
-    <h4>Life is preciously short <span class="date">[2021-08-12]</span></h3>
+    <h4>Life is preciously short <span class="date">[2021-08-12]</span></div>
 
       <div class="content">
 

poems/love-for-a-stranger.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Love for a stranger <span class="date">[2022-12-10]</span></h3>
+      <div class="title">Love for a stranger <span class="date">[2022-12-10]</span></div>
 
       <div class="content">
         <p>

poems/my-life-is-not-shrinking.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>My life is not shrinking <span class="date">[2022-05-22]</span></h3>
+      <div class="title">My life is not shrinking <span class="date">[2022-05-22]</span></div>
 
       <div class="content">
         <p>My life is not shrinking;</p>

poems/path-and-love.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Path and Love <span class="date">[2022-09-29]</span></h3>
+      <div class="title">Path and Love <span class="date">[2022-09-29]</span></div>
 
       <div class="content">
         <p>

poems/polar-bliss.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Polar bliss <span class="date">[2023-04-09]</span></h3>
+      <div class="title">Polar bliss <span class="date">[2023-04-09]</span></div>
 
       <div class="content">
         <p>

poems/seeker.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Seeker <span class="date">[2022-10-14]</span></h3>
+      <div class="title">Seeker <span class="date">[2022-10-14]</span></div>
 
       <div class="content">
         <p>

poems/solitude.html

@@ -19,11 +19,11 @@
     <nav>
       <a href="/blog.html">Blog</a>
       <a href="/poems.html">Poems</a>
-      <a href="mailto:nirmal@posteo.net">Contact</a>
+      <a href="mailto:tildezero@gmail.com">Contact</a>
     </nav>
 
     <section class="content-wrapper">
-      <h3>Solitude <span class="date">[2014-09-09]</span></h3>
+      <div class="title">Solitude <span class="date">[2014-09-09]</span></div>
 
       <div class="content">
         <p>

style.css

@@ -1,14 +1,34 @@
+:root {
+  --font-weight-normal: 500;
+  --font-weight-medium: 600;
+  --font-weight-bold: 800;
+}
+
 * {
   box-sizing: border-box;
 }
 
 @font-face {
-  font-family: "Bookerly";
+  font-family: "JetBrains Mono Regular";
   font-style: normal;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
-  src: url("/font/Bookerly.ttf") format("woff2");
+  src: url("/font/JetBrainsMono-Medium.woff2") format("woff2");
 }
-    
+
+@font-face {
+  font-family: "JetBrains Mono Medium";
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  src: url("/font/JetBrainsMono-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono Bold";
+  font-style: normal;
+  font-weight: var(--font-weight-bold);
+  src: url("/font/JetBrainsMono-ExtraBold.woff2") format("woff2");
+}
+
 html,
 body {
   margin: 0;
@@ -16,29 +36,29 @@ body {
 }
 
 body {
-  font-family: "Bookerly", Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  font-family: "JetBrains Mono Regular", monospace;
   font-feature-settings: "tnum";
   font-variant-numeric: tabular-nums;
-  font-size: 20px;
+  font-size: 16px;
+  font-weight: var(--font-weight-normal);
   line-height: 1.5;
-  font-weight: 400;
   text-decoration: none;
-  color: #444;
+  color: #000;
-  width: 670px;
+  width: 600px;
   margin: 1em auto;
 }
 
 a {
   display: inline-block;
-  color: #0060FF;
+  color: #000;
-  text-decoration: none;
+  text-decoration: underline;
-  padding-bottom: 0px;
+  text-decoration-thickness: 2px;
-  border-bottom: 2px solid #0060FF;
 }
 
-a:hover {
+p {
-  color: black;
+  word-break: break-word;
-  border-bottom: 2px solid black;
+  word-wrap: break-word;
+  hyphens: auto;
 }
 
 .header {
@@ -54,7 +74,8 @@ a:hover {
 
 .header p {
   font-size: 20px;
-  color: #0061FF;
+  font-family: "JetBrains Mono Bold", monospace;
+  color: #000;
   margin-left: 10px;
 }
 
@@ -64,17 +85,14 @@ a:hover {
   width: 75px;
 }
 
-.logo > img {
+.logo>img {
   border-radius: 50%;
 }
 
-.header p {
-  color: #444;
-}
-
 nav {
   display: block;
   margin: 2em 0;
+  text-transform: uppercase;
 }
 
 nav a {
@@ -89,12 +107,29 @@ nav a:last-child {
   width: 100%;
 }
 
-.content-wrapper h3 span,
+ul li {
+  list-style: none;
+  list-style-type: square;
+  text-transform: uppercase;
+}
+
+.content-wrapper .title {
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  font-family: "JetBrains Mono Bold", monospace;
+}
+
+.content-wrapper .title span,
 main ul li span {
-  font-size: 17px;
+  font-size: 14px;
+  color: #555;
   font-weight: normal;
 }
 
+.content-wrapper .title span {
+  display: block;
+}
+
 @media only screen and (max-width: 700px) {
   body {
     width: 100%;