diff --git a/CNAME b/CNAME index e6b175a..212ed93 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -shivas.blog \ No newline at end of file +shiva.dev \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..337ba7f --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# Project Change Log + +## April 27, 2025 + +- **Homepage Post List Styling:** + - Implemented a hover effect to change the background color of post items (`.single.summary`). + - Adjusted padding (`padding`, `padding-top`) for post items to refine spacing. + - Made the entire post summary area clickable via an overlay link (`.summary-link-overlay`), while keeping Author and Category links clickable (`z-index` adjustments). + - *File affected:* `themes/LoveIt/assets/css/_core/_base.scss` + +- **Homepage Post List Content:** + - Removed the "Read More" link from the footer of each post summary. + - Removed the tags section from the footer of each post summary. + - Attempted to display the `description` from post front matter instead of the automatic summary (currently reverted). + - Added overlay link HTML structure. + - *File affected:* `themes/LoveIt/layouts/_default/summary.html` + +- **Homepage Profile Social Icons:** + - Added horizontal spacing (`margin`). + - Added a scaling hover effect (`transform: scale(1.5)`). + - *File affected:* `themes/LoveIt/assets/css/_core/_base.scss` + +- **Header Menu Icons (e.g., GitHub):** + - Added a default subtle glow effect (`filter: drop-shadow`). + - Added a scaling hover effect (`transform: scale(1.2)`). + - *File affected:* `themes/LoveIt/assets/css/_core/_base.scss` + +- **Header Bar:** + - Briefly added and then removed a `box-shadow` effect. + - *File affected:* `themes/LoveIt/assets/css/_partial/_header.scss` diff --git a/config.toml b/config.toml index 4012d64..5c9b358 100644 --- a/config.toml +++ b/config.toml @@ -53,23 +53,7 @@ ignoreLogs = ['warning-goldmark-raw-html'] link = "https://shiva.dev" [params] - -[markup] - # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting) - [markup.highlight] - codeFences = true - guessSyntax = true - lineNos = true - lineNumbersInTable = true - # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158) - # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158) - noClasses = false - - - # Enable JSON output - [outputs] - home = ["HTML", "RSS", "JSON"] - page = ["HTML"] + [params.home] diff --git a/public/404.html b/public/404.html index b49dc79..c452185 100644 --- a/public/404.html +++ b/public/404.html @@ -1,11 +1,11 @@ - + 404 Page not found - shiva.dev - + @@ -19,7 +19,7 @@ - +
@@ -95,7 +95,7 @@

@@ -104,7 +104,7 @@

- + + All Categories - shiva.dev - + @@ -19,8 +19,8 @@ - - + +
@@ -113,7 +113,7 @@

@@ -122,7 +122,7 @@

- + + shiva.dev - + @@ -20,12 +20,12 @@ - - @@ -104,78 +104,33 @@ -

+
+

Recent...

+

Bind Ctrl + HJKL to arrow keys on a Mac Machine -

What this post covers?

-

So instead of reaching to arrow keys, you can just use h (as left arrow), j (as down arrow) k (as up arrow) and l (as right arrow) by hoding ctrl key.

-

Before we start

-

First things first, we need to install a free tool called Hammerspoon. This tool will allow us to configure the key bindings.

-

Keyboard Settings on Mac

-

Navigate to System Settings > Keyboard > Keyboard Shortcut > Modifier Keys (left pane). Select your keyboard, and for the Caps Lock key, choose Control from the drop-down menu.

-

+

bind Ctrl + hjkl as arrow keys on a mac machine

+

Adding Password Protection To A Hugo Post -

In this post, I’ll show you the simplest way to protect a Hugo page with a password by using front matter and adding a new parameter called “password.” This allows you to set a unique password for each post.

-
-
- proceed with caution -
-
-
This method lacks complete security. Anyone with basic computer knowledge can access your post or the repository and view the passwords. Therefore, it’s advisable to avoid sharing sensitive information using this approach. For full password protection, consider using GitHub secrets or variables instead of passwords, though this topic is not covered in this post.
-
-
-
-
- What this post cover -
-
-
    -
  1. Easy method to assign a password to any Hugo post (not 100% secured)
  2. -
  3. Users will be prompted to enter a password to access the post.
  4. -
  5. Unique password for each post
  6. -
-
-
-
-

Before we proceed, open the post Top Secret - that is protection with a password. When prompted, enter the password 1234 to read the top secret.

-

+

Adding Password Protection To A Hugo Post

+

Add Lunr Search to Hugo site -

What’s covered in this post?

-

Hugo ships with out search, yet I love it. However, I’ve managed to integrate lunr search that is supported by the theme Loveit - I’m using on this website. With that being said, this post will cover how I integrate lurn on my website - - for demo, go ahead and search for something on this website :)

-

Install or update!

-

Make sure you update or install before we start.

-

+

Lets add lunr search to hugo

+

String Template in Java 21 -

What is String Template?

-

String Template is a process of substituting values of variables into placeholders in a string. In the past, we relied on string concatenation to format output for print statements. 

-

System.out.println(arr[i] + " " + "From for loop");

-

Now this will change from Java 21 as String Template is here. String templates offer a more elegant approach by letting you embed expressions directly within the string. This improves readability and maintainability of your code.

-

+

String Template is now available with Java 21 as a part of JEP430

+

Calculate Anual Rate Of Return In Python -

Hey there! We’re going to work on a challenge together where we’ll be writing a program called invest.py. The goal of this program is to track the growing amount of an investment over time.

-

We’ll start with an initial deposit, also known as the principal amount. Each year, this amount will increase by a fixed percentage called the annual rate of return.

-

For instance, if we start with a principal amount of $100 and an annual rate of return of 5%, the first year’s increase will be $5. The second year, the increase will be 5% of the new amount, which is $105, resulting in an increase of $5.25.

+

Calculate simple anual rate of return using python programming language

+ @@ -184,7 +139,7 @@

Install or update!

- + + Calculate Anual Rate Of Return In Python - shiva.dev - + @@ -25,7 +25,7 @@ - @@ -250,7 +213,7 @@

Doing with ‘for’ loop

- + + All Posts - shiva.dev - + @@ -19,8 +19,8 @@ - - + +
@@ -106,7 +106,7 @@
@@ -115,7 +115,7 @@ - + + String Template in Java 21 - shiva.dev - + @@ -26,7 +26,7 @@ - @@ -224,7 +209,7 @@

Advantages of String Templates:

- + + All Tags - shiva.dev - + @@ -19,8 +19,8 @@ - - + +
@@ -85,7 +85,7 @@
@@ -94,7 +94,7 @@ - + + + + \ No newline at end of file diff --git a/themes/LoveIt/assets/css/_core/_base.scss b/themes/LoveIt/assets/css/_core/_base.scss index 4be316d..de5f508 100644 --- a/themes/LoveIt/assets/css/_core/_base.scss +++ b/themes/LoveIt/assets/css/_core/_base.scss @@ -1,6 +1,7 @@ html { font-family: $global-font-family; font-weight: $global-font-weight; + color: $global-font-color; font-display: swap; font-size: $global-font-size; line-height: $global-line-height; @@ -59,3 +60,158 @@ body { img { @include object-fit(contain); } + + +// Font settings by lazydeveloper +h1, h2, h3, h4, h5, h6 { + font-family: $global-font-family; + font-size: $global-heading-font-size; + font-weight: $global-heading-font-weight; + color: $global-heading-color; + line-height: 1; // Slightly tighter for headings +} + +.current-section { + margin-top: .5rem; /* Reduced top margin to minimize gap */ + border: 1px solid #ccc; /* Light theme border */ + padding: 1rem; /* Add padding inside the section */ + margin-bottom: 1.5rem; /* Add spacing below the section */ + border-radius: 10px; /* Rounded corners */ + + [theme=dark] & { + border: 1px solid #555; /* Dark theme border */ + } +} + +.current-section .content { + display: none; +} +.current-title { + margin-bottom: 0.5rem; /* Reduced bottom margin to minimize gap */ + font-size: 1.2rem; + font-weight: bold; + border-bottom: 1px solid #ccc; /* Light theme border */ + padding-bottom: 0.5rem; /* Add padding below the title */ + width: 100%; /* Extend the line to touch the outline */ + margin-left: -1rem; /* Align the line with the outline */ + padding-top: 0.5!important; /* Apply py-2 settings */ + padding-bottom: 0.5rem !important; /* Apply py-2 settings */ + padding-right: 1rem !important; /* Apply px-3 settings */ + padding-left: 1rem !important; /* Apply px-3 settings */ + + [theme=dark] & { + border-bottom: 1px solid #555; /* Dark theme border */ + } +} + +.current-posts-item { + margin-top: .5rem; /* Add spacing between posts */ + border: none; /* Removed redundant outline from the post list */ +} + +// to hide the content of the current posts on the homepage +// .current-posts .current-post-item .content { +// display: none !important; /* Ensure .content inside .current-post-item is hidden */ +// } + +.single.summary { + position: relative; /* Needed for absolute positioning of the overlay */ + transition: background-color 0.3s ease; /* Smooth transition for hover effect */ + padding: 1rem; /* Add padding inside the post item */ + border-radius: 8px; /* Round the corners */ + padding-top: 0.5rem; /* Reduced top padding */ +} + +.summary-link-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; /* Place overlay above static content */ + /* Make the overlay transparent, it's just for capturing clicks */ + background-color: rgba(0,0,0,0); +} + +/* Ensure original links are visually below the overlay for click capture */ +.single.summary a:not(.summary-link-overlay) { + position: relative; /* Needed for z-index */ + z-index: 0; /* Place most original links below the overlay */ +} + +/* Specifically raise Author and Category links above the overlay */ +.single.summary .post-author a, +.single.summary .post-category a { + z-index: 2; /* Higher than the overlay (z-index: 1) */ + /* Ensure they remain visually distinct if needed */ + text-decoration: underline; +} + +/* Summary hover effect */ +.single.summary:hover { + background-color: #e0e0e0; /* Light theme hover */ + + [theme=dark] & { + background-color: #3a3a3a; /* Dark theme hover - slightly lighter dark */ + } +} + +.content:not(article.single .content) { + display: none; /* Hide all .content except those inside article.single */ +} + +.single.summary .single-title { + margin-bottom: 0.25rem; /* Reduce bottom margin (adjust value as needed) */ +} + +.single.summary .content p { + /* Inherit font settings from base paragraph styles */ + font-family: inherit; + font-size: 10; + font-weight: inherit; + line-height: 1.4; /* Slightly adjust line-height if needed */ + margin-top: 0; /* Remove top margin */ + margin-bottom: 0.5rem; /* Add some space below description */ + + /* Use meta text color (assuming theme variables) */ + color: $global-font-secondary-color; + [theme=dark] & { + color: $global-font-secondary-color-dark; + } +} + +/* Hover effect for social icons in profile */ +.home-profile .links a { + display: inline-block; /* Ensure proper spacing and hover area */ + margin: 0 0.5rem; /* Add some horizontal spacing */ + color: inherit; /* Inherit default color */ +} + +/* Target the icon inside the link */ +.home-profile .links a i, +.home-profile .links a svg { /* Target both FontAwesome and SVG icons */ + transition: transform 0.2s ease-in-out; /* Smooth transition for scaling */ +} + +.home-profile .links a:hover i, +.home-profile .links a:hover svg { /* Apply effect on icon when link is hovered */ + transform: scale(1.5); /* Slightly enlarge the icon */ +} + +/* Glow effect specifically for GitHub icon in header */ +.menu .menu-item-github i, +.menu .menu-item-github svg { /* Target only GitHub icon */ + transition: transform 0.2s ease-in-out; + display: inline-block; + filter: drop-shadow(0 0 4px #aaa); /* Light theme glow */ + + [theme=dark] & { + filter: drop-shadow(0 0 4px #eee); /* Dark theme glow - lighter gray */ + } +} + +/* Hover effect specifically for GitHub icon */ +.menu .menu-item-github:hover i, +.menu .menu-item-github:hover svg { /* Apply effect on icon when GitHub link is hovered */ + transform: scale(1.2); /* Slightly enlarge the icon */ +} \ No newline at end of file diff --git a/themes/LoveIt/assets/css/_page/_home.scss b/themes/LoveIt/assets/css/_page/_home.scss index 4ca6eb8..39175ba 100644 --- a/themes/LoveIt/assets/css/_page/_home.scss +++ b/themes/LoveIt/assets/css/_page/_home.scss @@ -140,7 +140,7 @@ p { font-size: 1rem; line-height: 1.5; - display: inline; + //display: inline; &::after { content: "\A"; diff --git a/themes/LoveIt/assets/css/_partial/_header.scss b/themes/LoveIt/assets/css/_partial/_header.scss index c4955ca..fbf4e82 100644 --- a/themes/LoveIt/assets/css/_partial/_header.scss +++ b/themes/LoveIt/assets/css/_partial/_header.scss @@ -145,11 +145,14 @@ header { @include transform(rotate(225deg)); } -#header-desktop { +#header-desktop, +#header-mobile { display: block; position: fixed; height: $header-height; line-height: $header-height; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow below the header */ + background-color: #f8f8f8; /* Light gray for light theme */ [data-header-desktop=normal] & { position: static; diff --git a/themes/LoveIt/assets/css/_variables.scss b/themes/LoveIt/assets/css/_variables.scss index b834139..d1ea76b 100644 --- a/themes/LoveIt/assets/css/_variables.scss +++ b/themes/LoveIt/assets/css/_variables.scss @@ -4,17 +4,17 @@ // ========== Global ========== // // Font and Line Height -$global-font-family: 'Raleway', system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default; +$global-font-family: system-ui, -apple-system, Segoe UI, Ubuntu, 'Open Sans', BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default; $global-font-size: 16px; -$global-font-weight: 450; -$global-line-height: 1.5rem; +$global-font-weight: 400; +$global-line-height: 1.2rem; // Color of the background $global-background-color: #fff !default; $global-background-color-dark: #292a2d !default; // Color of the text -$global-font-color: #161209 !default; +$global-font-color: #333333 !default; $global-font-color-dark: #a9a9b3 !default; // Color of the secondary text @@ -32,6 +32,11 @@ $global-link-hover-color-dark: #fff !default; // Color of the border $global-border-color: #f0f0f0 !default; $global-border-color-dark: #363636 !default; + +// Heading styles +$global-heading-font-size: 2rem !default; // Adjusted for headings +$global-heading-font-weight: 400 !default; // Bold for headings +$global-heading-color: #000000 !default; // Black for headings // ========== Global ========== // // ========== Scrollbar ========== // diff --git a/themes/LoveIt/layouts/_default/summary.html b/themes/LoveIt/layouts/_default/summary.html index 8007fca..c2fedfe 100644 --- a/themes/LoveIt/layouts/_default/summary.html +++ b/themes/LoveIt/layouts/_default/summary.html @@ -1,6 +1,9 @@ {{- $params := .Params | merge .Site.Params.page -}}
+ {{- /* Add an overlay link that covers the entire article */ -}} + + {{- /* Featured image */ -}} {{- $image := $params.featuredimagepreview | default $params.featuredimage -}} {{- with .Resources.GetMatch "featured-image" -}} @@ -22,6 +25,14 @@

{{ .Title }}

+ {{- /* Removed conditional display - Description always shown if present */ -}} +
+ {{- /* Display description from front matter if available */ -}} + {{- with .Params.description -}} +

{{ . | safeHTML }}

{{/* Display the description */}} + {{- end -}} +
+ {{- /* Meta */ -}}
{{- $author := $params.author | default .Site.Params.Author.name | default (T "author") -}} @@ -49,18 +60,11 @@

{{- end -}}

- {{- /* Summary content */ -}} -
- {{- with .Summary -}} - {{- dict "Content" . "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}} - {{- else -}} - {{- .Description | safeHTML -}} - {{- end -}} -
- {{- /* Footer */ -}}
- {{ T "readMore" }} + {{- /* {{ T "readMore" }} */ -}} {{/* Commented out the Read More link */}} + {{- /* Commented out the tags section */ -}} + {{- /* {{- with .Params.tags -}} {{- end -}} + */ -}}
\ No newline at end of file diff --git a/themes/LoveIt/layouts/index.html b/themes/LoveIt/layouts/index.html index 7cccb54..0e5d362 100644 --- a/themes/LoveIt/layouts/index.html +++ b/themes/LoveIt/layouts/index.html @@ -32,9 +32,18 @@ {{- else -}} {{- $pages = .Paginate $pages -}} {{- end -}} - {{- range $pages.Pages -}} - {{- .Render "summary" -}} - {{- end -}} + +
+

Recent...

+
+ {{- range $pages.Pages -}} +
+ {{- .Render "summary" -}} +
+ {{- end -}} +
+
+ {{- partial "paginator.html" . -}} {{- end -}} diff --git a/themes/LoveIt/layouts/partials/head/link.html b/themes/LoveIt/layouts/partials/head/link.html index b2f7c57..0fb8047 100644 --- a/themes/LoveIt/layouts/partials/head/link.html +++ b/themes/LoveIt/layouts/partials/head/link.html @@ -16,7 +16,7 @@ {{- end -}} - + {{- if .PrevInSection -}} {{- end -}} diff --git a/themes/LoveIt/layouts/partials/header.html b/themes/LoveIt/layouts/partials/header.html index 9817779..eaa8e8f 100644 --- a/themes/LoveIt/layouts/partials/header.html +++ b/themes/LoveIt/layouts/partials/header.html @@ -39,7 +39,7 @@ {{- if .Site.Menus.main -}} {{- end -}} - {{- if .Site.IsMultiLingual -}} + {{- if hugo.IsMultilingual -}} {{- .Language.LanguageName -}} @@ -149,7 +149,7 @@ - {{- if .Site.IsMultiLingual -}} + {{- if hugo.IsMultilingual -}} {{- .Language.LanguageName -}}