[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

LIST

[raincoded]

- Section: The section to add the kink to.
- Name: The kink name.
- Type: The kink type, completely optional.
- Fave: Whether or not to add a favorite indicator after this kink.
- Link: An optional link to a comment on your journal where you can add mobile-friendly notes.

-- TIP: If you make these RELATIVE links (starting with ?thread), the whole page will not have to reload again, speeding up your load times!
- Note: Hovertext notes.

-- TIP: If you know you won't be using this column at all, you can delete it to tidy up your list with no consequences! (This only works with the columns on the end of a spreadsheet; you can delete NOTE and LINK, but not just LINK.)