From 38cfbd543e6a51d946e78dc5377201c650278e4e Mon Sep 17 00:00:00 2001 From: Evan Luo Date: Wed, 20 Nov 2024 15:09:49 -0500 Subject: [PATCH 1/5] style: enhance link styling and icon behavior #460 #459 - Update link icon to use solid style and add 'link-icon' class - Improve link hover effects with smooth transitions - Adjust padding and text decoration for better visual appearance --- scripts/filters/link-handle.js | 2 +- source/css/common/markdown.styl | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/scripts/filters/link-handle.js b/scripts/filters/link-handle.js index beb44337..2a88d359 100755 --- a/scripts/filters/link-handle.js +++ b/scripts/filters/link-handle.js @@ -33,7 +33,7 @@ hexo.extend.filter.register( if (theme.config.articles.style.link_icon == false) { return `${html}`; } else { - return `${html}`; + return `${html}`; } }, ); diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl index 9cc2f4f2..3892e48d 100755 --- a/source/css/common/markdown.styl +++ b/source/css/common/markdown.styl @@ -31,8 +31,10 @@ // border-bottom 1px solid var(--third-text-color) box-sizing border-box padding-bottom 2px + padding-right 0.2em text-underline-offset 2px text-decoration-color var(--fourth-text-color) + transition: text-decoration-color 0.2s ease .fas, .far, fab margin 0 2px 0 6px @@ -40,13 +42,22 @@ color var(--third-text-color) font-size 0.88rem + .link-icon + transition transform 0.2s ease + &:hover - text-decoration underline + text-decoration underline !important + text-decoration-color var(--primary-color) !important + + .link-icon + transform translate(0.1em, -0.1em) &::after background var(--primary-color) text-decoration underline + + strong color var(--default-text-color) From 84bc1a790b43ec25d0ac0ef959aff7686b67f4ac Mon Sep 17 00:00:00 2001 From: Evan Luo Date: Wed, 20 Nov 2024 15:12:47 -0500 Subject: [PATCH 2/5] feat(config): disable sharp solid version of FontAwesome icons - Set `sharp_solid` option to false in FontAwesome configuration - This change affects the icon style used throughout the theme --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 50f737e1..4ec4c337 100755 --- a/_config.yml +++ b/_config.yml @@ -109,7 +109,7 @@ fontawesome: # Pro v6.2.1 # Duotone version duotone: false # Sharp Solid version - sharp_solid: true + sharp_solid: false # FONTAWESOME <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< end From 5ae567db0fb73c7f67143510830367d04d86f3ab Mon Sep 17 00:00:00 2001 From: Evan Luo Date: Wed, 20 Nov 2024 16:36:51 -0500 Subject: [PATCH 3/5] style: enhance link hover and focus styles in markdown MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Add focus state to link styles for improved accessibility • Apply underline and primary color to both hover and focus states --- source/css/common/markdown.styl | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl index 3892e48d..4a86ddd1 100755 --- a/source/css/common/markdown.styl +++ b/source/css/common/markdown.styl @@ -45,7 +45,8 @@ .link-icon transition transform 0.2s ease - &:hover + &:hover, + &:focus text-decoration underline !important text-decoration-color var(--primary-color) !important From 03b0aa7d8d6b681b53a71bffc50796fa2985725f Mon Sep 17 00:00:00 2001 From: Evan Luo Date: Wed, 20 Nov 2024 16:50:12 -0500 Subject: [PATCH 4/5] style(markdown): adjust link styling and dark mode text color - Modify dark mode fourth text color for better contrast - Adjust padding for links in markdown content - Add specific styling for elements with 'link' class --- source/css/common/colors.styl | 2 +- source/css/common/markdown.styl | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/source/css/common/colors.styl b/source/css/common/colors.styl index 3cb35adb..29036f99 100644 --- a/source/css/common/colors.styl +++ b/source/css/common/colors.styl @@ -73,7 +73,7 @@ $dark-invert-text-color = #373D3F $dark-first-text-color = lighten($dark-default-text-color, 30%) $dark-second-text-color = lighten($dark-default-text-color, 20%) $dark-third-text-color = darken($dark-default-text-color, 20%) -$dark-fourth-text-color = darken($dark-default-text-color, 80%) +$dark-fourth-text-color = darken($dark-default-text-color, 60%) $dark-border-color = rgba(255, 255, 255, 0.08) $dark-selection-color = $selection-color $dark-shadow-color-1 = rgba(255, 255, 255, 0.08) diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl index 4a86ddd1..1915fcf4 100755 --- a/source/css/common/markdown.styl +++ b/source/css/common/markdown.styl @@ -31,11 +31,13 @@ // border-bottom 1px solid var(--third-text-color) box-sizing border-box padding-bottom 2px - padding-right 0.2em text-underline-offset 2px text-decoration-color var(--fourth-text-color) transition: text-decoration-color 0.2s ease + &.link + padding-right 0.1em + .fas, .far, fab margin 0 2px 0 6px position relative From 9a0f5792fc3f1004d9da157b07e4a96de175a862 Mon Sep 17 00:00:00 2001 From: Evan Luo Date: Wed, 20 Nov 2024 16:51:11 -0500 Subject: [PATCH 5/5] style: adjust dark mode text color contrast - Increase darkness of $dark-fourth-text-color for better readability - Change from 60% to 70% darken value for improved contrast in dark mode --- source/css/common/colors.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/css/common/colors.styl b/source/css/common/colors.styl index 29036f99..2e39a663 100644 --- a/source/css/common/colors.styl +++ b/source/css/common/colors.styl @@ -73,7 +73,7 @@ $dark-invert-text-color = #373D3F $dark-first-text-color = lighten($dark-default-text-color, 30%) $dark-second-text-color = lighten($dark-default-text-color, 20%) $dark-third-text-color = darken($dark-default-text-color, 20%) -$dark-fourth-text-color = darken($dark-default-text-color, 60%) +$dark-fourth-text-color = darken($dark-default-text-color, 70%) $dark-border-color = rgba(255, 255, 255, 0.08) $dark-selection-color = $selection-color $dark-shadow-color-1 = rgba(255, 255, 255, 0.08)