Table of contents
Candidus is a minimalist blogging theme with optional superpowers. It's built using modern and robust web standards and comes with a lot of additional features. This article walks you through the theme itself and some of its features. Please also have a look into Candidus' documentation.
Why Candidus?
In a nutshell: Candidus is
- performant due to its dynamic import system
- lightweight by excluding styles and scripts that are not needed
- feature-rich and comes with a lot of built-in perks
- robust for it uses modern web technologies
- open source so you can make it your Candidus
We've put a lot of effort into designing, building and documenting a theme that would be as powerful as it is easy to use and hope you'll enjoy it.
Design specifications
Fonts
All fonts are part of the theme and hosted on your own server.
- EB Garamond for texts
- Oswald for headings and accents
- Inconsolata for code
Colors
Colors are predefined using SCSS variables. You can change them to your liking by making changes to the src/style/core/variables.scss
file.
- Primary: #3f4d63
- Secondary: #f7c59f
- Recommended Ghost accent color: #bdc5d4
Theme Features
You can find a selection of the most engaging ones below. A more comprehensive list is available in Candidus' documentation pages
Bookmarks
Activate under Post -> Enable bookmarks
Read in documentation
Enabling this feature adds a button to the top navigation bar. When your users select a text section of your articles, they can come back anytime later and keep reading.
Try it yourself: Select this text with your mouse and click on the bookmark icon.
Table of contents
Activate under Post -> Enable table of contents
Read in documentation
This adds a simple ToC to the top of your article. If added, the social share buttons will be moved to the bottom of the page.
Send to ChatGPT
Activate under Post -> Enable chatgpt | Experimental feature
When your readers click on this button, they'll be redirected to ChatGPT with a reference to the article they're currently reading. ChatGPT will then try and summarize the article's content and stand ready to answer a reader's questions at best will.
Alternative newsletters channels
Activate under:
- Homepage -> Select social media when subscription is disabled
- Homepage -> Social media URL when subscription is disabled
Read in Documentation
Instead of subscribing to your newsletter, you can add your most prominent social media channel here, for example X (Twitter) or Dev.to.
Syntax highlighting
Activate using code injection - see below
Candidus uses prism
and prism-autoloader
to load only necessary syntax colors. To make use of this dynamic, it's necessary to use code injection, which is still straightforward enough.
- Go to your blog's settings
- Search for 'Code Injection'
- Paste the following content to activate Syntax highlighting for light and darkmode (or add the
SYNTAX_HIGHLIGHTER
property if you already use code the plugin system)
<script>
window.CANDIDUS = {
SYNTAX_HIGHLIGHTER: {
type: "prism"
},
}
</script>
- Markdown blocks that are annotated with a programming language syntax will now be highlighted automatically
Examples
Block Quotes
Wer reitet so spät durch Nacht und Wind?
Entwickler Clemens, mit einem Pint
Man hört ihn seufzen, ziemlich hard
Sonntag ist's, die Deadline naht
~ Clemens
Gallery
Code blocks
const initIndexedDb = (dbName, stores) => {
return new Promise((resolve, reject) => {
const request = indexedDB.open(dbName, dbVersion);
request.onerror = (event) => {
reject(event.target.error);
};
request.onsuccess = (event) => {
resolve(event.target.result);
};
request.onupgradeneeded = (event) => {
stores.forEach((store) => {
const objectStore = event.target.result.createObjectStore(store.name, {
keyPath: store.keyPath,
});
objectStore.createIndex(store.keyPath, store.keyPath, { unique: true });
});
};
});
};
Miscellaneous
Files
Audio
Drop-down item
This is a drop-down item
A drop-down item is a graphical user interface (GUI) element that provides users with a list of options that becomes visible when they interact with a control, such as clicking on or hovering over a button. This interaction causes the options to "drop down," allowing users to select one from the list. The name derives from this visual behavior of the menu, which appears to drop down from the control itself
Components of a Drop-Down Menu
- Control Element:This is typically a button or text field that displays the currently selected option or prompts the user to make a selection. The control remains visible at all times, showing either the title of the menu or the last selected item.
- Options List:When the control is activated, a list of options appears below it. Users can then click on any option to make a selection, which updates the control to reflect their choice