[code] kinklist #1

[yanyan]

Long time no see! It's 2023, so here's a web-responsive/mobile-friendly code for all your kinklist needs. Credit for the original idea goes to bannertech's kinklist code.

YES

•   Insert kink here.
•   Custom bullets.
•   text

MAYBE

•   text
•   text

IC LIMITS

•   text
•   text

OOC LIMITS

•   text
•   text

code by cawaii

CODE
Copy and paste the code below into the post you want to place it in.

<raw-code> <!--- CONTAINER START ---> <div style="width: 100%; font-size: 1em; display: flex; flex-direction: row; flex-wrap: wrap;"> <!--- YES ---> <div style="flex: 180px; text-align: left; background-color: rgba(255,255,255,1); margin: 10px; padding: 10px;"> <div style="width: 100%; text-align: right; font: 24pt cambria, georgia, sans serif; color: #44af69; border-bottom: 1px solid #44af69; display: block;">YES</div> <ul style="list-style: '✔'; margin-top: 8px; margin-left: -16px;"> <li>  Insert kink here.</li> <li style="list-style: '★';">  Custom bullets.</li> <li>  <a style="color: #44af69;" href="#cmt121686">text</a></li> </ul> </div> <!--- YES ---> <!--- MAYBE ---> <div style="flex: 180px; text-align: left; background-color: rgba(255,255,255,1); margin: 10px; padding: 10px;"> <div style="width: 100%; text-align: right; font: 24pt cambria, georgia, sans serif; color: #fcab10; border-bottom: 1px solid #fcab10; display: block;">MAYBE</div> <ul style="list-style-type: '△'; margin-top: 8px; margin-left: -16px;"> <li>  text</li> <li>  <a style="color: #fcab10;" href="#cmt0000">text</a></li> </ul> </div> <!--- MAYBE ---> <!--- IC LIMIT ---> <div style="flex: 180px; text-align: left; background-color: rgba(255,255,255,1); margin: 10px; padding: 10px;"> <div style="width: 100%; text-align: right; font: 24pt cambria, georgia, sans serif; color: #2b9eb3; border-bottom: 1px solid #2b9eb3; display: block;">IC LIMITS</div> <ul style="list-style-type: '✘'; margin-top: 8px; margin-left: -16px;"> <li>  text</li> <li>  <a style="color: #2b9eb3;" href="#cmt0000">text</a></li> </ul> </div> <!--- IC LIMIT ---> <!--- OOC LIMIT ---> <div style="flex: 180px; text-align: left; background-color: rgba(255,255,255,1); margin: 10px; padding: 10px;"> <div style="width: 100%; text-align: right; font: 24pt cambria, georgia, sans serif; color: #f8333c; border-bottom: 1px solid #f8333c; display: block;">OOC LIMITS</div> <ul style="list-style-type: '✘'; margin-top: 8px; margin-left: -16px;"> <li>  text</li> <li>  <a style="color: #f8333c;" href="#cmt0000">text</a></li> </ul> </div> <!--- OOC LIMIT ---> </div> <!--- CONTAINER END ---> <p style="font: 8pt calibri; text-align: center;">code by <a href="https://cawaii.dreamwidth.org/" style="color: #ff81b1; text-decoration: none;">cawaii</a></p> </raw-code>

WEB-RESPONSIVE?
This means this code is functioning and readable on all devices. Try resizing your browser window or viewing this on mobile/desktop to see what I mean!

BULLETS
You can change the bullets of each list by changing the highlighted part here: list-style: '★'; to anything here that applies to unordered lists. You can even use an image by replacing the highlighted text with url('INSERT YOUR LINK HERE'). You can also change individual bullets to indicate anything you need, like your favorite kinks or the legend provided by bannertech's code.

COLORS
You can change these colors to customize your code.

#44AF69

#FCAB10

#2B9EB3

#F8333C

TOOLTIPS/DESCRIPTIONS
Since tooltips don't work on mobile, I tried replicating the same function by using comments. Try clicking the link under the Yes column! It jumps to a comment on the page where you can further explain the item (e.g. "I only want to do XYZ if ABC" or "").

To do this, replace the highlighted text here: <a [...] href="#cmt0000"> with the last part of the URL of the comment you want to link to. This lets the reader jump to the comment without reloading the page every time.

If you use this code or have any questions, let me know in the comments! I like getting comments.