Ambiloquous
Graphic Fanatic
Hrgfdghj no uI just wanted to say your codes are absolutely gorgeous
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.
Hrgfdghj no uI just wanted to say your codes are absolutely gorgeous
Toggle TabsNon-toggling tabs code. Ignore the name.
I have arisen from the BBCode grave. 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)
TabsHidden Scroll
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]
Btw Ami, is there a way to make the scroll hidden in this code?Folder TabsIf you have noticed that this code looks like the one above, you are not wrong. When I first came up with the idea of the folder design, it was supposed to be an accordion-tab combination, but suffice to say it didn't work out. Now they're separate templates with very different vibes. This also scrolls if your text overflows.
I'm not too satisfied with this one (it barely even resembles a folder), but my first tab creation was too exact to another's measurements, and I felt like I had to show off at least one tab code, so this one took the fall.
TabsVisible Scroll
Click Tabs
SURNAME:Doe
GIVEN NAME:Jane
GENDER:Female
AGE:22
BIRTHDATE:03/02/1999
BIRTHPLACE:Unknown
NOTE:Do not approach without bubble tea PERSONALITY:
Blah blah lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus.
BIOGRAPHY:
Blah blah average life dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus. Nunc lectus diam, dignissim sit amet pellentesque placerat, gravida vitae risus. Aliquam gravida commodo ex vitae lacinia. Donec et quam lectus. Sed ut convallis mauris, aliquet tristique tellus.
NOTE:There is no concrete evidence of her accepted past
PARENTS:John Doe, Jessica Doe
SIBLINGS:Joe Doe
PARTNER:N/A
FRIENDS:Lulu Ly, Carell Kirishima
NOTE:Her friends are strangely tight-lipped about her LIKES:
This, that, do be polite
DISLIKES:
This, that, don't be dumb
HOBBIES:
Blah blah, tennis, roller skating
NOTE:Money seems to be her greatest motivatorArt by bobatae
Code:[comment][font=Concert One][font=Tauri]:D[/font][/font][/comment][border=transparent; margin: auto; max-width: 750px; padding: 0px;][border=transparent; position: relative; padding: 0px 0px 8px 0px; width: calc(4 * 60px + 5px); font-family: 'Concert One', sans-serif; text-align: center; line-height: 80%;]Click Tabs [fa]fas fa-sort-down[/fa][/border][/border][border=transparent; /* Probably best if you don't change anything I haven't commented next to */ position: relative; left: calc(0px - var(--left)); margin: auto; margin-top: calc(0px - var(--tab-t)); margin-bottom: min(var(--folder-h-max), var(--folder-h)); max-width: 750px; padding: 0px; font-size: 1.05em; /* Label font size, increase or decrease by .01 increments */ --left: 10px; --tab-t: -3px; --tab-w: 60px; --tab-h: 30px; --tab-br: 10px; /* Border radius, increase for rounder corners, decrease for less */ --folder-t: calc(var(--tab-t) + var(--tab-h)); --folder-h: 400px; --folder-h-max: 80vh; --folder-p: 30px; --folder-f-c: #362f1a; /* Text colour */ --symbol-t: 1px; --symbol-l: calc(var(--tab-w) / 2); --symbol-s: 22px; --symbol-c: white; /* Tab symbol colour */ --label-w: 90px; /* Label width, change if the label gets too long and goes to the next line (or not) */ --label-f: 'Concert One', sans-serif; /* Label font, change font tag above code if you change this */ --field-m: 5px 0px 0px 8px; --field-p: 6px 8px 4px 8px; --field-br: 0px 10px 0px 0px; --field-b: 0px solid rgba(40, 20, 0, 0.5); --field-f: 'Tauri', sans-serif; /* Field font, change font tag above code if you change this */ --field-f-s: 0.8em; /* Field font size, increase or decrease by .1 increments, dependent on label font size */ --field-c: rgba(255, 255, 255, 0.2); /* Field background colour */ --image-m: 20px; --image-w: 190px; --image-h: 230px; --image-b-1: 8px solid white; --image-b-2: 22px solid white; --image-s: 5px 5px rgba(0, 0, 0, 0.15); /* Folder background gradients */ --c-1: linear-gradient(152deg, rgb(190, 217, 91) 50%, rgb(170, 197, 71) 50%); --c-2: linear-gradient(152deg, rgb(242, 86, 127) 50%, rgb(222, 66, 107) 50%); --c-3: linear-gradient(152deg, rgb(83, 181, 168) 50%, rgb(63, 161, 148) 50%); --c-4: linear-gradient(152deg, rgb(242, 208, 109) 50%, rgb(222, 188, 89) 50%); /* Image URLs, change percentage after slash if image is sized too big or small in frame (or just default to cover) */ --img-1: url('https://i.pinimg.com/564x/cd/59/13/cd591354799b13123880267dd01a34fc.jpg') 50% 0% / cover; --img-2: url('https://i.pinimg.com/564x/20/61/12/206112aea38842875ac18cd20257c501.jpg') 50% 0% / 150%; --img-3: url('https://i.pinimg.com/564x/18/1f/e5/181fe5c4987998c0b5ec6e3671ddf63b.jpg') 50% 0% / 130%; --img-4: url('https://i.pinimg.com/564x/d7/54/9b/d7549b8db90da9f594fbbd588a807519.jpg') 50% 0% / cover;][comment]-- Tab 1 --[/comment][border=transparent; position: absolute; top: var(--tab-t); left: var(--left); box-sizing: border-box; width: calc(var(--tab-w) + (var(--left) / 2)); height: var(--tab-h); padding: 0px; border-radius: var(--tab-br) var(--tab-br) 0px 0px; background: var(--c-1); pointer-events: none;][/border][comment]-- Tab 2 --[/comment][border=transparent; position: absolute; top: var(--tab-t); left: calc(var(--tab-w) + (var(--left) / 2) + var(--left)); box-sizing: border-box; width: var(--tab-w); height: var(--tab-h); padding: 0px; border-radius: var(--tab-br) var(--tab-br) 0px 0px; background: var(--c-2); pointer-events: none;][/border][comment]-- Tab 3 --[/comment][border=transparent; position: absolute; top: var(--tab-t); left: calc((2 * var(--tab-w)) + (var(--left) / 2) + var(--left)); box-sizing: border-box; width: var(--tab-w); height: var(--tab-h); padding: 0px; border-radius: var(--tab-br) var(--tab-br) 0px 0px; background: var(--c-3); pointer-events: none;][/border][comment]-- Tab 4 --[/comment][border=transparent; position: absolute; top: var(--tab-t); left: calc((3 * var(--tab-w)) + (var(--left) / 2) + var(--left)); box-sizing: border-box; width: var(--tab-w); height: var(--tab-h); padding: 0px; border-radius: var(--tab-br) var(--tab-br) 0px 0px; background: var(--c-4); pointer-events: none;][/border][comment]-- Actual Tabs --[/comment][tabs] [tab=.][comment]-- Tab Symbols 1 --[/comment][border=transparent; position: absolute; top: var(--symbol-t); left: calc(var(--symbol-l) + 2px); padding: 0px; color: var(--symbol-c); font-size: var(--symbol-s); line-height: 100%; pointer-events: none;][fa]fas fa-info-circle[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(3 * var(--symbol-l) + 7px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 3px); line-height: 100%; pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(5 * var(--symbol-l) + 6px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 1px); line-height: 100%; pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(7 * var(--symbol-l) + 7px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 1px); line-height: 100%; pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 1 --[/comment][border=transparent; position: absolute; top: var(--folder-t); left: var(--left); box-sizing: border-box; width: 100%; height: var(--folder-h); max-height: var(--folder-h-max); padding: var(--folder-p); border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px; color: var(--folder-f-c); font-family: var(--label-f); background: var(--c-1); overflow: auto;][comment]-- Image 1 --[/comment][border=transparent; margin: var(--image-m); width: var(--image-w); height: var(--image-h); padding: 0px; border: var(--image-b-1); border-top: var(--image-b-2); border-bottom: var(--image-b-2); background: var(--img-1); box-shadow: var(--image-s); float: right; transform: rotate(10deg);][/border][comment]-- Text --[/comment] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]SURNAME:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Doe[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]GIVEN NAME:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Jane[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]GENDER:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Female[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]AGE:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]22[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]BIRTHDATE:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]03/02/1999[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]BIRTHPLACE:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Unknown[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]NOTE:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Do not approach without bubble tea[/border][/border][/tab] [tab=.][comment]-- Tab Symbols 2 --[/comment][border=transparent; position: absolute; top: calc(var(--symbol-t) + 4px); left: calc(var(--symbol-l) + 10px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 8px); line-height: 100%; pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(3 * var(--symbol-l) + 7px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 3px); line-height: 100%; pointer-events: none;][fa]fas fa-unlock-alt[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(5 * var(--symbol-l) + 6px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 1px); line-height: 100%; pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(7 * var(--symbol-l) + 7px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 1px); line-height: 100%; pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 2 --[/comment][border=transparent; position: absolute; top: var(--folder-t); left: var(--left); box-sizing: border-box; width: 100%; height: var(--folder-h); max-height: var(--folder-h-max); padding: var(--folder-p); border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px; color: var(--folder-f-c); font-family: var(--label-f); background: var(--c-2); overflow: auto;][comment]-- Image 2 --[/comment][border=transparent; margin: var(--image-m); width: var(--image-w); height: var(--image-h); padding: 0px; border: var(--image-b-1); border-top: var(--image-b-2); border-bottom: var(--image-b-2); background: var(--img-2); box-shadow: var(--image-s); float: right; transform: rotate(-10deg);][/border][comment]-- Text --[/comment]PERSONALITY: [border=transparent; padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Blah blah lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus.[/border] BIOGRAPHY: [border=transparent; padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Blah blah average life dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus. Nunc lectus diam, dignissim sit amet pellentesque placerat, gravida vitae risus. Aliquam gravida commodo ex vitae lacinia. Donec et quam lectus. Sed ut convallis mauris, aliquet tristique tellus.[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]NOTE:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]There is no concrete evidence of her accepted past[/border][/border][/tab] [tab=.][comment]-- Tab Symbols 3 --[/comment][border=transparent; position: absolute; top: calc(var(--symbol-t) + 4px); left: calc(var(--symbol-l) + 10px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 8px); line-height: 100%; pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(3 * var(--symbol-l) + 7px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 3px); line-height: 100%; pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(5 * var(--symbol-l) + 6px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 1px); line-height: 100%; pointer-events: none;][fa]fas fa-address-book[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(7 * var(--symbol-l) + 7px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 1px); line-height: 100%; pointer-events: none;][fa]far fa-file-alt[/fa][/border][comment]-- Tab Body 3 --[/comment][border=transparent; position: absolute; top: var(--folder-t); left: var(--left); box-sizing: border-box; width: 100%; height: var(--folder-h); max-height: var(--folder-h-max); padding: var(--folder-p); border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px; color: var(--folder-f-c); font-family: var(--label-f); background: var(--c-3); overflow: auto;][comment]-- Image 3 --[/comment][border=transparent; margin: var(--image-m); width: var(--image-w); height: var(--image-h); padding: 0px; border: var(--image-b-1); border-top: var(--image-b-2); border-bottom: var(--image-b-2); background: var(--img-3); box-shadow: var(--image-s); float: right; transform: rotate(10deg);][/border][comment]-- Text --[/comment] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]PARENTS:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]John Doe, Jessica Doe[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]SIBLINGS:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Joe Doe[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]PARTNER:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]N/A[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]FRIENDS:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Lulu Ly, Carell Kirishima[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]NOTE:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Her friends are strangely tight-lipped about her[/border][/border][/tab] [tab=.][comment]-- Tab Symbols 4 --[/comment][border=transparent; position: absolute; top: calc(var(--symbol-t) + 4px); left: calc(var(--symbol-l) + 10px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 8px); line-height: 100%; pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(3 * var(--symbol-l) + 7px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 3px); line-height: 100%; pointer-events: none;][fa]fas fa-lock[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(5 * var(--symbol-l) + 6px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 1px); line-height: 100%; pointer-events: none;][fa]far fa-address-book[/fa][/border][border=transparent; position: absolute; top: var(--symbol-t); left: calc(7 * var(--symbol-l) + 7px); padding: 0px; color: var(--symbol-c); font-size: calc(var(--symbol-s) - 1px); line-height: 100%; pointer-events: none;][fa]fas fa-file-alt[/fa][/border][comment]-- Tab Body 4 --[/comment][border=transparent; position: absolute; top: var(--folder-t); left: var(--left); box-sizing: border-box; width: 100%; height: var(--folder-h); max-height: var(--folder-h-max); padding: var(--folder-p); border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px; color: var(--folder-f-c); font-family: var(--label-f); background: var(--c-4); overflow: auto;][comment]-- Image 4 --[/comment][border=transparent; margin: var(--image-m); width: var(--image-w); height: var(--image-h); padding: 0px; border: var(--image-b-1); border-top: var(--image-b-2); border-bottom: var(--image-b-2); background: var(--img-4); box-shadow: var(--image-s); float: right; transform: rotate(-10deg);][/border][comment]-- Text --[/comment]LIKES: [border=transparent; padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]This, that, do be polite[/border] DISLIKES: [border=transparent; padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]This, that, don't be dumb[/border] HOBBIES: [border=transparent; padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);]Blah blah, tennis, roller skating[/border] [border=transparent; display: inline-block; width: var(--label-w); padding: 0px;]NOTE:[/border][border=transparent; display: inline-block; margin: var(--field-m); padding: var(--field-p); border-bottom: var(--field-b); border-radius: var(--field-br); font-family: var(--field-f); font-size: var(--field-f-s); background: var(--field-c);] Money seems to be her greatest motivator[/border][/border][/tab] [/tabs][/border][border=transparent; position: relative; top: -35px; margin: auto; max-width: 750px; padding: 0px; font-family: 'Concert One', sans-serif; font-size: 0.9em; text-align: right;]Art by bobatae[/border]
Used this, tagged you in it cause there was nowhere to reference you in the code and I was terrified of breaking it if you wanna see what I did with it, click "Kalmia" in my sig now to steal another of your codes
Oh yeah def! I forgot why I didn’t hide the scroll for that, and I would fix it for you right now except I’m out. If you can wait or if you think you can figure it out yourself, go for it!Btw Ami, is there a way to make the scroll hidden in this code?
No worries! I am too dumb brain to figure it out, but when you do, I would love to steal itOh yeah def! I forgot why I didn’t hide the scroll for that, and I would fix it for you right now except I’m out. If you can wait or if you think you can figure it out yourself, go for it!
Thank yewwwwwwHRFGHDFJJ I love the shades of green, and your writing is always nomnomcronch. Thank u for the offering, it was delicious.
I put it in the og post just in case someone else would prefer the same. Tell me if it works for you bc I didn't check it on all my devices.No worries! I am too dumb brain to figure it out, but when you do, I would love to steal it
Could you help me find where to input the scroll on mine? I had to make edits for the CS and I have no idea how to even approach your magic if not, I can try to figure it out, no worriesI put it in the og post just in case someone else would prefer the same. Tell me if it works for you bc I didn't check it on all my devices.
I used the original for Avalon in my signature, I'm gonna see if I can figure out what you made different, if you wanna check her out.I put it in the og post just in case someone else would prefer the same. Tell me if it works for you bc I didn't check it on all my devices.
Could you help me find where to input the scroll on mine? I had to make edits for the CS and I have no idea how to even approach your magic if not, I can try to figure it out, no worries
you are a priceless BBCode deity ilysmI added another border element inside the tab body elements that basically just hides the scroll, and while the example below only shows the first tab body, you have to change it for every tab body. The orange highlighted lines are the properties that I changed, and the red lines are the properties/tags I added.
[comment]-- Tab Body 1 --[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]-- Image 1 --[/comment]
... Content Here ...
[/border][/border][/border]
My TerminalOne day, I looked at my terminal and thought "hey, I could code this".
It turns out I couldn't. The fonts don't exist in the Google library, web colours are somehow not as vibrant as system defaults and a bunch of other little things that made it just a little bit off. But the closest I could get isn't too shabby either.
TextboxNo Scroll
user — -zshLast login: Fri Aug 6 10:55:00 on ttys000
user@User-Mac ~ %
No, thank you!
how are you actually so talented??SushimunchIt's a sushi code. And there's tabs. That's it, that's all.
If you want this to be mobile friendly, it's probably best to keep your message short. I didn't add scroll to this one because I only remembered it existed after I'd coded everything else, and then it made Pusheen and the chopsticks wonk, and lazy as I was, I gave up and called it a day.Besides, I made this for fun, not for actual use smh. Utility? What's that? Don't know her.
Edit: Plz forgive me, I was sleep deprived when I posted this. I've added auto scrolling, so make your message as long as you like.
If you think it reminds you of a certain username floating above this, you may be right. @Sushi Muncher
TabsHidden Scroll
AClick Sushi!
Name: Sushimunch
Favourite Food: Sushi
Hobby: Munching sushi
Message: Munching sushi is an art form of the highest degree. You are still green, young one.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit.
Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet. Sushimunch munch Sushimunch munch munch Sushimunch munch munch munch
Code:[comment]-- Font -->[/comment][font=Didact Gothic][border=transparent; position: relative; margin: auto; max-width: 775px; padding: 0px;][border=transparent; visibility: hidden; display: inline-block; padding: 0px;]A[/border]Click Sushi![/border][border=transparent; /* Break code, break code! */ position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin: auto; margin-top: calc(0px - var(--chop-t)); margin-bottom: 2vh; box-sizing: border-box; max-width: 775px; height: var(--h); padding: 0px; border-radius: var(--br); border: var(--b); background: var(--board); box-shadow: 5px 5px rgba(255, 250, 250, 0.7); --color: #673d2f; /* Border and text colour */ --h: max(370px, 55vh); --br: 10px; --b: 2px solid var(--color); --board: linear-gradient(rgba(255, 255, 250, 0.2), rgba(255, 255, 250, 0.2)), radial-gradient(circle at top right, rgba(0, 0, 0, 0) calc(100% - 115px), rgba(205,144, 76, 0.2) calc(100% - 115px)), url('https://static.vecteezy.com/system/resources/previews/000/360/749/non_2x/wood-texture-vector.jpg') 50% 50% / cover; --tabs-w: 100px; --sushi-t: calc((var(--h) / 2) - 125px); --sushi-d: 49px; --sushi-l: 28px; --sushi-s: 54px; --sushi-bg: url('https://images.vexels.com/media/users/3/230800/isolated/preview/6fae7b492e567aae76ab5220a894087c-cute-sushi-cartoon.png') 50% 50% / 110%, linear-gradient(to bottom, rgb(255, 255, 255, 0) 22%, #af9187 22% 70%, rgb(255, 255, 255, 0) 70%); --sushi-f: blur(1px); --dish-t: calc((var(--h) / 2) + 83px); --dish-l: 17px; --dish-s: 70px; --dish-bg: radial-gradient(circle at top right, rgb(238, 83, 79) 65%, rgb(228, 73, 69) 65%); /* Dish gradient */ --dish-sh: -3px 3px rgba(0, 0, 0, 0.1); --dish-d-s: 48%; --dish-c-bg: radial-gradient(circle at top right, rgb(202, 65, 62) 70%, rgb(182, 45, 42) 70%); /* Dish circle gradient */ --chop-t: -1vh; --chop-l: calc(100% - var(--chop-s) + var(--body-e) + 6.2vh); --chop-s: 32vh; --chop-bg: url('http://icons.iconarchive.com/icons/google/noto-emoji-food-drink/1024/32444-chopsticks-icon.png') 50% 50% / 100%; --chop-c: polygon(0 0, 100% 0, 100% 26%, 26% 100%, 0 100%); --chop-tr: scaleX(-1) rotate(-35deg); --sticker-t: calc(max(370px, 55vh) - (var(--sticker-s) / 1.15)); --sticker-l: calc(100% - var(--sticker-s)); --sticker-s: 20vh; /* Pusheen image URLs */ --sticker-1: url('https://cdn130.picsart.com/256429381027212.png?r1024x1024') no-repeat 50% 50% / 100%; --sticker-2: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F5d%2F34%2Fff%2F5d34ff495c8b919ce281461ddda10c1b.png&f=1&nofb=1') no-repeat 50% 50% / 80%; --sticker-3: url('https://cdn.custom-cursor.com/packs/2582/pusheen-and-fish-cursor-pack.png') no-repeat 95% 50% / cover; --sticker-4: url('https://cdn131.picsart.com/287157513004211.png') no-repeat 50% 50% / 75%; --body-t: calc((var(--h) - var(--body-h)) / 2); --body-h: calc(var(--h) - var(--body-e)); --body-e: 5vh; --body-p: 20px; --body-f-c: var(--color); --body-f-s: 1em; /* Font size, increase or decrease by .1 increments */ --body-bg: rgba(250, 250, 240, 0.4);] [border=transparent; box-sizing: border-box; width: var(--tabs-w); line-height: 3.5;][comment]-- Dish --[/comment][border=transparent; position: absolute; top: var(--dish-t); left: var(--dish-l); width: var(--dish-s); height: var(--dish-s); padding: 0px; border-radius: var(--br); border: var(--b); background: var(--dish-bg); box-shadow: var(--dish-sh); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][border=transparent; flex: 0 0 var(--dish-d-s); height: var(--dish-d-s); padding: 0px; border-radius: 50%; border: var(--b); background: var(--dish-c-bg);][/border][/border][comment]-- Actual Tabs --[/comment][tabs] [comment]-- Tab 1 --[/comment] [tab=.][comment]-- Sushi Tabs --[/comment][border=transparent; position: absolute; top: var(--sushi-t); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + var(--sushi-d)); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (2 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (3 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent; position: absolute; top: var(--chop-t); left: var(--chop-l); width: var(--chop-s); height: var(--chop-s); float: right; padding: 0px; background: var(--chop-bg); -webkit-clip-path: var(--chop-c); clip-path: var(--chop-c); -webkit-transform: var(--chop-tr); transform: var(--chop-tr); z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent; position: absolute; top: var(--sticker-t); left: var(--sticker-l); width: var(--sticker-s); height: var(--sticker-s); padding: 0px; background: var(--sticker-1); z-index: 2;][/border][comment]-- Body --[/comment][border=transparent; position: absolute; top: var(--body-t); left: var(--tabs-w); box-sizing: border-box; width: calc(100% - var(--tabs-w) - var(--body-t)); height: var(--body-h); border-radius: var(--br); border: var(--b); padding: 0px; background: var(--body-bg); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0px; overflow: auto;][comment]-- Text --[/comment][border=transparent; box-sizing: border-box; width: calc(100% - 30px); padding: var(--body-p); color: var(--color); font-size: var(--body-f-s); line-height: 130%;][b]Name:[/b] Sushimunch [b]Favourite Food:[/b] Sushi [b]Hobby:[/b] Munching sushi [b]Message:[/b] Munching sushi is an art form of the highest degree. You are still green, young one. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent gravida vestibulum lorem, laoreet accumsan ante mollis vestibulum. Nam eu congue ipsum, vitae rutrum est. Fusce auctor enim nec justo sollicitudin ornare. Fusce ultrices tincidunt elit. Praesent convallis dui dui. Ut ipsum mi, gravida eget velit a, commodo bibendum libero. Ut placerat ante sed elit fermentum, id egestas neque laoreet.[comment]-- Spacing --[/comment][border=transparent; box-sizing: border-box; height: calc(var(--sticker-s) - var(--body-p) - var(--body-e)); padding: 0px;][/border][/border][/border][/border][/tab] [comment]-- Tab 2 --[/comment] [tab=.][comment]-- Sushi Tabs --[/comment][border=transparent; position: absolute; top: var(--sushi-t); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + var(--sushi-d)); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (2 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (3 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent; position: absolute; top: var(--chop-t); left: var(--chop-l); width: var(--chop-s); height: var(--chop-s); float: right; padding: 0px; background: var(--chop-bg); -webkit-clip-path: var(--chop-c); clip-path: var(--chop-c); -webkit-transform: var(--chop-tr); transform: var(--chop-tr); z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent; position: absolute; top: var(--sticker-t); left: var(--sticker-l); width: var(--sticker-s); height: var(--sticker-s); padding: 0px; background: var(--sticker-2); z-index: 2;][/border][comment]-- Body --[/comment][border=transparent; position: absolute; top: var(--body-t); left: var(--tabs-w); box-sizing: border-box; width: calc(100% - var(--tabs-w) - var(--body-t)); height: var(--body-h); border-radius: var(--br); border: var(--b); padding: 0px; background: var(--body-bg); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0px; overflow: auto;][comment]-- Text --[/comment][border=transparent; box-sizing: border-box; width: calc(100% - 30px); padding: var(--body-p); color: var(--color); font-size: var(--body-f-s); line-height: 130%;]Sushimunch munch[comment]-- Spacing --[/comment][border=transparent; box-sizing: border-box; height: calc(var(--sticker-s) - var(--body-p) - var(--body-e)); padding: 0px;][/border][/border][/border][/border][/tab] [comment]-- Tab 3 --[/comment] [tab=.][comment]-- Sushi Tabs --[/comment][border=transparent; position: absolute; top: var(--sushi-t); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + var(--sushi-d)); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (2 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (3 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent; position: absolute; top: var(--chop-t); left: var(--chop-l); width: var(--chop-s); height: var(--chop-s); float: right; padding: 0px; background: var(--chop-bg); -webkit-clip-path: var(--chop-c); clip-path: var(--chop-c); -webkit-transform: var(--chop-tr); transform: var(--chop-tr); z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent; position: absolute; top: var(--sticker-t); left: var(--sticker-l); width: var(--sticker-s); height: var(--sticker-s); padding: 0px; background: var(--sticker-3); z-index: 2;][/border][comment]-- Body --[/comment][border=transparent; position: absolute; top: var(--body-t); left: var(--tabs-w); box-sizing: border-box; width: calc(100% - var(--tabs-w) - var(--body-t)); height: var(--body-h); border-radius: var(--br); border: var(--b); padding: 0px; background: var(--body-bg); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0px; overflow: auto;][comment]-- Text --[/comment][border=transparent; box-sizing: border-box; width: calc(100% - 30px); padding: var(--body-p); color: var(--color); font-size: var(--body-f-s); line-height: 130%;]Sushimunch munch munch[comment]-- Spacing --[/comment][border=transparent; box-sizing: border-box; height: calc(var(--sticker-s) - var(--body-p) - var(--body-e)); padding: 0px;][/border][/border][/border][/border][/tab] [comment]-- Tab 4 --[/comment] [tab=.][comment]-- Sushi Tabs --[/comment][border=transparent; position: absolute; top: var(--sushi-t); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + var(--sushi-d)); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (2 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); filter: var(--sushi-f); pointer-events: none;][/border][border=transparent; position: absolute; top: calc(var(--sushi-t) + (3 * var(--sushi-d))); left: var(--sushi-l); width: var(--sushi-s); height: var(--sushi-s); padding: 0px; background: var(--sushi-bg); pointer-events: none;][/border][comment]-- Chopsticks --[/comment][border=transparent; position: absolute; top: var(--chop-t); left: var(--chop-l); width: var(--chop-s); height: var(--chop-s); float: right; padding: 0px; background: var(--chop-bg); -webkit-clip-path: var(--chop-c); clip-path: var(--chop-c); -webkit-transform: var(--chop-tr); transform: var(--chop-tr); z-index: 2;][/border][comment]-- Pusheen --[/comment][border=transparent; position: absolute; top: var(--sticker-t); left: var(--sticker-l); width: var(--sticker-s); height: var(--sticker-s); padding: 0px; background: var(--sticker-4); z-index: 2;][/border][comment]-- Body --[/comment][border=transparent; position: absolute; top: var(--body-t); left: var(--tabs-w); box-sizing: border-box; width: calc(100% - var(--tabs-w) - var(--body-t)); height: var(--body-h); border-radius: var(--br); border: var(--b); padding: 0px; background: var(--body-bg); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: calc(100% + 30px); height: 100%; padding: 0px; overflow: auto;][comment]-- Text --[/comment][border=transparent; box-sizing: border-box; width: calc(100% - 30px); padding: var(--body-p); color: var(--color); font-size: var(--body-f-s); line-height: 130%;]Sushimunch munch munch munch[comment]-- Spacing --[/comment][border=transparent; box-sizing: border-box; height: calc(var(--sticker-s) - var(--body-p) - var(--body-e)); padding: 0px;][/border][/border][/border][/border][/tab] [/tabs][/border] [/border][/font]
how are you actually so talented??
do you think I'd be able to use this as an interest check - or is it more for an IC reply?
edit; i used your code here!
Yeah, that’s totally fine! Feel free to take apart or rearrange my code.Would it be okay if I used the relationships tab of this code on it's own? Resource - Ami's Lab 2.0 | Mobile Friendly Freebies
I plan to only use it in PMs. I actually asked for help in how to get the section of the code working on it's own already before someone reminded be I should ask permission, so I can take down the post if needed.
[comment]-- Font -->[font=Kanit]:z[/font][/comment][border=0;
/* Probably best if you don't change anything I haven't commented next to */
position: relative;
margin: auto;
box-sizing: border-box;
height: calc(var(--b-w) + 30px);
padding: 0;
/* Increase width for longer titles/subtitles, decrease for shorter */
max-width: 250px;
/* Colours */
--c-1: #F2E416;
--c-2: #49D3F2;
--c-3: #4c94c5;
--c-4: #38577b;
--b-w: 69px;
/* Title Variables */
--t-f-s: 1.4em; /* Font size, increase by increments of .1 */
--t-f: 'Kanit', sans-serif; /* Font family, change font tag above if you change this */
/* Subtitle Variables */
--s-c: #b2d7df; /* Text colour */
--s-f-s: 0.9em; /* Font size, increase by increments of .1 */
--s-f: 'Kanit', sans-serif;/* Font family, change font tag above if you change this */
display: flex;
flex-flow: row nowrap;
align-items: center;
overflow-x: auto;][comment]
-- Button Border --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: calc(var(--b-w) + 20px);
height: calc(var(--b-w) + 20px);
border-radius: 50%;
border: 4px solid var(--c-3);
padding: 0;
display: flex;
flex-flow: row nowrap;
align-items: center;][comment]
-- Button Cover --[/comment][border=0;
position: absolute;
top: calc(50% - (var(--b-w) / 2));
left: calc(50% - (var(--b-w) / 2));
width: var(--b-w);
height: var(--b-w);
border-radius: 50%;
background: var(--c-2);
padding: 0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 2;][border=0;
position: relative;
left: 2px;
width: 30px;
height: 40px;
padding: 0;
background: var(--c-1);
clip-path: polygon(0 0, 100% 50%, 0 100%, 40% 50%);][/border][/border][comment]
-- Music Player Container --[/comment][border=0;
margin: 19px;
flex: 0 0 43px;
height: 44px;
padding: 0;
overflow: hidden;
transform: scale(1.6);
opacity: 0;
z-index: 2;][border=0;
position: relative;
top: -11px;
left: -8px;
width: 62px;
height: 54px;
padding: 0;
overflow: hidden;][comment]
-- SoundCloud Media Element --[/comment][MEDIA=soundcloud]baleygrr/promare-ost-nexus-ft-laco#track_id=625180077[/MEDIA][/border][/border][/border][comment]
-- Title --[/comment][border=0;
position: absolute;
top: 10px;
left: 60px;
box-sizing: border-box;
width: auto;
min-width: 180px;
max-width: calc(100% - 60px);
height: 50px;
background: var(--c-1);
clip-path: polygon(0% 22%, 100% 0%, calc(100% - 30px) 100%, 0% 96%);
padding: 14px 40px 0px 35px;
color: var(--c-3);
font-size: var(--t-f-s);
font-family: var(--t-f);
letter-spacing: 2px;
z-index: 1;][border=0;
display: inline;
padding: 0;]NEXUS[/border][/border][comment]
-- Subtitle --[/comment][border=0;
position: absolute;
top: 56px;
left: 60px;
box-sizing: border-box;
width: auto;
min-width: 150px;
max-width: calc(100% - 60px);
height: 30px;
background: var(--c-4);
clip-path: polygon(0% 0%, calc(100% - 14px) 4%, 100% 100%, 0% 76%);
padding: 3px 20px 0px 28px;
color: var(--s-c);
font-size: var(--s-f-s);
font-family: var(--s-f);
z-index: 0;][border=0;
display: inline;
padding: 0;]Hiroyuki Sawano[/border][/border][/border]
[comment]-- Font -->[font=Alata]:z[/font][/comment][border=0;
/* Probably best if you don't change anything I haven't commented next to */
position: relative;
margin: auto;
box-sizing: border-box;
height: 84px;
padding: 0;
/* Increase width for longer titles/subtitles, decrease for shorter */
max-width: 460px;
/* Colours */
--c-0: #F2B3CA;
--c-1: rgba(220, 70, 240);
--c-2: rgba(100, 70, 230);
--c-3: rgba(160, 70, 240);
--c-t: white; /* Text + Icon colour */
/* Left Text Variables */
--l-f-s: clamp(11px, 2.8vw, 1.1em); /* Font size, increase by increments of .1 */
--l-f: 'Alata', sans-serif; /* Font family, change font tag above if you change this */
/* Right Text Variables */
--r-f-s: clamp(11px, 2.8vw, 1.1em); /* Font size, increase by increments of .1 */
--r-f: 'Alata', sans-serif;/* Font family, change font tag above if you change this */
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
overflow-y: hidden;
overflow-x: auto;][comment]
-- Diamond --[/comment][border=0;
--w: 84px;
position: absolute;
top: 0;
left: calc(50% - (var(--w) / 2));
width: var(--w);
height: var(--w);
padding: 0;
background: radial-gradient(var(--c-0) -30%, var(--c-1) 40%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
pointer-events: none;
z-index: 2;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;][border=0;
position: relative;
left: 4px;
padding: 0;
color: var(--c-t);
font-size: 26px;][fa]far fa-play[/fa][/border][/border][comment]
-- Left Text --[/comment][border=0;
--h: 38px;
--gap: 32px;
box-sizing: border-box;
position: absolute;
top: calc(50% - (var(--h) / 2));
left: 0;
width: calc(50% - var(--gap));
height: var(--h);
padding: 10px calc((var(--h) / 2) + 10px);
background: linear-gradient(to right, var(--c-2) 40%, var(--c-3));
clip-path: polygon(100% 0%, calc(100% - (var(--h) / 2)) 50%, 100% 100%, calc((var(--h) / 2) + 10px) 100%, 0% 50%, calc((var(--h) / 2) + 10px) 0%);
z-index: 1;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;][border=0;
padding: 0;
color: var(--c-t);
font-size: var(--l-f-s);
font-family: var(--l-f);]Swarms of Song[/border][/border][comment]
-- Right Text --[/comment][border=0;
--h: 38px;
--gap: 32px;
box-sizing: border-box;
position: absolute;
top: calc(50% - (var(--h) / 2));
left: calc(50% + var(--gap));
width: calc(50% - var(--gap));
height: var(--h);
padding: 10px calc((var(--h) / 2) + 10px);
background: linear-gradient(to left, var(--c-2) 40%, var(--c-3));
clip-path: polygon(calc(100% - (var(--h) / 2) - 10px) 0%, 100% 50%, calc(100% - (var(--h) / 2) - 10px) 100%, 0% 100%, calc((var(--h) / 2)) 50%, 0% 0%);
z-index: 1;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][border=0;
padding: 0;
color: var(--c-t);
font-size: var(--r-f-s);
font-family: var(--r-f);
text-overflow: ellipsis;]Belle (2021)[/border][/border][comment]
-- Music Player Container --[/comment][border=0;
flex: 0 0 43px;
height: 44px;
padding: 0;
overflow: hidden;
transform: scale(2);
opacity: 0;
z-index: 1;][border=0;
position: relative;
top: -11px;
left: -8px;
width: 62px;
height: 54px;
padding: 0;
overflow: hidden;][comment]
-- SoundCloud Media Element --[/comment][MEDIA=soundcloud]belle18977/swarms-of-song#track_id=1183724368[/MEDIA][/border][/border][/border]
Aww, that’s so sweet, thank you! And don’t worry about sucking because that’s where we all start; even I Frankenstein-ed other people’s code when I first started out, and it sure didn’t look good. Good luck with your RP and your coding!Hey! I've been using your code for a few months now and I want to heavily thank you for your contributions to the community. It's because of this thread I'm starting to try to learn code myself so I can better apply it my own pixel art(I suck and can only frankenstein off of these right now lol). Your code is very clean and easy to learn from and your simple icon post really helped me figure out what I wanted my latest interest check look like! Thank you!
hi hi ! i adapted your dnd cytus character sheet for a kingdom hearts roleplay over here if you'd like to seeCytus 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.
ImageTextboxHidden Scroll
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]