CSS Stuff

Site Variables

CSS theme stuff for the Legends of the Dragonguard World Anvil site. (This site)
Part of this is for an easy way to grab the code for custom created things, that can't be a "variable" or whatever because it has custom content with in it, and you can't do that with World Anvil variables.
Speaking of site variables, you can check out a list of them, linked on the side.

CSS Tutorials

Special Shoutouts

I'd just like to give a few shoutouts to fellow Anvilites for inspiring certain elements on this site.
Ravare by Damion
Navmenu Sidebar.
Solaris by Annie Stein
General site design; TOC in sidebar; Breadbox above article title.
Lothrea by Satrium (Found it from Solaris)
Advanced tagging system, as well as the bonus tip at the end for "backlinking to categories". I use this premise to highlight a menu item based on an article's tag.
(e.g. Location menu item will be highlighted while on any location page.)

Custom Elements

Item	Code	Output
Date Box	[section:date-box]— 03/25/2024[/section]	— 03/25/2024
Generic Box	[container:generic-box]Content[/container]	Content
Generic Info Box w/ Info Icon	[container:generic-box info] [var:util-info-icon] Vertically aligned content. [/container]	Vertically centered icon and text.
Generic Box - Full Skyline Edition™	[container:generic-box full-skyline]Content[/container]	Content
Generic Box - Fully Gilded	[container:generic-box full-gilded]Content[/container]	Content
Alt Section	[container:alt]Content[/container]	Content
Generic Box within Alt Section	[container:alt] [container:generic-box]Content[/container] [/container]	Content
Definition Box	[h4]word[/h4] [container:definition] [b]noun[/b][br] [ul][li]Word definition.[/li][/ul] [/container]	word noun 1. A single distinct meaningful element of speech or writing, used with others (or sometimes alone) to form a sentence and typically shown with a space on either side when written or printed.
Inline Codeblock Has to be section tags.	This is some text [section:inline-code]that has[/section] an inline codeblock.	This is some text that has an inline codeblock.
Spoiler Content Element Usually used within a sub group, for secret stuff. Used to let people know that what's within the box is spoiler content!	[container:secret]Content[/container]	Look at me, I'm spoiler content! Keep your mouth shut about me.

Custom CSS Class Stylings

Item	Code	Example
Mimic Tag	[section:label label-default]idx-a-category-specifics[/section]	idx-a-category-specifics
IPA Styling	Ravia [section:ipa]/ˈreɪviə/[/section]	Ravia /ˈreɪviə/
Title Spoiler Use header tags and put the chevron variable within the title too.	[container:title-spoiler] [spoiler] Content! Oh boy! |[h3]Spoiler Title [var:util-chev][/h3][/spoiler] [/container]	Spoiler Title Content! Oh boy!
Simple Blockquotes	[container:simple-blockquote][quote]Text[/quote][/container] OR [container:blockquote-simple]Text | Pipe Allowed[/container]	Top text - Bottom Text — Quoted Person Text | Pipe Allowed
Badge Images Badges are usually put in the sidebar. This just makes them a little smaller. (250px)	[container:badge-img][badge:532|e264b800-dd84-4ff3-9ac8-5d36df1a1b8e][/container] [container:badge-img]@[[img:6197591|nolink]](article:f74ee651-541a-4ad9-b27f-f3af2c27fabe)[/container]	Badges are normally added to the sidebar; they have a fixed width of 250px.
Article Block Button	[container:block-btn][articleblock:68cd791b-97ab-4643-b03e-99071b3d8e44][/container]
Custom Image Block For text inline images on articles. Can be put in a row and col-md-# (3 or 4) container. But the surrounding text also has to be as well, and doesn't wrap around image. Use alignment CSS to have it inline with text wrapping.	[row] [container:col-md-6]Text[/container] [container:col-md-4][container:img-block][img:6364594][/container][/container] [/row] [container:col-md-4 margin-10 align-right][container:img-block][img:6364594][/container][/container]	A Shimmerhorn's head, with purple crystals — AI concept by Nulcheck (via Midjourney)

User Bootstrap

There's some CSS I put in myself that is like my own CSS Bootstrap.

Item	Code	Example
Display inlines	[container:inline][/container] [container:inline-block][/container]	Inline Just the display is set to inline. Inline Block Just the display is set to inline-block.
Weird flex, but ok	[container:flex][/container] [container:flex-wrap][/container] [container:flex-col][/container] [container:flex-col-center][/container] [container:flex-center][/container] [container:flex-middle][/container]	Flex Just the display is set to flex. Flex Wrap Display is set to flex, with flex-wrap set to wrap. Flex Col Display is set to flex, with the flex-direction set to column. Flex Col Center Display is set to flex. flex-direction set to column. margin set to auto. align-items and justify-content set to center. Flex Center Display is set to flex, with justify-content set to center. Flex Middle Display is set to flex, with align-content set to center.
Text Alignments I think I had my own center text because I kept switching the CSS class words around from Bootstrap. idk	[container:text-center]Bootstrap's centered text.[/container] [container:center-text]My centered text.[/container] [container:text-left]Left text.[/container] [container:text-right]Right text.[/container] [container:text-justify]Justified text.[/container]	Bootstrap's centered text. My centered text. Left text. Right text. Look at this justified text! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Alignment - (Float) Left / Right Use col-md-# to set the desired width. (This uses float) m-auto sets margins to auto, centering the element. (Bootstrap)	[container:col-md-6 align-left][/container] [container:col-md-6 align-right][/container] [container:col-md-6 m-auto][/container] Text can go here weeeee. Lorem ipsum.	Ancestor Silk plant by Nulcheck Ancestor Silk plant in ESO Text can go here weeeee. Lorem ipsum. Some plant that breaks easily or just secretes some weird liquid on it's stems that when agiated, or comes into contact with air or something, creates silk. People who walk through the forest with these will just be covered in silk afterwards. Thought of this idea when I saw "Ancestor Silk" plant in ESO.
Padding on the walls Will also set padding to an image (they usually have a default padding of 10px) (0px) (5px) (10px)	[container:p-0][/container] [container:padding-5][/container] [container:padding-top-10][/container] [container:padding-bottom-10][/container] [container:padding-left-10][/container] [container:padding-right-10][/container] [container:padding-inline-10][/container] [container:padding-block-10][/container]	No Padding (Bootstrap) All Padding (5px) Padding Top Padding Bottom Padding Left Padding Right Padding Inline (sides) Padding Block (top & bottom)
Profit Margins (0px) (5px) (10px)	[container:m-0][/container] [container:m-auto][/container] [container:margin-5][/container] [container:margin-top-10][/container] [container:margin-bottom-10][/container] [container:margin-left-10][/container] [container:margin-right-10][/container] [container:margin-inline-10][/container] [container:margin-block-10][/container]	No Margins (Bootstrap) Auto Margins (Bootstrap) (Centers) All Margins Margin Top Margin Bottom Margin Left Margin Right Margin Inline (sides) Margin Block (top & bottom)
Container Borders Text is centered for illistration purposes only. no-border also affects tables. All borders are 1px.	[container:no-border][/container] [container:border][/container] [container:border-top][/container] [container:border-bottom][/container] [container:border-left][/container] [container:border-right][/container] [container:border-inline][/container] [container:border-block][/container]	No border (affects tables) All border (overrides bootstrap) Top border Bottom border Left border Right border Inline border Block border
Big text (Opposite of this small text lol) Relative big, it adds .2rem to existing size. Can either be container or section tags.	Normal text [container:big]Big text[/container] [container:big][container:big]Big big text[/container][/container] [small]Small text for comparison[/small]	Normal text Big text Big big text Small text for comparison
Widths Goes up by 5, starting from 0, ends at 100.	[container:bg-dark w-5][/container] [container:bg-dark w-25][/container] [container:bg-dark w-65][/container]	W 5 Width 25 Width 65
Progress Bar Custom coloring and widths across the site. Goes up by 5, starting from 0, ends at 100. progress CSS class provides the background, and height so it displays (if no text).	[container:progress] [container:progress-bar bar-15][/container] [/container] [container:progress] [container:progress-bar bar-65]65%[/container] [/container]	65%
No credits display on image Does not work on default image block containers. (imgblock)	[img:6364594] [container:no-credits][img:6364594][/container] [container:img-block no-credits][img:6364594][/container]	Normal Image No Credits No Credits (Custom Block) A Shimmerhorn's head, with purple crystals — AI concept by Nulcheck (via Midjourney) A Shimmerhorn's head, with purple crystals — AI concept by Nulcheck (via Midjourney) A Shimmerhorn's head, with purple crystals — AI concept by Nulcheck (via Midjourney)

Headings

Heading	CSS Font Variable	Styling
Article Title	--hf2	Font: Vollkorn SC Color: --w80 Size: 42px
Heading 1	--hf2	Font: Vollkorn SC Border: bottom | 1px | solid | --skyshadow Color: --w80 Size: 35px
Fancy	--ancfont	Wrap header tags in section tags with the CSS class fancy-title. Font: Cinzel Decorative Letter spacing: 1em Color: --w80 Size: Depends on headers tags Text Transform: Uppercase Alignment: Center ::Before Margin: right: 1em | bottom: 1.25em Border: 2px | gradient | transparent → --w30 → --w90 ::After Margin: left: -1em | bottom: 1.25em Border: 2px | gradient | --w90 ← --w30 ← transparent
Heading 2	--hf3	Font: PTSerif Color: --w80 Size: 27px
Heading 3	--hf4	Font: Amarante Color: --w70 Size: 23px
Heading 4	--ifont	Font: Merriweather Color: --w60 Size: 20px
Heading 5	--pfont	Font: Open Sans Color: --w60 Size: 16px

Color Variables

Color	CSS Variable	Hex Code
	Main Colors
	--midnight	#010203
	--stormcloud	#1e1c22
	--darkcloud	#17151d
	--skyshadow	#007699
	--skydark	#006484
	Accents
	--bluesky	#1ca0d0
	--graysky	#828c96
	--gold	#a57c00
	--lightgold	#b29700
	--info	#a8dfda
	--success	#99c24d
	--warning	#fbb539
	--danger	#f45238
	--slightdanger	#c83f49
	Gradients
	--golden0	0deg, #a57c00, #b29700
	--golden45	45deg, #a57c00, #b29700
	--golden90	90deg, #a57c00, #b29700
	--skyline0	0deg, #006484, #007699
	--skyline45	45deg, #006484, #007699
	--skyline90	90deg, #006484, #007699
	50 (18) Shades of Gray
	--w10	#353339
	--w20	#4a484d
	--w30	#616064
	--w40	#767578
	--w50	#8c8b8e
	--w60	#a2a1a4
	--w70	#b8b7b9
	--w80	#cececf
	--w90	#e4e3e4
	--w10	#353339
	--w20	#4a484d
	--w30	#616064
	--w40	#767578
	--w50	#8c8b8e
	--w60	#a2a1a4
	--w70	#b8b7b9
	--w80	#cececf
	--w90	#e4e3e4