011 - light

[comment]code by sox

[font=Spline Sans Mono]titles[/font]
[font=Thasadith]body[/font]

[/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;

/*---- COLORS: choose your palette! updating the color names as you go will make life easier ----*/
--accent0: #fff;   /*white*/
--accent1: #000;   /*black*/
--accent2: #ccddeb;   /*blue*/
--accent4: #d696a8;   /*pink*/
--accent5: #1e2423;   /*dark gray teal*/
--accent6: #5f6e6b;   /*gray teal*/



/*---- VALUES: things to customize! color assignments, text sizes, etc. ----*/
--canvas: ;   /*container color for whole code including overflow elements; empty by default*/
--border0: 2px solid var(--accent1);   /*main border style & color*/
--framebkgd: var(--accent0);   /*grid frame bkgd color*/

/*bottom right quadrant*/
--2Bbkgd: var(--accent2);   /*bkgd color*/
--text: var(--accent6);   /*text color*/

/*title text & icon*/
--titlecolor: var(--accent5);   /*text color*/
--titleiconcolor: var(--accent4);
--titlesize: 12px;   /*font size*/
--titlelh: 12px;   /*line height*/

/*intro text*/
--introcolor: var(--text);   /*text color*/
--introsize: 8px;   /*font size*/
--introlh: 8px;   /*line height*/

/*role & faceclaim details*/
--detailcolor: var(--accent6);   /*text color*/
--detailtagcolor: var(--accent4);   /*tag color*/
--detailstroke: 0px var(--accent1);   /*stroke style & color - optional*/
--detailsize: 8px;   /*font size*/
--detaillh: 9px;   /*line height*/
--detailspacing: 0.5px;   /*letter spacing*/

/*floating quotes*/
--quotecolor: var(--accent4);   /*text color*/
--quotestroke: 5px var(--accent0);   /*stroke style & color*/
--quotesize: 12px;   /*font size*/
--quotelh: 19px;   /*line height*/

/*corner icon decorations*/
--decocolor: var(--accent5);   /*text color*/
--decostroke: 3px var(--accent0);   /*stroke style & color*/

/*top left large icon*/
--1ALGsize: 60px;   /*font size*/
--1ALGlh: 50px;   /*line height*/
--1ALGtilt: rotate(-10deg);   /*tilt angle*/

/*top left small icon*/
--1ASMsize: 30px;   /*font size*/
--1ASMlh: 30px;   /*line height*/
--1ASMtilt: rotate(-55deg);   /*tilt angle*/

/*bottom right large icon*/
--2BLGsize: 50px;   /*font size*/
--2BLGlh: 50px;   /*line height*/
--2BLGtilt: rotate(-10deg);   /*tilt angle*/

/*bottom right small icon*/
--2BSMsize: 18px;   /*font size*/
--2BSMlh: 30px;   /*line height*/
--2BSMtilt: rotate(30deg);   /*tilt angle*/



/*---- PICS ----*/
--texturebkgd: url('https://i.imgur.com/ysrbXhk.jpeg');   /*texture bkgd picture*/
--textureposition: 50% 50%;   /*positioning*/

--mainpic: url('https://i.imgur.com/eyaJ0BZ.jpeg');   /*character picture*/
--mainpicposition: 50% 50%;   /*positioning*/

--aestheticpic1B: url('https://i.imgur.com/2bQfVXT.jpeg');   /*top right aesthetic picture*/
--aesthetic1Bposition: 50% 50%;   /*positioning*/

--aestheticpic2A: url('https://i.imgur.com/ks4QOYG.jpeg');   /*bottom left aesthetic picture*/
--aesthetic2Aposition: 50% 50%;   /*positioning*/



/*---- FONTS ----*/
--font1: 'Spline Sans Mono', sans-serif;   /*titles text*/
--font2: 'Thasadith', sans-serif;   /*intro blurb text*/




][div=margin:auto; position:relative; width:400px; height:400px; margin-top:10px; margin-bottom:10px; background:var(--canvas); box-sizing:border-box; overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto;][nobr]

[comment]---- background texture ----[/comment]
[div=position:absolute; left:10px; top:10px; width:380px; height:380px; background:var(--texturebkgd); background-size:cover; background-position:var(--textureposition); border: var(--border0); box-sizing:border-box;][/div]

[comment]---- frame ----[/comment]
[div=position:absolute; left:25px; top:25px; width:350px; height:350px; background:var(--framebkgd); border: var(--border0); box-sizing:border-box;][/div]


[comment]---- quadrants start ----

QUANDRANT LABELS for reference:

1A | 1B
———
2A | 2B

------------- [/comment]
[div=position:absolute; left:45px; top:45px; width:310px; height:310px; box-sizing:border-box; overflow:hidden; display:grid; grid-template-rows: repeat(2, minmax(150px, 1fr)); grid-template-columns: 150px 1fr; grid-template-areas: "a b" "c d"; grid-gap: 10px; scroll-snap-align:start;]

[comment]---- 1A: character pic ----[/comment]
[div=grid-area:a; border:var(--border0); box-sizing:border-box; background:var(--mainpic); background-size:cover; background-position:var(--mainpicposition);][/div]


[comment]---- 1B: top aesthetic pic ----[/comment]
[div=grid-area:b; border:var(--border0); box-sizing:border-box; background:var(--aestheticpic1B); background-size:cover; background-position:var(--aesthetic1Bposition);][/div]


[comment]---- 2A: bottom aesthetic pic ----[/comment]
[div=grid-area:c; border:var(--border0); box-sizing:border-box; background:var(--aestheticpic2A); background-size:cover; background-position:var(--aesthetic2Aposition);][/div]


[comment]---- 2B: text section start ----[/comment]
[div=grid-area:d; border:var(--border0); box-sizing:border-box; background:var(--2Bbkgd); background-size:cover; background-position:50% 50%;]

[comment]---- character icon ----[/comment]
[div=position:absolute; top:190px; width:148px; height:12px; font-family:var(--font1); font-size:var(--titlesize); line-height:var(--titlelh); text-align:center; text-transform:uppercase; color:var(--titleiconcolor); font-weight:bold; overflow:hidden;][comment]


---- CHARACTER ICON HERE ----
[/comment][fa]fas fa-seedling[/fa][/div]


[comment]---- character name ----[/comment]
[div=position:absolute; top:210px; width:148px; height:12px; font-family:var(--font1); font-size:var(--titlesize); line-height:var(--titlelh); text-align:center; text-transform:uppercase; color:var(--titlecolor); font-weight:bold; overflow:hidden;][comment]


---- CHARACTER NAME HERE ----
[/comment]cha hakyeon.[/div]


[comment]---- character intro ----[/comment]
[div=position:absolute; left:160px; top:230px; width:120px; height:70px; padding:0px 15px 0px 15px; font-family:var(--font2); font-size:var(--introsize); line-height:var(--introlh); text-align:justify; text-align-last:center; text-transform:lowercase; color:var(--introcolor); font-weight:bold; overflow:hidden;][comment]


---- CHARACTER INTRO HERE: (may appear off-center in preview mode) ----
[/comment]a brief quote or informative blurb about the character, however specific or vague, to introduce them to our hand-woven world.


[/div][/div][comment]---- 2B text section end----[/comment]
[/div][comment]---- quadrants end ----[/comment]




[comment]---- border details start ----[/comment]
[comment]---- role/title start ----[/comment]

[div=position:absolute; right:0px; top:-0.2px; width:300px; height:9px; padding-right:11px; font-family:var(--font1); font-size:var(--detailsize); line-height:var(--detaillh); text-align:right; text-transform:uppercase; color:var(--detailtagcolor); font-weight:bold; letter-spacing:var(--detailspacing); overflow:hidden; -webkit-text-stroke:var(--detailstroke); paint-order:stroke fill;][comment]


---- ROLE/TITLE TAG HERE ----
[/comment]role:


[div=display:inline; color:var(--detailcolor);][comment]


---- ROLE/TITLE HERE ----
[/comment]the leader


[/div][/div]
[comment]---- role/title end ----[/comment]
[comment]---- faceclaim start ----[/comment]

[div=position:absolute; left:0px; bottom:-1px; width:300px; height:9px; padding-left:11px; font-family:var(--font1); font-size:var(--detailsize); line-height:var(--detaillh); text-align:left; text-transform:uppercase; color:var(--detailtagcolor); font-weight:bold; letter-spacing:var(--detailspacing); overflow:hidden; -webkit-text-stroke:var(--detailstroke); paint-order:stroke fill;][comment]


---- FACECLAIM TAG HERE ----
[/comment]fc:


[div=display:inline; color:var(--detailcolor);][comment]


---- FACECLAIM NAME HERE ----
[/comment]name here


[/div][/div]
[comment]---- faceclaim end ----[/comment]
[comment]---- border details end----[/comment]




[comment]---- decorations start ----[/comment]
[comment]---- quotes start ----[/comment]

[comment]---- 1B: quote ----[/comment]
[div=position:absolute; right:0px; top:155px; width:200px; height:44px; padding-right:3px; font-family:var(--font1); font-size:var(--quotesize); line-height:var(--quotelh); text-align:right; text-transform:uppercase; color:var(--quotecolor); font-weight:bold; overflow:hidden; -webkit-text-stroke:var(--quotestroke); paint-order: stroke fill;][comment]


---- 1B QUOTE HERE ----
[/comment]are we [I]nothing[/I] at all?[/div]


[comment]---- 2A: quote ----[/comment]
[div=position:absolute; left:0px; top:225px; width:200px; height:44px; padding-left:3px; font-family:var(--font1); font-size:var(--quotesize); line-height:var(--quotelh); text-align:left; text-transform:uppercase; color:var(--quotecolor); font-weight:bold; overflow:hidden; -webkit-text-stroke:var(--quotestroke); paint-order: stroke fill;][comment]


---- 2A QUOTE HERE ----
[/comment][I]ill-fated[/I] to the end...[/div]


[comment]---- quotes end----[/comment]
[comment]---- 1A: icons start ----[/comment]

[comment]---- big heart ----[/comment][div=position:absolute; left:25px; top:-3px; width:50px; height:50px; font-family:var(--font1); font-size:var(--1ALGsize); line-height:var(--1ALGlh); text-align:center; color:var(--decocolor); overflow:hidden; -webkit-text-stroke:var(--decostroke); paint-order: stroke fill; transform:var(--1ALGtilt);][comment]


---- LARGE ICON HERE ----
[/comment]♡[/div]


[comment]---- little heart ----[/comment][div=position:absolute; left:15px; top:30px; width:30px; height:30px; font-family:var(--font1); font-size:var(--1ASMsize); line-height:var(--1ASMlh); text-align:center; color:var(--decocolor); overflow:hidden; -webkit-text-stroke:var(--decostroke); paint-order: stroke fill; transform:var(--1ASMtilt);][comment]


---- SMALL ICON HERE ----
[/comment]♡[/div]


[comment]---- 1A: icons end----[/comment]
[comment]---- 2B: icons start ----[/comment]

[comment]---- big flower----[/comment][div=position:absolute; left:325px; top:351px; width:50px; height:60px; font-family:var(--font1); font-size:var(--2BLGsize); line-height:var(--2BLGlh); text-align:center; color:var(--decocolor); overflow:hidden; -webkit-text-stroke:var(--decostroke); paint-order: stroke fill; transform:var(--2BLGtilt);][comment]


---- LARGE ICON HERE ----
[/comment]❀[/div]


[comment]---- little flower----[/comment][div=position:absolute; left:358px; top:338px; width:30px; height:30px; font-family:var(--font1); font-size:var(--2BSMsize); line-height:var(--2BSMlh); text-align:center; color:var(--decocolor); overflow:hidden; -webkit-text-stroke:var(--decostroke); paint-order: stroke fill; transform:var(--2BSMtilt);][comment]


---- SMALL ICON HERE ----
[/comment]ꕥ[/div]


[comment]---- 2B: icons end ----[/comment]
[comment]---- decorations end ----[/comment]
[/nobr][/div][/div]