<div class="social">
<a aria-label='Facebook'
   expr:href='"https://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id + "&amp;target=facebook"' 
   expr:data-url='data:post.url' 
   title='Facebook'>
   <i class='fab fa-facebook-f'/>
</a>
<a aria-label='Twitter' 
   expr:href='"https://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id + "&amp;target=twitter"' 
   expr:data-url='data:post.url' 
   title='Twitter'>
   <i class='fab fa-twitter'/>
</a>
<a aria-label='WhatsApp'
   expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " - " + data:post.url'
   expr:data-url='data:post.url' 
   title='WhatsApp'>
   <i class='fab fa-whatsapp'/>
</a>
<a aria-label='Email' 
   expr:href='"https://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id + "&amp;target=email"' 
   expr:data-url='data:post.url' 
   title='Email'>
   <i class='fab fa-email'/>
</a>
<a aria-label='Pinterest'
   expr:href='"https://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id + "&amp;target=pinterest"' 
   expr:data-url='data:post.url' 
   title='Pinterest'>
   <i class='fab fa-pinterest'/>
</a>
<a aria-label='Reddit'
   expr:href='"https://www.reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title'
   expr:data-url='data:post.url' 
   title='Reddit'>
   <i class='fab fa-reddit'/>
</a>
<a aria-label='Hacker News'
   expr:href='"https://news.ycombinator.com/submitlink?u=" + data:post.url + "&amp;t=" + data:post.title'
   expr:data-url='data:post.url' 
   title='Hacker News'>
   <i class='fab fa-hacker-news'/>
</a>
<a aria-label='Bluesky'
   expr:href='"https://bsky.app/intent/compose?text=" + data:post.title + " " + data:post.url' 
   expr:data-url='data:post.url' 
   title='Bluesky'>
   <i class='fab fa-bluesky'/>
</a>
</div>

:root {
--social: #E0DFDA;
--social-hover: #926C25;
}
.social {
display: flex;
justify-content: space-between;
margin-top: 15px;
padding-top: 10px;
}
.social a {
display: flex;
align-items: center;
text-decoration: none;
color: var(--social);
font-size: 14px;
transition: color 0.2s;
}
.social a:hover,
.social a:hover i {
color: var(--social-hover);
}
.social a i {
font-size: 18px;
margin-right: 5px;
transition: color 0.2s;
}