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 { #socials {
display: flex; display: flex;
flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: baseline; gap: 0.5rem;
gap: 1rem; margin: 0.5rem 0 0;
margin: 1rem 0 0;
padding: 0; padding: 0;
li { li {
display: block; display: inline-flex;
padding: 0;
padding: 0.25rem 0;
list-style: none; list-style: none;
a { a {
display: inline-block; display: inline-flex;
transition: var(--transition); transition: var(--transition);
margin: 0; border-radius: 999px;
background-color: var(--fg-muted-4); padding: 0.5rem;
width: 1.5rem;
height: 1.5rem;
content: "";
&:hover { &:hover {
background-color: var(--primary-color); box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
i {
background-color: var(--primary-color);
}
} }
&:active { &:active {
transform: scale(var(--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 { span {
display: none; display: none;
} }

7
templates/partials/footer.html
View File

@ -46,9 +46,12 @@
<ul id="socials"> <ul id="socials">
{% for link in config.extra.footer.socials %} {% for link in config.extra.footer.socials %}
<li> <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> </li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
</footer> </footer>