Tellsanguis/blog_tech
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Ajout icônes navbar avec effets hover et recherche locale

Browse source 
- Replace GitHub/Forgejo text links with SVG icons
- Add luminous hover effects on navbar icons
- Add local search plugin with FR/EN support
This commit is contained in:
Tellsanguis 2025-11-22 23:42:51 +01:00
parent 617673d5a9
commit 0a5c9728e6
6 changed files with 684 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/css/custom.css
View file

@ -20,3 +20,89 @@
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
/* ============================================
Navbar Icon Links (GitHub & Forgejo)
============================================ */
.header-github-link::before,
.header-forgejo-link::before {
content: '';
display: flex;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: opacity 0.2s ease, filter 0.2s ease;
}
/* GitHub icon */
.header-github-link::before {
background-image: url('/img/github-mark.svg');
}
/* Forgejo icon */
.header-forgejo-link::before {
background-image: url('/img/forgejo-logo.svg');
}
/* Hide the default link text (if any) */
.header-github-link > span,
.header-forgejo-link > span {
display: none;
}
/* Light theme: invert colors for dark icons to be visible */
[data-theme='light'] .header-github-link::before {
filter: none;
}
/* Dark theme: invert the GitHub icon for visibility */
[data-theme='dark'] .header-github-link::before {
filter: invert(1);
}
/* ============================================
Luminous Glow Hover Effect
============================================ */
.header-github-link:hover::before,
.header-forgejo-link:hover::before {
opacity: 0.8;
}
/* GitHub hover glow effect */
.header-github-link:hover::before {
filter: drop-shadow(0 0 6px rgba(36, 41, 47, 0.6));
}
[data-theme='dark'] .header-github-link:hover::before {
filter: invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}
/* Forgejo hover glow effect - orange/red theme colors */
.header-forgejo-link:hover::before {
filter: drop-shadow(0 0 6px rgba(255, 102, 0, 0.7));
}
[data-theme='dark'] .header-forgejo-link:hover::before {
filter: drop-shadow(0 0 8px rgba(255, 102, 0, 0.8));
}
/* ============================================
Search Bar Styling
============================================ */
/* Ensure search bar fits nicely in navbar */
.navbar__search {
margin-right: 0.5rem;
}
.navbar__search-input {
transition: width 0.3s ease, box-shadow 0.3s ease;
}
.navbar__search-input:focus {
box-shadow: 0 0 8px var(--ifm-color-primary);
}