Add CSS transitions for links and sections to improve UX#11
Open
dikshamagdum15 wants to merge 1 commit intocodingstella:mainfrom
Open
Add CSS transitions for links and sections to improve UX#11dikshamagdum15 wants to merge 1 commit intocodingstella:mainfrom
dikshamagdum15 wants to merge 1 commit intocodingstella:mainfrom
Conversation
📝 WalkthroughWalkthroughA substantial CSS file update introduces a light/dark theme system using CSS custom properties, comprehensive style resets, base component styles, and extensive transition and hover enhancements across the entire design system with improved responsive behavior. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @assets/css/style.css:
- Around line 1054-1484: The .newsletter input:focus rule accidentally contains
the entire stylesheet pasted inside it, breaking parsing; open the rule for
.newsletter input:focus (the selector with properties outline: 2px solid;
outline-offset: 0;) and remove everything between that property's line and its
erroneous closing brace so the focus rule ends immediately after its intended
properties, restoring the standalone stylesheet that follows; ensure you leave a
single closing brace for .newsletter input:focus and do not reintroduce any of
the duplicated blocks (e.g., .light-theme, .dark-theme, :root, resets, header,
hero, blog-card, etc.) inside that selector.
- Around line 1509-1547: The hover transforms and transitions (e.g., .btn,
.btn-primary:hover, .btn-secondary:hover, .blog-card:hover, .blog-topic:hover,
.tags .hashtag:hover, .hero .h1:hover, .hero .h3:hover) should respect users'
reduced-motion preference: add a @media (prefers-reduced-motion: reduce) rule
that overrides these selectors to remove or neutralize transform, transition,
and animation (set transition: none; transform: none; box-shadow: none; and any
animation: none) so the hover effects are disabled for users who request reduced
motion.
🧹 Nitpick comments (1)
assets/css/style.css (1)
1503-1555: Consolidate overlapping transition/hover rules (current behavior is cascade-dependent and inconsistent).
This “PR #2” section redefines transitions/hover transforms already defined earlier (e.g.,.btn,.blog-card,.blog-topic,.footer-link,.hero .h1/.h3). Recommend keeping a single source of truth and avoiding multiple different hover transforms for the same component (.blog-card:hoveristranslateY(-2px)earlier vstranslateY(-5px) scale(1.02)here).Suggested direction:
- Keep component-local transitions near the component styles, or keep a single “transitions” section—but not both.
- Prefer
transition: transform 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3sovertransition: all ...to avoid animating unintended properties.
Comment on lines
1054
to
1484
| .newsletter input:focus { | ||
| outline: 2px solid; | ||
| outline-offset: 0; | ||
| outline-offset: 0;/*-----------------------------------*\ | ||
| #style.css | ||
| \*-----------------------------------*/ | ||
|
|
||
| /** | ||
| * copyright 2022 @codewithsadee | ||
| */ | ||
|
|
||
| /*-----------------------------------*\ | ||
| #CUSTOM PROPERTY | ||
| \*-----------------------------------*/ | ||
|
|
||
| .light-theme { | ||
|
|
||
| /** | ||
| * light theme colors | ||
| */ | ||
|
|
||
| --background-primary: hsl(0, 0%, 100%); | ||
| --background-secondary: hsl(0, 0%, 97%); | ||
|
|
||
| --action-primary: hsl(214, 32%, 91%); | ||
| --action-secondary: hsl(210, 38%, 95%); | ||
|
|
||
| --foreground-primary: hsl(218, 23%, 23%); | ||
| --foreground-secondary: hsl(216, 15%, 52%); | ||
| --foreground-tertiary: hsl(214, 20%, 69%); | ||
|
|
||
| --accent: hsl(229, 76%, 66%); | ||
|
|
||
| } | ||
|
|
||
| .dark-theme { | ||
|
|
||
| /** | ||
| * dark theme colors | ||
| */ | ||
|
|
||
| --background-primary: hsl(218, 23%, 23%); | ||
| --background-secondary: hsl(220, 26%, 14%); | ||
|
|
||
| --action-primary: hsl(216, 15%, 52%); | ||
| --action-secondary: hsl(218, 23%, 23%); | ||
|
|
||
| --foreground-primary: hsl(210, 38%, 95%); | ||
| --foreground-secondary: hsl(211, 25%, 84%); | ||
| --foreground-tertiary: hsl(214, 20%, 69%); | ||
|
|
||
| --accent: hsl(229, 76%, 66%); | ||
|
|
||
| } | ||
|
|
||
| :root { | ||
|
|
||
| /** | ||
| * color | ||
| */ | ||
|
|
||
| --white: hsl(0, 0%, 100%); | ||
|
|
||
| /** | ||
| * typography | ||
| */ | ||
|
|
||
| --fs-base: 0.85rem; | ||
| --fs-1: 1.875rem; | ||
| --fs-2: 1.5rem; | ||
| --fs-3: 1.25rem; | ||
| --fs-4: 0.875rem; | ||
| --fs-5: 0.75rem; | ||
|
|
||
| /** | ||
| * spacing | ||
| */ | ||
|
|
||
| --py: 5rem; | ||
|
|
||
| } | ||
|
|
||
| /*-----------------------------------*\ | ||
| #RESET | ||
| \*-----------------------------------*/ | ||
|
|
||
| *, *::before, *::after { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| a { text-decoration: none; } | ||
|
|
||
| li { list-style: none; } | ||
|
|
||
| img, button { display: block; } | ||
|
|
||
| a, span { display: inline-block; } | ||
|
|
||
| button { | ||
| font: inherit; | ||
| border: none; | ||
| background: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| html { | ||
| font-family: "Inter", sans-serif; | ||
| font-size: var(--fs-base); /* base font-size (0.85rem = 13.6px) */ | ||
| line-height: 1.8; | ||
| } | ||
|
|
||
| :focus { outline-offset: 4px; } | ||
|
|
||
| /** | ||
| * scrollbar style | ||
| */ | ||
|
|
||
| ::-webkit-scrollbar { width: 16px; } | ||
|
|
||
| ::-webkit-scrollbar-thumb { | ||
| background: var(--accent); | ||
| border-radius: 20px; | ||
| border: 4px solid; | ||
| transition: background 0.3s ease; /* added transition */ | ||
| } | ||
|
|
||
| .light-theme::-webkit-scrollbar-thumb { border-color: hsl(0, 0%, 90%); } | ||
|
|
||
| .dark-theme::-webkit-scrollbar-thumb { border-color: hsl(219, 27%, 20%); } | ||
|
|
||
| .light-theme::-webkit-scrollbar-track { background: hsl(0, 0%, 90%); } | ||
|
|
||
| .dark-theme::-webkit-scrollbar-track { background: hsl(219, 27%, 20%); } | ||
|
|
||
| /*-----------------------------------*\ | ||
| #BASE STYLE | ||
| \*-----------------------------------*/ | ||
|
|
||
| .h1, | ||
| .h2, | ||
| .h3, | ||
| .h4 { | ||
| display: block; | ||
| color: var(--foreground-primary); | ||
| transition: color 0.3s ease; /* smooth color transition */ | ||
| } | ||
|
|
||
| .h1 { | ||
| font-size: var(--fs-1); | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| .h2 { | ||
| font-size: var(--fs-2); | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .h3 { | ||
| font-size: var(--fs-3); | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .h4 { | ||
| font-size: var(--fs-4); | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .text-sm { font-size: var(--fs-4); } | ||
|
|
||
| .text-tiny { font-size: var(--fs-5); } | ||
|
|
||
| /*-----------------------------------*\ | ||
| #REUSED STYLE | ||
| \*-----------------------------------*/ | ||
|
|
||
| .container { | ||
| margin-inline: auto; | ||
| margin: auto; /* fallback for margin-inline */ | ||
| padding: 0 15px; | ||
| } | ||
|
|
||
| .btn { | ||
| min-width: 10rem; | ||
| border-radius: 100px; | ||
| transition: all 0.3s ease; /* added transition */ | ||
| } | ||
|
|
||
| .btn-primary { | ||
| background: var(--accent); | ||
| color: var(--white); | ||
| padding: 0.6875rem 1.1875rem; | ||
| } | ||
|
|
||
| .btn-primary:hover { | ||
| background: var(--foreground-secondary); | ||
| color: var(--action-primary); | ||
| } | ||
|
|
||
| .btn-secondary { | ||
| background: var(--action-secondary); | ||
| color: var(--foreground-secondary); | ||
| padding: 0.5rem 1rem; | ||
| border: 3px solid var(--foreground-tertiary); | ||
| } | ||
|
|
||
| .btn-secondary:hover { border-color: var(--accent); } | ||
|
|
||
| /*-----------------------------------*\ | ||
| #Extra style for dark theme | ||
| \*-----------------------------------*/ | ||
|
|
||
| .dark-theme .btn-primary:hover { color: var(--background-primary); } | ||
|
|
||
| .dark-theme .blog-topic { | ||
| background: var(--action-primary); | ||
| color: var(--foreground-secondary); | ||
| transition: all 0.3s ease; /* smooth transition */ | ||
| } | ||
|
|
||
| .dark-theme .blog-topic:hover { | ||
| background: var(--foreground-primary); | ||
| color: var(--action-primary); | ||
| } | ||
|
|
||
| .dark-theme .load-more:hover { color: var(--white); } | ||
|
|
||
| .dark-theme .aside .h2 { color: var(--foreground-primary); } | ||
|
|
||
| /*-----------------------------------*\ | ||
| #HEADER | ||
| \*-----------------------------------*/ | ||
|
|
||
| header { background: var(--background-primary); } | ||
|
|
||
| header .flex-wrapper { display: none; } | ||
|
|
||
| .navbar { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| gap: 15px; | ||
| padding: 15px 0; | ||
| } | ||
|
|
||
| .logo-light, | ||
| .logo-dark { display: none; } | ||
|
|
||
| .light-theme .logo-light, | ||
| .dark-theme .logo-dark { display: block; } | ||
|
|
||
| header .btn-group { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 15px; | ||
| } | ||
|
|
||
| .theme-btn-mobile, | ||
| .nav-menu-btn, | ||
| .nav-close-btn { | ||
| background: var(--action-secondary); | ||
| color: var(--foreground-tertiary); | ||
| width: 40px; | ||
| height: 40px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 50%; | ||
| font-size: 25px; | ||
| transition: all 0.3s ease; /* smooth hover transition */ | ||
| } | ||
|
|
||
| :is(.theme-btn-mobile, | ||
| .nav-menu-btn, | ||
| .nav-close-btn):hover { | ||
| background: var(--accent); | ||
| color: var(--white); | ||
| } | ||
|
|
||
| .theme-btn-mobile ion-icon { display: none; } | ||
|
|
||
| .theme-btn-mobile.light .sun, | ||
| .theme-btn-mobile.dark .moon { display: block; } | ||
|
|
||
| .mobile-nav { | ||
| position: fixed; | ||
| inset: 0; | ||
| background: var(--background-primary); | ||
| padding: 70px 20px; | ||
| overflow: auto; | ||
| overscroll-behavior: contain; | ||
| transform: translateX(100%); | ||
| visibility: hidden; | ||
| transition: transform 0.5s cubic-bezier(1, 0, 0.30, 0.70), visibility 0.5s; | ||
| z-index: 10; | ||
| } | ||
|
|
||
| .mobile-nav.active { | ||
| transform: translateX(0); | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .nav-close-btn { | ||
| position: absolute; | ||
| top: 20px; | ||
| right: 20px; | ||
| } | ||
|
|
||
| .mobile-nav .wrapper { | ||
| padding-bottom: 1.25rem; | ||
| margin-bottom: 1.25rem; | ||
| border-bottom: 1px solid var(--action-primary); | ||
| transition: border-color 0.3s ease; | ||
| } | ||
|
|
||
| .mobile-nav .nav-title { margin-bottom: 1rem; } | ||
|
|
||
| .mobile-nav .nav-item { margin-bottom: 0.5rem; } | ||
|
|
||
| .mobile-nav .nav-link { | ||
| font-size: var(--fs-3); | ||
| color: var(--foreground-secondary); | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .mobile-nav .nav-link:hover { color: var(--accent); } | ||
|
|
||
| /*-----------------------------------*\ | ||
| #HERO SECTION | ||
| \*-----------------------------------*/ | ||
|
|
||
| .hero { | ||
| background: var(--background-primary); | ||
| padding-top: 2rem; | ||
| padding-bottom: var(--py); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .hero .h1 { | ||
| margin-bottom: 1rem; | ||
| line-height: 1.6; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .hero b { | ||
| color: var(--accent); | ||
| font-weight: inherit; | ||
| } | ||
|
|
||
| .hero .h3 { | ||
| color: var(--foreground-secondary); | ||
| margin-bottom: 2rem; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .hero .btn-group { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-wrap: wrap; | ||
| gap: 15px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .hero .right { display: none; } | ||
|
|
||
| /*-----------------------------------*\ | ||
| #BLOG SECTION | ||
| \*-----------------------------------*/ | ||
|
|
||
| .main { | ||
| background: var(--background-secondary); | ||
| padding: var(--py) 0; | ||
| } | ||
|
|
||
| .blog .h2 { | ||
| line-height: 1.3; | ||
| margin-bottom: 3rem; | ||
| text-align: center; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .blog-card-group { margin-bottom: 3rem; } | ||
|
|
||
| .blog-card { | ||
| background: var(--background-primary); | ||
| padding: 10px; | ||
| margin-bottom: 1rem; | ||
| border-radius: 10px; | ||
| box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.05); | ||
| transition: all 0.3s ease; /* added smooth transition */ | ||
| } | ||
|
|
||
| .blog-card:hover { | ||
| transform: translateY(-2px); | ||
| box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.1); | ||
| } | ||
|
|
||
| .blog-card-banner { display: none; } | ||
|
|
||
| .blog-content-wrapper { padding: 10px 5px; } | ||
|
|
||
| .blog-topic { | ||
| background: var(--action-secondary); | ||
| color: var(--foreground-secondary); | ||
| font-weight: 600; | ||
| padding: 0.25rem 1rem; | ||
| border-radius: 5px; | ||
| margin-bottom: 1rem; | ||
| transition: all 0.3s ease; /* added transition */ | ||
| } | ||
|
|
||
| .blog-topic:hover { | ||
| background: var(--foreground-secondary); | ||
| color: var(--action-secondary); | ||
| } | ||
|
|
||
| .blog-card .h3 { | ||
| line-height: 1.4; | ||
| margin-bottom: 1rem; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .blog-card .h3:hover { | ||
| text-decoration: underline; | ||
| text-decoration-thickness: 2px; | ||
| } | ||
|
|
||
| /*----------------------------- End of sample for transitions -----------------------------*/ | ||
|
|
||
|
|
||
| } |
There was a problem hiding this comment.
Fix invalid CSS: entire stylesheet is accidentally embedded inside .newsletter input:focus block (will break parsing).
Right now, after outline-offset: 0; (Line 1056) you’ve pasted a full copy of style.css inside the selector block; browsers will treat this as invalid and may ignore the rest of the file.
Proposed fix (restore focus rule, remove the accidental embedded stylesheet)
.newsletter input:focus {
- outline: 2px solid;
- outline-offset: 0;/*-----------------------------------*\
- #style.css
-\*-----------------------------------*/
-
-/**
- * copyright 2022 @codewithsadee
- */
-
-/*-----------------------------------*\
- #CUSTOM PROPERTY
-\*-----------------------------------*/
-
-.light-theme {
- ...
-}
-...
-/*----------------------------- End of sample for transitions -----------------------------*/
-
- }
+ outline: 2px solid var(--accent);
+ outline-offset: 4px;
+}Delete everything that was pasted between
outline-offset: ...and the closing}(Line 1484). The theme/reset/base blocks already exist earlier in the file.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .newsletter input:focus { | |
| outline: 2px solid; | |
| outline-offset: 0; | |
| outline-offset: 0;/*-----------------------------------*\ | |
| #style.css | |
| \*-----------------------------------*/ | |
| /** | |
| * copyright 2022 @codewithsadee | |
| */ | |
| /*-----------------------------------*\ | |
| #CUSTOM PROPERTY | |
| \*-----------------------------------*/ | |
| .light-theme { | |
| /** | |
| * light theme colors | |
| */ | |
| --background-primary: hsl(0, 0%, 100%); | |
| --background-secondary: hsl(0, 0%, 97%); | |
| --action-primary: hsl(214, 32%, 91%); | |
| --action-secondary: hsl(210, 38%, 95%); | |
| --foreground-primary: hsl(218, 23%, 23%); | |
| --foreground-secondary: hsl(216, 15%, 52%); | |
| --foreground-tertiary: hsl(214, 20%, 69%); | |
| --accent: hsl(229, 76%, 66%); | |
| } | |
| .dark-theme { | |
| /** | |
| * dark theme colors | |
| */ | |
| --background-primary: hsl(218, 23%, 23%); | |
| --background-secondary: hsl(220, 26%, 14%); | |
| --action-primary: hsl(216, 15%, 52%); | |
| --action-secondary: hsl(218, 23%, 23%); | |
| --foreground-primary: hsl(210, 38%, 95%); | |
| --foreground-secondary: hsl(211, 25%, 84%); | |
| --foreground-tertiary: hsl(214, 20%, 69%); | |
| --accent: hsl(229, 76%, 66%); | |
| } | |
| :root { | |
| /** | |
| * color | |
| */ | |
| --white: hsl(0, 0%, 100%); | |
| /** | |
| * typography | |
| */ | |
| --fs-base: 0.85rem; | |
| --fs-1: 1.875rem; | |
| --fs-2: 1.5rem; | |
| --fs-3: 1.25rem; | |
| --fs-4: 0.875rem; | |
| --fs-5: 0.75rem; | |
| /** | |
| * spacing | |
| */ | |
| --py: 5rem; | |
| } | |
| /*-----------------------------------*\ | |
| #RESET | |
| \*-----------------------------------*/ | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| a { text-decoration: none; } | |
| li { list-style: none; } | |
| img, button { display: block; } | |
| a, span { display: inline-block; } | |
| button { | |
| font: inherit; | |
| border: none; | |
| background: none; | |
| cursor: pointer; | |
| } | |
| html { | |
| font-family: "Inter", sans-serif; | |
| font-size: var(--fs-base); /* base font-size (0.85rem = 13.6px) */ | |
| line-height: 1.8; | |
| } | |
| :focus { outline-offset: 4px; } | |
| /** | |
| * scrollbar style | |
| */ | |
| ::-webkit-scrollbar { width: 16px; } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--accent); | |
| border-radius: 20px; | |
| border: 4px solid; | |
| transition: background 0.3s ease; /* added transition */ | |
| } | |
| .light-theme::-webkit-scrollbar-thumb { border-color: hsl(0, 0%, 90%); } | |
| .dark-theme::-webkit-scrollbar-thumb { border-color: hsl(219, 27%, 20%); } | |
| .light-theme::-webkit-scrollbar-track { background: hsl(0, 0%, 90%); } | |
| .dark-theme::-webkit-scrollbar-track { background: hsl(219, 27%, 20%); } | |
| /*-----------------------------------*\ | |
| #BASE STYLE | |
| \*-----------------------------------*/ | |
| .h1, | |
| .h2, | |
| .h3, | |
| .h4 { | |
| display: block; | |
| color: var(--foreground-primary); | |
| transition: color 0.3s ease; /* smooth color transition */ | |
| } | |
| .h1 { | |
| font-size: var(--fs-1); | |
| font-weight: 900; | |
| } | |
| .h2 { | |
| font-size: var(--fs-2); | |
| font-weight: 700; | |
| } | |
| .h3 { | |
| font-size: var(--fs-3); | |
| font-weight: 700; | |
| } | |
| .h4 { | |
| font-size: var(--fs-4); | |
| font-weight: 700; | |
| } | |
| .text-sm { font-size: var(--fs-4); } | |
| .text-tiny { font-size: var(--fs-5); } | |
| /*-----------------------------------*\ | |
| #REUSED STYLE | |
| \*-----------------------------------*/ | |
| .container { | |
| margin-inline: auto; | |
| margin: auto; /* fallback for margin-inline */ | |
| padding: 0 15px; | |
| } | |
| .btn { | |
| min-width: 10rem; | |
| border-radius: 100px; | |
| transition: all 0.3s ease; /* added transition */ | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: var(--white); | |
| padding: 0.6875rem 1.1875rem; | |
| } | |
| .btn-primary:hover { | |
| background: var(--foreground-secondary); | |
| color: var(--action-primary); | |
| } | |
| .btn-secondary { | |
| background: var(--action-secondary); | |
| color: var(--foreground-secondary); | |
| padding: 0.5rem 1rem; | |
| border: 3px solid var(--foreground-tertiary); | |
| } | |
| .btn-secondary:hover { border-color: var(--accent); } | |
| /*-----------------------------------*\ | |
| #Extra style for dark theme | |
| \*-----------------------------------*/ | |
| .dark-theme .btn-primary:hover { color: var(--background-primary); } | |
| .dark-theme .blog-topic { | |
| background: var(--action-primary); | |
| color: var(--foreground-secondary); | |
| transition: all 0.3s ease; /* smooth transition */ | |
| } | |
| .dark-theme .blog-topic:hover { | |
| background: var(--foreground-primary); | |
| color: var(--action-primary); | |
| } | |
| .dark-theme .load-more:hover { color: var(--white); } | |
| .dark-theme .aside .h2 { color: var(--foreground-primary); } | |
| /*-----------------------------------*\ | |
| #HEADER | |
| \*-----------------------------------*/ | |
| header { background: var(--background-primary); } | |
| header .flex-wrapper { display: none; } | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 15px; | |
| padding: 15px 0; | |
| } | |
| .logo-light, | |
| .logo-dark { display: none; } | |
| .light-theme .logo-light, | |
| .dark-theme .logo-dark { display: block; } | |
| header .btn-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .theme-btn-mobile, | |
| .nav-menu-btn, | |
| .nav-close-btn { | |
| background: var(--action-secondary); | |
| color: var(--foreground-tertiary); | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 50%; | |
| font-size: 25px; | |
| transition: all 0.3s ease; /* smooth hover transition */ | |
| } | |
| :is(.theme-btn-mobile, | |
| .nav-menu-btn, | |
| .nav-close-btn):hover { | |
| background: var(--accent); | |
| color: var(--white); | |
| } | |
| .theme-btn-mobile ion-icon { display: none; } | |
| .theme-btn-mobile.light .sun, | |
| .theme-btn-mobile.dark .moon { display: block; } | |
| .mobile-nav { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--background-primary); | |
| padding: 70px 20px; | |
| overflow: auto; | |
| overscroll-behavior: contain; | |
| transform: translateX(100%); | |
| visibility: hidden; | |
| transition: transform 0.5s cubic-bezier(1, 0, 0.30, 0.70), visibility 0.5s; | |
| z-index: 10; | |
| } | |
| .mobile-nav.active { | |
| transform: translateX(0); | |
| visibility: visible; | |
| } | |
| .nav-close-btn { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| } | |
| .mobile-nav .wrapper { | |
| padding-bottom: 1.25rem; | |
| margin-bottom: 1.25rem; | |
| border-bottom: 1px solid var(--action-primary); | |
| transition: border-color 0.3s ease; | |
| } | |
| .mobile-nav .nav-title { margin-bottom: 1rem; } | |
| .mobile-nav .nav-item { margin-bottom: 0.5rem; } | |
| .mobile-nav .nav-link { | |
| font-size: var(--fs-3); | |
| color: var(--foreground-secondary); | |
| transition: color 0.3s ease; | |
| } | |
| .mobile-nav .nav-link:hover { color: var(--accent); } | |
| /*-----------------------------------*\ | |
| #HERO SECTION | |
| \*-----------------------------------*/ | |
| .hero { | |
| background: var(--background-primary); | |
| padding-top: 2rem; | |
| padding-bottom: var(--py); | |
| text-align: center; | |
| } | |
| .hero .h1 { | |
| margin-bottom: 1rem; | |
| line-height: 1.6; | |
| transition: color 0.3s ease; | |
| } | |
| .hero b { | |
| color: var(--accent); | |
| font-weight: inherit; | |
| } | |
| .hero .h3 { | |
| color: var(--foreground-secondary); | |
| margin-bottom: 2rem; | |
| transition: color 0.3s ease; | |
| } | |
| .hero .btn-group { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| text-align: center; | |
| } | |
| .hero .right { display: none; } | |
| /*-----------------------------------*\ | |
| #BLOG SECTION | |
| \*-----------------------------------*/ | |
| .main { | |
| background: var(--background-secondary); | |
| padding: var(--py) 0; | |
| } | |
| .blog .h2 { | |
| line-height: 1.3; | |
| margin-bottom: 3rem; | |
| text-align: center; | |
| transition: color 0.3s ease; | |
| } | |
| .blog-card-group { margin-bottom: 3rem; } | |
| .blog-card { | |
| background: var(--background-primary); | |
| padding: 10px; | |
| margin-bottom: 1rem; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.05); | |
| transition: all 0.3s ease; /* added smooth transition */ | |
| } | |
| .blog-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.1); | |
| } | |
| .blog-card-banner { display: none; } | |
| .blog-content-wrapper { padding: 10px 5px; } | |
| .blog-topic { | |
| background: var(--action-secondary); | |
| color: var(--foreground-secondary); | |
| font-weight: 600; | |
| padding: 0.25rem 1rem; | |
| border-radius: 5px; | |
| margin-bottom: 1rem; | |
| transition: all 0.3s ease; /* added transition */ | |
| } | |
| .blog-topic:hover { | |
| background: var(--foreground-secondary); | |
| color: var(--action-secondary); | |
| } | |
| .blog-card .h3 { | |
| line-height: 1.4; | |
| margin-bottom: 1rem; | |
| transition: color 0.3s ease; | |
| } | |
| .blog-card .h3:hover { | |
| text-decoration: underline; | |
| text-decoration-thickness: 2px; | |
| } | |
| /*----------------------------- End of sample for transitions -----------------------------*/ | |
| } | |
| .newsletter input:focus { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 4px; | |
| } |
🤖 Prompt for AI Agents
In @assets/css/style.css around lines 1054 - 1484, The .newsletter input:focus
rule accidentally contains the entire stylesheet pasted inside it, breaking
parsing; open the rule for .newsletter input:focus (the selector with properties
outline: 2px solid; outline-offset: 0;) and remove everything between that
property's line and its erroneous closing brace so the focus rule ends
immediately after its intended properties, restoring the standalone stylesheet
that follows; ensure you leave a single closing brace for .newsletter
input:focus and do not reintroduce any of the duplicated blocks (e.g.,
.light-theme, .dark-theme, :root, resets, header, hero, blog-card, etc.) inside
that selector.
Comment on lines
+1509
to
+1547
| /* Buttons hover */ | ||
| .btn, .hero .btn-primary, .btn-secondary { | ||
| transition: all 0.3s ease-in-out; | ||
| } | ||
| .btn-primary:hover { | ||
| transform: translateY(-3px) scale(1.05); | ||
| box-shadow: 0 8px 15px rgba(0,0,0,0.2); | ||
| } | ||
| .btn-secondary:hover { | ||
| transform: translateY(-2px) scale(1.03); | ||
| box-shadow: 0 6px 12px rgba(0,0,0,0.15); | ||
| } | ||
|
|
||
| /* Blog cards */ | ||
| .blog-card { | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
| } | ||
| .blog-card:hover { | ||
| transform: translateY(-5px) scale(1.02); | ||
| box-shadow: 0 15px 20px rgba(0,0,0,0.15); | ||
| } | ||
|
|
||
| /* Blog topics and hashtags */ | ||
| .blog-topic, .tags .hashtag { | ||
| transition: all 0.3s ease-in-out; | ||
| } | ||
| .blog-topic:hover, .tags .hashtag:hover { | ||
| transform: scale(1.05); | ||
| background-color: var(--accent); | ||
| color: var(--white); | ||
| } | ||
|
|
||
| /* Hero headings hover */ | ||
| .hero .h1, .hero .h3 { | ||
| transition: color 0.3s ease; | ||
| } | ||
| .hero .h1:hover, .hero .h3:hover { | ||
| color: var(--accent); | ||
| } |
There was a problem hiding this comment.
Add prefers-reduced-motion to disable transforms/transitions for users who request it.
Right now hover transforms/scale are always on.
Proposed addition
+@media (prefers-reduced-motion: reduce) {
+ *, *::before, *::after {
+ transition: none !important;
+ animation: none !important;
+ scroll-behavior: auto !important;
+ }
+}🤖 Prompt for AI Agents
In @assets/css/style.css around lines 1509 - 1547, The hover transforms and
transitions (e.g., .btn, .btn-primary:hover, .btn-secondary:hover,
.blog-card:hover, .blog-topic:hover, .tags .hashtag:hover, .hero .h1:hover,
.hero .h3:hover) should respect users' reduced-motion preference: add a @media
(prefers-reduced-motion: reduce) rule that overrides these selectors to remove
or neutralize transform, transition, and animation (set transition: none;
transform: none; box-shadow: none; and any animation: none) so the hover effects
are disabled for users who request reduced motion.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds smooth CSS transitions to links and sections to improve the site's user experience.
Reason for raising this issue: I wanted to learn and improve my skills by applying CSS transitions.
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.