introducing post info capsule with share links
This commit is contained in:
parent
8265cdfec6
commit
5c856a50ea
50
resources/css/components/post-infos-capsule.css
Normal file
50
resources/css/components/post-infos-capsule.css
Normal 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
3
resources/img/graphic-assets/icone-social-linkedin.svg
Normal file
3
resources/img/graphic-assets/icone-social-linkedin.svg
Normal 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 |
3
resources/img/graphic-assets/icone-social-twitter-x.svg
Normal file
3
resources/img/graphic-assets/icone-social-twitter-x.svg
Normal 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 |
Loading…
Reference in New Issue
Block a user