Powder Serenity

This page is a stub, however, it DOES contain spoilers!
Show all spoilers / Hide all spoilers

Powder Serenity

Basic Information
Full Name:	Powder Serenity^[1] ^(?)
Other Names:	Warrior of Light ^(Eorzea) Hero, Scion, friend Eikonslayer ^{(Garlean Empire)} Warrior of Darkness ^(Norvrandt)
Age:	???
Born:	32nd day of the 4th Astral Moon 1??? ^(Comment)
Physical Description
Race:	Miqo'te
Clan:	Seeker of the Sun
Hair Colour:	Blue ^(Current) wip ^(EXPAC) wip ^(EXPAC) wip ^(EXPAC)
Eye Colour:	Blue (L), Bright Pink (R)
Height:	~5' (000.0cm)
Tail:	Length^[2] ^(Comment) Type ^[2] ^(Comment)
Details:	Face TEXT TEXT TEXT Body Scars TEXT TEXT Otherworldly TEXT TEXT
Biographical Information
Gender:	Cat (Questioning?) Pronouns They/them He/him She/her
Shards:	xyz ^(comment) xyz ^(comment) Rejoined xyz ^(comment) xyz ^(comment) Unknown Fate ??? ^(13th)
Relatives:	xyz ^(comment) xyz ^(comment)
Affiliation:	xyz xyz
Deaths:	Killed by Lahabrea ^(Comment) ??? ^(Comment)

⚠ This page is for the Source shard. You may be looking for another shard.

❝ Your heroes are dead, and so I guess you're the hero now ❞
^{— I Only Say I'm Sorry When I'm Wrong Now↗ by Cheekface}

Maisie Viola (/MAY-zē vy-OH-luh/) is one of Bread's Final Fantasy XIV original characters, and their main Warrior of Light. She can be found in-game↗ on Brynhilder in the Crystal data center.

This is an example of a real link with an outgoing marker↗. This is an example of a redlink that doesn't go anywhere. This is an example of spoiler tagged text, and here's a link inside it 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.

Table of Contents

Personality
Appearance

Unsundered
Source Shard
Other Shards

History

A Realm Reborn
Heavensward
Stormblood
Shadowbringers
Endwalker
Dawntrail

Relationships

Friends
Family
Romantic
Enemies

Trivia
Gallery
References

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.

Personality

This section is a work in progress as I play through the game as Maisie, but here's a bullet-point list of info to include here later:

Text
Text
Adding .redlink to <a> makes it red (see above)
See below for effect of .clear-both

Appearance

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.

Unsundered

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.

Source

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.

Shards

Ardbert Hylfyst↗ (First) - 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.

NAME (???) - 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.

NAME (determinant) - 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.

NAME (determinant) - 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.

History

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

Left image example. next one has no caption

A Realm Reborn

Heavensward

Stormblood

Shadowbringers

Endwalker

Dawntrail

Relationships

Friends

NAME (determinant) - 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.

NAME (determinant) - 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.

NAME (determinant) - 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.

Cid Garlond (friend) - 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.

Free Company

Ixe'zi Zosa↗ (friend) - 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.

Cherry Nostromo↗ (friend) - 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.

Puer Cattus↗ (friend) - 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.

Kaida Yoruno↗ (friend) - 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.

Sylvia Qestir↗ (friend) - 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.

NAME↗ (friend) - 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.

NAME (determinant) - 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.

Romantic

Ysayle Dangoulain↗ (late crush) - 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.

Emet-Selch↗ (to be determined) - 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.

NAME (determinant) - 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.

NAME (determinant) - 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.

Enemies

Zenos yae Galvus↗ (determinant) - 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.

NAME (determinant) - 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.

NAME (determinant) - 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.

NAME (determinant) - 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.

Trivia

Gallery

To view NAME's Gallery, click here.

References

Citations, mun comments, and other things.

↑ ^[1] Apparently the title for the Emperor's wife (and his mother) is "yae," not "wir," which is stated in XIV canon here.
↑ ^[2] Adding .text-big to anything makes the text big
↑ ^[3] Adding .redlink to <a> makes it red (see above)
↑ ^[4] Adding .text-center to anything centers the text

Powder Serenity

Powder Serenity

Basic Information

Physical Description

Biographical Information

Personality

Appearance

History

Relationships

Trivia

Gallery

References