10billionghosts | code: PORTRAIT MODE - a minimalist muse list

Merry Draftsmas! Here's code number 2 of the Draftsmas release block, PORTRAIT MODE, a very simple portrait-based muse/cast list code.

The base code includes the outer wrapper and 3 blank character cards -- the cards will stack 3 across at the widest, and shuffle down into 1 per line on mobile screens. Don't forget to check out the HOW TO USE section, and scroll down to the bottom of this post for some examples of what you can do with the cards.

CODE HERE:

<lj-raw>

<div style="max-width:750px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:30px;font-family:arial, helvetica, sans serif;font-size: clamp(11px, 1vw, 12px);color:#212121;">

<div style="max-width:225px;width:100%;height:375px;display:grid;grid-template-columns:15px 1fr 15px 15px;grid-template-rows:15px 1fr 15px;">

<div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;box-shadow: 0px 2px 2px rgba(50, 50, 93, 0.5);"></div>
<div style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:4;box-shadow: 0px 2px 2px rgba(50, 50, 93, 0.5);"></div>

<div style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:4;background:#91212f url('PEEK_URL');"></div>

<div style="grid-column-start:3;grid-column-end:5;grid-row-start:2;grid-row-end:4;margin-left:-1px;display:flex;justify-content:start;align-items:end;align-content:end;text-orientation:mixed;writing-mode:vertical-rl;line-height:.8;font-size:30px;font-weight:bold;"><a href="#URL_HERE" style="text-decoration:none;text-shadow: 0px 2px 2px rgba(0,0,0,0.75), 1px -2px 6px rgba(175,175,175,0.55);color:#fff;">
!!CHARACTER NAME!!
</a></div>

<div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;background:#ccc url('IMG_URL')center;background-size:cover;"></div>

</div>

<div style="max-width:225px;width:100%;height:375px;display:grid;grid-template-columns:15px 1fr 15px 15px;grid-template-rows:15px 1fr 15px;">

</div>

<div style="max-width:225px;width:100%;height:375px;display:grid;grid-template-columns:15px 1fr 15px 15px;grid-template-rows:15px 1fr 15px;">

</div>

</div>

<div style="max-width:750px;width:100%;margin:0 auto;text-align:center;font-size:10px;color:#ddd"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div>

</lj-raw>

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ While designed to be use as a muse or cast list with multiple cards, you can certainly just use one character card and create a very simple splash page. Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!

❣️ This code has one instance of #URL_HERE per card, intended to link to a character journal, profile, etc.

❣️ Be sure to look for !!text between exclamation points!! as these are fields that need to be customized. The only place that this truly matters is for the !!CHARACTER NAME!! section. Any other customizable text is there in code comments to make sorting things a little easier for you.

❣️ Under the peekaboo section, you can change hex code #91212f to change the color of the background rectangle and/or replace PEEK_URL with the URL of a tiling background or transparent texture. If you just want a solid color, leave PEEK_URL there and don't change it.

❣️ IMG_URL needs to be replaced with a character picture. For best results, use a portrait-oriented (not landscape) photo with the point of focus well-centered. The larger the picture the better, generally.

❣️ hex code #fff is the color of the character name text, if you'd like to change that.

❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to one of the charities listed on the main draftmas hub post.