![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Entry tags:
[02] mobile-friendly grid kink list (+ optional generator)
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):
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.
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.
Maybe.
IC Limit.
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
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.
GENERATOR INSTRUCTIONS
USAGE
- Open the Google Sheets document! (You can see which VERSION it is by checking the title; the current version is also preserved on the INSTRUCTIONS sheet for future reference.)
- FILE > Make a copy
- You will want one copy for each character you plan to use this code for.
- Review the INSTRUCTIONS sheet if necessary. Also available on this sheet: quick-copy HTML that might be useful to you. Feel free to add more snippets. (You can then RIGHT-CLICK the INSTRUCTIONS SHEET and choose "Hide Sheet" to hide it.)
- From the SETTINGS sheet, set up your sections and pick your colors. These can be in any order. You can also add or remove sections, though I would recommend an even number. :) Perhaps combining "IC Limit"/"OOC Limit" into just "No" and adding "Favorites" as the first section.
- Fill out the LIST sheet, being sure to update your "Section" column if you've changed the sections from the original sheet.
NOTE: You can create line-breaks in any Google Sheets cell by hitting CTRL/CMD+ENTER.
COPYING YOUR DATA TO A NEW VERSION
- You can absolutely copy-paste data from old versions of my spreadsheet to new copies! Click on a column (e.g., "A" at the very top of the Section column on the LIST sheet), hit CTRL/CMD+C, and switch tabs to your fresh copy of my updated spreadsheet. Highlight the "A" column there, then hit CTRL/CMD+V.
- Take more care when copy-pasting columns with formulas involved, such as the Type and Fave columns; these can still be copy-pasted safely, as long as the values in the drop-down have not changed.
- Everything on the SETTINGS sheet, it would probably be safer to manually copy over instead.
SETTINGS
Title & 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
- 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
- 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
- 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
- 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
- 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.
LIST
- 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.)
NOTES
YES
Yes Kink 3
Yes Kink 4
MAYBE
Maybe Kink 4
NO
IC LIMIT
IC Limit Kink 2
no subject
And here's the entirety of the code, if needed: link for character limit.