[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

YES

[raincoded]

Yes Kink 3

[raincoded]

Here's a mobile-friendly note.

Yes Kink 4

[raincoded]

Here's a mobile-friendly note.