Demo Post

This is the demo site for Sidecar, a plain but pretty theme for the Pelican static site generator. This post demos a few of the things you can do with Sidecar.

See Sidecar’s README for more features and customization settings.

Tables of contents

Put <div class="toc"></div> anywhere in a post or page and it’ll be turned into a table of contents like this:

If you have any headings that you don’t want to be in the table of contents put the CSS class "notoc" on them: <h2 class="notoc">...</h2>

Code blocks with syntax highlighting

See Syntax highlighting in Pelican’s docs and see the Pygments site for the available language names.

def lorem_ipsum(dolor, sit_amet="default"):
    """
    Consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    """
    magna_aliqua = [i for i in range(10) if i % 2 == 0]
    incididunt_ut_labore = {k: v for k, v in enumerate(magna_aliqua)}

    try:
        for consectetur in incididunt_ut_labore.values():
            if consectetur > 5:
                print("Magna aliqua:", consectetur)
            else:
                print("Ut labore et dolore:", consectetur)
    except Exception as e:
        print("Error:", str(e))

Figures

You can create figures with captions using the standard HTML <figure> and <figcaption> elements:

Embedded videos and audio with standard HTML <video> and <audio> elements also work.

Block quotes

The important thing is not to stop questioning. Curiosity has its own reason for existence. One cannot help but be in awe when contemplating the mysteries of eternity, of life, of the marvelous structure of reality. It is enough if one tries merely to comprehend a little of this mystery every day. Never lose a holy curiosity.

— Albert Einstein

Nested lists

• Vivamus non arcu quis sem aliquam
• Quisque in quam tempor, finibus odio nec
• Aenean lacinia augue vel orci efficitur
• Mauris nec sem dapibus, convallis dolor eu
  1. Ut quis neque ac lectus vestibulum
  2. Fusce congue tortor blandit elit
  3. Suspendisse porttitor justo at massa
     • Vestibulum a turpis non urna
     • nteger non orci a ex aliquam
     • ullam sit amet turpis sit amet
  4. Cras nec nulla tincidunt
• Vivamus ullamcorper orci a leo pretium
• Maecenas volutpat est eget purus placerat

Definition lists

Lists of terms and their definitions, questions and answers, etc.

Oatcake

Thin flat unleavened cake of baked oatmeal.

Oatmeal

Porridge made of rolled oats.

Disclosure widgets

You can create collapsible disclosure widgets with the standard HTML <details> and <summary> elements:

Lead paragraphs

You can create large-text “lead” paragraphs with <p class="lead">...</p>:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae ex eros. Sed nec lacinia turpis. Donec nec nisi et dolor tincidunt commodo vulputate eu sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Note boxes

You can create highlighted note boxes with <p class="note">...</p> (or <div class="note">...</div> for a multi-paragraph note box, <ol class="note">...</ol&g with <s> or <del>t;, <ul class="note">...</ul>, <aside class="note">...</aside>, etc).

Note: morbi sed facilisis nunc. Quisque dictum lectus vitae purus lobortis, dapibus malesuada sapien imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Grab bag

Keyboard input with <kbd>: Ctrl + F1, badges with <span class="badge">, highlights with <mark>, strike-throughs with <s> or <del>, etc.

Oatcake

Sidecar is based on Oatcake, a typography stylesheet. Most of Sidecar’s features come from Oatcake and there’s much more than what’s been shown in this post. See Oatcake’s site for more.