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

Reduce nesting depth in _footer.scss

Browse Source
This commit is contained in:
daudix
2024-08-27 04:36:30 +03:00
parent eeb255ff13
commit 95a80e4c07
1 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
sass/_footer.scss
View File

@ -20,37 +20,37 @@
gap: 0.25rem; gap: 0.25rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
}
li { li {
display: flex; display: flex;
line-height: 1.25; line-height: 1.25;
list-style: none; list-style: none;
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
flex: 0 0 100%; flex: 0 0 100%;
} }
}
a { a {
flex: 1; flex: 1;
transition: var(--transition); transition: var(--transition);
border-radius: 999px; border-radius: 999px;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
color: var(--fg-muted-4); color: var(--fg-muted-4);
line-height: 1.25; line-height: 1.25;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--contrast-color); color: var(--contrast-color);
text-decoration: none; text-decoration: none;
} }
&:active { &:active {
transform: scale(var(--active)); transform: scale(var(--active));
}
}
} }
} }
} }
@ -66,36 +66,36 @@
li { li {
line-height: 0; line-height: 0;
list-style: none; list-style: none;
}
a { a {
display: block; display: block;
transition: var(--transition); transition: var(--transition);
border-radius: 999px; border-radius: 999px;
padding: 0.5rem; padding: 0.5rem;
&:hover { &:hover {
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
.icon {
background-color: var(--primary-color);
}
}
&:active {
transform: scale(var(--active));
}
.icon { .icon {
transition: var(--transition); background-color: var(--primary-color);
background-color: var(--fg-muted-4);
width: 1.5rem;
height: 1.5rem;
} }
}
span { &:active {
display: none; transform: scale(var(--active));
} }
.icon {
transition: var(--transition);
background-color: var(--fg-muted-4);
width: 1.5rem;
height: 1.5rem;
}
span {
display: none;
} }
} }
} }