Jewel
spirited
I'm shy so all I do is lurk but I come back to this thread to just behold your BBCode skills every day. I absolutely love everything that you do. You are a BBCode demigod. Obsessed.
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
I'm timid so all I do is skulk but I come back to your threads just to behold your trolling skills every day. I completely adore everything that you do. You are a troll semi-deity. Engrossed.I'm shy so all I do is lurk but I come back to this thread to just behold your BBCode skills every day. I absolutely love everything that you do. You are a BBCode demigod. Obsessed.
My heart is bursting right now, I am so flattered, thank you my friend. If you ever find that you do have time, I'd always be overjoyed to receive word from you.I'm timid so all I do is skulk but I come back to your threads just to behold your trolling skills every day. I completely adore everything that you do. You are a troll semi-deity. Engrossed.
LKDSFL sorry, what I mean is: thank you! Your threads are formatted very neatly, and I was this close to PMing you for a 1v1 before I realized I didn't have the time.
Thank you sm! When I first started here, I looked over the Tutorial - RpNation - BBcode Guide thread first — though I'm sure you've seen it, being that it's pinned to this center. There used to be a BBCode+ intro thread or something like that, but then that died, so we all started using CSS injections in background and border tags. Here's a slightly older thread that I think still is pretty relevant: Tutorial - BBCode CSS Injection. If you've used HTML before, you probably know a bit of CSS, so it shouldn't be too unfamiliar (but if it is, MDN and the general internet has a lot of CSS documentation). I believe some other BBCoders have tutorials that you can filter out in the BBCode Center as well? Also, I think the thing that helped me the most was looking at other people's code and breaking down the components, so feel free to take apart, break, wreck, sift through any of my codes if you feel like that's your jam.your codes... my fine gentleperson ... they are so exquisite. i love them, they're so pretty!! i became really good w html on other websites for this sort of thing and this only makes me want to learn bbcode even more !! how'd go about learning this?
I might! I'm honestly not sure where or what my inspiration comes from sometimes, so I can't say for certain, but it's definitely not off the table. On the other hand, it's hard to embody such a specific style like that in a general code, especially since the elements that separate those mythologies from other stuff are likely the art (and possibly font) used than anything else.I'm just thinking, but will you ever do a mytholagy one? like Norse mythology or Egyptian mythology, or Greek?
Or better, ones that would do well on role-calling roleplays?
Also, your stuff is A- MAZ-ING
[comment]-- Fonts --> [font=Macondo][font=Heebo]:>[/font][/font][/comment][border=0;
/* Probably best if you don't change anything I haven't commented next to */
margin: auto;
max-width: 950px;
padding: 0;
--h: clamp(380px, 90vh, 900px);
/* Colours */
--base: #4A6491; /* #3f98c9 */
--outline: #D0E4F2;
--accent: #30395C; /* #12619D */
--accent-2: #85A5CC; /* #89C2E1 */
/* Images -- image URL in url(''), percentages are x-value y-value image positioning */
/* Tab 1 Image */
--img-1: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c9aa5b64-52aa-4d3f-85c2-366bd57804bc/ddatbzg-bb7eb3a5-ff48-4edf-bbd8-6860c9df322b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M5YWE1YjY0LTUyYWEtNGQzZi04NWMyLTM2NmJkNTc4MDRiY1wvZGRhdGJ6Zy1iYjdlYjNhNS1mZjQ4LTRlZGYtYmJkOC02ODYwYzlkZjMyMmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bWn_j0HI_JgX_II9d0OUx9pGYF8QDP6yVPesmNSsyjk') 50% 100% / cover;
/* Tab 3 Images */
--img-2: url('https://pbs.twimg.com/media/ErkL6MHW8AIheQn?format=jpg&name=large') 50% 25% / cover;
--img-3: url('https://pbs.twimg.com/media/ErkL6NNXAAExA29?format=jpg&name=large') 50% 70% / cover;
--img-4: url('https://images.squarespace-cdn.com/content/v1/5f15cec690ad1413ae255f7e/1601332574045-P8HM3NEM3W08PP9TTG5A/image-asset.png?format=1500w') 50% 30% / cover;
/* Border Properties */
--b-r: 8px; /* Border radius -- a greater number makes it rounder and vice versa */
--b-w: 8px; /* Border width */
--bg-w: (var(--icon-s) + (2 * var(--b-w)));
--tabs-h: 250px;
--tab-f-s: 25px;
/* Icon Properties */
--icon-s: 90px; /* Background box size -- changing it might mess up code */
--icon-f-s: 55px; /* Icon size */
--bar-w: 72px;
/* Title Properties */
--title-f-s: 2em; /* Font size -- change by .1 increments, increasing size might mess it up on smaller screens */
--title-f: 'Macondo', sans-serif; /* Font family -- change font tag above if you change this */
--title-p: max(10px, 5%);
/* Gradient Opacity */
--grad-o: 50%;
/* Content Properties */
--con-p: clamp(10px, 2%, 20px); /* Padding */
--con-c: azure; /* Text colour */
--con-f-s: 1.05em; /* Font size -- change by .1 increments */
--con-f: 'Heebo', sans-serif; /* Font family -- change font tag above if you change this */
/* Divider Height */
--div-h: 2px;
/* Header Properties */
--head-f-s: 1.3em; /* Font size -- change by .1 increments */
--head-p: 6px;
][comment]-- Tab Note --[/comment][border=0;
padding: 0;
color: var(--outline);
font-family: var(--con-f);
line-height: 1.8;]Click Tabs [fa]fa-solid fa-arrow-down[/fa][/border][comment]-- Main --[/comment][border=0;
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: calc(var(--bg-w)) 0 0 0;][comment]-- Icon Border --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][comment]
-- Icon Box --[/comment][border=0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: var(--icon-s);
height: var(--icon-s);
border-radius: var(--b-r);
background: var(--base);
padding: 0;][/border][comment]
-- Icon Box End --[/comment][/border][comment]
-- Icon Border End --[/comment][comment]
-- Title Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0;
overflow: hidden;][comment]-- Title Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;][/border][/border][comment]
-- Header Box End --[/comment][comment]
-- Tab Bar Background --[/comment][border=0;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
pointer-events: none;][/border][comment]
-- Tab Bar Background End --[/comment][comment]
-- Actual Tabs --[/comment][border=0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin-left: 20px;
box-sizing: border-box;
width: 66px;
height: var(--tabs-h);
padding: 0;
line-height: 60px;
overflow: hidden;][tabs]
[tab=0][comment]
------------ Tab 1 Body ------------
[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]LOREM IPSUM[/border][comment]
-- Title End --[/comment][comment]
-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -20%, rgba(0, 0, 0, 0) 40%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]
-- Tab Border --[/comment][border=0;
position: absolute;
top: calc(0px - 14px);
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]
-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-user fa-fade[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]
-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Image + Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
padding: calc(var(--con-p) / 2);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 2);
flex: 1 1 200px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
min-height: 280px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-1);
padding: 0;][/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 1.75);
flex: 2 1 300px;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Blue Moon [fa]fa-solid fa-moon[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Point
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]TIER[/border] II–III
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]GROUP[/border] Amores III
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BRANCH[/border] Little Latonia
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BATCH[/border] Noche
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MENTOR[/border] Daybreak
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTABLE SKILLS[/border] Aqua Scrying, Birdspeak
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTES[/border] Check [i]Report on Operation Rose Train[/i] for details on patterns and expertise
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] PicardLouis[/border][/border][comment]
-- Image + Text End --[/comment][comment]
-- More Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]DESCRIPTION[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- More Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]
[tab=0][comment]
------------ Tab 2 Body ------------
[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]IPSUM LOREM[/border][comment]
-- Title End --[/comment][comment]
-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -10%, rgba(0, 0, 0, 0) 50%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]
-- Tab Border --[/comment][border=0;
position: absolute;
top: 50px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]
-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-clock fa-fade[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]
-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]HISTORY[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]
[tab=0][comment]
------------ Tab 3 Body ------------
[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]DOLOR SIT[/border][comment]
-- Title End --[/comment][comment]
-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent), rgba(0, 0, 0, 0) 60%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]
-- Tab Border --[/comment][border=0;
position: absolute;
top: 115px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]
-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-users fa-fade[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]
-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]
-- Image + Header + Text 1 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-2);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO GUARDS THE NIGHT[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nightingale [fa]fa-solid fa-crow[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Shield
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 1 End --[/comment][comment]
-- Header + Text + Image 2 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap-reverse;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-left-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO PONDERS THE DUSK[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) var(--con-p) 0 0;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Sundown [fa]fa-solid fa-sun-haze[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Core
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][comment]-- Header + Text End --[/comment][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-3);
padding: 0;][/border][/border][/border][comment]
-- Header + Text + Image 2 End --[/comment][comment]
-- Image + Header + Text 3 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-4);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO WALKS AMONG CLOUDS[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nimbus [fa]fa-solid fa-cloud[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Step
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 3 End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]
[tab=0][comment]
------------ Tab 4 Body ------------
[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]SIT DOLOR[/border][comment]
-- Title End --[/comment][comment]
-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) 10%, rgba(0, 0, 0, 0) 70%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]
-- Tab Border --[/comment][border=0;
position: absolute;
top: 180px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]
-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-list fa-fade[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]
-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]QUOTES[/border]
"There is a moon sole in the blue night."
"Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac."
"In tellus integer feugiat scelerisque varius morbi enim nunc faucibus."
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MUSIC[/border] [MEDIA=youtube]4kVO6PQyVhY[/MEDIA]
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MISC[/border] Lorem ipsum dolor sit amet elit, sed do eiusmod aliqua.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]
[/tabs][/border][comment]
-- Actual Tabs End --[/comment][/border][comment]
-- Main End --[/comment][comment]-- Scroll Note --[/comment][border=0;
padding: 0;
color: var(--base);
font-family: var(--con-f);
text-align: right;
line-height: 1.8;]Scroll [fa]fa-solid fa-arrow-down[/fa][/border][/border]
Toggle TabsNon-toggling tabs code. Ignore the name.
I have arisen from the BBCode grave — for a bit, I'mma move back in right now. I'm not entirely satisfied with this inconsistent looking layout, but I finished it, so I thought I'd put it out anyway. In the process, I have reminded myself again how difficult it is to put in understandable comments. (Not that my comments are understandable. :v)
Click Tabs
LOREM IPSUMALIASBlue Moon
ROLEPoint
TIERII–III
GROUPAmores III
BRANCHLittle Latonia
BATCHNoche
MENTORDaybreak
NOTABLE SKILLSAqua Scrying, Birdspeak
NOTESCheck Report on Operation Rose Train for details on patterns and expertise
ARTISTPicardLouisDESCRIPTION
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
EXPANDED
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam. IPSUM LOREMHISTORY
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus.
EXPANDED
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam. DOLOR SITONE WHO GUARDS THE NIGHTALIASNightingale
ROLEShield
RELATIONSHIP
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
ARTISTEliot BaumONE WHO PONDERS THE DUSKALIASSundown
ROLECore
RELATIONSHIP
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
ARTISTEliot BaumONE WHO WALKS AMONG CLOUDSALIASNimbus
ROLEStep
RELATIONSHIP
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
ARTISTEliot Baum SIT DOLORQUOTES
"There is a moon sole in the blue night."
"Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac."
"In tellus integer feugiat scelerisque varius morbi enim nunc faucibus."
MUSIC
MISCLorem ipsum dolor sit amet elit, sed do eiusmod aliqua.Scroll
Code:[comment]-- Fonts --> [font=Macondo][font=Heebo]:>[/font][/font][/comment][border=0; /* Probably best if you don't change anything I haven't commented next to */ margin: auto; max-width: 950px; padding: 0; --h: clamp(380px, 90vh, 900px); /* Colours */ --base: #4A6491; /* #3f98c9 */ --outline: #D0E4F2; --accent: #30395C; /* #12619D */ --accent-2: #85A5CC; /* #89C2E1 */ /* Images -- image URL in url(''), percentages are x-value y-value image positioning */ /* Tab 1 Image */ --img-1: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c9aa5b64-52aa-4d3f-85c2-366bd57804bc/ddatbzg-bb7eb3a5-ff48-4edf-bbd8-6860c9df322b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M5YWE1YjY0LTUyYWEtNGQzZi04NWMyLTM2NmJkNTc4MDRiY1wvZGRhdGJ6Zy1iYjdlYjNhNS1mZjQ4LTRlZGYtYmJkOC02ODYwYzlkZjMyMmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bWn_j0HI_JgX_II9d0OUx9pGYF8QDP6yVPesmNSsyjk') 50% 100% / cover; /* Tab 3 Images */ --img-2: url('https://pbs.twimg.com/media/ErkL6MHW8AIheQn?format=jpg&name=large') 50% 25% / cover; --img-3: url('https://pbs.twimg.com/media/ErkL6NNXAAExA29?format=jpg&name=large') 50% 70% / cover; --img-4: url('https://images.squarespace-cdn.com/content/v1/5f15cec690ad1413ae255f7e/1601332574045-P8HM3NEM3W08PP9TTG5A/image-asset.png?format=1500w') 50% 30% / cover; /* Border Properties */ --b-r: 8px; /* Border radius -- a greater number makes it rounder and vice versa */ --b-w: 8px; /* Border width */ --bg-w: (var(--icon-s) + (2 * var(--b-w))); --tabs-h: 250px; --tab-f-s: 25px; /* Icon Properties */ --icon-s: 90px; /* Background box size -- changing it might mess up code */ --icon-f-s: 55px; /* Icon size */ --bar-w: 72px; /* Title Properties */ --title-f-s: 2em; /* Font size -- change by .1 increments, increasing size might mess it up on smaller screens */ --title-f: 'Macondo', sans-serif; /* Font family -- change font tag above if you change this */ --title-p: max(10px, 5%); /* Gradient Opacity */ --grad-o: 50%; /* Content Properties */ --con-p: clamp(10px, 2%, 20px); /* Padding */ --con-c: azure; /* Text colour */ --con-f-s: 1.05em; /* Font size -- change by .1 increments */ --con-f: 'Heebo', sans-serif; /* Font family -- change font tag above if you change this */ /* Divider Height */ --div-h: 2px; /* Header Properties */ --head-f-s: 1.3em; /* Font size -- change by .1 increments */ --head-p: 6px; ][comment]-- Tab Note --[/comment][border=0; padding: 0; color: var(--outline); font-family: var(--con-f); line-height: 1.8;]Click Tabs [fa]fa-solid fa-arrow-down[/fa][/border][comment]-- Main --[/comment][border=0; position: relative; display: flex; flex-flow: row nowrap; align-items: center; box-sizing: border-box; width: 100%; height: var(--h); padding: calc(var(--bg-w)) 0 0 0;][comment]-- Icon Border --[/comment][border=0; position: absolute; top: 0; left: 0; box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: calc(var(--bg-w)); height: calc(var(--bg-w)); border-radius: var(--b-r); background: var(--outline); padding: 0;][comment] -- Icon Box --[/comment][border=0; box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: var(--icon-s); height: var(--icon-s); border-radius: var(--b-r); background: var(--base); padding: 0;][/border][comment] -- Icon Box End --[/comment][/border][comment] -- Icon Border End --[/comment][comment] -- Title Box --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc((var(--bg-w) - var(--bar-w)) / 2); left: calc(var(--bg-w)); border-top-right-radius: var(--b-r); border-bottom-right-radius: var(--b-r); background: var(--accent-2); width: calc(100% - var(--bg-w)); height: var(--bar-w); padding: 0; overflow: hidden;][comment]-- Title Gradient --[/comment][border=0; opacity: var(--grad-o); box-sizing: border-box; width: 100%; height: 100%; background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent)); padding: 0;][/border][/border][comment] -- Header Box End --[/comment][comment] -- Tab Bar Background --[/comment][border=0; position: absolute; top: calc(var(--bg-w)); left: calc((var(--bg-w) - var(--bar-w)) / 2); padding: 0; width: var(--bar-w); height: calc(100% - var(--bg-w)); border-bottom-right-radius: var(--b-r); border-bottom-left-radius: var(--b-r); background: var(--accent-2); pointer-events: none;][/border][comment] -- Tab Bar Background End --[/comment][comment] -- Actual Tabs --[/comment][border=0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; margin-left: 20px; box-sizing: border-box; width: 66px; height: var(--tabs-h); padding: 0; line-height: 60px; overflow: hidden;][tabs] [tab=0][comment] ------------ Tab 1 Body ------------ [/comment][border=0; position: absolute; top: 0; left: 0; width: 100%; height: var(--h); box-sizing: border-box; padding: 0; pointer-events: none;][comment] -- Icon --[/comment][border=0; position: absolute; top: 0; left: 0; box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: calc(var(--bg-w)); height: calc(var(--bg-w)); color: var(--accent); font-size: var(--icon-f-s); padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment] -- Icon End --[/comment][comment] -- Title --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc((var(--bg-w) - var(--bar-w)) / 2); left: calc(var(--bg-w)); display: flex; flex-flow: row nowrap; align-items: center; width: calc(100% - var(--bg-w)); height: var(--bar-w); padding: 0 var(--title-p); color: var(--outline); font-size: var(--title-f-s); font-family: var(--title-f); line-height: 1; pointer-events: auto;]LOREM IPSUM[/border][comment] -- Title End --[/comment][comment] -- Tabs Bar --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc(var(--bg-w)); left: calc((var(--bg-w) - var(--bar-w)) / 2); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0; width: var(--bar-w); height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0; opacity: var(--grad-o); box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom-right-radius: var(--b-r); border-bottom-left-radius: var(--b-r); background: linear-gradient(var(--accent) -20%, rgba(0, 0, 0, 0) 40%, var(--accent)); padding: 0;][/border][comment]-- Tabs --[/comment][border=0; position: relative; box-sizing: border-box; width: 100%; height: var(--tabs-h); color: var(--accent); font-size: var(--tab-f-s); text-align: center; padding: 0;][comment] -- Tab Border --[/comment][border=0; position: absolute; top: calc(0px - 14px); left: calc(0px - var(--b-w)); box-sizing: border-box; border-radius: var(--b-r); width: calc(var(--bar-w) + (2 * var(--b-w))); height: calc(var(--bar-w) + (2 * var(--b-w))); border: var(--b-w) solid var(--base); padding: 0;][/border][comment]-- Tab Border End --[/comment][comment] -- Tab Covers --[/comment][border=0; position: absolute; top: 0px; width: 100%; color: var(--outline); font-size: 1.5em; --fa-fade-opacity: 0.5; --fa-animation-duration: 1.6s; padding: 0;][fa]fa-solid fa-user fa-fade[/fa][/border][border=0; position: absolute; top: 65px; width: 100%; padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0; position: absolute; top: 130px; width: 100%; padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0; position: absolute; top: 195px; width: 100%; padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment] -- Tabs Bar End --[/comment][comment] -- Content Box --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc(var(--bg-w)); left: calc(var(--bg-w)); width: calc(100% - var(--bg-w)); height: calc(100% - var(--bg-w)); border-radius: var(--b-r); background: var(--base); padding: 0; color: var(--con-c); font-size: var(--con-f-s); font-family: var(--con-f); line-height: 1.5; overflow: hidden; pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0; overflow: auto;][comment]-- Image + Text --[/comment][border=0; box-sizing: border-box; width: calc(100% - 30px); display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; padding: calc(var(--con-p) / 2);][comment]-- Image --[/comment][border=0; box-sizing: border-box; margin: calc(var(--con-p) / 2); flex: 1 1 200px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; min-height: 280px; border-radius: var(--b-r); background: var(--outline); padding: 0;][border=0; box-sizing: border-box; width: calc(100% - (2 * var(--b-w))); height: calc(100% - (2 * var(--b-w))); border-radius: var(--b-r); background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-1); padding: 0;][/border][/border][comment]-- Text --[/comment][border=0; box-sizing: border-box; margin: calc(var(--con-p) / 1.75); flex: 2 1 300px; padding: 0;][comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ALIAS[/border] Blue Moon [fa]fa-solid fa-moon[/fa] [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ROLE[/border] Point [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]TIER[/border] II–III [comment]-- Divider --[/comment][border=0; padding: 0; position: relative; top: -4px; display: inline-block; width: 100%; height: var(--div-h); border-radius: var(--b-r); background: var(--accent-2);][/border][comment]-- Divider End --[/comment] [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]GROUP[/border] Amores III [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]BRANCH[/border] Little Latonia [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]BATCH[/border] Noche [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]MENTOR[/border] Daybreak [comment]-- Divider --[/comment][border=0; padding: 0; position: relative; top: -4px; display: inline-block; width: 100%; height: var(--div-h); border-radius: var(--b-r); background: var(--accent-2);][/border][comment]-- Divider End --[/comment] [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]NOTABLE SKILLS[/border] Aqua Scrying, Birdspeak [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]NOTES[/border] Check [i]Report on Operation Rose Train[/i] for details on patterns and expertise [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ARTIST[/border] PicardLouis[/border][/border][comment] -- Image + Text End --[/comment][comment] -- More Text --[/comment][border=0; box-sizing: border-box; width: calc(100% - 30px); padding: var(--con-p);][comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]DESCRIPTION[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc. [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]EXPANDED[/border] Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- More Text End --[/comment][/border][/border][comment] -- Content Box End --[/comment][/border][/tab] [tab=0][comment] ------------ Tab 2 Body ------------ [/comment][border=0; position: absolute; top: 0; left: 0; width: 100%; height: var(--h); box-sizing: border-box; padding: 0; pointer-events: none;][comment] -- Icon --[/comment][border=0; position: absolute; top: 0; left: 0; box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: calc(var(--bg-w)); height: calc(var(--bg-w)); color: var(--accent); font-size: var(--icon-f-s); padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment] -- Icon End --[/comment][comment] -- Title --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc((var(--bg-w) - var(--bar-w)) / 2); left: calc(var(--bg-w)); display: flex; flex-flow: row nowrap; align-items: center; width: calc(100% - var(--bg-w)); height: var(--bar-w); padding: 0 var(--title-p); color: var(--outline); font-size: var(--title-f-s); font-family: var(--title-f); line-height: 1; pointer-events: auto;]IPSUM LOREM[/border][comment] -- Title End --[/comment][comment] -- Tabs Bar --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc(var(--bg-w)); left: calc((var(--bg-w) - var(--bar-w)) / 2); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0; width: var(--bar-w); height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0; opacity: var(--grad-o); box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom-right-radius: var(--b-r); border-bottom-left-radius: var(--b-r); background: linear-gradient(var(--accent) -10%, rgba(0, 0, 0, 0) 50%, var(--accent)); padding: 0;][/border][comment]-- Tabs --[/comment][border=0; position: relative; box-sizing: border-box; width: 100%; height: var(--tabs-h); color: var(--accent); font-size: var(--tab-f-s); text-align: center; padding: 0;][comment] -- Tab Border --[/comment][border=0; position: absolute; top: 50px; left: calc(0px - var(--b-w)); box-sizing: border-box; border-radius: var(--b-r); width: calc(var(--bar-w) + (2 * var(--b-w))); height: calc(var(--bar-w) + (2 * var(--b-w))); border: var(--b-w) solid var(--base); padding: 0;][/border][comment]-- Tab Border End --[/comment][comment] -- Tab Covers --[/comment][border=0; position: absolute; top: 0px; width: 100%; padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0; position: absolute; top: 65px; width: 100%; color: var(--outline); font-size: 1.5em; --fa-fade-opacity: 0.5; --fa-animation-duration: 1.6s; padding: 0;][fa]fa-solid fa-clock fa-fade[/fa][/border][border=0; position: absolute; top: 130px; width: 100%; padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0; position: absolute; top: 195px; width: 100%; padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment] -- Tabs Bar End --[/comment][comment] -- Content Box --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc(var(--bg-w)); left: calc(var(--bg-w)); width: calc(100% - var(--bg-w)); height: calc(100% - var(--bg-w)); border-radius: var(--b-r); background: var(--base); padding: 0; color: var(--con-c); font-size: var(--con-f-s); font-family: var(--con-f); line-height: 1.5; overflow: hidden; pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0; overflow: auto;][comment]-- Text --[/comment][border=0; box-sizing: border-box; width: calc(100% - 30px); padding: var(--con-p);][comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]HISTORY[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc. Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus. [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]EXPANDED[/border] Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- Text End --[/comment][/border][/border][comment] -- Content Box End --[/comment][/border][/tab] [tab=0][comment] ------------ Tab 3 Body ------------ [/comment][border=0; position: absolute; top: 0; left: 0; width: 100%; height: var(--h); box-sizing: border-box; padding: 0; pointer-events: none;][comment] -- Icon --[/comment][border=0; position: absolute; top: 0; left: 0; box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: calc(var(--bg-w)); height: calc(var(--bg-w)); color: var(--accent); font-size: var(--icon-f-s); padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment] -- Icon End --[/comment][comment] -- Title --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc((var(--bg-w) - var(--bar-w)) / 2); left: calc(var(--bg-w)); display: flex; flex-flow: row nowrap; align-items: center; width: calc(100% - var(--bg-w)); height: var(--bar-w); padding: 0 var(--title-p); color: var(--outline); font-size: var(--title-f-s); font-family: var(--title-f); line-height: 1; pointer-events: auto;]DOLOR SIT[/border][comment] -- Title End --[/comment][comment] -- Tabs Bar --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc(var(--bg-w)); left: calc((var(--bg-w) - var(--bar-w)) / 2); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0; width: var(--bar-w); height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0; opacity: var(--grad-o); box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom-right-radius: var(--b-r); border-bottom-left-radius: var(--b-r); background: linear-gradient(var(--accent), rgba(0, 0, 0, 0) 60%, var(--accent)); padding: 0;][/border][comment]-- Tabs --[/comment][border=0; position: relative; box-sizing: border-box; width: 100%; height: var(--tabs-h); color: var(--accent); font-size: var(--tab-f-s); text-align: center; padding: 0;][comment] -- Tab Border --[/comment][border=0; position: absolute; top: 115px; left: calc(0px - var(--b-w)); box-sizing: border-box; border-radius: var(--b-r); width: calc(var(--bar-w) + (2 * var(--b-w))); height: calc(var(--bar-w) + (2 * var(--b-w))); border: var(--b-w) solid var(--base); padding: 0;][/border][comment]-- Tab Border End --[/comment][comment] -- Tab Covers --[/comment][border=0; position: absolute; top: 0px; width: 100%; padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0; position: absolute; top: 65px; width: 100%; padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0; position: absolute; top: 130px; width: 100%; color: var(--outline); font-size: 1.5em; --fa-fade-opacity: 0.5; --fa-animation-duration: 1.6s; padding: 0;][fa]fa-solid fa-users fa-fade[/fa][/border][border=0; position: absolute; top: 195px; width: 100%; padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment] -- Tabs Bar End --[/comment][comment] -- Content Box --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc(var(--bg-w)); left: calc(var(--bg-w)); width: calc(100% - var(--bg-w)); height: calc(100% - var(--bg-w)); border-radius: var(--b-r); background: var(--base); padding: 0; color: var(--con-c); font-size: var(--con-f-s); font-family: var(--con-f); line-height: 1.5; overflow: hidden; pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0; overflow: auto;][comment] -- Image + Header + Text 1 --[/comment][border=0; box-sizing: border-box; width: calc(100% - 30px); display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; padding: var(--con-p);][comment]-- Image --[/comment][border=0; box-sizing: border-box; flex: 1 1 160px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; max-width: 240px; min-height: 180px; border-radius: var(--b-r); background: var(--outline); padding: 0;][border=0; box-sizing: border-box; width: calc(100% - (2 * var(--b-w))); height: calc(100% - (2 * var(--b-w))); border-radius: var(--b-r); background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-2); padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0; box-sizing: border-box; flex: 3 1 320px; padding: 0;][comment]-- Header --[/comment][border=0; position: relative; margin-top: var(--b-w); box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; border-top-right-radius: var(--b-r); border-bottom-right-radius: var(--b-r); background: var(--accent-2); padding: var(--head-p) var(--title-p); overflow: hidden;][comment]-- Header Gradient --[/comment][border=0; position: absolute; top: 0; left: 0; box-sizing: border-box; opacity: var(--grad-o); box-sizing: border-box; width: 100%; height: 100%; background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%); padding: 0; z-index: 1;][/border][comment]-- Header Text --[/comment][border=0; padding: 0; color: var(--outline); font-size: var(--head-f-s); font-family: var(--title-f); z-index: 2;]ONE WHO GUARDS THE NIGHT[/border][/border][comment]-- Text --[/comment][border=0; box-sizing: border-box; margin: var(--con-p) 0 0 var(--con-p); padding: 0;][comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ALIAS[/border] Nightingale [fa]fa-solid fa-crow[/fa] [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ROLE[/border] Shield [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]RELATIONSHIP[/border] Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut. [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment] -- Image + Header + Text 1 End --[/comment][comment] -- Header + Text + Image 2 --[/comment][border=0; box-sizing: border-box; width: calc(100% - 30px); display: flex; flex-flow: row wrap-reverse; justify-content: center; align-items: stretch; padding: var(--con-p);][comment]-- Header + Text --[/comment][border=0; box-sizing: border-box; flex: 3 1 320px; padding: 0;][comment]-- Header --[/comment][border=0; position: relative; margin-top: var(--b-w); box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; border-top-left-radius: var(--b-r); border-bottom-left-radius: var(--b-r); background: var(--accent-2); padding: var(--head-p) var(--title-p); overflow: hidden;][comment]-- Header Gradient --[/comment][border=0; position: absolute; top: 0; left: 0; box-sizing: border-box; opacity: var(--grad-o); box-sizing: border-box; width: 100%; height: 100%; background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent)); padding: 0; z-index: 1;][/border][comment]-- Header Text --[/comment][border=0; padding: 0; color: var(--outline); font-size: var(--head-f-s); font-family: var(--title-f); z-index: 2;]ONE WHO PONDERS THE DUSK[/border][/border][comment]-- Text --[/comment][border=0; box-sizing: border-box; margin: var(--con-p) var(--con-p) 0 0; padding: 0;][comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ALIAS[/border] Sundown [fa]fa-solid fa-sun-haze[/fa] [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ROLE[/border] Core [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]RELATIONSHIP[/border] Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut. [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][comment]-- Header + Text End --[/comment][comment]-- Image --[/comment][border=0; box-sizing: border-box; flex: 1 1 160px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; max-width: 240px; min-height: 180px; border-radius: var(--b-r); background: var(--outline); padding: 0;][border=0; box-sizing: border-box; width: calc(100% - (2 * var(--b-w))); height: calc(100% - (2 * var(--b-w))); border-radius: var(--b-r); background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-3); padding: 0;][/border][/border][/border][comment] -- Header + Text + Image 2 End --[/comment][comment] -- Image + Header + Text 3 --[/comment][border=0; box-sizing: border-box; width: calc(100% - 30px); display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; padding: var(--con-p);][comment]-- Image --[/comment][border=0; box-sizing: border-box; flex: 1 1 160px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; max-width: 240px; min-height: 180px; border-radius: var(--b-r); background: var(--outline); padding: 0;][border=0; box-sizing: border-box; width: calc(100% - (2 * var(--b-w))); height: calc(100% - (2 * var(--b-w))); border-radius: var(--b-r); background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-4); padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0; box-sizing: border-box; flex: 3 1 320px; padding: 0;][comment]-- Header --[/comment][border=0; position: relative; margin-top: var(--b-w); box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; border-top-right-radius: var(--b-r); border-bottom-right-radius: var(--b-r); background: var(--accent-2); padding: var(--head-p) var(--title-p); overflow: hidden;][comment]-- Header Gradient --[/comment][border=0; position: absolute; top: 0; left: 0; box-sizing: border-box; opacity: var(--grad-o); box-sizing: border-box; width: 100%; height: 100%; background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%); padding: 0; z-index: 1;][/border][comment]-- Header Text --[/comment][border=0; padding: 0; color: var(--outline); font-size: var(--head-f-s); font-family: var(--title-f); z-index: 2;]ONE WHO WALKS AMONG CLOUDS[/border][/border][comment]-- Text --[/comment][border=0; box-sizing: border-box; margin: var(--con-p) 0 0 var(--con-p); padding: 0;][comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ALIAS[/border] Nimbus [fa]fa-solid fa-cloud[/fa] [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ROLE[/border] Step [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]RELATIONSHIP[/border] Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut. [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment] -- Image + Header + Text 3 End --[/comment][/border][/border][comment] -- Content Box End --[/comment][/border][/tab] [tab=0][comment] ------------ Tab 4 Body ------------ [/comment][border=0; position: absolute; top: 0; left: 0; width: 100%; height: var(--h); box-sizing: border-box; padding: 0; pointer-events: none;][comment] -- Icon --[/comment][border=0; position: absolute; top: 0; left: 0; box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: calc(var(--bg-w)); height: calc(var(--bg-w)); color: var(--accent); font-size: var(--icon-f-s); padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment] -- Icon End --[/comment][comment] -- Title --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc((var(--bg-w) - var(--bar-w)) / 2); left: calc(var(--bg-w)); display: flex; flex-flow: row nowrap; align-items: center; width: calc(100% - var(--bg-w)); height: var(--bar-w); padding: 0 var(--title-p); color: var(--outline); font-size: var(--title-f-s); font-family: var(--title-f); line-height: 1; pointer-events: auto;]SIT DOLOR[/border][comment] -- Title End --[/comment][comment] -- Tabs Bar --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc(var(--bg-w)); left: calc((var(--bg-w) - var(--bar-w)) / 2); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0; width: var(--bar-w); height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0; opacity: var(--grad-o); box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom-right-radius: var(--b-r); border-bottom-left-radius: var(--b-r); background: linear-gradient(var(--accent) 10%, rgba(0, 0, 0, 0) 70%, var(--accent)); padding: 0;][/border][comment]-- Tabs --[/comment][border=0; position: relative; box-sizing: border-box; width: 100%; height: var(--tabs-h); color: var(--accent); font-size: var(--tab-f-s); text-align: center; padding: 0;][comment] -- Tab Border --[/comment][border=0; position: absolute; top: 180px; left: calc(0px - var(--b-w)); box-sizing: border-box; border-radius: var(--b-r); width: calc(var(--bar-w) + (2 * var(--b-w))); height: calc(var(--bar-w) + (2 * var(--b-w))); border: var(--b-w) solid var(--base); padding: 0;][/border][comment]-- Tab Border End --[/comment][comment] -- Tab Covers --[/comment][border=0; position: absolute; top: 0px; width: 100%; padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0; position: absolute; top: 65px; width: 100%; padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0; position: absolute; top: 130px; width: 100%; padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0; position: absolute; top: 195px; width: 100%; color: var(--outline); font-size: 1.5em; --fa-fade-opacity: 0.5; --fa-animation-duration: 1.6s; padding: 0;][fa]fa-solid fa-list fa-fade[/fa][/border][/border][/border][comment] -- Tabs Bar End --[/comment][comment] -- Content Box --[/comment][border=0; box-sizing: border-box; position: absolute; top: calc(var(--bg-w)); left: calc(var(--bg-w)); width: calc(100% - var(--bg-w)); height: calc(100% - var(--bg-w)); border-radius: var(--b-r); background: var(--base); padding: 0; color: var(--con-c); font-size: var(--con-f-s); font-family: var(--con-f); line-height: 1.5; overflow: hidden; pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0; overflow: auto;][comment]-- Text --[/comment][border=0; box-sizing: border-box; width: calc(100% - 30px); padding: var(--con-p);][comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]QUOTES[/border] "There is a moon sole in the blue night." "Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac." "In tellus integer feugiat scelerisque varius morbi enim nunc faucibus." [comment]-- Divider --[/comment][border=0; padding: 0; position: relative; top: -4px; display: inline-block; width: 100%; height: var(--div-h); border-radius: var(--b-r); background: var(--accent-2);][/border][comment]-- Divider End --[/comment] [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]MUSIC[/border] [MEDIA=youtube]4kVO6PQyVhY[/MEDIA] [comment]-- Divider --[/comment][border=0; padding: 0; position: relative; top: -4px; display: inline-block; width: 100%; height: var(--div-h); border-radius: var(--b-r); background: var(--accent-2);][/border][comment]-- Divider End --[/comment] [comment]-- Label --[/comment][border=0; margin-bottom: 4px; display: inline-block; padding: 0 6px; border-radius: calc(var(--b-r) / 1.5); background: var(--accent);]MISC[/border] Lorem ipsum dolor sit amet elit, sed do eiusmod aliqua.[/border][comment]-- Text End --[/comment][/border][/border][comment] -- Content Box End --[/comment][/border][/tab] [/tabs][/border][comment] -- Actual Tabs End --[/comment][/border][comment] -- Main End --[/comment][comment]-- Scroll Note --[/comment][border=0; padding: 0; color: var(--base); font-family: var(--con-f); text-align: right; line-height: 1.8;]Scroll [fa]fa-solid fa-arrow-down[/fa][/border][/border]
Thank you!I love this code! e_e!
I’m glad my angry humour made you laugh. It’s the first time someone has told me my sense of comedy beats out my coding skills.Omg I was going through the thread looking for codes totear into tiny incomprehensible piecesdecompose and analyze, and when I came across the Login Error one I laughed out loud for nearly a full minute x.x
Your eye for design and coding skills are undeniable, but that sense of humor is SUPERLATIVE xD
I’m glad my angry humour made you laugh. It’s the first time someone has told me my sense of comedy beats out my coding skills.
No, love you. Jk, thank you!I just wanted to say amazing work!
Love them!
Thank you!!Literally these are all insane I can't just go without leaving a comment they're all so fun and creative and beautiful!!!
Hehe, it always makes me happy to see what people use my coding for, so thank you for sharing!I just wanted to share a little post that your coding gave life too. Thank you for sharing this stuff. It really adds so much to the site.
[comment]Fonts -->[font=Sarala][font=Kolker Brush]:S[/font][/font][/comment][border=0;
/* Probably best if you don't change anything I haven't commented next to */
margin-right: 5px;
display: inline-block;
box-sizing: border-box;
padding: 0;
overflow: hidden;
--h: 250px; /* Height and width for background */
--w: calc(var(--h) + var(--gap));
--gap: 12px; /* Subtitle overflow, i.e., the amount the subtitle sticks past the background */
/* Background Variables */
--g-c: rgba(0, 0, 0, 0.5); /* Gradient base colour */
/* Image: first two percentages are x% y% position / last percentage is image size */
--img: url('https://i.pinimg.com/originals/80/cc/de/80ccdedb60dfd52638f80e6ff96bcc81.jpg') 50% 20% / 200%;
/* Icon Variables */
--i-c: #f56423; /* Colour */
--i-s: 3em; /* Size (can be decimal) */
--i-o: 0.8; /* Opacity, between 0 and 1 */
/* Title Variables */
--t-c: #fbfdf5; /* Text colour */
--t-f-s: 4.9em; /* Font size (can be decimal) */
--t-f: 'Kolker Brush', cursive; /* Font family (change font tag above if you change this) */
--t-l-h: 1; /* Line height, change to change spacing above + below title */
/* Subtitle Variables */
--s-p: 2px 5px; /* Padding: top-bottom left-right */
--s-b-r: 3px; /* Border radius */
--s-bg: #f56423; /* Background colour */
/* Subtitle Text Variables */
--s-c: #340d22; /* Text colour */
--s-f-s: 1.2em; /* Font size (can be decimal) */
--s-f: 'Sarala', sans-serif; /* Font family (change font tag above if you change this) */
/* Body Variables */
--b-c: #eef0e9; /* Text colour */
--b-f-s: 1.1em; /* Font size (can be decimal) */
][comment]
-- Note --[/comment][border=0;
padding: 0;
font-size: 0.8em;
font-family: var(--s-f);
opacity: 0.8;]Click Below[/border][comment]
-- Main Container --[/comment][border=0;
visibility: hidden;
position: relative;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 0;
overflow: hidden;][comment]
-- Image --[/comment][border=0;
visibility: visible;
position: absolute;
top: 0;
left: 0;
padding: 0;
width: calc(100% - var(--gap));
height: var(--h);
background: var(--img);][/border][accordion=100%]
{slide=[comment]
-- Content Container --[/comment][border=0;
margin: 0 -7px;
box-sizing: border-box;
width: var(--w);
height: calc(var(--h) * 3);
padding: 0;
font-variant: normal;
font-weight: normal;][comment]
-- First Page --[/comment][border=0;
visibility: visible;
position: relative;
top: calc(var(--h) + 1px);
left: 0;
width: 100%;
height: var(--h);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--g-c));
background-size: calc(100% - var(--gap)) 100%;
background-repeat: no-repeat;
padding: 0;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: flex-end;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 8px;
left: 12px;
padding: 0;
color: var(--i-c);
font-size: var(--i-s);
opacity: var(--i-o);][fa]fas fa-feather[/fa][/border][comment]
-- Subtitle --[/comment][border=0;
box-sizing: border-box;
padding: var(--s-p);
border-radius: var(--s-b-r);
background: var(--s-bg);
color: var(--s-c);
font-size: var(--s-f-s);
font-family: var(--s-f);]Troubadour of Yonai[/border][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
width: 100%;
padding: 0 calc(var(--gap) + 10px) 5px 10px;
color: var(--t-c);
font-size: var(--t-f-s);
font-family: var(--t-f);
line-height: var(--t-l-h);
text-align: end;]Koki Najin-Oe[/border][/border][comment]
-- Second Page --[/comment][border=0;
visibility: visible;
position: relative;
top: var(--h);
left: 0;
width: 100%;
height: var(--h);
padding: 0;][comment]
-- Text Container --[/comment][border=0;
margin: 0 15px;
box-sizing: border-box;
width: calc(100% - var(--gap) - 30px);
height: var(--h);
padding: 15px 10px;
background: linear-gradient(rgba(0, 0, 0, 0) 2%, var(--g-c) 15% 85%, rgba(0, 0, 0, 0) 98%);
color: var(--b-c);
font-size: var(--b-f-s);
font-family: var(--s-f);
display: flex;
flex-flow: row nowrap;
align-items: center;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/border][/border][/border]}[comment]
-- Placeholder --[/comment][border=0;
margin: -6px 0;
padding: 0;
height: calc(var(--h) * 2);][/border]{/slide}
[/accordion][/border][comment]
-- Note --[/comment][border=0;
padding: 0;
font-size: 0.8em;
font-family: var(--s-f);
opacity: 0.8;]Artist — GUWEIZ[/border][/border]
AMI MARRY ME UR SO GOODCytus IIFirst is a character display based off of the character selection screen of Cytus II. Second is a D&D CS based off the interface after one chooses a character.
The reason why I copied Cytus II is as summarized: long car trip, no data, much play, brain lightbulb. It's also the one genre of games that I don't suck at — that one genre being rhythm games. The reason why the second code is a dice sheet is because the Cytus II interface suits stats, and the only thing I could relate to stats in a RP setting was TTRPGs. That and I've never seen anyone make a full layout for one of them (and now I understand why). It's D&D because D&D is the only TTRPG I can say more than one sentence about, but after I started coding the components, I realized that I didn't actually remember much of it. This led to a lot of web surfing, and I even ended up making an account on D&DBeyond for some reason.
Second code was Pain™. Layouts made using BBCode and CSS injection is agony — especially when it's something like a TTRPG sheet and your coding habits are like mine. In other words, using a new line for every CSS property stops being clean after a certain point, and I'd hit it long ago. This code actually scrolls for 20+ seconds. It hurts. Ctrl+F saves lives. Also, if you're wondering why the sheet starts looking more ugly the more you scroll, it's because my motivation died on the second "page", which ended up not really being one because scroll-snap makes mobile reading frustrating.
Honestly, I don't even know if this is a useful layout for D&D, but I spent way too much effort in this to not post so... here it is. Please give me validation.
If someone actually plans to use it (imagine someone using it, hah), I could probably make a version with a spell section.
Edit: This may have no spacing between elements if you're on an older version of any browser (since they don't support gap), which I didn't realize until now.
CharactersScroll
PAFFLv7
NEKOLv15
ROBO_HeadLv8
IvyLv13
Crystal PuNKLv11
Bo BoLv14
Graff.JLv69
Code:[font=Electrolize][border=transparent; padding: 0px; /* Probably best if you don't change anything I haven't commented next to */ --w: 1100px; /* Max width */ --p: 30px; --bg: radial-gradient(circle at 50%, rgba(140, 140, 140, 0.8), rgba(var(--color-b), 0.9)); --b-s: 0px -40px rgba(60, 60, 60, 0.3); /* Main colours, use RGB numbers */ --color-b: 0, 0, 0; /* Background colour */ --color-a: 255, 255, 230; /* Text and accent colour */ --title-f: hue-rotate(210deg); /* Title hue, change number for a different colour */ --icon-m: 38px; --icon-w: 155px; --icon-h: min(70vh, 400px); --icon-b: 10px; --icon-g: linear-gradient(rgba(var(--color-b), 0.6), rgba(0, 0, 0, 0) 40%); --head-p: 12px 0px 6px 0px; --head-s: 1.45em; --bar-h: 3px; --lv-m: 2px; --lv-b: 1px; --lv-p: 1px 8px 1px 8px; --lv-s: 0.8em; --lv-b-s: 0px 4px rgba(var(--color-a), 0.3); --lv-n-m: 4px; --lv-n-s: 1.2em; /* Icon variables below in order are: -- XP bar colour -- XP bar percentage -- XP bar gradient; best not to touch this -- Image URL, change % (x-axis) and px or vh (y-axis) before / to shift image position in icon, change % after / to change image size in icon */ /* Icon 1 variables */ --color-1: #5abf97; --bar-p-1: 35%; --bar-g-1: linear-gradient(to right, var(--color-1) var(--bar-p-1), rgba(var(--color-a), 0.3) var(--bar-p-1)); --img-1: url('https://vignette.wikia.nocookie.net/cytus/images/3/35/Paff.png/revision/latest?cb=20180121100521') no-repeat 35% 20px / 215%; /* Icon 2 variables */ --color-2: #c481a1; --bar-p-2: 25%; --bar-g-2: linear-gradient(to right, var(--color-2) var(--bar-p-2), rgba(var(--color-a), 0.3) var(--bar-p-2)); --img-2: url('https://vignette.wikia.nocookie.net/cytus/images/f/fd/Neko.png/revision/latest?cb=20180121105710') no-repeat 50% min(3.7vh, 30px) / 190%; /* Icon 3 variables */ --color-3: #83b5be; --bar-p-3: 18%; --bar-g-3: linear-gradient(to right, var(--color-3) var(--bar-p-3), rgba(var(--color-a), 0.3) var(--bar-p-3)); --img-3: url('https://vignette.wikia.nocookie.net/cytus/images/f/f3/ROBO_Head.png/revision/latest?cb=20180121105711') no-repeat 50% 35px / 220%; /* Icon 4 variables */ --color-4: #ba1d1e; --bar-p-4: 64%; --bar-g-4: linear-gradient(to right, var(--color-4) var(--bar-p-4), rgba(var(--color-a), 0.3) var(--bar-p-4)); --img-4: url('https://vignette.wikia.nocookie.net/cytus/images/2/28/Ivy001_-05621.png/revision/latest?cb=20190113095915') no-repeat 45% 10px / 190%; /* Icon 5 variables */ --color-5: #a0505e; --bar-p-5: 50%; --bar-g-5: linear-gradient(to right, var(--color-5) var(--bar-p-5), rgba(var(--color-a), 0.3) var(--bar-p-5)); --img-5: url('https://vignette.wikia.nocookie.net/cytus/images/3/3e/Crystal_PuNK2.png/revision/latest?cb=20190904225142') no-repeat 48% 10px / 280%; /* Icon 6 variables */ --color-6: #82ac35; --bar-p-6: 40%; --bar-g-6: linear-gradient(to right, var(--color-6) var(--bar-p-6), rgba(var(--color-a), 0.3) var(--bar-p-6)); --img-6: url('https://vignette.wikia.nocookie.net/cytus/images/2/2e/BoBo.png/revision/latest?cb=20200819113732') no-repeat 5% 0px / 210%; /* Icon 7 variables */ --color-7: #c79b4e; --bar-p-7: 78%; --bar-g-7: linear-gradient(to right, var(--color-7) var(--bar-p-7), rgba(var(--color-a), 0.3) var(--bar-p-7)); --img-7: url('https://i.imgur.com/wHbPkah.png') no-repeat 30% 15px / 240%;][comment]-- Title --[/comment][border=transparent; position: relative; margin: auto; box-sizing: border-box; max-width: var(--w); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; z-index: 2;][border=transparent; margin-left: calc(var(--p) / 2); margin-right: var(--lv-n-m); padding: 0px; font-size: 1.8em; line-height: 1.5; filter: var(--title-f);]Characters[/border][border=transparent; margin-left: var(--lv-n-m); border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Scroll [fa]fas fa-caret-right[/fa][/border][/border][comment]-- Profile Container --[/comment][border=transparent; margin: auto; box-sizing: border-box; max-width: var(--w); height: calc(var(--icon-h) + (2 * var(--p))); padding: var(--p) 0px var(--p) 0px; border-radius: var(--icon-b); background: var(--bg); box-shadow: var(--b-s); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: 100%; height: calc(var(--icon-h) + (2 * var(--p))); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; overflow-x: auto; overflow-y: hidden;] [comment]-- Icon 1 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-1), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]PAFF[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-1); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]7[/border][/border][/border] [comment]-- Icon 2 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-2), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]NEKO[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-2); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]15[/border][/border][/border] [comment]-- Icon 3 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-3), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]ROBO_Head[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-3); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]8[/border][/border][/border] [comment]-- Icon 4 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-4), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]Ivy[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-4); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]13[/border][/border][/border] [comment]-- Icon 5 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-5), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]Crystal PuNK[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-5); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]11[/border][/border][/border] [comment]-- Icon 6 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-6), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]Bo Bo[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-6); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]14[/border][/border][/border] [comment]-- Icon 7 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); margin-right: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-7), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]Graff.J[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-7); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]69[/border][/border][/border] [/border][/border][/border][/font]
PAFFScrollBARDLv7EXP11 900/34 000RaceHUMANAlignmentLAWFUL NEUTRALBackgroundENTERTAINERSTR+010DEX+010CON+010INT+010WIS+010CHA+010Saving ThrowsProficiency Bonus+3Inspiration0STR+0DEX+3CON+0INT+0WIS+0CHA+3STRAthletics+0DEXAcrobatics+0
Sleight of Hand+0
Stealth+0INTArcana+3
History+0
Investigation+3
Nature+0
Religion+0WISAnimal Handling+0
Insight+0
Medicine+0
Perception+0
Survival+0CHADeception+3
Intimidation+0
Performance+3
Persuasion+0Passive Wisdom(Perception)10Passive Intelligence(Investigation)13Passive Wisdom(Insight)10HP26/38Temp HP0SPD30ftINIT0Armour Class10Hit Dice1D8"A quote or something — whatever you want; this is here to fill space."Attacks & SpellsATTACK 1ATK BONUSDMG/TYPEATTACK 2ATK BONUSDMG/TYPEATTACK 3ATK BONUSDMG/TYPEATTACK 4ATK BONUSDMG/TYPENotes about attacks here
Another lineProficienciesARMOUR
Armour 1
WEAPONS
Weapon 1, Weapon 2
TOOLS
Tool 1, Tool 2
LANGUAGES
Language 1, Language 2Features & TraitsCLASS FEATURES
Feature 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
RACIAL TRAITS
Trait 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Trait 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Trait 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
FEATS
Feat 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feat 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.CP5SP0EP0GP20PP0EquipmentARMOURACEquipment 1
Equipment 2
Equipment 3
Equipment 4
Equipment 5
Equipment 6
Equipment 7
Equipment 8
Equipment 9
Equipment 10
Equipment 11
Equipment 12Personality TraitsI like to read and memorize poetry. It keeps me calm and brings me fleeting moments of happiness.
I don’t talk about the thing that torments me. I’d rather not burden others with my curse.IdealsI’ll stop the spirits that haunt me or die trying.BondsI keep my thoughts and discoveries in a journal. My journal is my legacy.FlawsI have certain rituals that I must follow every day. I can never break them.
Code:[font=Electrolize][border=transparent; padding: 0px; /* Probably best if you don't change anything I haven't commented next to */ --w: 1100px; /* Max width */ --p: min(28px, 7vw); --b-r: 10px; --bg: radial-gradient(circle at 50%, rgba(140, 140, 140, 0.8), rgba(var(--color-b), 0.9)); --b-s: 0px -40px rgba(60, 60, 60, 0.3); /* Main colours, use RGB numbers */ --color-b: 0, 0, 0; /* Background colour */ --color-a: 255, 255, 230; /* Text and accent colour */ --color-1: #5abf97; /* Accent colour, don't use just rgb numbers here, use the full rgb() if you plan to use it or stick with hex code */ --title-f: hue-rotate(210deg); /* Name title hue, change number for a different colour */ --note-m: 8px; --basic-gap: 0 8px; --img-flex: 2 1; --img-m: 40px; --img-w: 210px; --img-h: min(70vh, 450px); --img: url('https://vignette.wikia.nocookie.net/cytus/images/3/35/Paff.png/revision/latest?cb=20180121100521') no-repeat 35% 2% / cover; /* Image URL, change % (x-axis) and px or vh (y-axis) before / to shift image position in icon */ --f-s: 1em; --stats-flex: 3 1; --stats-w: 220px; --stats-b: 1px solid rgba(var(--color-a), 0.4); --stats-gap: 10px 20px; --stats-p: 12px; --class-p: 20px; --class-s: 1.6em; --lv-box-b: 1px; --lv-box-p: 1px 8px 1px 8px; --lv-box-s: 0.8em; --lv-box-b-s: 0px 4px rgba(var(--color-a), 0.3); --lv-num-m: 18px; --lv-num-s: 2.2em; --bar-gap: 6px; --bar-t-gap: 2px; --bar-c: rgba(var(--color-a), 0.75); --bar-s: 0.9em; --bar-h: 10px; --xp-per: 35%; /* EXP bar percentage */ --xp-g: linear-gradient(to right, var(--color-1) var(--xp-per), rgba(var(--color-a), 0.3) var(--xp-per)); --field-p: 6px 10px; --field-bg: rgba(var(--color-b), 0.3); --field-c: rgba(var(--color-a), 0.7); --stat-flex: 1 1 145px; --stat-w: 40px; --sav-bon-ins-flex: 1 1 120px; --pro-bon-s: 30px; --pro-s: var(--bar-h); --pro-b-r: 50%; /* Proficiency circles, change value to var(--color-1); if proficient, else put rgba(var(--color-a), 0.45); */ --pro-str: rgba(var(--color-a), 0.45); --pro-dex: var(--color-1); --pro-con: rgba(var(--color-a), 0.45); --pro-int: rgba(var(--color-a), 0.45); --pro-wis: rgba(var(--color-a), 0.45); --pro-cha: var(--color-1); --skills-gap: 2px 20px; --skill-flex: 1 1 175px; --skill-body-flex: 1 1; --skill-body-w: 175px; --skill-s: 0.98em; --skill-l-h: 1.4; /* Proficiency circles, change value to var(--color-1); if proficient, else put rgba(var(--color-a), 0.45); */ --skill-athletic: rgba(var(--color-a), 0.45); --skill-acrobat: rgba(var(--color-a), 0.45); --skill-sleight: rgba(var(--color-a), 0.45); --skill-stealth: rgba(var(--color-a), 0.45); --skill-arcana: var(--color-1); --skill-history: rgba(var(--color-a), 0.45); --skill-invest: var(--color-1); --skill-nature: rgba(var(--color-a), 0.45); --skill-religion: rgba(var(--color-a), 0.45); --skill-animal: rgba(var(--color-a), 0.45); --skill-insight: rgba(var(--color-a), 0.45); --skill-medicine: rgba(var(--color-a), 0.45); --skill-percept: rgba(var(--color-a), 0.45); --skill-survival: rgba(var(--color-a), 0.45); --skill-decept: var(--color-1); --skill-intimidat: rgba(var(--color-a), 0.45); --skill-perform: var(--color-1); --skill-persuasion: rgba(var(--color-a), 0.45); --pas-flex: 1 1 280px; --pas-t-a: left; --hp-per: 68%; /* HP percentage */ --hp-g: linear-gradient(to right, var(--color-1) var(--hp-per), rgba(var(--color-a), 0.3) var(--hp-per)); --com-atk-prof-flex: 1 1 200px; --com-atk-prof-gap: 20px; --com-flex: 1 1 100px; --box-field-l-h: 1.3; --field-block-m: 3px 0px 5px 12px; --field-block-b: 3px solid var(--color-1); --field-block-p: 0px 0px 0px 8px; --p-flex: 1 1 70px; --p-gap: 8px 12px; /* Money circles, change value to var(--color-1); if character has that piece, else put rgba(var(--color-a), 0.45); */ --cp: var(--color-1); --sp: rgba(var(--color-a), 0.45); --ep: rgba(var(--color-a), 0.45); --gp: var(--color-1); --pp: rgba(var(--color-a), 0.45); --pers-gap: 11px; --pers-field-l-h: 1.4;][comment]-- Title --[/comment][border=transparent; position: relative; margin: auto; box-sizing: border-box; max-width: var(--w); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; z-index: 2;][border=transparent; margin-left: calc(var(--p) / 2); padding: 0px; font-size: 1.8em; line-height: 1.5; filter: var(--title-f);]PAFF[/border][border=transparent; margin-left: var(--note-m); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); padding: var(--lv-box-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]Scroll [fa]fas fa-caret-down[/fa][/border][/border][comment]-- CS Container --[/comment][border=transparent; position: relative; margin: auto; box-sizing: border-box; max-width: var(--w); height: calc(var(--img-h) + (2 * var(--p))); padding: 0px var(--p); border-radius: var(--b-r); background: var(--bg); box-shadow: var(--b-s); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; position: relative; top: 0px; left: 0px; box-sizing: border-box; width: calc(100% + (2 * var(--p))); height: calc(var(--img-h) + (2 * var(--p))); padding: 0px; overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent; position: relative; box-sizing: border-box; width: calc(100% - (2 * var(--p))); height: auto; padding: 0px;][comment] -- Basics Page --[/comment][border=transparent; position: relative; box-sizing: border-box; width: 100%; height: auto; padding: var(--p) 0px; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: var(--basic-gap);][comment] -- Image --[/comment][border=transparent; flex: var(--img-flex); box-sizing: border-box; min-width: var(--img-w); height: var(--img-h); background: var(--img); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;][/border][comment] -- Overall Stats Container --[/comment][border=transparent; flex: var(--stats-flex); box-sizing: border-box; min-width: var(--stats-w); height: auto; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start;][comment] -- Class Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--class-p) 0px; border-top: var(--stats-b); border-bottom: var(--stats-b); color: rgb(var(--color-a)); font-size: var(--class-s); text-align: center;]BARD[/border][comment] -- Lv + EXP Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px; border-bottom: var(--stats-b); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: var(--stats-gap);][comment]-- Lv Container --[/comment][border=transparent; flex: 0 0; box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-num-m); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-num-s); font-variant: normal; font-weight: normal; line-height: 1;]7[/border][/border][comment]-- EXP Container --[/comment][border=transparent; flex: 1 1 50%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- EXP Text --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: var(--bar-c); font-size: var(--bar-s); line-height: 1.3; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][border=transparent; padding: 0px;]EXP [fa]fas fa-caret-right[/fa][/border][comment]-- Points --[/comment][border=transparent; padding: 0px;]11 900/34 000[/border][/border][comment]-- EXP Bar --[/comment][border=transparent; width: 100%; box-sizing: border-box; height: var(--bar-h); padding: 0px; background: var(--xp-g);][/border][/border][/border][comment] -- Race + Alignment + Background Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px; border-bottom: var(--stats-b); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: var(--stats-gap);][comment]-- Race Container --[/comment][border=transparent; flex: 1 1; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Race Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Race[/border][comment]-- Race Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1;]HUMAN[/border][/border][comment]-- Alignment Container --[/comment][border=transparent; flex: 1 1; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Alignment Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Alignment[/border][comment]-- Alignment Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1;]LAWFUL NEUTRAL[/border][/border][comment]-- Background Container --[/comment][border=transparent; flex: 1 1; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Background Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Background[/border][comment]-- Background Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1;]ENTERTAINER[/border][/border][/border][comment] -- Ability Score Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px; border-bottom: var(--stats-b); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: var(--stats-gap);][comment]-- STR Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- STR Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]STR[/border][comment]-- STR Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- DEX Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- DEX Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]DEX[/border][comment]-- DEX Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- CON Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- CON Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]CON[/border][comment]-- CON Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- INT Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- INT Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]INT[/border][comment]-- INT Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- WIS Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- WIS Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]WIS[/border][comment]-- WIS Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- CHA Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- CHA Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]CHA[/border][comment]-- CHA Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][/border][comment] -- Saving Throws Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px; border-bottom: var(--stats-b); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: var(--stats-gap);][comment]-- Saving Throw Label + Bonus + Inspiration Container[/comment][border=transparent; flex: 0 0 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--stats-gap);][comment]-- Saving Throws Label --[/comment][border=transparent; flex: var(--sav-bon-ins-flex); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Saving Throws[/border][comment]-- Proficiency Bonus Container --[/comment][border=transparent; flex: var(--sav-bon-ins-flex); box-sizing: border-box; padding: 0px; font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--lv-num-m);][comment]-- Proficiency Bonus Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); text-align: right;]Proficiency Bonus[/border][comment]-- Proficiency Bonus Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); height: var(--pro-bon-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]+3[/border][/border][comment]-- Inspiration Container --[/comment][border=transparent; flex: var(--sav-bon-ins-flex); box-sizing: border-box; padding: 0px; font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--lv-num-m);][comment]-- Inspiration Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); text-align: right;]Inspiration[/border][comment]-- Inspiration Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); height: var(--pro-bon-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][/border][comment]-- STR Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- STR Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-str); padding: 0px;][/border][comment]-- STR Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]STR[/border][comment]-- STR Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+0[/border][/border][comment]-- DEX Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- DEX Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-dex); padding: 0px;][/border][comment]-- DEX Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]DEX[/border][comment]-- DEX Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+3[/border][/border][comment]-- CON Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- CON Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-con); padding: 0px;][/border][comment]-- CON Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]CON[/border][comment]-- CON Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+0[/border][/border][comment]-- INT Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- INT Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-int); padding: 0px;][/border][comment]-- INT Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]INT[/border][comment]-- INT Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+0[/border][/border][comment]-- WIS Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- WIS Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-wis); padding: 0px;][/border][comment]-- WIS Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]WIS[/border][comment]-- WIS Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+0[/border][/border][comment]-- CHA Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- CHA Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-cha); padding: 0px;][/border][comment]-- CHA Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]CHA[/border][comment]-- CHA Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+3[/border][/border][/border][/border][comment] -- Overall Stats End --[/comment][/border][comment] -- Basics Page End --[/comment][comment] ---------------------- NEW PAGE ---------------------- -- Skills + Combat + Attacks + Prof Page --[/comment][border=transparent; position: relative; box-sizing: border-box; width: 100%; min-height: calc((var(--p) * 2) + var(--img-h)); padding: var(--p) 0px;][comment] -- Skills Container --[/comment][border=transparent; flex: 3 1 100%; box-sizing: border-box; padding: 0px 0px calc(var(--stats-p) / 2) 0px; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: var(--skills-gap);][comment]-- STR Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- STR Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- STR Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]STR[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- STR Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Athletics Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-athletic); padding: 0px;][/border]Athletics [comment]-- Athletics Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- STR Skills End --[/comment][comment]-- DEX Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- DEX Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- DEX Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]DEX[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- DEX Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Acrobatics Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-acrobat); padding: 0px;][/border]Acrobatics [comment]-- Acrobatics Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Sleight of Hand Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-sleight); padding: 0px;][/border]Sleight of Hand [comment]-- Sleight of Hand Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Stealth Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-stealth); padding: 0px;][/border]Stealth [comment]-- Stealth Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- DEX Skills End --[/comment][comment]-- INT Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- INT Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- INT Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]INT[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- INT Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Arcana Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-arcana); padding: 0px;][/border]Arcana [comment]-- Arcana Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+3[/border] [comment]-- History Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-history); padding: 0px;][/border]History [comment]-- History Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Investigation Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-invest); padding: 0px;][/border]Investigation [comment]-- Investigation Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+3[/border] [comment]-- Nature Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-nature); padding: 0px;][/border]Nature [comment]-- Nature Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Religion Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-religion); padding: 0px;][/border]Religion [comment]-- Religion Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- INT Skills End --[/comment][comment]-- WIS Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- WIS Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- WIS Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]WIS[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- WIS Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Animal Handling Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-animal); padding: 0px;][/border]Animal Handling [comment]-- Animal Handling Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Insight Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-insight); padding: 0px;][/border]Insight [comment]-- Insight Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Medicine Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-medicine); padding: 0px;][/border]Medicine [comment]-- Medicine Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Perception Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-percept); padding: 0px;][/border]Perception [comment]-- Perception Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Survival Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-survival); padding: 0px;][/border]Survival [comment]-- Survival Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- WIS Skills End --[/comment][comment]-- CHA Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- CHA Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- CHA Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]CHA[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- CHA Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Deception Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-decept); padding: 0px;][/border]Deception [comment]-- Deception Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+3[/border] [comment]-- Intimidation Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-intimidat); padding: 0px;][/border]Intimidation [comment]-- Intimidation Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Performance Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-perform); padding: 0px;][/border]Performance [comment]-- Performance Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+3[/border] [comment]-- Persuasion Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-persuasion); padding: 0px;][/border]Persuasion [comment]-- Persuasion Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- CHA Skills End --[/comment][/border][comment] -- Skills End --[/comment][comment] -- Passives Container --[/comment][border=transparent; flex: 1 1 100%; box-sizing: border-box; border-top: var(--stats-b); border-bottom: var(--stats-b); padding: var(--stats-p) 0px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--stats-gap);][comment]-- Passive Perception Container --[/comment][border=transparent; flex: var(--pas-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]Passive Wisdom [border=transparent; display: inline; padding: 0px; color: var(--bar-c);](Perception)[/border][/border][comment]-- Passive Perception Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]10[/border][/border][comment]-- Passive Investigation Container --[/comment][border=transparent; flex: var(--pas-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]Passive Intelligence [border=transparent; display: inline; padding: 0px; color: var(--bar-c);](Investigation)[/border][/border][comment]-- Passive Investigation Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]13[/border][/border][comment]-- Passive Insight Container --[/comment][border=transparent; flex: var(--pas-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]Passive Wisdom [border=transparent; display: inline; padding: 0px; color: var(--bar-c);](Insight)[/border][/border][comment]-- Passive Insight Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]10[/border][/border][/border][comment] -- Passives End --[/comment][comment] -- Combat + Attacks + Prof Container --[/comment][border=transparent; flex: 3 1 100%; box-sizing: border-box; border-bottom: var(--stats-b); padding: var(--stats-p) 0px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; gap: var(--com-atk-prof-gap);][comment] -- Combat Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start;][comment] -- HP Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; border-bottom: var(--stats-b); padding: 0px 0px var(--stats-p) 0px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: var(--stats-gap);][comment]-- HP Bar Container --[/comment][border=transparent; flex: 1 1 50%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- HP Bar Text --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: var(--bar-c); font-size: var(--bar-s); line-height: 1.3; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][border=transparent; padding: 0px;]HP [fa]fas fa-caret-right[/fa][/border][comment]-- Points --[/comment][border=transparent; padding: 0px;]26/38[/border][/border][comment]-- HP Bar --[/comment][border=transparent; width: 100%; box-sizing: border-box; height: var(--bar-h); padding: 0px; background: var(--hp-g);][/border][/border][comment]-- Temp HP Container --[/comment][border=transparent; padding: 0px; display: flex; flex-flow: row nowrap; justify-items: flex-end; align-items: center; gap: var(--bar-gap);][comment]-- Temp HP --[/comment][border=transparent; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Temp HP[/border][comment]-- Temp HP Circle --[/comment][border=transparent; box-sizing: border-box; width: var(--pro-bon-s); height: var(--pro-bon-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--field-bg); padding: 0px; color: var(--field-c); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][/border][comment] -- SPD + INIT + Armour + Hit Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px 0px 0px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: var(--stats-gap);][comment]-- SPD Class Container --[/comment][border=transparent; flex: var(--com-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- SPD Class Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]SPD[/border][comment]-- SPD Class Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]30ft[/border][/border][comment]-- INIT Container --[/comment][border=transparent; flex: var(--com-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- INIT Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]INIT[/border][comment]-- INIT Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]0[/border][/border][comment]-- Armour Class Container --[/comment][border=transparent; flex: var(--com-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- Armour Class Label --[/comment][border=transparent; flex: 0 0 100px; box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Armour Class[/border][comment]-- Armour Class Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]10[/border][/border][comment]-- Hit Dice Container --[/comment][border=transparent; flex: 1 1 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- Hit Dice Label --[/comment][border=transparent; flex: 0 0 100px; box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Hit Dice[/border][comment]-- Hit Dice Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]1D8[/border][/border][comment]-- Extra Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h);]"A quote or something — whatever you want; this is here to fill space."[/border][/border][comment]-- SPD + INIT + Armour + Hit End --[/comment][/border][comment] -- Combat End --[/comment][comment] -- Attacks + Spells Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Attacks Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Attacks & Spells[/border][comment]-- Attack Field 1 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent; padding: 0px;]ATTACK 1 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent; padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent; padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 2 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent; padding: 0px;]ATTACK 2 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent; padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent; padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 3 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent; padding: 0px;]ATTACK 3 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent; padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent; padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 4 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent; padding: 0px;]ATTACK 4 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent; padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent; padding: 0px;]DMG/TYPE[/border][/border][comment]-- Notes Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h);]Notes about attacks here Another line[/border][/border][comment] -- Attacks End --[/comment][comment] -- Combat End --[/comment][comment] -- Proficiencies Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Proficiencies Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Proficiencies[/border][comment]-- Proficiencies Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h);]ARMOUR [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Armour 1[/border] WEAPONS [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Weapon 1, Weapon 2[/border] TOOLS [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Tool 1, Tool 2[/border] LANGUAGES [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Language 1, Language 2[/border][/border][/border][comment] -- Proficiencies End --[/comment][/border][comment] -- Combat + Attacks + Prof End --[/comment][/border][comment] -- Skills + Combat + Attacks + Prof End --[/comment][comment] ---------------------- NEW PAGE ---------------------- -- Equip + Persona + Features Page --[/comment][border=transparent; position: relative; box-sizing: border-box; width: 100%; min-height: calc((var(--p) * 2) + var(--img-h)); padding: var(--p) 0px;][comment] -- Equip + Persona + Features Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; min-height: var(--img-h); border-top: var(--stats-b); border-bottom: var(--stats-b); padding: var(--stats-p) 0px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; gap: var(--com-atk-prof-gap);][comment] -- Features Container --[/comment][border=transparent; flex: 2 1 260px; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Features Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Features & Traits[/border][comment]-- Features Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h);]CLASS FEATURES [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Feature 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Feature 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Feature 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border] RACIAL TRAITS [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Trait 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Trait 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Trait 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border] FEATS [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Feat 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Feat 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border][/border][/border][comment] -- Features End --[/comment][comment] -- Equip Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; gap: var(--pers-gap);][comment] -- Money Container --[/comment][border=transparent; flex: 1 1; width: 100%; border-bottom: var(--stats-b); padding: 4px 0px var(--stats-p) 0px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--p-gap);][comment]-- CP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- CP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]CP[/border][comment]-- CP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--cp); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]5[/border][/border][comment]-- CP End --[/comment][comment]-- SP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- SP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]SP[/border][comment]-- SP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--sp); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][comment]-- SP End --[/comment][comment]-- EP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- EP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]EP[/border][comment]-- EP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--ep); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][comment]-- EP End --[/comment][comment]-- GP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- GP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]GP[/border][comment]-- GP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--gp); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]20[/border][/border][comment]-- GP End --[/comment][comment]-- PP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- PP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]PP[/border][comment]-- PP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--pp); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][comment]-- PP End --[/comment][/border][comment]- - Money End --[/comment][comment] -- Equipment Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Equipment Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Equipment[/border][comment]-- Equipment Field --[/comment][comment]-- Attack Field 1 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Armour --[/comment][border=transparent; padding: 0px;]ARMOUR [fa]fas fa-caret-right[/fa][/border][comment]-- AC--[/comment][border=transparent; padding: 0px;]AC[/border][/border][border=transparent; flex: 1 1; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]Equipment 1 Equipment 2 Equipment 3 Equipment 4 Equipment 5 Equipment 6 Equipment 7 Equipment 8 Equipment 9 Equipment 10 Equipment 11 Equipment 12[/border][/border][/border][comment] -- Equip End --[/comment][comment] -- Persona Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; gap: var(--pers-gap);][comment]-- Personality Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Personality Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Personality Traits[/border][comment]-- Personality Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]I like to read and memorize poetry. It keeps me calm and brings me fleeting moments of happiness. I don’t talk about the thing that torments me. I’d rather not burden others with my curse.[/border][/border][comment]-- Ideals Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Ideals Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Ideals[/border][comment]-- Ideals Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]I’ll stop the spirits that haunt me or die trying.[/border][/border][comment]-- Bonds Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Bonds Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Bonds[/border][comment]-- Bonds Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]I keep my thoughts and discoveries in a journal. My journal is my legacy.[/border][/border][comment]-- Flaws Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Flaws Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Flaws[/border][comment]-- Flaws Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]I have certain rituals that I must follow every day. I can never break them.[/border][/border][/border][comment] -- Persona End --[/comment][/border][comment] --Equip + Persona + Features Container End --[/comment][/border][comment] --Equip + Persona + Features Page End --[/comment][/border][/border] [/border][/border][/font]
You gotta wait in line for that. Thank you!AMI MARRY ME UR SO GOOD
Honestly, that's hella impressive for six hours! I mean, I certainly spent more than 6 hours learning how to code tabs at all. Most of the fancy stuff we do with "BBCode" on RPN is actually just CSS injections in a BBCode tag, so if you search up CSS properties on the interwebs (and don't go into animations territory) you can basically figure out what can and can't be done. (Feel free! I wouldn't say my code follows best practices or is the cleanest way of doing things, but I don't think many people are judging that on RPN either.)How is this even possible?! I swear, I spent like 6 hours learning BBcoding and I made a incredibly basic tabs folder and thought I was doing okay, and then I find this. What the heck dude, you made me question what you could do with this stuff. (I'm definitely going to just read through the code and see what I can learn from that. Should be helpful.)