alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

🐛 fix: prevent background overflow on link hover (#226)

Browse Source
This commit is contained in:
Óscar Fernández 2023-12-02 19:54:04 +01:00 committed by GitHub
parent dd76c18faa
commit 6b69cf7a3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sass/parts/_misc.scss
View File

@ -78,22 +78,19 @@ a:hover {
color: var(--hover-color); color: var(--hover-color);
} }
a:not(.no-hover-padding)::before { a:not(.no-hover-padding):hover::after {
display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
right: -0.15em; right: -0.15em;
bottom: 0; bottom: 0;
left: -0.15em; left: -0.15em;
opacity: 0;
z-index: -1; z-index: -1;
background-color: var(--primary-color); background-color: var(--primary-color);
max-width: 105%; // This fixes multi-line links (see #225)
content: ""; content: "";
} }
a:not(.no-hover-padding):hover::before {
opacity: 1;
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.list > ul { .list > ul {
margin: 0; margin: 0;