mysticmode/website
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Landing page improvements with favicon

Browse Source
This commit is contained in:
Nirmal Kumar R
2024-07-26 16:13:26 +05:30
parent c23a10134c
commit 0d89e3c159
1 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+28 -21
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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</title> <title>Nirmal Kumar R</title>
<style> <style>
* { * {
@@ -12,36 +13,36 @@
} }
body { body {
font-family: verdana; font-family: sans-serif;
font-size: 13px; font-size: 14px;
max-width: 46em; line-height: 1.4;
max-width: 30em;
} }
header { header {
margin: 1em 1em 1em 9em; margin: 1em;
} }
nav { nav {
display: flex; display: flex;
flex-direction: column;
align-items: start; align-items: start;
margin-left: 1em; justify-content: center;
float: left;
} }
nav a { nav a {
background-color: #BF1717; background-color: #BF1717;
font-family: verdana; font-family: sans-serif;
color: white; color: white;
font-size: 0.8rem; font-size: 0.8rem;
text-align: center;
text-shadow: 0px 0px 1px #cccccc; text-shadow: 0px 0px 1px #cccccc;
min-width: 70px; min-width: 70px;
padding: 0.3em 0.5em; padding: 0.3em 0.5em 0.2em;
text-decoration: none; text-decoration: none;
box-shadow: 1px 2px 2px #dfb7b7 inset; box-shadow: 1px 2px 2px #eba2a2 inset;
border-bottom: 4px solid #992727; border-bottom: 4px solid #992727;
border-right: 3px solid #f29595; border-right: 2px solid #992727;
border-left: 2px solid #b77272; border-left: 1px solid #992727;
border-top: 1px solid #ac3e3e; border-top: 1px solid #ac3e3e;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -49,32 +50,38 @@
} }
p { p {
margin: 2em 0; margin: 1em 0;
}
.home {
margin-top: 1em;
} }
.home, .home,
.content-wrapper { .content-wrapper {
margin-left: 9em; margin-left: 1em;
} }
.content-wrapper { .home img {
margin-top: 1em; display: block;
} }
.content-title { .content-title {
color: #663333; color: #663333;
font-weight: bold; font-weight: bold;
margin-left: 9em; margin-left: 1em;
} }
.contact { .contact {
background-color: #ffcc33; background-color: #ffcc33;
padding: 0.6em; padding: 0.6em;
font-size: 0.8rem;
} }
footer { footer {
color: #cccccc; color: #cccccc;
margin: 3em 0 3em 9em; margin: 3em 0 3em 1em;
font-size: 0.8rem;
} }
footer hr { footer hr {
@@ -85,7 +92,7 @@
<body> <body>
<header> <header>
<div> <div>
<img loading="lazy" src="https://ik.imagekit.io/mysticmode/tr:w-479/home/name.png" alt="My Full Name - Nirmal Kumar R"> <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/name.png" alt="My Full Name - Nirmal Kumar R" width="400px">
</div> </div>
</header> </header>
@@ -98,13 +105,13 @@
</nav> </nav>
<section class="home"> <section class="home">
<img loading="lazy" src="https://ik.imagekit.io/mysticmode/tr:w-479/home/ashram.jpg" alt="A picture of an ashram garden" width="479px"> <img loading="lazy" src="https://ik.imagekit.io/mysticmode/home/ashram.jpg" alt="A picture of an ashram garden" width="400px">
</section> </section>
<section class="content-wrapper"> <section class="content-wrapper">
<div class="content"> <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 and experience which I cannot put it into words although I try my best.</p> <p>This is my personal website. A place where you can read all my public musings. Rest of it is my internal flight and experience which I cannot put it into words although I try my best.</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:inbox@nirm.al">email</a>. <p class="contact">You can connect with me on <a rel="me" href="https://mastodon.social/@tildezero">Mastodon</a> or via <a href="mailto:tildezero@posteo.net">email</a>.
</div> </div>
</section> </section>