ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 07:25:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styling for share icons

Browse source
This commit is contained in:
tsmitty11 2023-05-18 18:16:56 +02:00
parent e65a91b777
commit c8b2297f78
1 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/layouts/_default/single.html
View file

@ -20,9 +20,9 @@
{{ partial "sidebar" . }} {{ partial "sidebar" . }}
<div class="share-links"> <div class="share-links">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener">Share on Facebook</a> <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener"><i class="icon-facebook"></i></a>
<a href="https://twitter.com/intent/tweet?url={{ .Permalink }}" target="_blank" rel="noopener">Share on Twitter</a> <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}" target="_blank" rel="noopener"><i class="icon-twitter"></i></a>
<a href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}" target="_blank" rel="noopener">Share on LinkedIn</a> <a href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}" target="_blank" rel="noopener"><i class="icon-linkedin"></i></a>
</div> </div>
</div> </div>
@ -53,15 +53,34 @@
.share-links { .share-links {
position: fixed; position: fixed;
left: 0; left: -15px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
z-index: 100;
} }
.share-links a { .share-links a {
margin-bottom: 10px; margin-bottom: 2px;
border: 1px solid #949494;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #1a1a1a;
}
.share-links a:hover {
color: #1a1a1a;
background-color: #00ffd0;
}
.share-links a i {
display: inline-block;
vertical-align: middle;
} }
</style> </style>