@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";
.list {
@extend %flex-list;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.link {
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: var(--spacing-2xs) var(--spacing-xs);
border-radius: fun.convert-px(3);
color: var(--color-fg-inverted);
font-weight: 600;
text-decoration: none;
text-shadow: fun.convert-px(2) fun.convert-px(1) fun.convert-px(1)
var(--color-shadow-dark);
transition: all 0.3s ease-in-out 0s;
@include mix.media("screen") {
@include mix.dimensions("sm") {
font-size: var(--font-size-sm);
}
}
&:hover,
&:focus {
color: hsl(0, 0%, 100%);
transform: translateX(#{fun.convert-px(-3)})
translateY(#{fun.convert-px(-3)});
@include mix.motion("reduce") {
text-decoration: underline;
}
}
&:active {
color: hsl(0, 0%, 100%);
transform: translateX(#{fun.convert-px(2)}) translateY(#{fun.convert-px(2)});
@include mix.motion("reduce") {
transform: none;
}
}
&::before {
display: block;
background-repeat: no-repeat;
content: "";
filter: drop-shadow(
#{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%)
);
width: 2ex;
height: 2ex;
margin-right: var(--spacing-2xs);
}
&--diaspora {
background: hsl(0, 0%, 13%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 3%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 3%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 3%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--email {
background: hsl(0, 0%, 44%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 34%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 34%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 34%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--facebook {
background: hsl(214, 89%, 52%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(214, 89%, 42%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
hsl(214, 89%, 42%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
hsl(214, 89%, 42%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--journal-du-hacker {
background: hsl(210, 24%, 51%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 24%, 41%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
hsl(210, 24%, 41%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
hsl(210, 24%, 41%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--linkedin {
background: hsl(210, 90%, 40%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 90%, 30%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
hsl(210, 90%, 30%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
hsl(210, 90%, 30%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--twitter {
background: hsl(203, 89%, 53%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(203, 89%, 43%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
hsl(203, 89%, 43%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
hsl(203, 89%, 43%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
}