How to create a css rule for chapter breaks in short story

Help
1

I have a simple layout for posting short fictions which I’m fairly happy with. For some stories with chapter breaks, though, I need to use a mark for chapter break. Personally, I use center-aligned *** marks in word documents. I’d like to have the same in jekyll, if it’s possible. I’d be open to any other system you guys could suggest. It doesn’t really matter what I do as long as it works as a chapter break or a scene break.

So, just to clearly state, I specifically want a way to center-align whenever the text *** (or \*\*\* since it’s markdown) is written on a single line. Could I get some help?

By the way, here is my _layouts/story.html layout for short fictions.

---
layout: default
---
<article class="story">

<header class="story-header">
<h1 class="story-title">{{ page.title | escape }}</h1>
</header>

<div class="story-first-para">
{{ page.excerpt }}
</div>
<div class="story-content">
<!-- {{ content }} -->
{{ content | remove_first:page.excerpt }}
</div>

</article>
2

There’s a ton of ways you could handle this… most of which require some CSS.
My suggestion is to use Markdown --- when you want a break. This will produce a <hr /> in HTML.

Then you can style that any way you want. If you want it to be *** then I would remove the border styling and add the three asterisks using the content property on a pseudo class.

Something like this should get you started:

hr {
  border: none
}

hr:before {
  content: "***";
  display: block;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

Screen Shot 2020-01-29 at 8.42.54 PM
Screen Shot 2020-01-29 at 8.42.54 PM701×199 3.69 KB

1 Like
3

Thanks, it worked.

And, is there a way to use this css just for my _layouts/story.html layout? It’s not important. I was just curious.

4

It’s possible. Just depends on how you want to do it. Search the old posts, I feel like this has come up a few times before.