Template:Project Board: Difference between revisions

Content deleted Content added

Inline

Revision as of 18:21, May 20, 2025

Flexible horizontal scrolling columns with cards, headers and content blocks.

Template parameters
Parameter		Description	Type	Status
Background Color	`bg`	no description Default #0e0e0e	String	optional
Container Border Radius	`radius`	no description Default 10px	String	optional
Text Alignment	`align`	left, center, or right Default left	String	optional
First Column Header	`header1`	no description Default INTRODUCTION	String	optional
First Card Title	`card1title`	no description Default WELCOME! (Please Read)	String	optional
First Card Subtitle	`card1art`	no description Default CARD ART BY: COSMICSMOOTHIE	String	optional
First Card Body	`card1body`	no description Default Notes go here. Edit freely.	String	optional
Second Card Title	`card2title`	no description Default MANA!!!	String	optional
Second Card Body	`card2body`	no description Default Any details or expandable info.	String	optional
Second Column Header	`header2`	no description Default Diremptions	String	optional
Third Card Title	`card3title`	no description Default Amaranth	String	optional
Third Card Tags	`card3tags`	no description Default Tags: Diremption, Source	String	optional
Fourth Card Title	`card4title`	no description Default Dawn Epoch	String	optional
Fourth Card Tags	`card4tags`	no description Default Tags: Annuat, Amaranth	String	optional
Third Column Header	`header3`	no description Default Races	String	optional
Fifth Card Title	`card5title`	no description Default Mythra	String	optional
Fifth Card Tags	`card5tags`	no description Default Tags: Edian, Alizarin	String	optional
Sixth Card Title	`card6title`	no description Default Sylvian	String	optional
Sixth Card Tags	`card6tags`	no description Default Tags: Edian, Sylvian	String	optional

@@ Line 1: / Line 1: @@
 <includeonly>
 <templatestyles src="Project Board/styles.css" />
+{{#invoke:TemplateStyles|styles|Project Board CSS}}
-<div style="display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1em; padding: 1em; background: {{{bg|#0e0e0e}}}; border-radius: {{{radius|10px}}}; text-align: {{{align|left}}};">
+<div class="amaranth-columns-container" style="background: {{{bg|#0e0e0e}}}; border-radius: {{{radius|10px}}}; text-align: {{{align|left}}};">
 <!-- COLUMN -->
+<span class="amaranth-column">
-<span style="min-width: 250px; background: #111; padding: 1em; border-radius: 10px; border: 2px solid #2f2f2f;">
-<span style="color: #fff; font-family: 'Cinzel', serif; font-size: 1.1em; font-weight: bold; margin-bottom: 0.5em;">{{{header1|INTRODUCTION}}}</span>
+<span class="amaranth-column-header">{{{header1|INTRODUCTION}}}</span>
+<span class="amaranth-card amaranth-card-divider">
-<!-- CARD -->
+<span class="amaranth-card-title">{{{card1title|WELCOME! (Please Read)}}}</span>
-<span style="display:block; background-color: #1c070f; color: #fff; padding: 0.8em; border-radius: 10px; margin-bottom: 1em; box-shadow: 0 0 10px #0003;">
-<span style="font-weight: bold;">{{{card1title|WELCOME! (Please Read)}}}</span>
+<span class="amaranth-card-subtitle">{{{card1art|CARD ART BY: COSMICSMOOTHIE}}}</span>
-<span style="font-size: 0.9em; margin-top: 0.5em;">{{{card1art|CARD ART BY: COSMICSMOOTHIE}}}</span>
+<span class="amaranth-card-body">{{{card1body|Notes go here. Edit freely.}}}</span>
-<span style="margin-top: 0.5em; font-size: 0.85em;">{{{card1body|Notes go here. Edit freely.}}}</span>
 </span>
+<span class="amaranth-card amaranth-card-divider">
-<span style="display:block; background-color: #1c070f; color: #fff; padding: 0.8em; border-radius: 10px; margin-bottom: 1em; box-shadow: 0 0 10px #0003;">
-<span style="font-weight: bold;">{{{card2title|MANA!!!}}}</span>
+<span class="amaranth-card-title">{{{card2title|MANA!!!}}}</span>
-<span style="margin-top: 0.5em; font-size: 0.85em;">{{{card2body|Any details or expandable info.}}}</span>
+<span class="amaranth-card-body">{{{card2body|Any details or expandable info.}}}</span>
 </span>
 </span>
 <!-- COLUMN -->
+<span class="amaranth-column">
-<span style="min-width: 250px; background: #111; padding: 1em; border-radius: 10px; border: 2px solid #2f2f2f;">
-<span style="color: #fff; font-family: 'Cinzel', serif; font-size: 1.1em; font-weight: bold; margin-bottom: 0.5em;">{{{header2|Diremptions}}}</span>
+<span class="amaranth-column-header">{{{header2|Diremptions}}}</span>
+<span class="amaranth-card amaranth-card-divider">
-<span style="display:block; background-color: #1c070f; color: #fff; padding: 0.8em; border-radius: 10px; margin-bottom: 1em;">
-<span style="font-weight: bold;">{{{card3title|Amaranth}}}</span>
+<span class="amaranth-card-title">{{{card3title|Amaranth}}}</span>
-<span style="font-size: 0.85em; margin-top: 0.5em;">{{{card3tags|Tags: Diremption, Source}}}</span>
+<span class="amaranth-card-tags">{{{card3tags|Tags: Diremption, Source}}}</span>
 </span>
+<span class="amaranth-card amaranth-card-divider">
-<span style="display:block; background-color: #1c070f; color: #fff; padding: 0.8em; border-radius: 10px; margin-bottom: 1em;">
-<span style="font-weight: bold;">{{{card4title|Dawn Epoch}}}</span>
+<span class="amaranth-card-title">{{{card4title|Dawn Epoch}}}</span>
-<span style="font-size: 0.85em; margin-top: 0.5em;">{{{card4tags|Tags: Annuat, Amaranth}}}</span>
+<span class="amaranth-card-tags">{{{card4tags|Tags: Annuat, Amaranth}}}</span>
 </span>
 </span>
 <!-- COLUMN -->
+<span class="amaranth-column">
-<span style="min-width: 250px; background: #111; padding: 1em; border-radius: 10px; border: 2px solid #2f2f2f;">
-<span style="color: #fff; font-family: 'Cinzel', serif; font-size: 1.1em; font-weight: bold; margin-bottom: 0.5em;">{{{header3|Races}}}</span>
+<span class="amaranth-column-header">{{{header3|Races}}}</span>
+<span class="amaranth-card amaranth-card-divider">
-<span style="display:block; background-color: #1c070f; color: #fff; padding: 0.8em; border-radius: 10px; margin-bottom: 1em;">
-<span style="font-weight: bold;">{{{card5title|Mythra}}}</span>
+<span class="amaranth-card-title">{{{card5title|Mythra}}}</span>
-<span style="font-size: 0.85em; margin-top: 0.5em;">{{{card5tags|Tags: Edian, Alizarin}}}</span>
+<span class="amaranth-card-tags">{{{card5tags|Tags: Edian, Alizarin}}}</span>
 </span>
+<span class="amaranth-card amaranth-card-divider">
-<span style="display:block; background-color: #1c070f; color: #fff; padding: 0.8em; border-radius: 10px; margin-bottom: 1em;">
-<span style="font-weight: bold;">{{{card6title|Sylvian}}}</span>
+<span class="amaranth-card-title">{{{card6title|Sylvian}}}</span>
-<span style="font-size: 0.85em; margin-top: 0.5em;">{{{card6tags|Tags: Edian, Sylvian}}}</span>
+<span class="amaranth-card-tags">{{{card6tags|Tags: Edian, Sylvian}}}</span>
 </span>
 </span>
@@ Line 52: / Line 52: @@
 </div>
 </includeonly>
 <noinclude>