Journal Style Last Updated:

About

This is the lined­‑paper journal style from the cover issue of my journal. Itʼs more peculiar and finicky than most of my styles, due to the complexity of its design, but itʼs also extremely attractive, so thatʼs okay. It really, honestly, looks best in Firefox, due to the fact that WebKit has rounding errors when dealing with linear gradients and background images which really mess up the lined­‑paper effect. The longer the section, the more likely youʼll see this noticably occur.

Usage

This style expects a page layout like the following : 

<article>
		<header><!-- No whitespace --><h1>
			<span><!-- Header information --></span>
			<span><!-- Wrap each line in a <span> --></span>
		</h1></header>
		<section>
			<h2 id="section_id">
				<!-- Section title -->
				<a href="#section_id"><!-- Empty --></a>
				<a href="#"><!-- Empty --></a>
			</h2>
			<div class="PARAGRAPHS">
				<!-- Section content -->
			</div>
		</section>
		<footer>
			<!-- Footer information -->
		</footer>
	</article>
A <div> or <aside> with role="note" can be used to create marginal notes. Using them for paragraph content is possible, but not recommended due to size constraints.

Make sure not to leave whitespace at the beginning of <p> tags, as it will be rendered after the pilcrow. Use <span class="DASH"> to wrap em­‑dashes—like this. <strong> has a very unconventional appearance.

Always wrap <p> and <pre> tags in a <div class="PARAGRAPHS">.