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

Improve footer socials hoover state, make the structure cleaner

Browse Source
This commit is contained in:
David Lapshin
2024-05-04 22:41:35 +03:00
parent 2ff0428619
commit 86cc9a7ff3
2 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
sass/_footer.scss
View File

@ -33,37 +33,47 @@
#socials {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 1rem;
margin: 1rem 0 0;
gap: 0.5rem;
margin: 0.5rem 0 0;
padding: 0;
li {
display: block;
padding: 0;
padding: 0.25rem 0;
display: inline-flex;
list-style: none;
a {
display: inline-block;
display: inline-flex;
transition: var(--transition);
margin: 0;
background-color: var(--fg-muted-4);
width: 1.5rem;
height: 1.5rem;
content: "";
border-radius: 999px;
padding: 0.5rem;
&:hover {
background-color: var(--primary-color);
box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
i {
background-color: var(--primary-color);
}
}
&:active {
transform: scale(var(--active));
}
i {
display: inline-block;
transition: var(--transition);
background-color: var(--fg-muted-4);
width: 1.5rem;
height: 1.5rem;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}
span {
display: none;
}

5
templates/partials/footer.html
View File

@ -46,7 +46,10 @@
<ul id="socials">
{% for link in config.extra.footer.socials %}
<li>
<a style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")' href="{{ link.url | safe }}" rel="me" title="{{ link.name }}"><span>{{ link.name }}</span></a>
<a href="{{ link.url | safe }}" rel="me" title="{{ link.name }}">
<i style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")'></i>
<span>{{ link.name }}</span>
</a>
</li>
{% endfor %}
</ul>