84 lines
1.6 KiB
SCSS
84 lines
1.6 KiB
SCSS
.list-socials {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 350px;
|
|
a{
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
li{
|
|
--size-icon: 20px;
|
|
}
|
|
|
|
li[data-socials="youtube"]{
|
|
--size-icon: 26px;
|
|
}
|
|
|
|
|
|
|
|
.icon{
|
|
width: var(--size-icon);
|
|
height: var(--size-icon);
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
svg{
|
|
display: flex;
|
|
align-items: center;
|
|
width: var(--size-icon);
|
|
height: var(--size-icon);
|
|
fill: var(--color-txt);
|
|
|
|
}
|
|
|
|
|
|
|
|
a:hover{
|
|
svg{
|
|
fill: var(--color-txt-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// with text
|
|
// @media #{$small-up}{
|
|
// .footer__socials .list-socials{
|
|
|
|
// display: block;
|
|
|
|
// li{
|
|
// margin-bottom: calc(var(--spacing)*0.25);
|
|
// break-inside: avoid;
|
|
// font-size: var(--fs-small);
|
|
|
|
// }
|
|
|
|
// a{
|
|
// gap: 1ch;
|
|
|
|
// height: calc(var(--spacing)*1);
|
|
// &::after{
|
|
// content: '↗';
|
|
// color: var(--grey-300);
|
|
// }
|
|
|
|
// &:hover{
|
|
// color: var(--color-accent);
|
|
// &::after{
|
|
// color: var(--color-accent);
|
|
// opacity: 0.5;
|
|
// }
|
|
// }
|
|
// }
|
|
// .text{
|
|
// display: block;
|
|
// line-height: 1;
|
|
// }
|
|
// }
|
|
// }
|