Simplix

👋 Hi, there! This is my first Jekyll theme. It consists of simple layouts and available in both dark and light mode.

Supported features

Besides styling basic HTML elements and code syntax highlighting, this theme also has many more features:

Dark theme support
Mobile-friendly layout
Emphasize blockquote based on their alert type
Code preview for HTML/ Markdown/ ABCJS/ Mermaid/ PlantUML code
Support for complex table and third-party media
Math expression support using KaTeX
Compatibility on IE11 (although no one asked 🐧)

Installation

Install as a gem-based theme

Add this line to your site's `Gemfile`:
```
gem "jekyll-theme-simplix"</span>
```
Then add this line to your site's `_config.yml`:
```
theme: jekyll-theme-simplix
```
Run this command to install missing dependencies:
```
bundle install
```

Install as a remote theme

Add this line to your site's `Gemfile` (make sure to remove/comment the line of the first step in the gem-based option):
```
gem "jekyll-remote-theme"
```

Then add these options in `_config.yml`:

remote_theme: lithier94675/jekyll-theme-simplix

plugins:
  \- jekyll-remote-theme

Run this command and you are ready to go!
```
bundle install
```

Install by copying files (not recommended)

Simply clone this repository or copy some/ all of its files into your site folder. You should update them manually as these files don't rely on RubyGems or Git system.

Customization

To change specific color based on page layout (home or post) and page theme (light or dark), add these lines to your _config.yml:

title_bg:
  home:
    - aliceblue # This is index [0] representing light theme
    - purple    # This is for dark theme
  post:
    - white     # These values can be any valid CSS background expression
    - magenta   # Make sure to use values compatible for most browsers

Or add these lines to the front matter of specific pages:

title_bg_light: lightblue
title_bg_dark: maroon

You can also make the background cover the whole page, too! Add this line to the front matter of any pages you want or _config.yml:

title_bg_fill: true # or any value other than falsy

To add your own links to the navigation menu, add these lines to your _config.yml:

navigation:
  - title: Posts
    url: /posts
    icon: article # Use icon names from Phosphor Icons
  - title: About
    url: # ...

Demo

To check out all supported features of this project, please take a look at the demo.

[!NOTE] For mobile users who have to use DevTools without a computer, please use Eruda by setting JEKYLL_ENV=development or add this line to _config.yml:
debug: true
[!WARNING] This theme is not intended to be an customizable template for beginners.

Credits

Fonts: Google Fonts and their corresponding creators
Icons: Phosphor Icons
Extensions: Jekyll Spaceship

Support

If you found a feature functioning incorrectly or have a suggestion, feel free to open an issue in this repository.

License

This project is licensed under Creative Commons 1.0 License. See LICENSE for more information.