muselist: pocketful

[transilience]

This was originally going to be for storylines/wanted PSLs, but I felt like experimenting with <details> and it morphed on me. I think it would make a good cast list/CR chart for those (like me) who both enjoy ~visualosities~ and are lazy.

Two-column and three-column versions available.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget lacus sed justo condimentum consectetur at eget odio. Sed convallis consectetur facilisis. Duis sed enim hendrerit, accumsan dui nec, convallis eros.

THIS IS THE SONG THAT DOESN'T END YES IT GOES ON AND ON MY FRIEND SOME PEOPLE STARTED SINGING IT NOT KNOWING WHAT IT WAS AND THEY'LL CONTINUE SINGING IT FOREVER JUST BECAUSE THIS IS THE

NAME Susie Kew
GENDER Bird
OCCUPATION Daydreamer
PB PB Name
STATUS Active

TEXT OR WHATEVER

two column

<div style="display: grid; grid-template-columns: auto auto; width: 775px; margin: auto; font-family: sans-serif; font-size: 13px; color: #000;"> <!-- START CHARACTER BLOCK --> <div style="width: 350px; height: 114px; background: url(BACKGROUND) #ccc; background-size: cover; margin: 10px; padding: 5px; outline: 1px solid #666; outline-offset: 2px;"> <details style="font-style: italic; padding: 5px;"> <summary style="float: left; color: transparent; font-size: 0%; cursor:pointer;"><img src="ICON" style="width: 100px; border: 2px solid white;"></summary> <div style="box-sizing: border-box; overflow: auto; background: rgba(245,245,245,0.8); margin: 0; padding: 8px; height: 104px; text-align: justify; line-height: 1.4em;"> TEXT OR WHATEVER </div> </details> </div> <!-- END CHARACTER BLOCK --> </div>

three column

<div style="display: grid; grid-template-columns: auto auto auto; width: 1100px; margin: auto; font-family: sans-serif; font-size: 13px; color: #000;"> <!-- START CHARACTER BLOCK --> <div style="width: 350px; height: 114px; background: url(BACKGROUND) #ccc; background-size: cover; margin: 10px; padding: 5px; outline: 1px solid #666; outline-offset: 2px;"> <details style="font-style: italic; padding: 5px;"> <summary style="float: left; color: transparent; font-size: 0%; cursor:pointer;"><img src="ICON" style="width: 100px; border: 2px solid white;"></summary> <div style="box-sizing: border-box; overflow: auto; background: rgba(245,245,245,0.8); margin: 0; padding: 8px; height: 104px; text-align: justify; line-height: 1.4em;"> TEXT OR WHATEVER </div> </details> </div> <!-- END CHARACTER BLOCK --> </div>

find & replace

ICON → icon • BACKGROUND → background image • #ccc → background color • #666 → box outline • white → icon outline

Comments

[bellare]

Could you give more detailed instructions on how to install this? I can't get the columns to line up in either version.

[transilience]

do you have "disable auto-formatting" checked?

[bellare]

OMG i feel so dumb haha thank you so much that was it ♥

[transilience]

no prob!