styles/socials.scss
@use 'sass:map';
@use 'styles/typography';
@mixin core-styles() {
.socialLink {
@include typography.typography('subtitle1');
margin-right: 10px;
line-height: 22px;
font-size: 0;
&:before {
font-family: 'fontello';
font-style: normal;
font-weight: normal;
speak: never;
font-size: 24px;
color: var(--accents-5);
text-decoration: none;
font-variant: normal;
text-transform: none;
-webkit-text-stroke: 1px transparent;
-webkit-font-smoothing: antialiased;
-moz-oxx-font-smoothing: grayscale;
transition: all 0.2s;
cursor: pointer;
}
&:hover:before {
color: transparent;
-webkit-text-stroke: 1px var(--accents-5);
}
}
.youtube:before {
content: '\f166';
}
.website:before {
content: '\1f30e';
}
.email:before {
content: '\f199';
}
.github:before {
content: '\f09b';
}
.linkedin:before {
content: '\f30c';
}
.twitter:before {
content: '\f099';
}
.facebook:before {
content: '\f308';
}
.instagram:before {
content: '\f16d';
}
.indiehackers:before {
content: 'IH';
font-weight: 800;
font-family: var(--font-sans);
margin: 0 -2px;
}
}