hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fun footer links hover effect, re-nest nav styles

Browse Source
This commit is contained in:
daudix
2024-06-18 06:28:33 +03:00
parent 17634a94da
commit 1f9fe1636d
2 changed files with 198 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
sass/_footer.scss
View File

@ -21,30 +21,38 @@
margin: 0;
padding: 0;
width: min(calc(var(--container-width) / 1.5), 100%);
}
li {
display: flex;
line-height: normal;
list-style: none;
}
li {
display: flex;
line-height: normal;
list-style: none;
a {
transition: var(--transition);
border-radius: 999px;
padding: 0.5rem 0.75rem;
color: var(--fg-muted-4);
text-decoration: none;
&:first-of-type a {
border-radius: 1.125rem 0 0 1.125rem;
}
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color);
color: var(--fg-color);
text-decoration: none;
}
&:last-of-type a {
border-radius: 0 1.125rem 1.125rem 0;
}
&:active {
transform: scale(var(--active));
a {
transition: var(--transition);
padding: 0.5rem 0.75rem;
color: var(--fg-muted-4);
text-decoration: none;
&:hover {
box-shadow: var(--edge-highlight);
border-radius: 1.125rem;
background-color: var(--primary-color);
color: var(--fg-color);
text-decoration: none;
}
&:active {
transform: scale(var(--active));
}
}
}
}
}