This is the page that visitors see when they open your website. Your chance to make a good and lasting first impression. Most sites just display a list of recent posts. Elegant goes the extra mile. Check this out

You can write up your own About me section using LANDING_PAGE_ABOUT variable in your configuration. It is a dictionary that has two keys title and details. Value of title is displayed in the header of the home page, like in the above example it is “I design and build software products for iOS and OSX”. details is the text that appears under “About me” heading.

Projects list is read from PROJECTS. It is an array of dictionaries. Each dictionary has three keys, name which will have name of your project, url which will have URL of the project, and description which will have the description of the project. You can define as many projects as you want. Here is an example,

1
2
3
4
5
6
7
8
9

PROJECTS=[{'name':'Logpad + Duration','url':'https://github.com/talha131/logpad-plus-duration#logpad--duration','description':'Vim plugin to emulate Windows Notepad logging feature,'' and log duration of each entry'},{'name':'Elegant Theme for Pelican','url':'http://oncrashreboot.com/pelican-elegant','description':'A clean and distraction free theme, with search and a'' lot more unique features, using Jinja2 and Bootstrap'}]

Mailchimp has become the preferred newsletter service. Elegant shows a form to subscribe to your newsletter, above the fold, in the right section of every article. Increased visibility is said to increase number of subscribers.

You need to put your Mailchimp form action URL in MAILCHIMP_FORM_ACTION in your configuration file. You can also define EMAIL_SUBSCRIPTION_LABEL, EMAIL_FIELD_PLACEHOLDER and SUBSCRIBE_BUTTON_TITLE to customize user experience.

Readers use scroll bar to track their progress when reading inside their browsers. Very often comments take up more space than the actual article. When comments take up more space, it throws the scroll bar proportion off and reader cannot judge his progress correctly. Hacker News hosted a discussion on this topic.

tons of online articles list comments on the same page, so the scroll bar is almost a negative incentive to keep reading.
“I’ve read this much of the article and I’m only 1/20th of the way down?” [user stops reading, unaware that there’s 450 comments and the article is actually pretty short]

Elegant keeps the comments section hidden by default. Reader can hide and unhide the section by clicking on the comments section.

Instead of just throwing in comments’ form at the end of every article, Elegant offers you a way to write introductory text that would appear before comments. Assign your message to COMMENTS_INTRO in your configuration file.

Write whatever you think is appropriate to invite the visitor to comment. Be creative! You can even put a link to your twitter account or newsletter there. Here is what I have chosen to say to my visitors.

Readers of an article on your site usually look for other articles on the same topic. Categories and tags are a way of showing them related articles. Elegant displays the count of articles that you have written in a category or tag in a non-intrusive manner.

Every category and tag has the count of articles in superscript. So if you have written three articles in the C++ category or tag, it will have 3 in the superscript. This way visitor will know you have written other articles too on the same topic.

Some sites put site title first and article title later in the <title> tag. There is a problem with this approach. When you open too many tabs, browser delimits tab’s title from the end. In such cases, only the first few words or even letters of the <title> are left visible.

If visitor has opened several tabs from your website, all tabs will have “Site Name…” title. User will need to click on each tab to identify his required tab from the content. But with Elegant’s approach article title will always be visible, and reader will have less difficultly in identifying the tab he is after.

Putting site title before the article title increases your site name visibility. Elegant achieves this by putting site name in the top navigation bar of every page, where it always stays above the fold.

One way to keep the visitor engaged is to show links to articles published before and after the article visitor is currently reading. Elegant shows newer article on the right hand side and older article on the left hand side at the bottom of every article.

Most of the content on web is written in left to right languages. In these languages pages are placed from left to right. It seemed natural to use the same order in Elegant.

Most Pelican themes pass article URL to Disqus as the Disqus identifier. This puts you at a disadvantage. If you are forced to change URL of an article you will lose Disqus discussion for that article because Disqus identifier for the article will change too.

Elegant offers you disqus_identifier property that you can set in your article meta data. Set it to any unique string you want. It won’t be effected by the article URL.

If you choose not to use disqus_identifier, Elegant defaults to article URL and passes it on to Disqus.

The idea behind Elegant’s design is to make reading a clean and distraction free experience. Table of contents is important but it is not part of the article content. Therefore, Elegant pushes out table of content to the left of the article’s main content. Its font size is relatively smaller. This way, table of content stays visible for navigation but reader’s attention to the article stays unaffected.

To utilise this feature, you need to use extract_toc plugin. Elegant encloses the table of content in <nav> tag for semantics.

Pelican lets you define title of your article in the meta data. Elegant adds subtitle support. Just define subtitle in your article’s meta data and it will appear along with your title. Here is an example,

Article subtitle is displayed with the title in every list. To keep it visibly separate from title, subtitle is enclosed in <small> tag. When visible cue cannot be used, like in the title attribute of html anchor tag <a>, a hyphen is inserted between them.

Elegant uses commonly available typefaces in every style rule. It has a list of closely matching fonts in the fallback list. For examples Baskerville is the first choice for headings. But if reader does not have Baskerville installed, Garamond will be used. If that too fails then Georgia will be used.

The license requires that you give credit to me, Talha Mansoor, as the author of the Elegant theme on every site that uses this theme. I have placed the attribution in the footer of every page. Do not remove it. If you need to remove or change the style of the attribution, please get in touch with me first.

Along with this attribution clause, Elegant theme is licensed under The MIT License.

If you use my theme, I would love to hear from you. Get in touch and let me know about it. I may link to your site too.