[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.

Comments

example

[yanyan]

I'm only interested in writing Character A doing XYZ, but ABC is okay so long as 123. Back to top.

[at_heart]

Similar idea over here, but the comment links are an excellent idea. I was already using them for the image gallery here, and I feel so silly for not thinking that of course making them relative links would be good for page reloading ❤️

(You could totally easily use the generator thingie I made and modify it for your code if you wanted! Ever since I saw someone else doing it, I've been v excited and happy to recommend them.)

[amber]

thank you thank you thank you! i know i am not only going to be using this but linking it to others - since i am on mobile 100% of the time it's always so nice to see code that is responsive like this. scales really well with my phone's font size increases too.