Timelines

This is a notice box, to warn about stubs / spoilers / etc.
Show all spoilers / Hide all spoilers

When using his rewind abilities to change the past, Michael Mell constantly splits new timelines. These other timelines can differ dramatically from the original, sometimes with different life events, personalities, and even meteorological anomalies.^[1] This page collects many of those altered timelines.

Table of Contents

Original
Vortex Club
No Flowers
Everyone Lives
Subheader 5

Subsection 1
Subsection 2

Subheader 6
References

This is an example of a real link. This is an example of a redlink that doesn't go anywhere. This is an example of spoiler tagged text. You can adjust the colors of these (and everything else in the template) by going into the CSS file and changing the color variables at the top of the file.

This code has two mobile responsiveness breakpoints: one at 1000px and one at 576px. The sidebar goes on top on small screens. On desktop, you can test this by resizing the window.

The table of contents is open by default. You can make it closed by default by removing the word open from the tag.

This is a static template, so you'll have to set up the table of contents on each page manually. Add an id="headername" to each header in your code, then add a corresponding link with href="#headername" to the table of contents. IDs cannot contain spaces or begin with a number.

There's no elegant way to make sub-ordered-lists appear like 1.1, 1.2, etc. in HTMLCSS. On MediaWiki sites, they just auto generate the numbers right onto the page, which is messy and not ideal for a static site. You'll have to make do with a/b/c, sorry.

Most things in this code (the notice boxes, floating images, infoboxes, etc.) can be dropped into your page wherever you want with minimal issues. Just copy and paste.

There are some utility classes in the CSS:

Adding .text-center to anything centers the text
Adding .text-big to anything makes the text big
Adding .redlink to <a> makes it red (see above)
See below for effect of .clear-both

Make sure any <h2> elements directly under a section with a right-floating image have class="clear-both" applied. This makes it "clear" any floating elements and appear below them, to avoid display weirdness on large screens.

Original Timeline (Prime)

Main article: Prime timeline

This is the main timeline that Life is Weird takes place in, often referred to as the Original, Main, or Prime timeline.

Vortex Club Timeline

Main article: Alternate timeline

Lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum dolor sit amet consectetuer adipiscing elit.

No Flowers Timeline

Main article: No Flowers timeline

Everyone Lives Timeline

Subheader 5

Subsection 1

Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

Subsection 2

Between Realities

References

Lorem ipsum dolor sit amet consectetuer adipiscing elit.

↑ ^[1] Referenced from the Life is Strange Fandom wiki.
↑ ^[2] WIP
↑ ^[3] WIP
↑ ^[4] WIP