commit 3dee43cc979e0533fde17efc58fa9fbe4731a46f parent b5a84f2814d7e140c7adb351445d219a630bca69 Author: mysticmode <tildezero@gmail.com> Date: Thu, 29 Aug 2024 13:23:56 +0000 Update the design of entire website Diffstat:
30 files changed, 113 insertions(+), 84 deletions(-)
diff --git a/404.html b/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> diff --git a/blog.html b/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> diff --git a/blog/50-years.html b/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> diff --git a/blog/a-bite-of-unconscious-way.html b/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> diff --git a/blog/creativity.html b/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> diff --git a/blog/hello-from-mysticmode.html b/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> diff --git a/blog/in-praise-of-silent-voice.html b/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> diff --git a/blog/interview-with-annamalai-swami-by-jim-lemkin.html b/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> diff --git a/blog/is-it-really-smart-work.html b/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> diff --git a/blog/mid-of-the-crisis.html b/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> diff --git a/blog/my-admiration-and-respect-for-bruce-lee.html b/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> diff --git a/blog/nothing-can-beat-this.html b/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"> diff --git a/blog/occurrence-and-non-occurrence.html b/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> 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 @@ -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> diff --git a/font/JetBrainsMono-Bold.woff2 b/font/JetBrainsMono-Bold.woff2 Binary files differ. diff --git a/font/JetBrainsMono-ExtraBold.woff2 b/font/JetBrainsMono-ExtraBold.woff2 Binary files differ. diff --git a/font/JetBrainsMono-Medium.woff2 b/font/JetBrainsMono-Medium.woff2 Binary files differ. diff --git a/index.html b/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> diff --git a/poems.html b/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> diff --git a/poems/a-place-in-my-heart.html b/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> diff --git a/poems/dont-just-get-going.html b/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> diff --git a/poems/free-yourself.html b/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> diff --git a/poems/life-is-preciously-short.html b/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"> diff --git a/poems/love-for-a-stranger.html b/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> diff --git a/poems/my-life-is-not-shrinking.html b/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> diff --git a/poems/path-and-love.html b/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> diff --git a/poems/polar-bliss.html b/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> diff --git a/poems/seeker.html b/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> diff --git a/poems/solitude.html b/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> diff --git a/style.css b/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; - src: url("/font/Bookerly.ttf") format("woff2"); + font-weight: var(--font-weight-normal); + 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; - width: 670px; + color: #000; + width: 600px; margin: 1em auto; } a { display: inline-block; - color: #0060FF; - text-decoration: none; - padding-bottom: 0px; - border-bottom: 2px solid #0060FF; + color: #000; + text-decoration: underline; + text-decoration-thickness: 2px; } -a:hover { - color: black; - border-bottom: 2px solid black; +p { + word-break: break-word; + 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%;