CODE ✦ GRAND TRAD.

[lucavi]

Grand Trad

Main Road

Grand Trad

A short descriptive segment regarding the subject above.

MORE SAMPLES:

Silent Hill

South Vale

Jabberwock Island

Dangan Ronpa is back? In the year of our lord 2025+?

A topper code inspired by the UI of Metaphor ReFantazio. Could be used for locations or maybe CR thread toppers too? There are two variants, one with a simple subtitle/tagline, and a second that includes a segment where you can include some extra description text. Default image column size is ~200px, note that this looks good on desktop devices but may look crowded on mobile devices / smartphones. If the text is long, it may make the code show up weirdly on mobile screens.

✓ CUSTOMISABLE
✓ COMMENT FRIENDLY
✓ RESPONSIVE (SOMEWHAT; LONG NAMES WILL CUT OFF)
✗ NOT EMAIL-FRIENDLY / EMAIL-TESTED

Most modifiable areas are consolidated as variables at the very top of the code. Here's what they are and what they'll affect:

✦ --imgURL Link for the image displayed on the left column.
✦ --imgSize Maximum size of the image displayed on the left column in pixels. The image will always have a square/1:1 ratio. The image is set to be, at most, 20% width, so it may be smaller depending on journal post width.
✦ --font Font family for the text.
✦ --accentClr The primary colour of the code, affecting the title text and the border(s).
✦ --textClr Changes the text colour of the tagline/description block.
✦ --textBG Only for the descriptive text variant; changes the background colour of the body text section.

GRAND TRAD: TAGLINE ONLY

<raw-code><!--- METAPHOR-INSPIRED LOCATION TOPPER, START // ---> <div style="display:grid; grid-auto-flow:column; grid-template-columns:minmax(20%, var(--imgSize)) auto; transform:skewX(-8deg); --imgURL: url(URLHERE); --imgSize: 200px; --font: Georgia, Garamond, serif; --accentClr: #111; --textClr: #fff; "> <div style="align-self:start; padding:15px; border:1px solid var(--accentClr); border-radius:99rem;"> <div style="width:100%; aspect-ratio:1 !important; background:var(--imgURL) center no-repeat; background-size:cover; border:1px solid var(--accentClr); border-radius:99rem; transform:skew(5deg);"></div> </div> <div style="align-self:center; padding:15px 0;"> <div style="display:grid; grid-template-rows:auto 5px auto;"> <div style="grid-column:1; grid-row:1/3; padding:0 0 10px 15px; font:small-caps 600 42px/0.8 var(--font); letter-spacing:-3px; color:var(--accentClr); border-bottom:1px solid var(--accentClr);"> <!--- MAIN TITLE // ---> Grand Trad </div> <div style="grid-column:1; grid-row:2/-1; padding-left:25px; border-bottom:var(--accentClr);"> <div style="padding:10px 15px; width:fit-content; font:14px/1.2 var(--font); color:var(--textClr); background:linear-gradient(to right, transparent 0%, var(--accentClr) 15% 85%, transparent 100%); transform:skew(-5deg);"> <!--- TAGLINE // ---> Main Road </div> </div> </div></div></div> <!--- METAPHOR-INSPIRED LOCATION TOPPER, END // ---></raw-code>

GRAND TRAD: WITH DESCRIPTION

<raw-code><!--- METAPHOR-INSPIRED LOCATION TOPPER, START // ---> <div style="display:grid; grid-auto-flow:column; grid-template-columns:minmax(20%, var(--imgSize)) auto; transform:skewX(-8deg); --imgURL: url(URLHERE); --imgSize: 200px; --font: Georgia, Garamond, serif; --accentClr: #111; --textClr: #eee; --textBG: #111; "> <div style="align-self:start; padding:15px; border:1px solid var(--accentClr); border-radius:99rem;"> <div style="width:100%; aspect-ratio:1 !important; background:var(--imgURL) center no-repeat; background-size:cover; border:1px solid var(--accentClr); border-radius:99rem; transform:skew(5deg);"></div> </div> <div style="align-self:center; padding:15px 0;"> <div style="display:grid; grid-template-rows:auto 5px auto;"> <div style="grid-column:1; grid-row:1/3; padding:0 0 10px 15px; font:small-caps 600 42px/0.8 var(--font); letter-spacing:-3px; color:var(--accentClr); border-bottom:1px solid var(--accentClr);"> <!--- MAIN TITLE // ---> Grand Trad </div> <div style="grid-column:1; grid-row:2/-1; padding-left:25px; border-bottom:var(--accentClr);"> <div style="padding:10px 15px; width:fit-content; font:14px/1.2 var(--font); color:var(--subtitle); color:var(--textClr); background:var(--textBG); border:1px solid var(--accentClr); transform:skew(-5deg);"> <!--- TEXT // ---> A short descriptive segment regarding the subject above. </div> </div> </div></div></div> <!--- METAPHOR-INSPIRED LOCATION TOPPER, END // ---></raw-code>