introducing post info capsule with share links

This commit is contained in:
Antoine M 2023-10-26 17:54:18 +02:00
parent 8265cdfec6
commit 5c856a50ea
3 changed files with 56 additions and 0 deletions

View File

@ -0,0 +1,50 @@
.post-infos-capsule {
@apply flex justify-start gap-8;
&__share,
&__publication-date {
@apply bg-white text-primary
rounded-full
my-6
px-6
py-2
w-fit
h-auto
flex justify-center
items-center
font-medium;
}
&__share {
@apply gap-2;
.share-button {
@apply bg-primary w-8 h-8 rounded-full p-4 relative;
transition: transform 0.3s ease-in-out;
&:before {
@apply absolute w-3 h-3 bg-contain bg-center bg-no-repeat;
width: 25px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: '';
}
&:hover {
transform: scale(1.05);
filter: brightness(1.4);
}
}
.share-button--facebook {
&:before {
background-image: url('../resources/img/graphic-assets/icone-social-facebook.svg');
}
}
.share-button--twitter-x {
&:before {
background-image: url('../resources/img/graphic-assets/icone-social-twitter-x.svg');
}
}
.share-button--linkedin {
&:before {
background-image: url('../resources/img/graphic-assets/icone-social-linkedin.svg');
}
}
}
}

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.389" height="19.389" viewBox="0 0 19.389 19.389">
<path id="Icon_awesome-linkedin-in" data-name="Icon awesome-linkedin-in" d="M4.34,19.389H.32V6.445H4.34ZM2.328,4.679a2.339,2.339,0,1,1,2.328-2.35A2.348,2.348,0,0,1,2.328,4.679ZM19.385,19.389H15.374v-6.3c0-1.5-.03-3.428-2.09-3.428-2.09,0-2.41,1.632-2.41,3.32v6.41H6.858V6.445h3.855V8.21h.056a4.224,4.224,0,0,1,3.8-2.09c4.068,0,4.816,2.679,4.816,6.159v7.111Z" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 484 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.162" height="20.742" viewBox="0 0 22.162 20.742">
<path id="path1009" d="M281.554,167.31l8.556,11.44-8.61,9.3h1.938l7.538-8.144,6.091,8.144h6.595l-9.038-12.084,8.014-8.658H300.7l-6.942,7.5-5.609-7.5Zm2.85,1.427h3.03l13.378,17.887h-3.03Z" transform="translate(-281.5 -167.311)" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 353 B