Running Ghost Pro + Lyra Theme
Can anybody let me know how can this reading progress bar and social share can be implemented in Lyra.
Screenshot taken from here (The Ultimate Guide to Writing & Publishing with Markdown)
Running Ghost Pro + Lyra Theme
Can anybody let me know how can this reading progress bar and social share can be implemented in Lyra.
Screenshot taken from here (The Ultimate Guide to Writing & Publishing with Markdown)
Hi @reckless,
implementation is straight forward in lyra theme.
Ghost has a tutorial for implementing a progress bar:
https://ghost.org/tutorials/show-reading-time-progress/
Social Share could look something like this (of course you should remove the inline css and <style>
and paste it into your screen.css accordingly):
<div id="social-container">
<div>Share this<svg viewBox="0 0 24 24"
style="width: 18px; height: 18px;transform: rotate(90deg)">
<path
d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2">
</path>
</svg></div>
<a href="https://facebook.com/sharer/sharer.php?u={{url absolute="true"}}" target="_blank"
rel="noopener" class="platform facebook" title="Auf Facebook teilen">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img">
<g>
<path
d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z"
fill-rule="evenodd"></path>
</g>
</svg>
</a>
<a href="https://twitter.com/intent/tweet/?text={{title}}{{#if @site.twitter}} via {{@site.twitter}}{{/if}}&url={{url absolute="true"}}"
target="_blank" rel="noopener" class="platform twitter" title="Auf Twitter teilen">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img">
<g>
<path
d="M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336"
fill-rule="evenodd"></path>
</g>
</svg>
</a>
</div>
<style>
#social-container {
animation-name: slideIn;
animation-duration: 1s;
position: fixed;
left: 0;
top: 30%;
z-index: 999;
}
#social-container .platform {
width: 48px;
height: 48px;
background: grey;
padding: 8px;
cursor: pointer;
display: flex;
}
#social-container .platform:hover {
width: 56px;
transition: all 0.25s;
}
#social-container .platform:hover svg {
transform: translate(10px);
transition: all 0.25s;
}
#social-container .platform svg {
fill: rgb(255, 255, 255);
}
#social-container .platform.facebook {
background-color: rgb(59, 89, 152);
}
#social-container .platform.twitter {
background: rgb(29, 161, 242);
}
</style>
Thanks, I will check it out.