lucavi | CODE ✦ GRAND TRAD.

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>
<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);">

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);">

Main Road

</div>
  </div>
</div></div></div>
</raw-code>

GRAND TRAD: WITH DESCRIPTION

<raw-code>
<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);">

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);">

A short descriptive segment regarding the subject above.

</div>
  </div>
</div></div></div>
</raw-code>