[00] [seasons] info / permissions + gallery code inspired by 10billionghosts

[raincoded]

WHAT: Info/Permissions code for Seasons
WHY: A variant on Deca's original, with an image gallery you can use for character clothing, or inventory, or anything else.

LIVE PREVIEW

Player

Name:
Pronouns:
Contact: USERNAME
Time Zone:

Character

Character Name:
Canon:
Canon Point:
Age:
Height:
Season:
Flower:
Network UN: UN goes here

About:

Other:

Clothing

Permissions

Backtagging:
Threadjacking:
Fourthwalling:
Mind Reading:
Touching:
Shipping/Kissing:
Fighting/Injury:
Character Death:

USAGE:
🌈 Pick a color! These are specifically in Seasons colors, but could be repurposed for any game.
🌈 Copy-paste the "MAIN" code into a new journal entry. NOTE: The code won't look right in a comment, as it's using margins and set heights, which comments don't allow.
🌈 Fill out the fields, adding or deleting additional sections as needed.
🌈 If also using the CLOTHING section, be sure to also grab the matching GALLERY entries.
🌈 Link each GALLERY from the main entry to a comment with the accompanying images of your choice.

COLORS (for replacing):
🌈 Text: #102651
🌈 Header text: #fff
🌈 Image background: #aaa
🌈 Background: #75c0f6 (winter) / #ff8eaf (spring) / #4acb70 (summer) / #f6a975 (autumn)

Comments

GALLERY COMMENTS

[raincoded]

1 image

[raincoded]

!!HEADER!!

!!subheader!!

🌸 Bullet list goes here
🌸 Only with themed emoji
🌸 Instead of bullets
🌸 Here's a line long enough to wrap! So as to demonstrate the flexibility of the layout. Be sure to also check the mobile view!

Click on the images for full-size versions.

🌧️ + ❤

<raw-code><div style="background:#ccc;display:flex;flex-wrap:wrap;gap:5px 10px;padding:10px;justify-content:center;box-sizing:border-box;font-size:10px;font-weight:bold;color:#fff;background:transparent;"> <div style="display:flex;flex:1 1 300px;padding:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #ff8eaf;background:#fff;"><div style="display:grid;grid-template-rows:auto auto 1fr auto;width:100%;box-sizing:border-box;padding:10px;text-align:justify;color:#102651;"><div style="width:100%;box-sizing:border-box;background-color:#ff8eaf;color:#fff;padding:10px;"> <!-- TEXT HEADER --> <div style="width:100%;font-size: clamp(20px, 2vw, 25px);text-align:center;text-transform:uppercase;">!!HEADER!!</div> <div style="width:100%;font-weight:lighter;text-align:center;text-transform:lowercase;">!!subheader!!</div> <!-- TEXT HEADER: END --> </div><div style="display:flex;width:100%;"><div style="width:37.5%"></div><div style="width:25%;box-sizing:border-box;padding:10px;border-bottom:1px solid #ff8eaf;"></div><div style="width:37.5%"></div></div> <div style="width:100%;box-sizing:border-box;padding:10px;font-weight:normal;font-size: clamp(10px, 1vw, 11px);"> <!-- TEXT BODY, between the raw-code tags --> </raw-code>🌸 Bullet list goes here 🌸 Only with themed emoji 🌸 Instead of bullets 🌸 Here's a line long enough to wrap! So as to demonstrate the flexibility of the layout. Be sure to also check the mobile view!<raw-code> <!-- TEXT BODY: END --> </div><div style="width:100%;box-sizing:border-box;background-color:#ff8eaf;color:#fff;padding:10px;font-weight:normal;font-size: clamp(10px, 1vw, 11px);align-self:end;">Click on the images for full-size versions.</div></div></div> <!-- IMAGES - replace 500px with desired height of the image --> <div style="flex:1 0 390px;max-width:100%;padding:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #ff8eaf;background:#fff;display:grid;grid-template-rows:500px;grid-template-columns:1fr;gap:10px;"> <!-- IMAGES - replace YOUR_IMAGE_HERE --> <div style="width:100%;background:#aaa url(YOUR_IMAGE_HERE);background-size:cover;background-repeat:no-repeat;background-position:center;display:flex;align-items:stretch;"><a href="YOUR_IMAGE_HERE" title="Click for full-sized image." style="text-decoration:none;display:block;width:100%"></a></div> <!-- IMAGES: END --> </div><div style="width:100%;box-sizing:border-box;text-align:right;font-size:10px;color:#102651"><a title="seasons specific code" href="https://raincoded.dreamwidth.org/595.html" style="text-decoration:none;">🌧️</a> + <a title="code credit!" href="https://10billionghosts.dreamwidth.org/53754.html" style="text-decoration:none;color:#fa0000;">❤</a></div></div></raw-code>

2 images - horizontal

[raincoded]

!!HEADER!!

!!subheader!!

🌸 Bullet list goes here
🌸 Only with themed emoji
🌸 Instead of bullets
🌸 Here's a line long enough to wrap! So as to demonstrate the flexibility of the layout. Be sure to also check the mobile view!

Click on the images for full-size versions.

🌧️ + ❤

<raw-code><div style="background:#ccc;display:flex;flex-wrap:wrap;gap:5px 10px;padding:10px;justify-content:center;box-sizing:border-box;font-size:10px;font-weight:bold;color:#fff;background:transparent;"> <div style="display:flex;flex:1 1 300px;padding:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #ff8eaf;background:#fff;"><div style="display:grid;grid-template-rows:auto auto 1fr auto;width:100%;box-sizing:border-box;padding:10px;text-align:justify;color:#102651;"><div style="width:100%;box-sizing:border-box;background-color:#ff8eaf;color:#fff;padding:10px;"> <!-- TEXT HEADER --> <div style="width:100%;font-size: clamp(20px, 2vw, 25px);text-align:center;text-transform:uppercase;">!!HEADER!!</div> <div style="width:100%;font-weight:lighter;text-align:center;text-transform:lowercase;">!!subheader!!</div> <!-- TEXT HEADER: END --> </div><div style="display:flex;width:100%;"><div style="width:37.5%"></div><div style="width:25%;box-sizing:border-box;padding:10px;border-bottom:1px solid #ff8eaf;"></div><div style="width:37.5%"></div></div> <div style="width:100%;box-sizing:border-box;padding:10px;font-weight:normal;font-size: clamp(10px, 1vw, 11px);"> <!-- TEXT BODY, between the raw-code tags --> </raw-code>🌸 Bullet list goes here 🌸 Only with themed emoji 🌸 Instead of bullets 🌸 Here's a line long enough to wrap! So as to demonstrate the flexibility of the layout. Be sure to also check the mobile view!<raw-code> <!-- TEXT BODY: END --> </div><div style="width:100%;box-sizing:border-box;background-color:#ff8eaf;color:#fff;padding:10px;font-weight:normal;font-size: clamp(10px, 1vw, 11px);align-self:end;">Click on the images for full-size versions.</div></div></div> <!-- IMAGES - replace 220px with desired height of each image --> <div style="flex:1 0 390px;max-width:100%;padding:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #ff8eaf;background:#fff;display:grid;grid-template-rows:repeat(2, 220px);gap:10px;"> <!-- IMAGES - replace YOUR_IMAGE_HERE --> <div style="width:100%;background:#aaa url(YOUR_IMAGE_HERE);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:stretch;"><a href="YOUR_IMAGE_HERE" title="Click for full-sized image." style="text-decoration:none;display:block;width:100%"></a></div> <div style="width:100%;background:#aaa url(YOUR_IMAGE_HERE);background-size:cover;background-repeat:no-repeat;background-position:center;display:flex;align-items:stretch;"><a href="YOUR_IMAGE_HERE" title="Click for full-sized image." style="text-decoration:none;display:block;width:100%"></a></div> <!-- IMAGES: END --> </div><div style="width:100%;box-sizing:border-box;text-align:right;font-size:10px;color:#102651"><a title="seasons specific code" href="https://raincoded.dreamwidth.org/595.html" style="text-decoration:none;">🌧️</a> + <a title="code credit!" href="https://10billionghosts.dreamwidth.org/53754.html" style="text-decoration:none;color:#fa0000;">❤</a></div></div></raw-code>

2 images - vertical

[raincoded]

!!HEADER!!

!!subheader!!

🌸 Bullet list goes here
🌸 Only with themed emoji
🌸 Instead of bullets
🌸 Here's a line long enough to wrap! So as to demonstrate the flexibility of the layout. Be sure to also check the mobile view!

Click on the images for full-size versions.

🌧️ + ❤

<raw-code><div style="background:#ccc;display:flex;flex-wrap:wrap;gap:5px 10px;padding:10px;justify-content:center;box-sizing:border-box;font-size:10px;font-weight:bold;color:#fff;background:transparent;"> <div style="display:flex;flex:1 1 300px;padding:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #ff8eaf;background:#fff;"><div style="display:grid;grid-template-rows:auto auto 1fr auto;width:100%;box-sizing:border-box;padding:10px;text-align:justify;color:#102651;"><div style="width:100%;box-sizing:border-box;background-color:#ff8eaf;color:#fff;padding:10px;"> <!-- TEXT HEADER --> <div style="width:100%;font-size: clamp(20px, 2vw, 25px);text-align:center;text-transform:uppercase;">!!HEADER!!</div> <div style="width:100%;font-weight:lighter;text-align:center;text-transform:lowercase;">!!subheader!!</div> <!-- TEXT HEADER: END --> </div><div style="display:flex;width:100%;"><div style="width:37.5%"></div><div style="width:25%;box-sizing:border-box;padding:10px;border-bottom:1px solid #ff8eaf;"></div><div style="width:37.5%"></div></div> <div style="width:100%;box-sizing:border-box;padding:10px;font-weight:normal;font-size: clamp(10px, 1vw, 11px);"> <!-- TEXT BODY, between the raw-code tags --> </raw-code>🌸 Bullet list goes here 🌸 Only with themed emoji 🌸 Instead of bullets 🌸 Here's a line long enough to wrap! So as to demonstrate the flexibility of the layout. Be sure to also check the mobile view!<raw-code> <!-- TEXT BODY: END --> </div><div style="width:100%;box-sizing:border-box;background-color:#ff8eaf;color:#fff;padding:10px;font-weight:normal;font-size: clamp(10px, 1vw, 11px);align-self:end;">Click on the images for full-size versions.</div></div></div> <!-- IMAGES - replace 220px with desired height of each image --> <div style="flex:1 0 390px;max-width:100%;padding:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #ff8eaf;background:#fff;display:grid;grid-template-rows:500px;grid-template-columns:repeat(2, calc(50% - 5px));gap:10px;"> <!-- IMAGES - replace YOUR_IMAGE_HERE --> <div style="width:100%;background:#aaa url(YOUR_IMAGE_HERE);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:stretch;"><a href="YOUR_IMAGE_HERE" title="Click for full-sized image." style="text-decoration:none;display:block;width:100%"></a></div> <div style="width:100%;background:#aaa url(YOUR_IMAGE_HERE);background-size:cover;background-repeat:no-repeat;background-position:center;display:flex;align-items:stretch;"><a href="YOUR_IMAGE_HERE" title="Click for full-sized image." style="text-decoration:none;display:block;width:100%"></a></div> <!-- IMAGES: END --> </div><div style="width:100%;box-sizing:border-box;text-align:right;font-size:10px;color:#102651"><a title="seasons specific code" href="https://raincoded.dreamwidth.org/595.html" style="text-decoration:none;">🌧️</a> + <a title="code credit!" href="https://10billionghosts.dreamwidth.org/53754.html" style="text-decoration:none;color:#fa0000;">❤</a></div></div></raw-code>