diff --git a/src/style/style.styl b/src/style/style.styl index 714618c..5c65b7e 100644 --- a/src/style/style.styl +++ b/src/style/style.styl @@ -59,14 +59,54 @@ img { max-height: 100%; } -hr { +hr.old { + padding: 0; margin-top: 0.8em; margin-bottom: 0.8em; height: 0; - border: 0; - border-bottom: 1px solid #999; + border: none; + border-bottom: 1px solid #000; + border-color: currentColor; + opacity: 0.5; + width: 100%; } +// Fimfiction's new horizontal ruler: +hr { + box-sizing: border-box; + padding: 0; + border: none; + text-align: center; + line-height: 0; + + border-top-width: 1px; + border-top-style: solid; + border-bottom-width: 1px; + border-bottom-style: solid; + border-color: #999; + border-color: currentColor; + height: 4px; + background: transparent; + width: 90%; + margin: 2em auto; +} + +// This looks bad on black background/dark themes +/*hr:after { + color: #333; + display: inline-block; + position: relative; + top: -0.5em; + font-size: 1.0em; + padding: 0 0.5em; + background: white; + line-height: 1.0em + + color: currentColor; + content: "\274A \274A \274A"; + margin-top: 2px; +}*/ + blockquote { margin: 10px 0px; padding: 20px; diff --git a/src/templates.js b/src/templates.js index 86e6221..5dc0971 100644 --- a/src/templates.js +++ b/src/templates.js @@ -48,7 +48,7 @@ export function createChapter (ch) { m('body', [ title ? m('.chapter-title', [ m('h1', title), - m('hr') + m('hr.old') ]) : null, '%%HTML_CONTENT%%', (link || linkNotes) ? m('p.double', {style: 'text-align: center; clear: both;'},