Hi there 👋, I’m Saurav!
This is my digital garden - notes, projects, and lessons along the way.
Checkout my CV for my works and projects.
diff --git a/assets/css/extended/custom.css b/assets/css/extended/custom.css index a872c15..2e6ec84 100644 --- a/assets/css/extended/custom.css +++ b/assets/css/extended/custom.css @@ -50,63 +50,118 @@ } :root[data-theme="dark"] { - --theme: #181818; - --entry: rgb(46, 46, 51); - --primary: #fbf1c7; - --secondary: #ebdbb2; - --tertiary: rgb(65, 66, 68); - --content: rgb(196, 196, 197); - --code-block-bg: rgb(46, 46, 51); - --code-bg: rgb(55, 56, 62); - --border: rgb(151, 51, 51); + --theme: #1d2021; + --entry: #282828; + --primary: #ebdbb2; + --secondary: #a89984; + --tertiary: #3c3836; + --content: #ebdbb2; + --code-block-bg: #282828; + --code-bg: #3c3836; + --border: #3c3836; color-scheme: dark; - --post-entry-bg: #181818; /* bg1 */ + --post-entry-bg: #282828; --post-entry-fg: #ebdbb2; + + --green: #b8bb26; + --greenl: #8ec07c; } body { font-family: "Space Grotesk", monospace; } -nav #menu span { - padding: 0px 2px; - - text-decoration: underline; - text-decoration-thickness: 2px; - text-decoration-color: var(--green); -} - /* * -* NAV SECTION +* UNIVERSAL HOVER ANIMATION (Fill-up Effect) +* Target: Nav spans, main links (except entries), social links, and share icons. * */ +nav #menu a span { + position: relative; + text-decoration: none !important; + color: inherit; + transition: color 0.3s ease; + z-index: 1; + display: inline-block; + padding: 0 8px; /* Reduced vertical padding */ +} -nav #menu span:hover { +main a:not(.entry-link, .anchor), +.social-icons a, +.share-buttons a, +.note-item a { + position: relative; + text-decoration: none !important; + color: inherit; + transition: color 0.3s ease; + z-index: 1; + display: inline-block; +} + +/* Note items are full-width flex containers */ +.note-item a { + display: flex; + width: 100%; + padding: 8px 12px; + margin: 0 -12px; /* Offset padding for full-row effect */ +} + +/* The fill background */ +nav #menu a span::before, +main a:not(.entry-link, .anchor)::before, +.social-icons a::before, +.share-buttons a::before, +.note-item a::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; /* Static underline state */ background-color: var(--green); - color: white; + z-index: -1; + transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1); } -nav #menu .active { - border: 0px; - color: var(--green); - - text-decoration: underline; - text-decoration-thickness: 2px; - text-decoration-color: var(--green); +/* Notes list starts with 0 height to stay clean */ +.note-item a::before, +.share-buttons a::before { + height: 0; } -/* * -* MAIN SECTION -* */ -main a { - text-decoration: underline; - text-decoration-thickness: 2px; - text-decoration-color: var(--green); +/* Hover state: Fill up the background */ +nav #menu a:hover span::before, +main a:hover:not(.entry-link, .anchor)::before, +.social-icons a:hover::before, +.share-buttons a:hover::before, +.note-item a:hover::before { + height: 100%; } -main a:hover:not(.entry-link) { - background-color: var(--green); - color: white; +/* CONTRAST FIX: Switch text/icon color on hover */ +nav #menu a:hover span, +main a:hover:not(.entry-link, .anchor), +.social-icons a:hover, +.share-buttons a:hover, +.note-item a:hover .note-title, +.note-item a:hover .note-date { + color: var(--theme) !important; +} + +/* Icon specific color switch */ +.social-icons a:hover svg, +.share-buttons a:hover svg { + fill: var(--theme) !important; + stroke: var(--theme) !important; +} + +/* Active Nav State - remain thick underline */ +nav #menu .active span::before { + height: 4px; +} + +nav #menu .active a:hover span::before { + height: 100%; } main h1 { @@ -117,6 +172,35 @@ main h1 { .toc, .post-tags a { border: 0px; + background: transparent; +} + +.post-tags a { + background: var(--tertiary); + color: var(--primary); + padding: 4px 12px; + border-radius: var(--radius); + transition: all 0.3s ease; +} + +.post-tags a:hover { + background: var(--green); + color: var(--theme); + transform: translateY(-2px); +} + +.share-buttons { + margin-top: 40px; + padding: 20px 0; + border-top: 1px solid var(--tertiary); + display: flex; + justify-content: center; + gap: 12px; +} + +.share-buttons a { + padding: 10px; + border-radius: var(--radius); } .anchor { @@ -134,10 +218,15 @@ main h1 { /* } */ main .post-entry { - border: 0px; + border: 1px solid var(--tertiary); background-color: var(--post-entry-bg); color: var(--post-entry-fg); - border: 2px solid #383838; + transition: transform 0.2s ease, border-color 0.2s ease; +} + +main .post-entry:hover { + transform: translateY(-2px); + border-color: var(--green); } /* * @@ -158,18 +247,9 @@ main .post-entry { border-bottom: none; } -.note-item a { - display: flex; - justify-content: space-between; - align-items: baseline; - text-decoration: none; - gap: 16px; -} - -.note-item a:hover .note-title { - text-decoration: underline; - text-decoration-color: var(--green); - text-decoration-thickness: 2px; +.note-item a:hover .note-title, +.note-item a:hover .note-date { + color: var(--theme) !important; } .note-title { @@ -186,7 +266,51 @@ main .post-entry { .note-summary { margin: 4px 0 0 0; - font-size: 0.9rem; + font-size: 0.96rem; color: var(--secondary); - line-height: 1.4; + line-height: 1.5; +} + +/* * +* POST CONTENT SPACINGS +* */ +.post-content { + font-size: 1.1rem; + line-height: 1.7; + color: var(--primary); +} + +.post-content p, +.post-content ol, +.post-content ul, +.post-content dl { + margin-bottom: 1.6em; +} + +.post-content h1, +.post-content h2, +.post-content h3, +.post-content h4 { + margin-top: 1.8em; + margin-bottom: 0.8em; + color: var(--green); +} + +.post-content blockquote { + margin: 2em 0; + padding: 0.5em 1.5em; + border-left: 4px solid var(--green); + background-color: var(--entry); + font-style: italic; + color: var(--secondary); +} + +.post-content code { + background-color: var(--tertiary); + color: var(--primary); + border-radius: 4px; +} + +.post-content pre code { + background-color: var(--entry) !important; } diff --git a/content/posts/my-first-post.md b/content/posts/my-first-post.md new file mode 100644 index 0000000..1ea5689 --- /dev/null +++ b/content/posts/my-first-post.md @@ -0,0 +1,26 @@ +--- +title: "The Art of the Digital Garden" +date: 2026-04-01T08:55:00+05:45 +draft: false +tags: ["philosophy", "gruvbox", "hugo"] +description: "Exploring the concept of a digital garden and how a refined Gruvbox theme enhances the experience." +--- + +Welcome to my digital garden. This is a place where I share my thoughts, projects, and lessons learned along the way. Unlike a traditional blog, a digital garden is always growing and evolving. + +### Why Gruvbox? + +Gruvbox is more than just a color scheme; it's a philosophy of contrast and harmony. By using the "Hard" contrast variant, we achieve a focus that is both easy on the eyes and aesthetically pleasing. + +```javascript +const theme = "Gruvbox Dark Hard"; +console.log(`Current theme: ${theme}`); +``` + +### The Beauty of Hugo + +Hugo allows for lightning-fast build times and complete control over the structure of our content. Paired with a minimal theme like PaperMod, it provides the perfect canvas for technical writing. + +> "A garden is never finished." + +I hope you enjoy exploring these notes and posts as much as I enjoy writing them. diff --git a/public/404.html b/public/404.html deleted file mode 100644 index c216a62..0000000 --- a/public/404.html +++ /dev/null @@ -1,2 +0,0 @@ -
This is a sample note. Notes are meant to be short, quick thoughts or TILs (Today I Learned). -Delete this file and add your own notes here!
This is a sample note. Notes are meant to be short, quick thoughts or TILs (Today I Learned).
Delete this file and add your own notes here!
This is a sample note. Notes are meant to be short, quick thoughts or TILs (Today I Learned). -Delete …