Resource   ¬ FEVERDREAMS ⸥ alt 𐄂 sugar

Thread starter #1
MCDONALD TRASH
Is often responsible for the design side of things. I tend to think of really ambitious ideas for my works but then realize it’s beyond my capabilities. Then I run to Alteras crying for help. It’s something he’s used to at this point. In my spare time I like reverse-engineering the code he makes so I don’t have to ask for his help next time.

If you see me come up with a really great idea, it’s probably because I had Mcdonalds'. Actually, my worst ideas stem from Mcdonald’s too so uh, it can go one of two ways. At least it’s never boring whenever you feed me shitty fast food? Is that even a good thing?

Feel free to dissect the works we'll be presenting to get a better understanding of the thought process behind it. However, I highly discourage copy pasting as the shit we make is sensitive and very specific for the design. Learning for yourself is something I wholeheartedly support. Questions are very welcome, although considering the degree of jank in this thread, we'd recommend having a basic to medium understanding of CSS and BBScript.

If you want to grab some ideas for aesthetics, go right ahead? Just remember that being inspired is one thing, but copying is your death as an artist. You rob youself of developing your own style the moment you make this choice.
HOME COOKED DINNER?
WHAT'S THAT?
is often responsible for the coding side of things. I tend to come up with ridiculous ideas, resulting in janky designs. When they get too janky, I rely on sugarvine to make it less janky. I honestly love how much more efficient her code is, not to mention the fact that all her designs are beautiful to the nth degree. I secretly want to steal half of her designs and call it my own... wait... this workshop is for doing just that!

I like to make each of my design unique, showcasing some new and crazy effect that can be achieved. Other times, I make my designs to fit a certain mood or feel, but I often need sugarvine's help to polish it up. My ideas are sometimes a bit too much, and just to show how "too much" it is, we decided to install the "Jank-o-Meter" to every one of our designs.

While I am a big fan of explaining things, I won't be giving away the code for the designs you see here, as per my partner's wishes. Most of the stuff you'll find here are the results of sweat, blood, and lots of tears that we poured into for days and weeks. I approve of you learning how to do things, but please don't steal our works.

And yes, I do have another workshop where I take requests, but I will absolutely not accept any requests that wish to adapt the designs in this workshop. Coding is painful, why do you think we partnered up?
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
#2
#feverdreams
sugarvine
once you post this on your showcase "@sugarvine is a slave driver with a v specific vision that is both blessing and curse"
i can literally tell you how i want each area to interact
lmao
dies
alteras
this is what torture is, when you see the solution, when you see the path to the solution, but you also know the path goes through a minefield.
LOL
nooo, don't die, I need to know what the values are!!
sugarvine
one of the notable quotes from this project
the other being
"mcdonalds fuels fever dreams"
Welcome to Fever Dreams, a BBCode Workshop Collaboration between @sugarvine and me, @Alteras!!! This actually started out as a joke when we were helping each other with our own designs, but then the more we joked about it, the more we started to add detail to it. That conversation you see there, that actually happened. Here is proof:

proofspoil
Conversation



This bbcode design is by far the most complex I've ever coded before, utilizing a lot of flexboxes, z-index trickery, media queries, and CSS Animations. This 100% deserves the Level 10 Jank Rating. In this explanation, I'll only cover parts of the major sections, since this single code caused the two of us so much pain.

Animations
While there is quite the amount of CSS Transitions being used here, the biggest animation you see, where our two characters split apart and come back together, is done using CSS Animations and Keyframes. Here is the core of it:

animationspoil
Animations and Keyframes

[class name=sugarvineforward]
animation-name: {post_id}swapsugarvineforward;
animation-duration: .75s;
animation-direction: normal;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-delay: 1.25s;
animation-fill-mode: both;
[/class]

[class name=sugarvinebackwards]
animation-name: {post_id}swapsugarvinebackwards;
animation-duration: .75s;
animation-direction: normal;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[class name=alterasswap]
z-index: 14;
transition: z-index .375s;
[/class]

[class name=alterasforward]
animation-name: {post_id}swapalterasforward;
animation-direction: normal;
animation-duration: .75s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[class name=alterasbackwards]
animation-name: {post_id}swapalterasbackward;
animation-direction: normal;
animation-duration: .75s;
animation-delay: 1.25s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=swapalterasforward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(22%);
[/keyframe]
[keyframe=50]
transform: translateX(22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapalterasbackward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(22%);
[/keyframe]
[keyframe=50]
transform: translateX(22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapsugarvineforward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(-22%);
[/keyframe]
[keyframe=50]
transform: translateX(-22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapsugarvinebackwards]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(-22%);
[/keyframe]
[keyframe=50]
transform: translateX(-22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]


As you can see in the keyframes, CSS Animations are able to have the same animation at multiple frames, giving it a lot more flexibility than Transitions. The way the animations are triggered is the same way that CSS Transitions get triggered, by adding them to the class. However the problem is that you can't trigger the same animation two times in a row, so we've had to duplicate the animations for both ways. It's a bit messy, but it is well worth it. We used transform instead of margin-left and margin-right so that we can achieve a smoother animation, since animating transform doesn't cause the browser to reformat everything. I'll will be explaining more on how to make CSS Animations in a guide in the future.

Media Queries and Device Adaptiveness
One of the cool things you'll find is that this code is actually mobile friendly— no, it would be more accurate to say made with mobile devices in mind first. Through a large amount of flexboxes and max min trickery, it will change itself to be the most presentable in any case. This is done on the fact that everything in this code is based on one single number, 83vh. We set the width of the main box to 83vh, and since the image was square shaped, we were able to have it translate well into percentages. Every single div inside uses either a percentage or a vh value, including the font-size. However, we recognized that there will be cases where 83vh is too large for a device, so we took advantage of that and designed it so that when it isn't, the code automatically switches over to mobile mode.

This is achieved using media queries and flexboxes. With flexboxes, what we ended up doing was making a dumby div the exact width of what the main div would be and a height of 0, and giving it a flex-flow: row wrap. That way, when there isn't enough room for the titles to be displayed, it'll wrap around below the dumby div, but since the dumby div has a height of 0, it'll actually be displayed on top of the main div. The problem was that we didn't want the titles to be display all the time like we did with the desktop version, so we used Media Queries.

Media Queries are a new addition of BBCode. It's syntax is as follows: [class name=Name minWidth= Length maxWidth=Length state=Effect]. What we specifically had was this:

mediaspoil
Media Queries

[class name=logo]
position: absolute;
top: 40%;
left: 50%;
width: 60%;
padding-top: calc(60% * 438/801);
transform: translateX(-50%) rotate(0deg) scale(1);
transform-origin: center;
z-index: 20;
background-image: url('https://i.imgur.com/tMbYAWW.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: transform .5s 1.5s ease;
cursor: pointer;
[/class]

[class name=logo minWidth=100vh]
pointer-events: none;
[/class]

[class name=titlescroll]
position: absolute;
height: 65%;
width: 100%;
padding-right: 150px;
overflow-Y: scroll;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: start;
align-content: start;
font-size: calc(1.4 * var(--speech-font-size) );
z-index: 10;
pointer-events: none;
margin-left: -7.5%;
[/class]

[class name=titlescroll maxWidth=100vh]
z-index: -1;
transform: scale(0);
transition: all .75s;
align-items: center;
align-content: center;
margin-left: 0px;
[/class]


As you can see, we had them set to 100vh, meaning that if the width of the device was at some width in relation to 100vh, it would do certain things. In this case, in the class "titlescroll," if the width of the device was less than 100vh, using the z-index, it'll hide the titles and not display it over everything else until a transition is applied. To prevent this from accidentally happening on desktop, we had it so that if the width of the device was more than 100vh, you won't be able to press the logo.

Full Code
Here is the full code for your learning:

fullspoil
#feverdreams
[nobr]

[div class=root]
[div class="titleshold"]
[div class="titlefiller"][/div]
[div class="titlescontainer"]
[div class="titlescroll"]
[comment]Template:
[div class="title"]
[url=link]
[div class="header"]fever dreams[/div]
[/url]
[div class="numval"]10[/div]
[div class="jankbar janklvl#"][/div]
[/div]
[/comment]
[div class="title"]
[url=https://www.rpnation.com/threads/alterass-bbcode-workshop.390004/page-2#post-8804463]
[div class="header"]fever dreams[/div]
[/url]
[div class="numval"]10[/div]
[div class="jankbar janklvl#"][/div]
[/div]

[div class="title"]
[url=link]
[div class="header"]jank level 5[/div]
[/url]
[div class="numval"]5[/div]
[div class="jankbar janklvl5"][/div]
[/div]

[/div]
[/div]
[/div]
[div class="catchall"][/div]
[div class="container"]
[div class=filler][img]https://i.imgur.com/e230fSc.png[/img][/div]
[div class="charaholder bgimage"]
[div class="chara sugarvineimghold"][div class="sugarvineimg"][img]https://i.imgur.com/ElkmoCE.png[/img][/div][/div]
[div class="chara alterasimghold"][div class="alterasimg"][img]https://i.imgur.com/G47CF4P.png[/img][/div][/div]
[/div]
[div class="sugarvinecontenthold"]
[div class="speechbubble sugarvinebubble"][USER=32692][div=color: white;]sugarvine[/div][/user][div class=larrow][/div][/div]
[div class="content sugarvinecontent"]
[div class="subtitle sugarvinesubtitle"]MCDONALD TRASH[/div]
[div class="scroll"]
Is often responsible for the design side of things. I tend to think of really ambitious ideas for my works but then realize it’s beyond my capabilities. Then I run to Alteras crying for help. It’s something he’s used to at this point. In my spare time I like reverse-engineering the code he makes so I don’t have to ask for his help next time.
[br][/br][br][/br]
If you see me come up with a really great idea, it’s probably because I had Mcdonalds'. Actually, my worst ideas stem from Mcdonald’s too so uh, it can go one of two ways. At least it’s never boring whenever you feed me shitty fast food? Is that even a good thing?
[br][/br][br][/br]
Feel free to dissect the works we'll be presenting to get a better understanding of the thought process behind it. However, I highly discourage copy pasting as the shit we make is sensitive and very specific for the design. Learning for yourself is something I whole-heartedly support. Questions are very welcome, although considering the degree of jank in this thread, we'd recommend having a basic to medium understanding of CSS and BBScript.
[br][/br][br][/br]
If you want to grab some ideas for aesthetics, go right ahead? Just remember that being inspired is one thing, but copying is your death as an artist. You rob youself of developing your own style the moment you make this choice.
[/div]
[/div]
[/div]
[div class="alterascontenthold"]
[div class="speechbubble alterasbubble"][USER=34809][div=color: white;]alteras[/div][/user][div class=rarrow][/div][/div]
[div class="content alterascontent"]
[div class="subtitle alterassubtitle"]HOME COOKED DINNER?[br][/br]WHAT'S THAT?[/div]
[div class="scroll"]
is often responsible for the coding side of things. I tend to come up with ridiculous ideas, resulting in janky designs. When they get too janky, I rely on sugarvine to make it less janky. I honestly love how much more efficient her code is, not to mention the fact that all her designs are beautiful to the nth degree. I secretly want to steal half of her designs and call it my own... wait... this workshop is for doing just that!
[br][/br][br][/br]
I like to make each of my design unique, showcasing some new and crazy effect that can be achieved. Other times, I make my designs to fit a certain mood or feel, but I often need sugarvine's help to polish it up. My ideas are sometimes a bit too much, and just to show how "too much" it is, we decided to install the "Jank-o-Meter" to every one of our designs.
[br][/br][br][/br]
While I am a big fan of explaining things, I won't be giving away the code for the designs you see here, as per my partner's wishes. Most of the stuff you'll find here are the results of sweat, blood, and lots of tears that we poured into for days and weeks. I approve of you learning how to do things, but please don't steal our works.
[br][/br][br][/br]
And yes, I do have another workshop where I take requests, but I will absolutely not accept any requests that wish to adapt the designs in this workshop. Coding is painful, why do you think we partnered up?
[/div]
[/div]
[/div]
[div class="logo"][/div]
[/div]
[/div]

[comment][font=Poppins]font[/font][/comment]

[class name=root]
position: relative;
width: 100%;
background-color: #1d1d1d;
background-image: url('https://i.imgur.com/3QMnky3.gif');
background-blend-mode: soft-light;
overflow: hidden;
padding-top: 20px;
font-size: initial;
--speech-font-size: 1.5vh;
[/class]

[class name=catchall]
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 17;
[/class]

[class name=noclicking]
pointer-events: none;
[/class]

[class name=container]
position: relative;
width: 83vh;
max-width: 100%;
height: auto;
[/class]

[class name=filler]
position: relative;
width: 83vh;
max-width: 100%;
font-size: 0;
visibility: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
[/class]

[class name=bgimage]
background-image: url('https://i.imgur.com/6t7ZJix.png');
background-size: contain;
background-repeat: no-repeat;
[/class]

[class name=charaholder]
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;
font-size: 0;
[/class]

[class name=logo]
position: absolute;
top: 40%;
left: 50%;
width: 60%;
padding-top: calc(60% * 438/801);
transform: translateX(-50%) rotate(0deg) scale(1);
transform-origin: center;
z-index: 20;
background-image: url('https://i.imgur.com/tMbYAWW.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: transform .5s 1.5s ease;
cursor: pointer;
[/class]

[class name=logo minWidth=100vh]
pointer-events: none;
[/class]

[class name=logohide]
transition: transform .5s ease;
transform: translateX(-50%) rotate(-90deg) scale(0);
[/class]

[class name=chara]
position: relative;
font-size: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
[/class]

[class name=sugarvineimghold]
width: 42.5%;
margin-right: -9%;
z-index: 13;
[/class]

[class name=alterasimghold]
width: 47.7%;
margin-left: -8.5%;
z-index: 12;
transition: z-index 3s;
[/class]

[class name=sugarvineimg]
pointer-events: none;
transition: filter .75s 1.25s;
filter: contrast(1) sepia(0%) hue-rotate(360deg) saturate(100%) brightness(100%);
user-select: none;
[/class]

[class name=alterasimg]
pointer-events: none;
transition: filter .75s 1.25s;
filter: contrast(1) sepia(0%) hue-rotate(360deg) saturate(100%) brightness(100%);
user-select: none;
[/class]

[class name=imghide]
transition: filter .75s;
filter: contrast(0) sepia(100%) hue-rotate(204.5deg) saturate(4000%) brightness(78%);
[/class]

[class name=sugarvineforward]
animation-name: {post_id}swapsugarvineforward;
animation-duration: .75s;
animation-direction: normal;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-delay: 1.25s;
animation-fill-mode: both;
[/class]

[class name=sugarvinebackwards]
animation-name: {post_id}swapsugarvinebackwards;
animation-duration: .75s;
animation-direction: normal;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[class name=alterasswap]
z-index: 14;
transition: z-index .375s;
[/class]

[class name=alterasforward]
animation-name: {post_id}swapalterasforward;
animation-direction: normal;
animation-duration: .75s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[class name=alterasbackwards]
animation-name: {post_id}swapalterasbackward;
animation-direction: normal;
animation-duration: .75s;
animation-delay: 1.25s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=swapalterasforward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(22%);
[/keyframe]
[keyframe=50]
transform: translateX(22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapalterasbackward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(22%);
[/keyframe]
[keyframe=50]
transform: translateX(22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapsugarvineforward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(-22%);
[/keyframe]
[keyframe=50]
transform: translateX(-22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapsugarvinebackwards]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(-22%);
[/keyframe]
[keyframe=50]
transform: translateX(-22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[class name=sugarvinecontenthold]
position: absolute;
width: 22%;
min-width: 100px;
height: 60%;
top: calc(29.5% - 1em);
left: 42.5%;
z-index: 20;
font-size: var(--speech-font-size);
[/class]

[class name=alterascontenthold]
position: absolute;
width: 22%;
min-width: 100px;
height: 60%;
top: calc(29.5% - 1em);
right: 47%;
z-index: 20;
font-size: var(--speech-font-size);
[/class]

[class name=speechbubble]
display: block;
font-family: 'Poppins';
font-weight: 900;
font-size: 1.4em;
color: white;
position: relative;
background-color: #ff22c0;
padding: .5em;
text-align: center;
border-radius: .5em;
z-index: 22;
[/class]

[class name=sugarvinebubble]
transform-origin: -1em center;
transition: transform .5s .65s;
transform: rotate(90deg) scale(0);
[/class]

[class name=alterasbubble]
transform-origin: calc(100% + 1em) center;
transition: transform .5s .65s;
transform: rotate(-90deg) scale(0);
[/class]

[class name=bubbleexpansion]
transform: rotate(0) scale(1);
transition: transform .5s 1.25s;
[/class]

[class name=larrow]
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -.9em;
border: .5em solid transparent;
border-right: .5em solid #ff22c0;
width: 0;
height: 0;
[/class]

[class name=rarrow]
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -.9em;
border: .5em solid transparent;
border-left: .5em solid #ff22c0;
width: 0;
height: 0;
[/class]

[class name=content]
position: absolute;
top: 1em;
padding: 1.25em;
padding-top: 3em;
width: 150%;
height: 100%;
box-sizing: border-box;
background-color: rgba(0,0,0,0.8);
border-radius: .5em;
color: white;
z-index: 21;
overflow: hidden;
text-align: justify;
font-size: var(--speech-font-size);
transition: transform .5s ease-in-out;
transform: scale(0);
font-weight: 100;
[/class]

[class name=sugarvinecontent]
left: 1em;
transform-origin: top left;
[/class]

[class name=alterascontent]
right: 1em;
transform-origin: top right;
[/class]

[class name=contentexpansion]
transition: transform .5s ease-in-out 1.9s;
transform: scale(1);
[/class]

[class name=subtitle]
position: absolute;
width: 40%;
height: 7%;
top: 0;
text-align: left;
box-sizing: border-box;
font-size: .4em;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 5px 5px 5px;
font-weight: bold;
[/class]

[class name=sugarvinesubtitle]
right: 0;
[/class]

[class name=alterassubtitle]
left: 0;
[/class]

[class name=scroll]
font-size: .8em;
font-weight: normal;
font-family: 'Poppins';
overflow-X: scroll;
padding-right: 150px;
position: relative;
width: 100%;
height: 100%;
[/class]

[class name=titleshold]
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-flow: row wrap;
justify-content: stretch;
align-content: start;
[/class]

[class name=titlefiller]
position: relative;
width: 83vh;
max-width: calc(100% - 50px);
height: 0;
[/class]

[class name=titlescontainer]
position: relative;
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 100px;
[/class]

[class name=titlescroll]
position: absolute;
height: 65%;
width: 100%;
padding-right: 150px;
overflow-Y: scroll;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: start;
align-content: start;
font-size: calc(1.4 * var(--speech-font-size) );
z-index: 10;
pointer-events: none;
margin-left: -7.5%;
[/class]

[class name=titlescroll maxWidth=100vh]
z-index: -1;
transform: scale(0);
transition: all .75s;
align-items: center;
align-content: center;
margin-left: 0px;
[/class]

[class name=titlescrollshow]
z-index: 30;
transform: scale(1);
transition: transform .75s;
[/class]

[class name=title]
position: relative;
width: 500px;
max-width: calc(100% - 20px);
box-sizing: border-box;
height: auto;
margin-bottom: 10px;
padding: 25px 15px;
display: grid;
background-color: rgba(29, 29, 29,0.8);
border: 0px solid black;
border-radius: 10px;
grid-template-columns: calc(1.5em + 5px) 1fr;
grid-template-rows: 1.5em 5px;
grid-template-areas:
'num title'
'num bar';
grid-column-gap: 10px;
pointer-events: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
white-space: nowrap;
[/class]

[class name=numval]
position: relative;
grid-area: num;
display: flex;
justify-content: center;
align-items: center;
border: 0 solid black;
border-radius: 50%;
background-color: #ff22c0;
color: white;
font-family: 'Poppins';
font-weight: 900;
font-size: 1em;
line-height: 2em;
[/class]

[class name=header]
position: relative;
grid-area: title;
color: white;
font-family: 'Poppins';
font-weight: 900;
padding-left: .5%;
[/class]

[class name=jankbar]
position: relative;
grid-area: bar;
border-radius: 5px;
--block1: #b9fc49;
--block2: #a7f55a;
--block3: #95ee6c;
--block4: #83e77d;
--block5: #71e08f;
--block6: #5ed8a0;
--block7: #4cd1b2;
--block8: #3acac3;
--block9: #28c3d5;
--block10: #16bce6;
--blocknul: #989898;
background-image:
linear-gradient(to right,
var(--block1) calc(10% - 2px),
transparent calc(10% - 2px), transparent 10%,
var(--block2) 10%, var(--block2) calc(20% - 2px),
transparent calc(20% - 2px), transparent 20%,
var(--block3) 20%, var(--block3) calc(30% - 2px),
transparent calc(30% - 2px), transparent 30%,
var(--block4) 30%, var(--block4) calc(40% - 2px),
transparent calc(40% - 2px), transparent 40%,
var(--block5) 40%, var(--block5) calc(50% - 2px),
transparent calc(50% - 2px), transparent 50%,
var(--block6) 50%, var(--block6) calc(60% - 2px),
transparent calc(60% - 2px), transparent 60%,
var(--block7) 60%, var(--block7) calc(70% - 2px),
transparent calc(70% - 2px), transparent 70%,
var(--block8) 70%, var(--block8) calc(80% - 2px),
transparent calc(80% - 2px), transparent 80%,
var(--block9) 80%, var(--block9) calc(90% - 2px),
transparent calc(90% - 2px), transparent 90%,
var(--block10) 90%);
[/class]

[class name=janklvl0]
--block1: var(--blocknul);
--block2: var(--blocknul);
--block3: var(--blocknul);
--block4: var(--blocknul);
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl1]
--block2: var(--blocknul);
--block3: var(--blocknul);
--block4: var(--blocknul);
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl2]
--block3: var(--blocknul);
--block4: var(--blocknul);
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl3]
--block4: var(--blocknul);
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl4]
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl5]
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl6]
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl7]
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl8]
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl9]
--block10: var(--blocknul);
[/class]

[script class=loadin version=2]
(addClass "noclicking" "sugarvinecontenthold")
(addClass "noclicking" "alterascontenthold")
(addClass "noclicking" "catchall")
[/script]

[script class=logo version=2 on=click]
(addClass "logohide" "logo")
(addClass "titlescrollshow" "titlescroll")
(removeClass "noclicking" "catchall")
[/script]

[script class=alterasimghold version=2 on=click]
(addClass "logohide" "logo")

(removeClass "sugarvineforward" "sugarvineimghold")
(addClass "sugarvinebackwards" "sugarvineimghold")
(addClass "alterasforward" "alterasimghold")
(addClass "alterasswap" "alterasimghold")
(removeClass "alterasbackwards" "alterasimghold")
(addClass "imghide" "sugarvineimg")

(addClass "bubbleexpansion" "alterasbubble")
(addClass "contentexpansion" "alterascontent")

(removeClass "noclicking" "alterascontenthold")
(removeClass "noclicking" "catchall")
[/script]

[script class=sugarvineimghold version=2 on=click]
(addClass "logohide" "logo")

(removeClass "sugarvineforward" "sugarvineimghold")
(addClass "sugarvinebackwards" "sugarvineimghold")
(addClass "alterasforward" "alterasimghold")
(removeClass "alterasbackwards" "alterasimghold")
(addClass "imghide" "alterasimg")

(addClass "bubbleexpansion" "sugarvinebubble")
(addClass "contentexpansion" "sugarvinecontent")

(removeClass "noclicking" "sugarvinecontenthold")
(removeClass "noclicking" "catchall")
[/script]

[script class=catchall version=2 on=click]
(removeClass "logohide" "logo")

(removeClass "titlescrollshow" "titlescroll")

(removeClass "sugarvinebackwards" "sugarvineimghold")
(addClass "sugarvineforward" "sugarvineimghold")
(addClass "alterasbackwards" "alterasimghold")
(removeClass "alterasswap" "alterasimghold")
(removeClass "alterasforward" "alterasimghold")
(removeClass "imghide" "sugarvineimg")
(removeClass "imghide" "alterasimg")

(removeClass "bubbleexpansion" "alterasbubble")
(removeClass "contentexpansion" "alterascontent")
(removeClass "bubbleexpansion" "sugarvinebubble")
(removeClass "contentexpansion" "sugarvinecontent")

(addClass "noclicking" "sugarvinecontenthold")
(addClass "noclicking" "alterascontenthold")
(addClass "noclicking" "catchall")
[/script]
[/nobr]


 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter
#7
basics
personal
physical
fluff
appearance
basic information
name
Aster Elliston
aliases
The Collector
Marquis Elliston
age
Twenty-nine (29)
gender
Male
race
Human
class
Quartermaster Assistant (Merchant Variant with a focus on military logistics)
home
i
ii
iii
iv
personal information
sexuality
Heterosexual
high concept
Unkempt Negotiator & Quartermaster Assistant
alignment
Neutral Good
relatives
Mother
Father
Ellie
affiliations
Guild of Heroes
Nobleman of Albion
home
i
ii
iii
iv
personality
backstory
Aster Elliston doesn't like people very much. He would much rather keep to himself and watch pretty mana do pretty things. While his professionalism is perfect, casual conversation is barely doable and intimacy is not happening anytime soon. He is pretty much reliant on Ellie Edelweiss to do anything daily life related, but he can pull through when he's motivated. He's a klutz, a walking embodiment of the noble disconnected from common sense, even though he's got good intuition when it comes to items and artifacts.

home
i
ii
iii
iv
physical information
weapons
Fork
Quill
Collection of Artifacts
armor
a Slightly Unkempt Suit
Blazer
Undershirt.
items
A fancy pen
Ellie?
An Extensive Collection
skills
magic
weaknesses
Connoisseur of All - He is well respected as an expert in many collections, most notably, antiquity. He can generally figure out what something does with a bit of time, and know its worth almost instantly.

Quartermaster Assistant - He may be the official Quartermaster, but he's more like the assistant. Has some skill in a variety of weapons, and can know the detail of any weapon he lays his eyes on. His skills mostly lie in magical items.

Collector - Has great organizational skills and a wealth of knowledge in many artifacts.

Negotiator - Has great negotiating skills and can make split second decisions. When it comes to the guild, he can thoroughly represent their wishes in the Royal Court, pushing forward a favorable position for the Guild. When it comes to himself, he will not compromise.

FLUFF
hobbies
Collecting Artifacts

Watching Mana flow.
home
i
ii
iii
iv
notes
notes here
quotes
"..." *ignores*

"Ellie!! Save me!!"

"Stop staring at me..."

 
Thread starter #8
basics
personal
physical
fluff
appearance
basic information
name
edelweiss
aliases
ellie, fork ghost
age
unknown
gender
female
race
ghost
class
resident ghost
home
i
ii
iii
iv
personal information
sexuality
Heterosexual
high concept
Ghostly quartermaster who goes momfriend on everyone
alignment
Neutral Good
relatives
Aster
affiliations
Guild of Heroes
home
i
ii
iii
iv
personality
backstory
Ellie is a cheerful individual whose death hasn't seemed to faze her in the least. If it weren't for the fact she literally goes through walls and is partially see-through, then one probably wouldn't realize she was a ghost. She's a frequently heard voice in the Guild, whether it's from nagging Ellie or sorting out the inventory. Laughter is an oft-heard sound in her presence.

Alongside her title of Quartermaster, she's also the guild's honorary mom. Taking care of others comes naturally to Ellie. As with any good mother figure, Ellie tends to be on the nosy side, asking questions at the expense of the recipient's comfort. She is incredibly trusting, often putting herself out there and opening up long before whoever she's talking to is ready to return the gesture. Naivety is commonly associated with her. It's easy to try and put up a wall against her friendly overtures, but Edelweiss is nothing if not persistent. Frankly if she's set her sights on you, you'd be better off just going along with it than trying to hide. It's near impossible to lock out a ghost after all.

home
i
ii
iii
iv
physical information
weapons
fork
armor
no physical presence
items
notebook
skills
magic
weaknesses
Cooking - While she's by no means a culinary genius, her meals are more than just palatable. She has perfected a few choice meals, namely those that are favored by Aster that are also nutritious. Getting the man to eat when he's buried in something is no easy feat.

Multitasking - Edelweiss can cook, clean, sort the inventory and hold a conversation - all at the same time. The real miracle is that she's able to do it without making a mistake in any of them.

Organization - Being able to keep on top of the guild's many supplies requires ruthless management and record-keeping. Do not try to skim off the top of anything of the sort; Edelweiss will find out.

Memory - Organization requires a sharp memory, and Edelweiss has that. It's ironic she can remember who used what when, but can't seem to recall her own past.

FLUFF
THEME
hobbies
cooking, organizing supplies, nagging others, sewing, pranking newbies
home
i
ii
iii
iv
notes
people often hand Ellie any clothes that might have loose seams or rips so that she can sew them back up | if she's not doing inventory she's probably in the kitchen helping with the meals | or cleaning because few people actually tidy up in the guild
quotes
"Aster if you don't eat, I'm going to burn your books down."

"Who left this sword on the floor?"

 

Alteras

The Sleepy One
Moderator
Supporter
#9
#aster&ellie
alteras
ahh, please come up with a way to return to main nav
sugarvine
Refresh the page
alteras
...
sugarvine
Am i being judged
alteras
wats happening rn? i feel like crying and laughing at the joke
i think something just died in me
sugarvine
i broke you
alteras
send help
sugarvine
This is going to be the chat log
alteras
i can actually feel my mouth turning into a smile but my eyes are starting to tear up...
sugarvine
LOL I BROKE HIM
alteras
i haven't been this emotionally confused since I watched Angel Beats
This is Aster and Ellie, a character pair we've wanted to do for a long time. This is actually one of the first designs we thought about when we started doing collabs. They both use the same basic code, but with different animation sequences. It has two central features, the moving around when it is in desktop mode, and the reorganized mobile version of the code. It took way too much out of me and sugarvine just broke me at one point. Everything has been done to make it as butter smooth as possible, and fully and completely deserves the ranking of Jank Level 9. As per usual, we'll be providing the code for learning purposes, but because of how much it took out of me, I absolutely refuse to adapt the code for anything else.

Sliding Animations
This is something we decided on very early on, that it would involve the user moving around the image of a flower. This actually required quite a bit of niftiness when coding. Because the user would be moving around alot, we wanted to make it butter smooth. We initially thought we could use background position and animate that, but that actually causes a lot of lag due to the way browser render objects. It all comes down to ways browser renders elements, Layout, Drawing, and Rendering (which are all oversimplifications and not at all what the proper technical term is, but it gets the point across). When using background position, it is drawing the image. And so for every frame that the animation goes through, it actually has to redraw and rerender it, making it choppy. If we used something like top: and left: or margin to animate it, we would be faced with the browser having to perform Layout rendering, once again heavily affecting the lag.

We got around this by using Transform. When a browser performs transform, it makes it its own layer, relieving the gpu of what it needs to spend time drawing. The animations for movement comes in two parts, the animation itself, and the anchoring.
asteranimationspoil
Aster's Animation
[comment]Basics Classes[/comment]
[class name=bgbasics minWidth=800px]
animation-name: {post_id}bgbasic;
[/class]
[class name=anchorbasics minWidth=800px]
transform: translate(-6.5%,16.25%);
background-color: #d1caba;
[/class]
[animation=bgbasic]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(4.5%,16.25%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(4.5%,16.25%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-6.5%,16.25%);
[/keyframe]
[/animation]
[class name=basics]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-end;
[/class]
[class name=basics maxWidth=799px]
align-items: stretch;
justify-content: start;
[/class]
[class name=basicinfo]
width: 46.5%;
height: 65%;
[/class]
[class name=basicinfo maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[comment]Personal Classes[/comment]
[class name=bgpersonal minWidth=800px]
animation-name: {post_id}bgpersonal;
[/class]
[class name=anchorpersonal minWidth=800px]
transform: translate(12.5%,5.5%);
background-color: #d1caba;
[/class]
[animation=bgpersonal]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(12.5%,0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(12.5%,0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(12.5%,5.5%);
[/keyframe]
[/animation]
[class name=personal]
display: flex;
flex-flow: column wrap-reverse;
justify-content: start;
align-items: end;
align-content: space-between;
[/class]
[class name=personal maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
[/class]
[class name=personalinfo]
width: 45%;
height: 63%;
[/class]
[class name=personalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]
[class name=personalcontent]
width: 49.5%;
height: 100%;
[/class]
[class name=personalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Physical Classes[/comment]
[class name=bgphysical minWidth=800px]
animation-name: {post_id}bgphysical;
[/class]
[class name=anchorphysical minWidth=800px]
transform: translate(-14.25%, 3.8%);
background-color: #d1caba;
[/class]
[animation=bgphysical]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-5%, 10%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-5%, 10%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-14.25%, 3.8%);
[/keyframe]
[/animation]
[class name=physical]
display: flex;
flex-flow: column wrap;
justify-content: end;
align-items: end;
align-content: space-between;
[/class]
[class name=physical maxWidth=799px]
flex-flow: column nowrap;
justify-content: start;
align-items: stretch;
[/class]
[class name=physicalinfo]
width: 45%;
height: 62%;
margin-bottom: -2.5%;
[/class]
[class name=physicalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]
[class name=physicalcontent]
width: 49.5%;
height: 100%;
[/class]
[class name=physicalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]


[comment]Fluff Classes[/comment]
[class name=bgfluff minWidth=800px]
animation-name: {post_id}bgfluff;
[/class]
[class name=anchorfluff minWidth=800px]
transform: translate(-6.5%, -5%);
background-color: #d1caba;
[/class]
[animation=bgfluff]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(0%, -6.75%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8
transform: translate(0%, -6.75%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-6.5%, -5%);
[/keyframe]
[/animation]
[class name=fluff]
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]
[class name=fluff maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
justify-content: start;
[/class]
[class name=fluffleft]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: start;
align-content: stretch;
[/class]
[class name=fluffleft maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
margin-bottom: 2.5%;
[/class]
[class name=fluffinfo]
height: 35%;
margin-bottom: 3.5%;
[/class]
[class name=fluffinfo maxWidth=799px]
flex: 1;
margin-bottom: 5%;
[/class]
[class name=fluffhobbies]
height: 50%;
[/class]
[class name=fluffhobbies maxWidth=799px]
width: 100%;
flex: 1;
[/class]
[class name=fluffright]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: end;
align-content: stretch;
[/class]
[class name=fluffright maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
[/class]
[class name=fluffnotes]
height: 38%;
margin-bottom: 3.5%;
[/class]
[class name=fluffnotes maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]
[class name=fluffquotes]
height: 50%;
[/class]
[class name=fluffquotes maxWidth=799px]
width: 100%;
flex: 1;
[/class]

ellieanimationspoil
Ellie's Animation
[comment]Basics Classes[/comment]

[class name=bgbasics minWidth=800px]
animation-name: {post_id}bgbasic;
[/class]

[class name=anchorbasics minWidth=800px]
transform: translate(6%,2%);
background-color: #d1caba;
[/class]

[animation=bgbasic]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(18%,0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(18%,0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(6%,2%);
[/keyframe]
[/animation]

[class name=basics]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-end;
[/class]

[class name=basics maxWidth=799px]
align-items: stretch;
justify-content: start;
[/class]

[class name=basicinfo]
width: 46.5%;
height: 65%;
margin-right: 10%;
[/class]

[class name=basicinfo maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[class name=basictabs minWidth=800px]
margin-right: 10%;
[/class]

[comment]Personal Classes[/comment]

[class name=bgpersonal minWidth=800px]
animation-name: {post_id}bgpersonal;
[/class]

[class name=anchorpersonal minWidth=800px]
transform: translate(-2%,-16%);
background-color: #d1caba;
[/class]

[animation=bgpersonal]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(0%,-20%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(0%,-20%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-2%,-16%);
[/keyframe]
[/animation]

[class name=personal]
display: flex;
flex-flow: column wrap;
justify-content: start;
align-items: flex-end;
align-content: space-between;
[/class]

[class name=personal maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
[/class]

[class name=personalinfo]
width: 45%;
height: 63%;
[/class]

[class name=personalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]

[class name=personalcontent]
width: 49.5%;
height: 100%;
[/class]

[class name=personalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Physical Classes[/comment]

[class name=bgphysical minWidth=800px]
animation-name: {post_id}bgphysical;
[/class]

[class name=anchorphysical minWidth=800px]
transform: translate(-8%, 5.75%);
background-color: #d1caba;
[/class]

[animation=bgphysical]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-13%, 5.75%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-13%, 5.75%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-8%, 5.75%);
[/keyframe]
[/animation]

[class name=physical]
display: flex;
flex-flow: column wrap-reverse;
justify-content: flex-end;
align-items: flex-end;
align-content: space-between;
[/class]

[class name=physical maxWidth=799px]
flex-flow: column nowrap;
justify-content: start;
align-items: stretch;
[/class]

[class name=physicalinfo]
width: 45%;
height: 62%;
margin-bottom: -2.5%;
[/class]

[class name=physicalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]

[class name=physicalcontent]
width: 49.5%;
height: 100%;
[/class]

[class name=physicalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Fluff Classes[/comment]

[class name=bgfluff minWidth=800px]
animation-name: {post_id}bgfluff;
[/class]

[class name=anchorfluff minWidth=800px]
transform: translate(-14%, -9%);
background-color: #d1caba;
[/class]

[animation=bgfluff]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-14%, 0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-14%, 0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-14%, -9%);
[/keyframe]
[/animation]

[class name=fluff]
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]

[class name=fluff maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
justify-content: start;
[/class]

[class name=fluffleft]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: start;
align-content: stretch;
[/class]

[class name=fluffleft maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
margin-bottom: 2.5%;
[/class]

[class name=fluffinfo]
height: 28%;
margin-bottom: 3.5%;
margin-top: 2%;
[/class]

[class name=fluffinfo maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]

[class name=fluffhobbies]
height: 50%;
[/class]

[class name=fluffhobbies maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[class name=fluffright]
position: relative;
height: 100%;
width: 33%;
margin-left: 1.5%;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-content: stretch;
[/class]

[class name=fluffright maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
[/class]

[class name=fluffnotes]
height: 38%;
margin-bottom: 3.5%;
[/class]

[class name=fluffnotes maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]

[class name=fluffquotes]
height: 50%;
[/class]

[class name=fluffquotes maxWidth=799px]
width: 100%;
flex: 1;
[/class]

animationscriptspoil
Animation Script
[script class=tab version=2 on=click]
(= tabname (getText))
(if (== tabname "appearance") (group
(fadeIn 1250 "image")
(fadeIn 1250 "filler")
(stop)))

(addClass "navhide" "mainnav")
(removeClass "return" "flower")
(addClass (+ "bg" tabname) "flower")
(addClass "contentreveal" tabname)
(addClass "mobilebg" "flower")
(setTimeout 4 (addClass (+ "anchor" tabname) "flower"))
[/script]

[script class=tabnav version=2 on=click]
(= tabvar (getText))

(removeClass (+ "bg" tabname) "flower")
(removeClass "contentreveal" "content")

(if (== "home" tabvar) (group
(removeClass "navhide" "mainnav")
(addClass "return" "flower")
(removeClass "mobilebg" "flower")
(setTimeout 2 (removeClass (+ "anchor" tabname) "flower"))
(stop)))

(if (== "i" tabvar) (= tabnavname "basics"))
(if (== "ii" tabvar) (= tabnavname "personal"))
(if (== "iii" tabvar) (= tabnavname "physical"))
(if (== "iv" tabvar) (= tabnavname "fluff"))

(addClass (+ "bg" tabnavname) "flower")
(addClass "contentreveal" tabnavname)
(setTimeout 4 (group
(addClass (+ "anchor" tabnavname) "flower")
(removeClass (+ "anchor" tabname) "flower")
(= tabname tabnavname)))
[/script]


Inside, you'll find that each and every class set has its own animation. The script provided shows that if you click on any of the tabs, it'll add the appropiate animation classes to the flower background. Something interesting you might notice is that there exists no keyframe=0. This is because keyframe=0 will be the properties of the original transform when it gets added. Unfortunately if we just add the animation classes, it won't smoothly flow from one tab to another, instead, it'll jump back to its original position before beginning the next animation. We could've used just made separate classes to return to the center and then move to the next tab, or make an animation to jump to other tabs, but that would require a lot more classes.

What we came up with instead is the anchor system. Using the bbscript+, we added an another class, carrying a transform that has the animation's final position, to the flower background the moment the animation ended. If we had used a transition delay property, it would have interrupted the animation, so we used the new bbscript function setTimeout to give us our delay. thankfully the animation occurs on full second intervals, so we didn't need to do some fancy math stuff to get the delay to work. This worked perfectly since when we removed the animation class and added in a different animation class to go to another tab, the background wouldn't jump, and in fact would move smoothly over to the new position. All we had to do was just remove the old anchor and add in the new one at the same time, and tada~, you have a system that lets you jump anywhere and only have to make one animation class for each section.

Mobile Perfection
When we designed it, we decided that for the mobile version, it would be too much to ask for all the pretty animations and the textboxes to occur. As such we decided to just use flexboxes and fit it all into shape when its own mobile. However one of the problems with that is the fact that on desktop, the tabs all are positioned absolutely. Likewise, the boxes were all sized based on percentages of the bounding box. This we got around with copious amounts of media queries. We made the boundary between mobile mode and desktop mode at 799px and 800px screen width. All the classes that were desktop specific were given the minWidth=800px argument in the class tag and everything that was mobile specific the maxWidth=799px argument in the class tag. That saved us a lot of room and meant that we only needed to add in properties that would change the class. We also made some shortcuts using class precedence and hierarchy. In the case of the tabs, we went over the top and made it so that only in mobile mode would it turn into a flexbox.
tabsspoil
Tab classes
[class name=mainnav]
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
font-size: initial;
opacity: .9;
transition: opacity .5s ease 2.1s;
[/class]

[class name=mainnav maxWidth=799px]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transition: opacity .5s ease .5s
[/class]

[class name=navhide]
opacity: 0;
transition: opacity .5s;
[/class]

[class name=tab]
text-transform: uppercase;
color: #564743;
font-size: .9em;
font-family: 'Averia Serif Libre';
position: absolute;
transform: translate(-50%,-50%);
text-shadow:2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
cursor: pointer;
z-index: 3;
[/class]

[class name=tab maxWidth=799px]
position: relative;
font-size: 4.5vh;
transform: translate(0,0);
margin: 1vh;
[/class]

[class name=tabbasics minWidth=800px]
top: 46%;
left: 10%;
[/class]

[class name=tabpersonal minWidth=800px]
top: 68%;
left: 30%;
[/class]

[class name=tabphysical minWidth=800px]
top: 32%;
left: 53%;
[/class]

[class name=tabfluff minWidth=800px]
top: 64%;
left: 89%;
[/class]

[class name=tabappearance minWidth=800px]
top: 78.5%;
left: 70%;
[/class]


As you can see, all those classes would only be applied when certain conditions were met, giving us a lot of control over how it looks over certain devices.

Closing Thoughts and Full Code
When I started to code this monster of a design, I thought it would only reach up to Jank 4 at most. Little did I know how crazy sugarvine's designs were. Literally, 24 hours after I said it would only reach Jank 4, I was coding in Jank 7 territory. It took me a whole week to figure out that animation anchoring system. A solid week was spent on repositioning all the tabs and box sizes. And don't get me started on how those inside box tabs work. They were their own nightmare on their own, forcing me to code more classes just to make it so that it would change positions when you switched, and the scrollboxes not playing nice with slideUp and slideDown. Agh!!!!

Next design better be a Jank 2, you hear me!!!!
astercodespoil
#aster
[nobr]

[comment][font=Averia Serif Libre]font[/font][font=Poppins]font[/font][/comment]

[class name=root]
width: 100%;
position: relative;
background-image: url('https://i.imgur.com/VkcW7TQ.jpg');
background-repeat: no-repeat;
background-size: 1250px;
background-position: center;
background-color: #e6e1d8;
background-blend-mode: color-burn;
[/class]
[class name=root maxWidth=799px]
--containerw: 95%;
--borderw: 15px;
--boundw: 15px;
padding: 2.5%;
[/class]
[class name=root minWidth=800px]
--containerw: 600px;
--borderw: 30px;
--boundw: 25px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
[/class]
[class name=root minWidth=1000px]
--containerw: 800px;
--borderw: 50px;
--boundw: 45px;
[/class]
[class name=root minWidth=1280px]
--containerw: 1050px;
--borderw: 50px;
--boundw: 45px;
[/class]
[class name=container]
position: relative;
margin: 100px;
max-width: 100%;
width: var(--containerw);
height: calc(9.25/16 * var(--containerw));
background-color: #e6e1d8;
border: var(--borderw) solid #e6e1d8;
box-sizing: border-box;
overflow: hidden;
[/class]
[class name=container maxWidth=799px]
margin: 0;
height: 0;
padding-bottom: calc(1036/540 * 95%);
[/class]
[class name=filler]
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: #e6e1d8;
z-index: 4;
[/class]
[class name=flower]
position: absolute;
top: -41.5%;
margin-left: -50%;
width: 200%;
padding-bottom: calc(2406/1779 * 90%);
opacity: .85;
transform-origin: center;
transform: translate(0%,0%);
background-blend-mode: darken;
background-color: #e6e1d8;
background-image: url('https://i.imgur.com/jHLDotq.jpg');
background-size: 45%;
background-position: center;
background-repeat: no-repeat;
[/class]
[class name=flower maxWidth=799px]
padding-bottom: 0;
height: 100%;
top: 0;
margin-left: 0;
left: 0;
width: 100%;
background-size: 200%;
background-position: 40% 35%;
transition: background-color 1s;
[/class]
[class name=flower minWidth=800px]
animation-duration: 3.5s;
animation-delay: .5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
[/class]
[class name=image]
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url('https://i.imgur.com/IBcJZcb.jpg');
background-repeat: no-repeat;
background-size: 120%;
background-position: 50% 18%;
background-color: #e6e1d8;
background-blend-mode: multiply;
opacity: .9;
z-index: 5;
[/class]
[class name=image maxWidth=799px]
background-size: 230%;
background-position: 60% 18%;
[/class]
[class name=mainnav]
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
font-size: initial;
opacity: .9;
transition: opacity .5s ease 2.1s;
[/class]
[class name=mainnav maxWidth=799px]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transition: opacity .5s ease .5s
[/class]
[class name=navhide]
opacity: 0;
transition: opacity .5s;
[/class]
[class name=tab]
text-transform: uppercase;
color: #564743;
font-size: .9em;
font-family: 'Averia Serif Libre';
position: absolute;
transform: translate(-50%,-50%);
text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
cursor: pointer;
z-index: 3;
[/class]
[class name=tab maxWidth=799px]
position: relative;
font-size: 4.5vh;
transform: translate(0,0);
margin: 1vh;
[/class]
[class name=tabbasics minWidth=800px]
top: 10%;
left: 25%;
[/class]
[class name=tabpersonal minWidth=800px]
top: 55%;
left: 14%;
[/class]
[class name=tabphysical minWidth=800px]
top: 30%;
left: 78%;
[/class]
[class name=tabfluff minWidth=800px]
top: 62%;
left: 78%;
[/class]
[class name=tabappearance minWidth=800px]
top: 89%;
left: 42%;
[/class]
[class name=content]
position: absolute;
top: var(--boundw);
left: var(--boundw);
right: var(--boundw);
bottom: var(--boundw);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
[/class]
[class name=contentreveal]
opacity: .75;
transition: opacity 1.25s ease 3s;
pointer-events: auto;
[/class]
[class name=contentreveal maxWidth=799px]
transition: opacity .5s ease .5s;
[/class]
[class name=tabnavbox]
position: relative;
align-self: stretch;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
font-size: initial;
[/class]
[class name=tabnavbox maxWidth=799px]
order: -1;
[/class]
[class name=tabnav]
position: relative;
display: inline-block;
color: #564743;
margin: .8em;
margin-bottom: .5em;
font-size: .75em;
font-family: 'Averia Serif Libre';
cursor: pointer;
text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
[/class]
[class name=selected]
pointer-events: none;
[/class]
[class name=return minWidth=800px]
animation-name: {post_id}return;
animation-delay: 0s;
animation-duration: 2s;
[/class]
[animation=return]
[keyframe=5]
background-color: #d1caba;
[/keyframe]
[keyframe=50]
background-color: #e6e1d8;
[/keyframe]
[keyframe=100]
background-color: #e6e1d8;
transform: translate(0%, 0%);
[/keyframe]
[/animation]
[class name=mobilebg maxWidth=799px]
background-color: #d1caba;
[/class]


[comment]Formatting Classes[/comment]
[class name=scrollbox]
display: block;
width: 100%;
margin-top: 10px;
padding-right: 150px;
overflow-x: visible;
overflow-y: scroll;
box-sizing: content-box;
flex: 1;
[/class]
[class name=infotitle]
font-family: 'Averia Serif Libre', serif;
text-transform: uppercase;
color: #564743;
font-size: 1.25em;
margin-bottom: 5px;
[/class]
[class name=inforow]
width: 95%;
padding-left: 5%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
overflow: hidden;
font-size: .9em;
margin: 0px -2px;
[/class]
[class name=inforow maxWidth=799px]
margin: 0px -2px 5px -2px;
[/class]
[class name=infoq]
flex: 1 0 120px;
text-transform: uppercase;
font-family: 'Poppins', sanserif;
color: #7e7371;
margin: 0px 2px;
[/class]
[class name=infor]
flex: 2 0 120px;
font-family: 'Averia Serif Libre', serif;
color: #564743;
margin: 0px 2px;
[/class]
[class name=flexcontent]
background-color: #e6e1d8;
overflow: hidden;
border: calc(.9 * var(--boundw)) solid #e6e1d8;
box-sizing: border-box;
position: relative;
display: flex;
flex-flow: column nowrap;
justify-stretch;
[/class]
[class name=titleflex]
display: inline-flex;
flex-flow: row wrap;
justify-content: start;
[/class]
[class name=hideunhide]
animation-name: {post_id}hideunhide;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
[/class]
[animation=hideunhide]
[keyframe=0]
opacity: 1;
[/keyframe]
[keyframe=40]
opacity: 0;
[/keyframe]
[keyframe=60]
opacity: 0;
[/keyframe]
[keyframe=100]
opacity: 1;
[/keyframe]
[/animation]
[class name=contitle]
display: inline-block;
margin-right: 10px;
font-family: 'Averia Serif Libre', serif;
text-transform: uppercase;
font-size: .95em;
color: rgba(86, 71, 67, 0.68);
cursor: pointer;
order: 1;
transition: all 0s ease .5s;
[/class]
[class name=activecontitle]
margin-right: 30px;
color: #564743;
order: 0;
pointer-events: none;
[/class]
[class name=contenttext]
display: block;
font-family: 'Poppins', sanserif;
color: #7e7371;
text-align: justify;
font-size: .85em;
[/class]
[class name=contentholder]
display: flex;
width: 100%;
position: relative;
flex: 1;
flex-flow: column nowrap;
justify-content: stretch;
overflow: hidden;
[/class]
[class name=insidecontenthold]
position: absolute;
top: 0;
left: 0;
height: 100%;
[/class]

[comment]Basics Classes[/comment]
[class name=bgbasics minWidth=800px]
animation-name: {post_id}bgbasic;
[/class]
[class name=anchorbasics minWidth=800px]
transform: translate(-6.5%,16.25%);
background-color: #d1caba;
[/class]
[animation=bgbasic]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(4.5%,16.25%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(4.5%,16.25%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-6.5%,16.25%);
[/keyframe]
[/animation]
[class name=basics]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-end;
[/class]
[class name=basics maxWidth=799px]
align-items: stretch;
justify-content: start;
[/class]
[class name=basicinfo]
width: 46.5%;
height: 65%;
[/class]
[class name=basicinfo maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[comment]Personal Classes[/comment]
[class name=bgpersonal minWidth=800px]
animation-name: {post_id}bgpersonal;
[/class]
[class name=anchorpersonal minWidth=800px]
transform: translate(12.5%,5.5%);
background-color: #d1caba;
[/class]
[animation=bgpersonal]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(12.5%,0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(12.5%,0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(12.5%,5.5%);
[/keyframe]
[/animation]
[class name=personal]
display: flex;
flex-flow: column wrap-reverse;
justify-content: start;
align-items: end;
align-content: space-between;
[/class]
[class name=personal maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
[/class]
[class name=personalinfo]
width: 45%;
height: 63%;
[/class]
[class name=personalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]
[class name=personalcontent]
width: 49.5%;
height: 100%;
[/class]
[class name=personalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Physical Classes[/comment]
[class name=bgphysical minWidth=800px]
animation-name: {post_id}bgphysical;
[/class]
[class name=anchorphysical minWidth=800px]
transform: translate(-14.25%, 3.8%);
background-color: #d1caba;
[/class]
[animation=bgphysical]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-5%, 10%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-5%, 10%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-14.25%, 3.8%);
[/keyframe]
[/animation]
[class name=physical]
display: flex;
flex-flow: column wrap;
justify-content: end;
align-items: end;
align-content: space-between;
[/class]
[class name=physical maxWidth=799px]
flex-flow: column nowrap;
justify-content: start;
align-items: stretch;
[/class]
[class name=physicalinfo]
width: 45%;
height: 62%;
margin-bottom: -2.5%;
[/class]
[class name=physicalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]
[class name=physicalcontent]
width: 49.5%;
height: 100%;
[/class]
[class name=physicalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]


[comment]Fluff Classes[/comment]
[class name=bgfluff minWidth=800px]
animation-name: {post_id}bgfluff;
[/class]
[class name=anchorfluff minWidth=800px]
transform: translate(-6.5%, -5%);
background-color: #d1caba;
[/class]
[animation=bgfluff]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(0%, -6.75%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8
transform: translate(0%, -6.75%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-6.5%, -5%);
[/keyframe]
[/animation]
[class name=fluff]
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]
[class name=fluff maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
justify-content: start;
[/class]
[class name=fluffleft]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: start;
align-content: stretch;
[/class]
[class name=fluffleft maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
margin-bottom: 2.5%;
[/class]
[class name=fluffinfo]
height: 35%;
margin-bottom: 3.5%;
[/class]
[class name=fluffinfo maxWidth=799px]
flex: 1;
margin-bottom: 5%;
[/class]
[class name=fluffhobbies]
height: 50%;
[/class]
[class name=fluffhobbies maxWidth=799px]
width: 100%;
flex: 1;
[/class]
[class name=fluffright]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: end;
align-content: stretch;
[/class]
[class name=fluffright maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
[/class]
[class name=fluffnotes]
height: 38%;
margin-bottom: 3.5%;
[/class]
[class name=fluffnotes maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]
[class name=fluffquotes]
height: 50%;
[/class]
[class name=fluffquotes maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[comment]scripts[/comment]
[script class=image on=click]
fadeOut 1250 image
fadeOut 1250 filler
[/script]
[script class=tab version=2 on=click]
(= tabname (getText))
(if (== tabname "appearance") (group
(fadeIn 1250 "image")
(fadeIn 1250 "filler")
(stop)))

(addClass "navhide" "mainnav")
(removeClass "return" "flower")
(addClass (+ "bg" tabname) "flower")
(addClass "contentreveal" tabname)
(addClass "mobilebg" "flower")
(setTimeout 4 (addClass (+ "anchor" tabname) "flower"))
[/script]
[script class=tabnav version=2 on=click]
(= tabvar (getText))

(removeClass (+ "bg" tabname) "flower")
(removeClass "contentreveal" "content")

(if (== "home" tabvar) (group
(removeClass "navhide" "mainnav")
(addClass "return" "flower")
(removeClass "mobilebg" "flower")
(setTimeout 2 (removeClass (+ "anchor" tabname) "flower"))
(stop)))

(if (== "i" tabvar) (= tabnavname "basics"))
(if (== "ii" tabvar) (= tabnavname "personal"))
(if (== "iii" tabvar) (= tabnavname "physical"))
(if (== "iv" tabvar) (= tabnavname "fluff"))

(addClass (+ "bg" tabnavname) "flower")
(addClass "contentreveal" tabnavname)
(setTimeout 4 (group
(addClass (+ "anchor" tabnavname) "flower")
(removeClass (+ "anchor" tabname) "flower")
(= tabname tabnavname)))
[/script]
[script class=personaltabs version=2 on=click]
(= personaltabsel (getText))
(addClass "hideunhide" "titleflex")
(setTimeout 1 (removeClass "hideunhide" "titleflex"))
(if (== personaltabsel "personality") (fadeOut 1000 "backstory"))
(if (== personaltabsel "backstory") (fadeOut 1000 "personality"))
(removeClass "activecontitle" "personaltabs")
(addClass "activecontitle")
(fadeIn 1000 personaltabsel)
[/script]

[script class=physicaltabs version=2 on=click]
(= physicaltabsel (getText))
(addClass "hideunhide" "titleflex")
(setTimeout 1 (removeClass "hideunhide" "titleflex"))
(if (!= physicaltabsel "skills") (fadeOut 1000 "skills"))
(if (!= physicaltabsel "magic") (fadeOut 1000 "magic"))
(if (!= physicaltabsel "weaknesses") (fadeOut 1000 "weaknesses"))
(removeClass "activecontitle" "physicaltabs")
(addClass "activecontitle")
(fadeIn 1000 physicaltabsel)
[/script]

[div class=root]
[div class=container]
[div class=filler][/div]
[div class=image][/div]
[div class="flower"][/div]
[div class=mainnav]
[div class="tab tabbasics"]basics[/div]
[div class="tab tabpersonal"]personal[/div]
[div class="tab tabphysical"]physical[/div]
[div class="tab tabfluff"]fluff[/div]
[div class="tab tabappearance"]appearance[/div]
[/div]
[div class="content basics"]
[div class="flexcontent basicinfo"]
[div class=infotitle]basic information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]name[/div]
[div class=infor]Aster Elliston[/div]
[/div]
[div class=inforow]
[div class=infoq]aliases[/div]
[div class=infor]The Collector[br][/br]Marquis Elliston[/div]
[/div]
[div class=inforow]
[div class=infoq]age[/div]
[div class=infor]Twenty-nine (29)[/div]
[/div]
[div class=inforow]
[div class=infoq]gender[/div]
[div class=infor]Male[/div]
[/div]
[div class=inforow]
[div class=infoq]race[/div]
[div class=infor]Human[/div]
[/div]
[div class=inforow]
[div class=infoq]class[/div]
[div class=infor]Quartermaster Assistant (Merchant Variant with a focus on military logistics)[/div]
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav selected"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[/div]
[div class="content personal"]
[div class="flexcontent personalinfo"]
[div class=infotitle]personal information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]sexuality [/div]
[div class=infor]Heterosexual[/div]
[/div]
[div class=inforow]
[div class=infoq]high concept[/div]
[div class=infor]Unkempt Negotiator & Quartermaster Assistant[/div]
[/div]
[div class=inforow]
[div class=infoq]alignment[/div]
[div class=infor]Neutral Good[/div]
[/div]
[div class=inforow]
[div class=infoq]relatives[/div]
[div class=infor]Mother[br][/br]Father[br][/br]Ellie[/div]
[/div]
[div class=inforow]
[div class=infoq]affiliations[/div]
[div class=infor]Guild of Heroes[br][/br]Nobleman of Albion[/div]
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav selected"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[div class="flexcontent personalcontent"]
[div class=titleflex]
[div class="activecontitle contitle personaltabs"]personality[/div]
[div class="contitle personaltabs"]backstory[/div]
[/div]
[div class=contentholder]
[div class="scrollbox insidecontenthold contenttext personality"]
Aster Elliston doesn't like people very much. He would much rather keep to himself and watch pretty mana do pretty things. While his professionalism is perfect, casual conversation is barely doable and intimacy is not happening anytime soon. He is pretty much reliant on Ellie Edelweiss to do anything daily life related, but he can pull through when he's motivated. He's a klutz, a walking embodiment of the noble disconnected from common sense, even though he's got good intuition when it comes to items and artifacts.[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext backstory" style="display: none"]
Born to a noble family, Aster Elliston had some high standards placed on him since birth. Not only to succeed the title of Marquis, but to also live up to the source of the title, to become a Quartermaster of the Guild of Heroes. The Elliston Family traces their lineage to Robin Elliston-Clark, the one of the first Quartermasters of the Guild. Subsequent generations took on the role of Quartermaster and became an informal mediator between the Guild and the Court when the title of Marquis was bestowed to the family following some battle or another. In any case, Aster completely shirked these responsibilities, for the most part. Robin's specialized magic manifested in his Oculi Veritatis, making his childhood even more abnormal. He quickly became fascinated by magic objects and their mana flow. But the people around those magic objects were often times not pure at heart, something he sometimes caught glimpses of with his eyes. While initially not something important, he would later try to avoid people because of that. But what probably led him to avoid people was this:
[br][/br][br][/br]
When Aster got more and more consumed from watching the mana flow, he wouldn't really pay attention to anything else. This usually meant, that he either was in a mess, left a mess, or was the mess, be it not eating, not being organized, not keeping his appearances, etc. Of course, he usually had maids to take care of all of that and his parents were more focused on him training to be a Quartermaster, so he more or less got use to it. Unfortunately this carried over to adulthood, even after he became the Quartermaster.
[br][/br][br][/br]
That was when he met Ellie Edelweiss, the fork possessing ghost. During one of Aster's regular appointments with an arcane artifacts dealer, the dealer said he something for him. Opening the box, he was met with a fork and a ghost. The ghost gave him a life tip reminder, but he, still not liking people, decided to close the box and leave. Every time he came back, the ghost always gave him a reminder, something along the lines of "don't forget to eat your vegetables!" and "make sure to comb your hair!" This happened all the time that the dealer decided to stop him. "Aster, I've known you for a long time. Just take the fork. It'll do you some good." And so Ellie Edelweiss became his closest... mom friend? Either way, she's prob the only thing keeping his life together.[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[div class="content physical"]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav selected"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[div class="flexcontent physicalinfo"]
[div class=infotitle]physical information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]weapons[/div]
[div class=infor]Fork[br][/br]Quill[br][/br]Collection of Artifacts[/div]
[/div]
[div class=inforow]
[div class=infoq]armor[/div]
[div class=infor]a Slightly Unkempt Suit[br][/br]Blazer[br][/br]Undershirt.[/div]
[/div]
[div class=inforow]
[div class=infoq]items[/div]
[div class=infor]A fancy pen[br][/br]Ellie?[br][/br]An Extensive Collection[/div]
[/div]
[/div]
[/div]
[div class="flexcontent physicalcontent"]
[div class=titleflex]
[div class="activecontitle contitle physicaltabs"]skills[/div]
[div class="contitle physicaltabs"]magic[/div]
[div class="contitle physicaltabs"]weaknesses[/div]
[/div]
[div class="contentholder"]
[div class="scrollbox insidecontenthold contenttext skills"]
[b]Connoisseur of All[/b] - He is well respected as an expert in many collections, most notably, antiquity. He can generally figure out what something does with a bit of time, and know its worth almost instantly.[br][/br][br][/br]
[b]Quartermaster Assistant[/b] - He may be the official Quartermaster, but he's more like the assistant. Has some skill in a variety of weapons, and can know the detail of any weapon he lays his eyes on. His skills mostly lie in magical items.[br][/br][br][/br]
[b]Collector[/b] - Has great organizational skills and a wealth of knowledge in many artifacts.[br][/br][br][/br]
[b]Negotiator[/b] - Has great negotiating skills and can make split second decisions. When it comes to the guild, he can thoroughly represent their wishes in the Royal Court, pushing forward a favorable position for the Guild. When it comes to himself, he will not compromise.[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext magic" style="display: none"]
[b]Oculi Veritatis[/b] - He has magic filled eyes that let him see the flow of mana, allowing him to make educated guesses about the nature of things, specifically magic items. He is also able to see mana flow during magic activation can generally guess what spell is being performed. Due to the nature of the Anatomy of Soul and the risks to his psyche on the off chance that he accidentally sees into one's soul, he tries to avoid doing that. Because of that, he's grown to not like other people, due to some childhood experiences. It is a passive and biological part of him.[br][/br][br][/br]
[b]Gnawing Negotiations[/b] - He is able to plant suggestions in the minds of his opponents as an inferior form of mind control. However, they're very weak and is usually only good for negotiations and trade. Not very effective in combat, but if applied many times and long enough, could result in some changes comparable to a proper mind control.[br][/br][br][/br]
[b]Military Standard Only[/b] - He can identify fakes, both item and people. He can temporarily dispel any negative effect on anything, but only for 5 minutes at most.[br][/br][br][/br]
[b]Fresh Supplies[/b] - He summons army supply boxes, enough to stock a small platoon. Contains anything and everything from rations to flags to explosives. It's very very taxing him and will prob knock him out for a good week or so, but the items summoned will be on the same level as the equipment one might see for Royal Elites. Sometimes there's even an magical item that can be categorized as an arcane artifact.[br][/br][br][/br]
[b]Basic Magic Spells[/b] - He's a nobleman, he should at least try to not embarrass himself.[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext weaknesses" style="display: none"]
Ellie Edelweiss.[br][/br][br][/br]
Daily Life Necessities.[br][/br][br][/br]
Combat.[br][/br][br][/br]
Interacting with people on an intimate level.[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[div class="content fluff"]
[div class=fluffleft]
[div class="flexcontent fluffinfo"]
[div class=infotitle]FLUFF[/div]
[div class=scrollbox]
[div class=inforow]
[div class="infoq" style="flex: 1 0 75px;"]THEME[/div]
[div class=infor][url=https://www.youtube.com/watch?v=XSQ2uF6AxyY]Voynich Manuscript[/url][/div]
[/div]
[/div]
[/div]
[div class="flexcontent fluffhobbies"]
[div class="contitle activecontitle"]hobbies[/div]
[div class=scrollbox]
[div class=contenttext]
Collecting Artifacts[br][/br][br][/br]
Watching Mana flow.
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav selected" style="margin-right: 1.5em;"]iv[/div][/div]
[/div]
[div class=fluffright]
[div class="flexcontent fluffnotes"]
[div class="contitle activecontitle"]notes[/div]
[div class=scrollbox]
[div class=contenttext]
notes here
[/div]
[/div]
[/div]
[div class="flexcontent fluffquotes"]
[div class="contitle activecontitle"]quotes[/div]
[div class=scrollbox]
[div class=contenttext]
"..." *ignores*[br][/br][br][/br]
"Ellie!! Save me!!"[br][/br][br][/br]
"Stop staring at me..."[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]

elliecodespoil
#ellie
[nobr]

[nobr]

[comment][font=Averia Serif Libre]font[/font][font=Poppins]font[/font][/comment]

[class name=root]
width: 100%;
position: relative;
background-image: url('https://i.imgur.com/FUMoqzM.jpg');
background-repeat: no-repeat;
background-size: 1250px;
background-position: center;
background-color: #e6e1d8;
background-blend-mode: color-burn;
[/class]

[class name=root maxWidth=799px]
--containerw: 95%;
--borderw: 15px;
--boundw: 15px;
padding: 2.5%;
[/class]

[class name=root minWidth=800px]
--containerw: 600px;
--borderw: 30px;
--boundw: 25px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
[/class]

[class name=root minWidth=1000px]
--containerw: 800px;
--borderw: 50px;
--boundw: 45px;
[/class]

[class name=root minWidth=1280px]
--containerw: 1050px;
--borderw: 50px;
--boundw: 45px;
[/class]

[class name=container]
position: relative;
margin: 100px;
max-width: 100%;
width: var(--containerw);
height: calc(9.25/16 * var(--containerw));
background-color: #e6e1d8;
border: var(--borderw) solid #e6e1d8;
box-sizing: border-box;
overflow: hidden;
[/class]

[class name=container maxWidth=799px]
margin: 0;
height: 0;
padding-bottom: calc(1036/540 * 95%);
[/class]

[class name=filler]
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: #e6e1d8;
z-index: 4;
[/class]

[class name=flower]
position: absolute;
top: -8%;
margin-left: -25%;
width: 150%;
padding-bottom: calc(712/1000 * 105%);
transform-origin: center;
transform: translate(0%,0%);
background-blend-mode: multiply;
background-color: #e6e1d8;
background-image: url('https://i.imgur.com/QQLe4Iy.jpg');
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
[/class]

[class name=flower maxWidth=799px]
padding-bottom: 0;
height: 100%;
top: 0;
margin-left: 0;
left: 0;
width: 100%;
background-size: 170%;
background-position: center;
background-image: url('https://i.imgur.com/Cslz4KR.jpg');
transition: background-color 1s;
[/class]

[class name=flower minWidth=800px]
animation-duration: 3.5s;
animation-delay: .5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
[/class]

[class name=image]
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url('https://i.imgur.com/WXIk72m.jpg');
background-repeat: no-repeat;
background-size: 210%;
background-position: 45% 25%;
background-color: #e6e1d8;
background-blend-mode: multiply;
opacity: .9;
z-index: 5;
[/class]

[class name=image maxWidth=799px]
background-size: 400%;
background-position: 58% 33%;
[/class]

[class name=mainnav]
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
font-size: initial;
opacity: .9;
transition: opacity .5s ease 2.1s;
[/class]

[class name=mainnav maxWidth=799px]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transition: opacity .5s ease .5s
[/class]

[class name=navhide]
opacity: 0;
transition: opacity .5s;
[/class]

[class name=tab]
text-transform: uppercase;
color: #564743;
font-size: .9em;
font-family: 'Averia Serif Libre';
position: absolute;
transform: translate(-50%,-50%);
text-shadow:2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
cursor: pointer;
z-index: 3;
[/class]

[class name=tab maxWidth=799px]
position: relative;
font-size: 4.5vh;
transform: translate(0,0);
margin: 1vh;
[/class]

[class name=tabbasics minWidth=800px]
top: 46%;
left: 10%;
[/class]

[class name=tabpersonal minWidth=800px]
top: 68%;
left: 30%;
[/class]

[class name=tabphysical minWidth=800px]
top: 32%;
left: 53%;
[/class]

[class name=tabfluff minWidth=800px]
top: 64%;
left: 89%;
[/class]

[class name=tabappearance minWidth=800px]
top: 78.5%;
left: 70%;
[/class]

[class name=content]
position: absolute;
top: var(--boundw);
left: var(--boundw);
right: var(--boundw);
bottom: var(--boundw);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
[/class]

[class name=contentreveal]
opacity: .75;
transition: opacity 1.25s ease 3s;
pointer-events: auto;
[/class]

[class name=contentreveal maxWidth=799px]
transition: opacity .5s ease .5s;
[/class]

[class name=tabnavbox]
position: relative;
align-self: stretch;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
font-size: initial;
[/class]

[class name=tabnavbox maxWidth=799px]
order: -1;
[/class]

[class name=tabnav]
position: relative;
display: inline-block;
color: #564743;
margin: .8em;
margin-bottom: .5em;
font-size: .75em;
font-family: 'Averia Serif Libre';
cursor: pointer;
text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
[/class]

[class name=selected]
pointer-events: none;
[/class]

[class name=return minWidth=800px]
animation-name: {post_id}return;
animation-delay: 0s;
animation-duration: 2s;
[/class]

[animation=return]
[keyframe=5]
background-color: #d1caba;
[/keyframe]
[keyframe=50]
background-color: #e6e1d8;
[/keyframe]
[keyframe=100]
background-color: #e6e1d8;
transform: translate(0%, 0%);
[/keyframe]
[/animation]

[class name=mobilebg maxWidth=799px]
background-color: #d1caba;
[/class]

[comment]Basics Classes[/comment]

[class name=bgbasics minWidth=800px]
animation-name: {post_id}bgbasic;
[/class]

[class name=anchorbasics minWidth=800px]
transform: translate(6%,2%);
background-color: #d1caba;
[/class]

[animation=bgbasic]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(18%,0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(18%,0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(6%,2%);
[/keyframe]
[/animation]

[class name=basics]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-end;
[/class]

[class name=basics maxWidth=799px]
align-items: stretch;
justify-content: start;
[/class]

[class name=basicinfo]
width: 46.5%;
height: 65%;
margin-right: 10%;
[/class]

[class name=basicinfo maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[class name=basictabs minWidth=800px]
margin-right: 10%;
[/class]

[comment]Personal Classes[/comment]

[class name=bgpersonal minWidth=800px]
animation-name: {post_id}bgpersonal;
[/class]

[class name=anchorpersonal minWidth=800px]
transform: translate(-2%,-16%);
background-color: #d1caba;
[/class]

[animation=bgpersonal]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(0%,-20%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(0%,-20%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-2%,-16%);
[/keyframe]
[/animation]

[class name=personal]
display: flex;
flex-flow: column wrap;
justify-content: start;
align-items: flex-end;
align-content: space-between;
[/class]

[class name=personal maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
[/class]

[class name=personalinfo]
width: 45%;
height: 63%;
[/class]

[class name=personalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]

[class name=personalcontent]
width: 49.5%;
height: 100%;
[/class]

[class name=personalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Physical Classes[/comment]

[class name=bgphysical minWidth=800px]
animation-name: {post_id}bgphysical;
[/class]

[class name=anchorphysical minWidth=800px]
transform: translate(-8%, 5.75%);
background-color: #d1caba;
[/class]

[animation=bgphysical]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-13%, 5.75%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-13%, 5.75%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-8%, 5.75%);
[/keyframe]
[/animation]

[class name=physical]
display: flex;
flex-flow: column wrap-reverse;
justify-content: flex-end;
align-items: flex-end;
align-content: space-between;
[/class]

[class name=physical maxWidth=799px]
flex-flow: column nowrap;
justify-content: start;
align-items: stretch;
[/class]

[class name=physicalinfo]
width: 45%;
height: 62%;
margin-bottom: -2.5%;
[/class]

[class name=physicalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]

[class name=physicalcontent]
width: 49.5%;
height: 100%;
[/class]

[class name=physicalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Fluff Classes[/comment]

[class name=bgfluff minWidth=800px]
animation-name: {post_id}bgfluff;
[/class]

[class name=anchorfluff minWidth=800px]
transform: translate(-14%, -9%);
background-color: #d1caba;
[/class]

[animation=bgfluff]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-14%, 0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-14%, 0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-14%, -9%);
[/keyframe]
[/animation]

[class name=fluff]
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]

[class name=fluff maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
justify-content: start;
[/class]

[class name=fluffleft]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: start;
align-content: stretch;
[/class]

[class name=fluffleft maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
margin-bottom: 2.5%;
[/class]

[class name=fluffinfo]
height: 35%;
margin-bottom: 3.5%;
margin-top: 2%;
[/class]

[class name=fluffinfo maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]

[class name=fluffhobbies]
height: 50%;
[/class]

[class name=fluffhobbies maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[class name=fluffright]
position: relative;
height: 100%;
width: 33%;
margin-left: 1.5%;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-content: stretch;
[/class]

[class name=fluffright maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
[/class]

[class name=fluffnotes]
height: 38%;
margin-bottom: 3.5%;
[/class]

[class name=fluffnotes maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]

[class name=fluffquotes]
height: 50%;
[/class]

[class name=fluffquotes maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[comment]Formatting Classes[/comment]
[class name=scrollbox]
display: block;
width: 100%;
margin-top: 10px;
padding-right: 150px;
overflow-x: visible;
overflow-y: scroll;
box-sizing: content-box;
flex: 1;
[/class]
[class name=infotitle]
font-family: 'Averia Serif Libre', serif;
text-transform: uppercase;
color: #564743;
font-size: 1.25em;
margin-bottom: 5px;
[/class]
[class name=inforow]
width: 95%;
padding-left: 5%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
overflow: hidden;
font-size: .9em;
margin: 0px -2px;
[/class]
[class name=inforow maxWidth=799px]
margin: 0px -2px 5px -2px;
[/class]
[class name=infoq]
flex: 1 0 120px;
text-transform: uppercase;
font-family: 'Poppins', sanserif;
color: #7e7371;
margin: 0px 2px;
[/class]
[class name=infor]
flex: 2 0 120px;
font-family: 'Averia Serif Libre', serif;
color: #564743;
margin: 0px 2px;
[/class]
[class name=flexcontent]
background-color: #e6e1d8;
overflow: hidden;
border: calc(.9 * var(--boundw)) solid #e6e1d8;
box-sizing: border-box;
position: relative;
display: flex;
flex-flow: column nowrap;
justify-stretch;
[/class]
[class name=titleflex]
display: inline-flex;
flex-flow: row wrap;
justify-content: start;
[/class]
[class name=hideunhide]
animation-name: {post_id}hideunhide;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
[/class]
[animation=hideunhide]
[keyframe=0]
opacity: 1;
[/keyframe]
[keyframe=40]
opacity: 0;
[/keyframe]
[keyframe=60]
opacity: 0;
[/keyframe]
[keyframe=100]
opacity: 1;
[/keyframe]
[/animation]
[class name=contitle]
display: inline-block;
margin-right: 10px;
font-family: 'Averia Serif Libre', serif;
text-transform: uppercase;
font-size: .95em;
color: rgba(86, 71, 67, 0.68);
cursor: pointer;
order: 1;
transition: all 0s ease .5s;
[/class]
[class name=activecontitle]
margin-right: 30px;
color: #564743;
order: 0;
pointer-events: none;
[/class]
[class name=contenttext]
display: block;
font-family: 'Poppins', sanserif;
color: #7e7371;
text-align: justify;
font-size: .85em;
[/class]
[class name=contentholder]
display: flex;
width: 100%;
position: relative;
flex: 1;
flex-flow: column nowrap;
justify-content: stretch;
overflow: hidden;
[/class]
[class name=insidecontenthold]
position: absolute;
top: 0;
left: 0;
height: 100%;
[/class]


[comment]Scripts[/comment]

[script class=image on=click]
fadeOut 1250 image
fadeOut 1250 filler
[/script]

[script class=tab version=2 on=click]
(= tabname (getText))
(if (== tabname "appearance") (group
(fadeIn 1250 "image")
(fadeIn 1250 "filler")
(stop)))

(addClass "navhide" "mainnav")
(removeClass "return" "flower")
(addClass (+ "bg" tabname) "flower")
(addClass "contentreveal" tabname)
(addClass "mobilebg" "flower")
(setTimeout 4 (addClass (+ "anchor" tabname) "flower"))
[/script]

[script class=tabnav version=2 on=click]
(= tabvar (getText))

(removeClass (+ "bg" tabname) "flower")
(removeClass "contentreveal" "content")

(if (== "home" tabvar) (group
(removeClass "navhide" "mainnav")
(addClass "return" "flower")
(removeClass "mobilebg" "flower")
(setTimeout 2 (removeClass (+ "anchor" tabname) "flower"))
(stop)))

(if (== "i" tabvar) (= tabnavname "basics"))
(if (== "ii" tabvar) (= tabnavname "personal"))
(if (== "iii" tabvar) (= tabnavname "physical"))
(if (== "iv" tabvar) (= tabnavname "fluff"))

(addClass (+ "bg" tabnavname) "flower")
(addClass "contentreveal" tabnavname)
(setTimeout 4 (group
(addClass (+ "anchor" tabnavname) "flower")
(removeClass (+ "anchor" tabname) "flower")
(= tabname tabnavname)))
[/script]

[script class=personaltabs version=2 on=click]
(= personaltabsel (getText))
(addClass "hideunhide" "titleflex")
(setTimeout 1 (removeClass "hideunhide" "titleflex"))
(if (== personaltabsel "personality") (fadeOut 1000 "backstory"))
(if (== personaltabsel "backstory") (fadeOut 1000 "personality"))
(removeClass "activecontitle" "personaltabs")
(addClass "activecontitle")
(fadeIn 1000 personaltabsel)
[/script]

[script class=physicaltabs version=2 on=click]
(= physicaltabsel (getText))
(addClass "hideunhide" "titleflex")
(setTimeout 1 (removeClass "hideunhide" "titleflex"))
(if (!= physicaltabsel "skills") (fadeOut 1000 "skills"))
(if (!= physicaltabsel "magic") (fadeOut 1000 "magic"))
(if (!= physicaltabsel "weaknesses") (fadeOut 1000 "weaknesses"))
(removeClass "activecontitle" "physicaltabs")
(addClass "activecontitle")
(fadeIn 1000 physicaltabsel)
[/script]

[div class=root]
[div class=container]
[div class=filler][/div]
[div class="flower"][/div]
[div class=image][/div]
[div class=mainnav]
[div class="tab tabbasics"]basics[/div]
[div class="tab tabpersonal"]personal[/div]
[div class="tab tabphysical"]physical[/div]
[div class="tab tabfluff"]fluff[/div]
[div class="tab tabappearance"]appearance[/div]
[/div]
[div class="content basics"]
[div class="flexcontent basicinfo"]
[div class=infotitle]basic information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]name[/div]
[div class=infor]edelweiss[/div]
[/div]
[div class=inforow]
[div class=infoq]aliases[/div]
[div class=infor]ellie, fork ghost[/div]
[/div]
[div class=inforow]
[div class=infoq]age[/div]
[div class=infor]unknown[/div]
[/div]
[div class=inforow]
[div class=infoq]gender[/div]
[div class=infor]female[/div]
[/div]
[div class=inforow]
[div class=infoq]race[/div]
[div class=infor]ghost[/div]
[/div]
[div class=inforow]
[div class=infoq]class[/div]
[div class=infor]resident ghost[/div]
[/div]
[/div]
[/div]
[div class="tabnavbox basictabs"][div class="tabnav"]home[/div][div class="tabnav selected"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[/div]
[div class="content personal"]
[div class="flexcontent personalinfo"]
[div class=infotitle]personal information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]sexuality [/div]
[div class=infor]Heterosexual[/div]
[/div]
[div class=inforow]
[div class=infoq]high concept[/div]
[div class=infor]Ghostly quartermaster who goes momfriend on everyone[/div]
[/div]
[div class=inforow]
[div class=infoq]alignment[/div]
[div class=infor]Neutral Good[/div]
[/div]
[div class=inforow]
[div class=infoq]relatives[/div]
[div class=infor]Aster[/div]
[/div]
[div class=inforow]
[div class=infoq]affiliations[/div]
[div class=infor]Guild of Heroes[/div]
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav selected"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[div class="flexcontent personalcontent"]
[div class=titleflex]
[div class="activecontitle contitle personaltabs"]personality[/div]
[div class="contitle personaltabs"]backstory[/div]
[/div]
[div class=contentholder]
[div class="scrollbox insidecontenthold contenttext personality"]
Ellie is a cheerful individual whose death hasn't seemed to faze her in the least. If it weren't for the fact she literally goes through walls and is partially see-through, then one probably wouldn't realize she was a ghost. She's a frequently heard voice in the Guild, whether it's from nagging Ellie or sorting out the inventory. Laughter is an oft-heard sound in her presence.
[br][/br][br][/br]
Alongside her title of Quartermaster, she's also the guild's honorary mom. Taking care of others comes naturally to Ellie. As with any good mother figure, Ellie tends to be on the nosy side, asking questions at the expense of the recipient's comfort. She is incredibly trusting, often putting herself out there and opening up long before whoever she's talking to is ready to return the gesture. Naivety is commonly associated with her. It's easy to try and put up a wall against her friendly overtures, but Edelweiss is nothing if not persistent. Frankly if she's set her sights on you, you'd be better off just going along with it than trying to hide. It's near impossible to lock out a ghost after all.
[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext backstory" style="display: none"]
Edelweiss doesn't remember anything from before the afterlife. Her earliest memory is that of waking up in the arcane antiques shop, shocking the owner and almost giving the old man a heart attack. Thankfully she managed to calm him down before anything happened. When asked for a name, she was unable to give him any, which troubled her more than it did him. Eventually they decided on Edelweiss, after the flower embossed on the handle of the fork she was attached to. Not even Ellie herself knows why she would be bound to a [i]fork[/i] of all things.
[br][/br][br][/br]
"Living" as a ghost wasn't too much of an adjustment. Considering she didn't remember of being alive, there wasn't much to adjust to. As the old man pointed out, she carried a few habits and quirks that were clearly of a former life, but their little forays into investigating the fork's past turned up nothing. She simply just became part of the shop, assisting the old man with his stock and keeping him company during his quieter days. When a customer came by that he didn't quite trust, it was up to Edelweiss to scare them out.
[br][/br][br][/br]
Unlike Ellie's status as undead, the artifacts dealer aged. And with his advanced years came the desire to retire. It wasn't a secret; he'd mentioned as much to his constant ghostly companion. Though reluctant to part ways, Edelweiss wasn't one to stop him from getting his much deserved rest. So she allowed him to vet potential new partners, eventually deciding on a nobleman named Aster Elliston. When the old man first broached the subject with him, the two were met with instant rejection. Ellie knew a lot of it had to do with how she scolded him during their first meeting, but she couldn't be blamed. The man was a mess. His coat had a rip, he looked to thin and his skin was sallow from lack of sun.
[br][/br][br][/br]
Aster came back frequently after that. Though Edelweiss could be annoying with her reminders, she meant well and the dealer had good stock. As the last of his items went up for sale, the Quartermaster came to see what he could get. Knowing this was probably the last time, the old man simply gave Aster the fork. With his manners too deeply ingrained to refute the gift or toss it behind his back, Aster was now stuck with Edelweiss the mom friend. Good timing too. The man looked ready to collapse after two nights of no eating or sleeping.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[div class="content physical"]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav selected"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[div class="flexcontent physicalinfo"]
[div class=infotitle]physical information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]weapons[/div]
[div class=infor]fork[/div]
[/div]
[div class=inforow]
[div class=infoq]armor[/div]
[div class=infor]no physical presence[/div]
[/div]
[div class=inforow]
[div class=infoq]items[/div]
[div class=infor]notebook[/div]
[/div]
[/div]
[/div]
[div class="flexcontent physicalcontent"]
[div class=titleflex]
[div class="activecontitle contitle physicaltabs"]skills[/div]
[div class="contitle physicaltabs"]magic[/div]
[div class="contitle physicaltabs"]weaknesses[/div]
[/div]
[div class="contentholder"]
[div class="scrollbox insidecontenthold contenttext skills"]
[b]Cooking[/b] - While she's by no means a culinary genius, her meals are more than just palatable. She has perfected a few choice meals, namely those that are favored by Aster that are also nutritious. Getting the man to eat when he's buried in something is no easy feat.
[br][/br][br][/br]
[b]Multitasking[/b] - Edelweiss can cook, clean, sort the inventory and hold a conversation - all at the same time. The real miracle is that she's able to do it without making a mistake in any of them.
[br][/br][br][/br]
[b]Organization[/b] - Being able to keep on top of the guild's many supplies requires ruthless management and record-keeping. Do not try to skim off the top of anything of the sort; Edelweiss will find out.
[br][/br][br][/br]
[b]Memory[/b] - Organization requires a sharp memory, and Edelweiss has that. It's ironic she can remember who used what when, but can't seem to recall her own past.
[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext magic" style="display: none"]
[b]Possession[/b] - Edelweiss has the ability to control up to 10 things, not including the item she's bound to which is the fork. This is limited to strictly inanimate and nonmagical objects.
[br][/br][br][/br]
[b]Mana Reading[/b] - Although she can't [i]see[/i] mana the way Aster can, Ellie can detect magical energy that enables her to tell if someone is predisposed to magic, or if there's a high concentration of it in a certain area.
[br][/br][br][/br]
[b]Will of the Dead[/b] - She can speak to the souls of other dead people. This is only really applicable to ghosts who choose to be invisible to the living's eyes, unlike Ellie. There's not really much else.
[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext weaknesses" style="display: none"]
[b]Edelweiss Fork[/b] - Damaging the fork causes excruciating pain for Ellie. Whoever has Ellie's fork basically owns her, which is why the dealer heavily vetted who would get the fork.
[br][/br][br][/br]
[b]Sensitive to Magic[/b] - Areas of high mana concentration or powerful magic in general have the potential to corrupt her. If anyone blasted Edelweiss with a blast of telepathic magic, for example, there's a good chance they'll have complete access to her mind.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[div class="content fluff"]
[div class=fluffleft]
[div class="flexcontent fluffinfo"]
[div class=infotitle]FLUFF[/div]
[div class=scrollbox]
[div class=inforow]
[div class="infoq" style="flex: 1 0 75px;"]THEME[/div]
[div class=infor][url=https://www.youtube.com/watch?v=2dzhAnOMTUU]fakery tale[/url][/div]
[/div]
[/div]
[/div]
[div class="flexcontent fluffhobbies"]
[div class="contitle activecontitle"]hobbies[/div]
[div class=scrollbox]
[div class=contenttext]
cooking, organizing supplies, nagging others, sewing, pranking newbies[br][/br]
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav selected" style="margin-right: 1.5em;"]iv[/div][/div]
[/div]
[div class=fluffright]
[div class="flexcontent fluffnotes"]
[div class="contitle activecontitle"]notes[/div]
[div class=scrollbox]
[div class=contenttext]
people often hand Ellie any clothes that might have loose seams or rips so that she can sew them back up | if she's not doing inventory she's probably in the kitchen helping with the meals | or cleaning because few people actually tidy up in the guild[br][/br]
[/div]
[/div]
[/div]
[div class="flexcontent fluffquotes"]
[div class="contitle activecontitle"]quotes[/div]
[div class=scrollbox]
[div class=contenttext]
"Aster if you don't eat, I'm going to burn your books down."[br][/br][br][/br]
"Who left this sword on the floor?"[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]


 

Users Who Are Viewing This Thread (Users: 1, Guests: 0)

Top