fifthtry.github.io/Rocky-theme
Click on mode to switch onto:
Dark Mode
Light Mode
System Mode
Mobile

This is library created for light blog theme. Github URL: sometext here .

Sample Pages:

nav-logo
This component used in header component as your site logo:
with link and src url
-- nav-logo:
src: https://i.imgur.com/aijdJIB.png
link: https://www.fifthtry.com
Output
site-title
This component used in header component as your site/blog title:
with caption
-- site-title: fifthtry
Output
fifthtry
url
Optional argument as url can be added to your site/blog title:
with optional argument ‘url’
-- site-title: fifthtry
url: https://www.fifthtry.com
Output
fifthtry
nav-link
This component used in header component as link into header:
with caption
-- nav-link: Follow us on
Output
Follow us on
link
This argument is optional and used for link component as it’s link url:
with optional argument ‘link’
-- nav-link: Follow us on
link: https://www.fifthtry.com
Output
Follow us on
nav-icon
This component used in header component as social handler icon into header:
with src and icon link url
-- nav-icon:
src: static/twitter.png
link: https://www.twitter.com/fifthtry
Output
width and height
These arguments are optional and can be used as and when required to adjust social icon height and width:
with optional argument ‘width’ & ‘height’
-- head.nav-icon:
src: static/twitter.png
link: https://www.twitter.com/fifthtry
width: 31
height: 27
Output
author-title
This component can be used to show author-title on blog index page:
with caption
-- author-title: John Cartor
Output
John Cartor
link
link can be added to author-title & it is optional attribute:
with link
-- author-title: John Cartor
link: http://www.fifthtry.com
Output
John Cartor
author-bio
This component can be used to show author-bio on blog index page:
with caption
-- author-bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
link
link can be added to author-bio component & it is optional attribute:
with link
-- author-bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
link: http://www.fifthtry.com
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
author-photo
This component used in as author profile image. link is an optional argument:
with src and link url(optional)
-- author-photo:
src: static/author-default.png
link: https://www.fifthtry.com/
Output
width and height
These arguments are optional and can be used as and when required to adjust author profile image height and width:
with optional argument ‘width’ & ‘height’
-- author-photo:
src: static/author-default.png
link: https://www.fifthtry.com/
width: 180
height: 180
Output
author-email
This component can be used to show author-email:
with caption
-- author-email: johncartor@firthtry.com
Output
post-thumbnail
This component used in as post-thumbnail image on index/home page while showing posts list:
with src & link url(optional) attributes: width, height(optional) can be added to adjust image dimentions:
-- post-thumbnail:
link: http://www.post.com
src: static/default-post.png
width: 330
height: 170
Output
timestamp-caption
This component is used to show timestamp-caption, e.g. ‘Published on:’ OR ‘Posted at:’ etc.:
with caption
-- timestamp-caption: Published on
Output
Published on
timestamp
This component is used to show timestamp of the post:
with caption
-- timestamp: 15th Dec 2021
Output
15th Dec 2021
post-title
This component is used to show title of the post:
with caption
-- post-title: The fundamentals of understanding color theory
Output
The fundamentals of understanding color theory
link
This arugument is used to add link to post-title:
with link
-- post-title: The fundamentals of understanding color theory
link: http://www.fifthtry.com
Output
The fundamentals of understanding color theory
post-intro
This component post-intro is used to show few lines of starting content of the post:
with caption
-- post-intro: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
link
This arugument is used to add link to post-intro:
with link
-- post-intro: 
link: http://www.fifthtry.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
post-seperator
This component used in as seperator image after each post, while showing posts list:
with src
-- post-seperator:
src: static/post-seperator.png
Output