[02] mobile-friendly grid kink list (+ optional generator)

[raincoded]

WHAT: A cute modular kink list, taking cues from vivi@dreamcodes (+ yanyan@dreamcodes's own similar concept — the idea to use linked notes is inspired, and I like the blue :3) and using what I've learned by digging into efryndiel's cottagecore threadtracker generator code!

LIVE PREVIEW (light mode):

Bio.

If your style involves a blurb, this text will appear! Add as much or as little as you want.

Name.

Buffy Summers

Age.

20

Gender.

female

Sexuality.

heteroflexible

Ships.

Faith, Angel/Spike/Riley

Cross-Canon.

Go for it.

Looking For.

+20 characters

✔ F/F

✔ M/F

Kinks.

Yes.

⇾

Yes Kink 1

⇾

Yes Kink 2

⇾

Yes Kink 3

♥

⇽

Yes Kink 4

⇽

Yes Kink 5

♥

Maybe.

•

Maybe Kink 1*

•

Maybe Kink 2*

⇽

Maybe Kink 3

↻

Maybe Kink 4

IC Limit.

↻

Fave Kink 1*

♥

•

IC Limit Kink 1

•

IC Limit Kink 2

OOC Limit.

•

OOC Limit Kink 1

•

OOC Limit Kink 2

↻ = both/either

⇽ = as the subject

⇾ = as the actor

♥ = ic and/or ooc favorites

* = hover text

🌧️

COPY-PASTE VERSION
NOTE: Empty DIVs are to add spacing for the favorite indicator. Leave them in place, or else change the grid-template-columns: value to be min-content 1fr (meaning as-wide-as-the-content-needs and the-rest-of-the-space) instead.<raw-code> <div style="display:flex; flex-wrap:wrap; gap:20px; width:100%; max-width:940px; margin:auto; font-family:helvetica, arial, sans-serif; color:inherit; font-size:11px;"> <div style="flex:1 1 154px; display:flex; flex-direction:column; gap:20px; justify-content:end;"> <div style="display:flex; flex-direction:column; justify-content:end;"> <div style="font-family:georgia, serif; font-size:20px; color:inherit; text-align:left; text-transform:lowercase; line-height:20px; text-shadow:0px 0px 4px rgba(170, 170, 170, .8);"> Bio. </div> <div style="margin-bottom:10px;">If your style involves a blurb, this text will appear! Add as much or as little as you want.</div> <div style="margin-bottom:10px;"> <div> <div style="font-family:georgia, serif; font-weight:600; text-transform:lowercase;"> Name. </div> <div style="margin:0 0 0 5px;"> Buffy Summers </div> </div> <div> <div style="font-family:georgia, serif; font-weight:600; text-transform:lowercase;"> Age. </div> <div style="margin:0 0 0 5px;"> 20 </div> </div> <div> <div style="font-family:georgia, serif; font-weight:600; text-transform:lowercase;"> Gender. </div> <div style="margin:0 0 0 5px;"> female </div> </div> <div> <div style="font-family:georgia, serif; font-weight:600; text-transform:lowercase;"> Sexuality. </div> <div style="margin:0 0 0 5px;"> heteroflexible </div> </div> <div> <div style="font-family:georgia, serif; font-weight:600; text-transform:lowercase;"> Ships. </div> <div style="margin:0 0 0 5px;"> Faith, Angel/Spike/Riley </div> </div> <div> <div style="font-family:georgia, serif; font-weight:600; text-transform:lowercase;"> Cross-Canon. </div> <div style="margin:0 0 3px 5px;"> Go for it. </div> </div> </div> <div> <div style="font-family:georgia, serif; font-size:calc(11px + 2px); font-weight:600; font-style:italic; text-transform:lowercase;"> Looking For. </div> <div style="margin-bottom:3px;">+20 characters</div> <div style="margin:0 0 0 5px; display:flex; flex-wrap:wrap; gap:5px;"> <div> ✔ <span style="text-transform:lowercase;"> F/F </span> </div> <div> ✔ <span style="text-transform:lowercase;"> M/F </span> </div> </div> </div> </div> <div style="width:100%; height:130px; background:#ddd url(https://i.ibb.co/QjC91L9g/Welcometo-Sunnydale.jpg); background-position:center; background-size:cover; box-shadow:5px 5px 0 #242424; align-self:end;"></div> </div> <div style="flex:200 1 485px; display:flex; flex-wrap:wrap; align-items:end; gap:20px;"> <div style="flex:1 1 176px;"> <div style="font-family:georgia, serif; font-size:36px; color:inherit; text-align:left; text-transform:lowercase; line-height:36px; text-shadow:0px 0px 4px rgba(170, 170, 170, .8);"> Kinks. </div> </div> <div style="flex:1 1 372px; height:260px; background:#ddd url(https://i.ibb.co/V0L501Mk/S5d6.jpg); background-position:center; background-size:200%; box-shadow:5px 5px 0 #242424; align-self:end;"></div> <div style="flex:1 1 176px; height:130px; background:#ddd url(https://i.ibb.co/TqPRFN4b/Sunnydale-cemetery-on-Buffy-the-Vampire-Slayer.jpg); background-position:center; background-size:cover; box-shadow:5px 5px 0 #242424; align-self:end;"></div> <div style="flex:1 1 176px;"> <div style="font-family:georgia, serif; font-size:32px; color:#44af69; font-style:italic; text-align:left; text-transform:lowercase; line-height:calc(32px - 12px); text-shadow:0px 0px 4px rgba(170, 170, 170, .8);"> Yes. </div> <div style="display:grid; grid-auto-rows:min-content; grid-template-columns:min-content 1fr min-content; gap:5px 3px; height:180px; padding:10px; overflow:auto; background:#fff; border:1px solid #44af69; box-shadow:5px 5px #44af69; box-sizing:border-box; font-family:helvetica, arial, sans-serif; font-size:11px; line-height:11px; color:#242424; text-align:center;"> <div> ⇾ </div> <div style="text-align:left; cursor:default;"> Yes Kink 1 </div> <div></div> <div> ⇾ </div> <div style="text-align:left; cursor:default;"> Yes Kink 2 </div> <div></div> <div> ⇾ </div> <div style="text-align:left; cursor:default;"> <a href="?thread=10293#cmt10293" style="color:#44af69; font-weight:600; text-decoration:none;"> Yes Kink 3 </a> </div> <div>♥</div> <div> ⇽ </div> <div style="text-align:left; cursor:default;"> <a href="?thread=10549#cmt10549" style="color:#44af69; font-weight:600; text-decoration:none;"> Yes Kink 4 </a> </div> <div></div> <div> ⇽ </div> <div style="text-align:left; cursor:default;"> Yes Kink 5 </div> <div>♥</div> </div> </div> <div style="flex:1 1 176px;"> <div style="font-family:georgia, serif; font-size:32px; color:#f59909; font-style:italic; text-align:left; text-transform:lowercase; line-height:calc(32px - 12px); text-shadow:0px 0px 4px rgba(170, 170, 170, .8);"> Maybe. </div> <div style="display:grid; grid-auto-rows:min-content; grid-template-columns:min-content 1fr min-content; gap:5px 3px; height:180px; padding:10px; overflow:auto; background:#fff; border:1px solid #f59909; box-shadow:5px 5px #f59909; box-sizing:border-box; font-family:helvetica, arial, sans-serif; font-size:11px; line-height:11px; color:#242424; text-align:center;"> <div> • </div> <div style="text-align:left; cursor:default;" title="Here's a note."> Maybe Kink 1* </div> <div></div> <div> • </div> <div style="text-align:left; cursor:default;" title="Here's a note."> Maybe Kink 2* </div> <div></div> <div> ⇽ </div> <div style="text-align:left; cursor:default;"> Maybe Kink 3 </div> <div></div> <div> ↻ </div> <div style="text-align:left; cursor:default;"> <a href="?thread=11061#cmt11061" style="color:#f59909; font-weight:600; text-decoration:none;"> Maybe Kink 4 </a> </div> <div></div> </div> </div> <div style="flex:1 1 176px;"> <div style="font-family:georgia, serif; font-size:32px; color:#2b9eb3; font-style:italic; text-align:left; text-transform:lowercase; line-height:calc(32px - 12px); text-shadow:0px 0px 4px rgba(170, 170, 170, .8);"> IC Limit. </div> <div style="display:grid; grid-auto-rows:min-content; grid-template-columns:min-content 1fr min-content; gap:5px 3px; height:180px; padding:10px; overflow:auto; background:#fff; border:1px solid #2b9eb3; box-shadow:5px 5px #2b9eb3; box-sizing:border-box; font-family:helvetica, arial, sans-serif; font-size:11px; line-height:11px; color:#242424; text-align:center;"> <div> ↻ </div> <div style="text-align:left; cursor:default;" title="Here's a note."> Fave Kink 1* </div> <div>♥</div> <div> • </div> <div style="text-align:left; cursor:default;"> IC Limit Kink 1 </div> <div></div> <div> • </div> <div style="text-align:left; cursor:default;"> <a href="?thread=11829#cmt11829" style="color:#2b9eb3; font-weight:600; text-decoration:none;"> IC Limit Kink 2 </a> </div> <div></div> </div> </div> <div style="flex:1 1 176px;"> <div style="font-family:georgia, serif; font-size:32px; color:#f54009; font-style:italic; text-align:left; text-transform:lowercase; line-height:calc(32px - 12px); text-shadow:0px 0px 4px rgba(170, 170, 170, .8);"> OOC Limit. </div> <div style="display:grid; grid-auto-rows:min-content; grid-template-columns:min-content 1fr min-content; gap:5px 3px; height:180px; padding:10px; overflow:auto; background:#fff; border:1px solid #f54009; box-shadow:5px 5px #f54009; box-sizing:border-box; font-family:helvetica, arial, sans-serif; font-size:11px; line-height:11px; color:#242424; text-align:center;"> <div> • </div> <div style="text-align:left; cursor:default;"> OOC Limit Kink 1 </div> <div></div> <div> • </div> <div style="text-align:left; cursor:default;"> OOC Limit Kink 2 </div> <div></div> </div> </div> </div> <div style="width:100%; max-width:940px; font-size:calc(11px - 1px); display:flex; flex-direction:column; gap:10px;"> <div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:8px; background:#fff; border:1px solid rgba(170, 170, 170, .8); color:#242424; box-shadow:5px 5px 0 rgba(170, 170, 170, .8); box-sizing:border-box;"> <div> ↻ = both/either </div> <div> ⇽ = as the subject </div> <div> ⇾ = as the actor </div> <div> ♥ = ic and/or ooc favorites </div> <div> * = hover text </div> </div> <div style="width:100%; max-width:940px; text-align:right;"> <a href="https://raincoded.dreamwidth.org/1077.html?view=top-only" style="border:0; text-decoration:none;">🌧️</a> </div> </div> </div> </raw-code>

Comments

SETTINGS

[raincoded]

SECTIONS + HEADER

Title & Header

- Title: The text that appears in the header.
- Bio Title: The text that headlines the bio section.
- Header Font: The font for the main header.
- Header Font Size: The font size for the main header.
- Bio Font Size: The font size for the bio header.

Sections

- Update the name of a section and reorder to change the sections and titles.
- Each of COLOR here corresponds with the Section to the left of it. Default colors:
-- #008000
-- #f59909
-- #0000ff
-- #f54009
- Each SYMBOL here corresponds with the Section to the left of it. Replace these with stars, or anything else you like!
-- Default value: •

INDICATORS KEY SECTION

- Show Key: Yes/No
- BG Color: Key background color. Default is #fff. Set to transparent for a transparent key.
- Font Color: Key font color. Default is #242424. Set to inherit if you want black, dark-mode compatible text in a transparent key.
- Will use the SAME font family as LIST FONT.
- Shadow/Border Color: Key border and drop-shadow color. Default is #242424. Set to transparent for no border.
- Each INDICATOR here is what will show up as a "bullet" for a given kink. They are followed by explanations of that symbol, which will be included in the key in the footer.

LISTS

- BG Color: #fff
- Header Font: The font for the header on each list.
- Header Font Size: The font size for the header on each list.
- Font: The font for everything else.
- Font Size: The font size for everything else.
- Font Color: #242424

IMAGES

- Image Layout: Controls how many images to display and in what configuration. Each section has its own unique layout options.
- Shadow: Color of the drop shadow for the images in that section.
- Image1/2/3: The URL for the first, second, and third image in a given section.
- BG Color: The background color to display beneath a given image. Set to transparent for no background color. (This will cause the background color of the PAGE to show for transparent images, not the drop-shadow; to make a transparent image look like it's sitting on top of a drop-shadow square, set this color to match your shadow.)
- Image Position: top or center will usually work, but any valid value for background-position can be entered.
- Image Size: cover will usually work, but any valid value for background-size can be entered.

BIO

- Style: Controls the style of the first half of the bio. Can be just a blurb, just stats, or a combination of both. Condensed stats will be on one line (name: Character Name) instead of on separate lines (see live code).
- Blurb: Optional blurb. If the style is set to display the blurb, it will appear above the stats list.
- The rest of these fields represent NAMED PAIRS. You can replace the text of "Age" with "Species", for example, to list your character's species instead of their age. You can also add as many of these paired fields as you like.

Looking For
- Edit the Looking For text to change what appears above the second half of the bio.
- Style: Works like the previous Style section, but Hidden will hide this section completely without you needing to delete the data.
- Blurb: Optional blurb. If the style is set to display a blurb, it will appear above the data list.
- The remaining fields are quick yes/no options. They'll all show up on one line,
s many or as few items as you'd like to give a quick yes/no to.
- The remaining indicators let you choose how to signal your Yes/No/Maybe answers.