pages/about-pages/11-Crimson-Lily

<!-----------------------------------------------------------------------
About Page [11]: Crimson Lily
Made by glenthemes

Initial release: 2019/02/20
Last updated: 2021/10/21

TERMS OF USE:
1) Do not remove the page credit.
2) Do not repost/redistribute my themes.
3) Do not take parts of the code and use it as your own.
4) Do not use my themes as a base code.
5) Do not mix my themes together.

Guide:
docs.google.com/document/d/1RQwqJQBh_6OTuZifg_cGNociuyshLMm3Yny-5BoyGeo/edit?usp=sharing

--- Credits:

Layout & design insp:
- Persona 5 UI, Bandori UI

Side image:
- "Can I Make Tea?" card: trained ver.
  bandori.party/card/969/Tsugumi-Hazawa-Happy-Barista/
  publishers: Bushiroad, Craft Egg

Fonts:
- Google Fonts
- Persona 5 'p5hatty' compiled by HattyMikune & ToxicDevil93 [YouTube]
  www.youtube.com/watch?time_continue=5&v=6B90DMr-OBY
- 'Eri ji' font
  www.freejapanesefont.com/eri-ji-えり字/
  v7.mine.nu/pysco/

Background:
- 'Pinstripe' @ subtlepatterns
  www.toptal.com/designers/subtlepatterns/pinstripe/
------------------------------------------------------------------------>

<!DOCTYPE html lang="en">

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<!--------------------JAVASCRIPTS-------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:100,
attribute:"title"
});
});
})(jQuery);
</script>

<link href="//fonts.googleapis.com/css?family=Quicksand:500|Lato|Exo" rel="stylesheet">

<!-------------------------------------------------------------------->

<style type="text/css">

@font-face { font-family: "p5"; src: url('//glen-assets.github.io/fonts/p5hatty.ttf'); }

@font-face { font-family: "eri ji"; src: url('//glen-assets.github.io/fonts/Eri Ji.otf'); }

/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
    padding:4px 9px;
    margin:20px;
    box-shadow:4px 4px var(--Tooltip-Shadow);
    border:1px solid var(--Tooltip-Border);
    background:var(--Tooltip-Background);
    max-width:40vw;
    font-family:lato;
    font-size:13px;
    color:var(--Tooltip-Text);
}

/*--------------------TUMBLR CONTROLS--------------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
    top:5px!important;
    right:5px!important;
    position:fixed!important;

    transform:scale(0.8,0.8);
    -webkit-transform:scale(0.8,0.8);
    -moz-transform:scale(0.8,0.8);
    -ms-transform:scale(0.8,0.8);

    /* delete the next 4 lines if you want white tumblr controls */
    filter:invert(100%) hue-rotate(180deg);
    -webkit-filter:invert(100%) hue-rotate(180deg);
    -moz-filter:invert(100%) hue-rotate(180deg);
    -ms-filter:invert(100%) hue-rotate(180deg);

    transform-origin:100% 0;
    z-index:999999!important;
}

/*--------------------TEXT HIGHLIGHT--------------------*/
::selection {
    background:var(--Highlighted-Background);
    color:var(--Highlighted-Text);
}

::-moz-selection {
    background:var(--Highlighted-Background);
    color:var(--Highlighted-Text);
}

/*--------------------BASICS--------------------*/
/* general styling */
body {
    background:var(--Background);
    background-image:url('//66.media.tumblr.com/1363b3c61583a1f7b7cd901f7ab7ee13/tumblr_pn6oktMhE31qg2f5co1_400.png');
    background-attachment:fixed;
    background-repeat:repeat;
    font-family:lato;
    line-height:1.6em;
    font-size:12px;
    text-align:left;
}

a, .ccc-ii, .ccc-iii {
    color:var(--Link);
    text-decoration:none;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
}

b, strong {font-weight:bold;color:var(--Bold);}

i, em {font-style:italic;color:var(--Italic);}

pre, code {
    white-space:pre-wrap;
    display:block;
}

/*--------------------COLORS--------------------*/
:root {
    /* background */
    --Background:#fefefe;

    /* basics */
    --Bold: ;
    --Italic: ;

    /* speech box */
    --Speech-Label-Shadow:#222;
    --Speech-Label-Border:#222;
    --Speech-Label-Background:#fcfcfc;
    --Speech-Label-Text:#222;
    --Main-Speech-Box-Shadow:#222;
    --Main-Speech-Box-Outer-Border:#222;
    --Main-Speech-Box-Inner-Border:#fcfcfc;
    --Main-Speech-Box-Background:#222;
    --Main-Speech-Box-Text:#fcfcfc;

    /* label 1 */
    --Label-1-Arrow:#222;
    --Label-1-Arrow-Shadow:#222;
    --Label-1-Shadow:#222;
    --Label-1-Outer-Border:#222;
    --Label-1-Inner-Border:#fcfcfc;
    --Label-1-Background:#222;
    --Label-1-Text:#eee;

    /* label 2 */
    --Label-2-Arrow:#222;
    --Label-2-Arrow-Shadow:#222;
    --Label-2-Shadow:#222;
    --Label-2-Outer-Border:#222;
    --Label-2-Inner-Border:#fcfcfc;
    --Label-2-Background:#222;
    --Label-2-Text:#eee;

    /* name header */
    --Name-Header-Shadow:#222;
    --Name-Header-Border:#222;
    --Name-Header-Label-Background:#222;
    --Name-Header-Label-Text:#eee;
    --Name-Header-Background:#fcfcfc;
    --Name-Header-Text:#222;

    /* main boxes */
    --About-Box-Label-Shadow:#222;
    --About-Box-Label-Outer-Border:#222;
    --About-Box-Label-Inner-Border:#fcfcfc;
    --About-Box-Label-Background:#222;
    --About-Box-Label-Text:#eee;
    --About-Box-Shadow:#222;
    --About-Box-Border:#222;
    --About-Box-Background:#fcfcfc;
    --About-Box-Text:#222;

    /* links */
    --Link:#222;
    --Link-Bottom-Border:#eee;

    /* meter bars */
    --Meter-Bar-Border:#222;
    --Meter-Bar-Fill:#222;

    /* custom links */
    --Custom-Links-Shadow:#222;
    --Custom-Links-Outer-Border:#222;
    --Custom-Links-Inner-Border:#fcfcfc;
    --Custom-Links-Background:#222;
    --Custom-Links:#eee;
    --Custom-Links-Background-On-Hover:#fcfcfc;
    --Custom-Links-On-Hover:#222;

    /* tooltips */
    --Tooltip-Shadow:#222;
    --Tooltip-Border:#222;
    --Tooltip-Background:#fcfcfc;
    --Tooltip-Text:#222;

    /* other */
    --Credit-Text:#222; /* pls don't be an asshole! */
    --Highlighted-Text:#fff;
    --Highlighted-Background:#f3726f;
}

/*--------------------CONTAINER--------------------*/
#sesame {
    position:fixed;
    margin:0 auto;
    top:0;left:0;right:0;
    width:1000px; /* width of everything */
    height:100vh;
    display:table;
}

#bun {
    display:table-cell;
    vertical-align:middle;
}

#flexwrap {display:flex;}

/*-----------------CHARACTER LEFT-----------------*/
#chara-cont {
    width:430px; /* left sidebar width */
}

.chara {
    /* position from the bottom */
    /* as this is designed for the speech box to overlap the image, */
    /* a negative value is recommended */
    margin-bottom:-105px;
    width:inherit;
}

/*--------------------SPEECH BOX--------------------*/
.speech-a {
    margin-left:-35px;
    width:inherit;
    z-index:2;
}

/* speech (top left) label */
.speech-name-1 {
    position:relative;
    margin-bottom:-16px;
    margin-left:32px;
    display:inline-block;
    border:4px solid var(--Speech-Label-Border);
    padding:8px 12px;
    background:var(--Speech-Label-Background);
    transform:skew(-10deg);
    -webkit-transform:skew(-10deg);
    -moz-transform:skew(-10deg);
    -ms-transform:skew(-10deg);
    -o-transform:skew(-10deg);
    z-index:3;
}

/* speech label shadow */
.speech-name-1:after {
    content:"";
    position:absolute;
    top:4px;
    left:calc(100% + 4px);
    width:4px;
    height:18px;
    background:var(--Speech-Label-Shadow);
}

/* speech label text */
.speech-name-2 {
    font-family:p5;
    font-size:18px;
    line-height:1em;
    color:var(--Speech-Label-Text);
    letter-spacing:0.5px;
}

/* main speech box */
.speech-b {
    display:block;
    margin:auto;
    width:320px; /* width of speech box */
}

.speech-c {
    box-shadow:8px 8px var(--Main-Speech-Box-Shadow);
    border:4px solid var(--Main-Speech-Box-Outer-Border);
    transform:skew(-10deg);
    -webkit-transform:skew(-10deg);
    -moz-transform:skew(-10deg);
    -ms-transform:skew(-10deg);
    -o-transform:skew(-10deg);
}

.speech-d {
    border:8px solid var(--Main-Speech-Box-Inner-Border);
    padding:12px 20px;
    background:var(--Main-Speech-Box-Background);
}

/* main speech box text */
.speech-e {
    font-family:p5;
    font-size:17px;
    letter-spacing:0.3px;
    color:var(--Main-Speech-Box-Text);
    line-height:1.6em;
}

/*--------------------LABELS--------------------*/
#labelwrap {
    margin-left:-80px;
}

/*-------------------LABEL 1-------------------*/
.label-1 {
    margin-top:50px;
    margin-left:-30px;
}

.label-1-arrow, .label-1-arrow-shadow, .label-1-a {
    transform:skew(-8deg) rotate(-18deg);
    -webkit-transform:skew(-8deg) rotate(-18deg);
    -moz-transform:skew(-8deg) rotate(-18deg);
    -ms-transform:skew(-8deg) rotate(-18deg);
    -o-transform:skew(-8deg) rotate(-18deg);
}

.label-1-arrow {
    position:absolute;
    margin-top:28px;
    width:0;height:0;
    border-bottom:20px solid var(--Label-1-Arrow);
    border-left:50px solid transparent;
}

.label-1-arrow-shadow {
    position:absolute;
    margin-top:calc(28px + 3px);
    margin-left:9px;
    width:0;height:0;
    border-bottom:20px solid var(--Label-1-Arrow-Shadow);
    border-left:calc(50px - 8px) solid transparent;
    z-index:-1;
}

/* label 1 box */
.label-1-a {
    margin-left:49px;
    display:inline-block;
    box-shadow:6px 6px var(--Label-1-Shadow);
    border:3px solid var(--Label-1-Outer-Border);
    transform-origin:left;
    -webkit-transform-origin:left;
    -moz-transform-origin:left;
    -ms-transform-origin:left;
}

.label-1-b {
    border:6px solid var(--Label-1-Inner-Border);
    padding:12px 16px;
    background:var(--Label-1-Background);
}

/* label 1 text */
.label-1-c {
    font-family:eri ji;
    font-size:20px;
    color:var(--Label-1-Text);
    font-weight:bold;
    line-height:1em;
}

/* Japanese character styling */
jp {
    letter-spacing:-3px;
}

/*-------------------LABEL 2-------------------*/
.label-2 {
    margin-top:35px;
}

.label-2-arrow, .label-2-arrow-shadow, .label-2-a {
    transform:skew(4deg) rotate(20deg);
    -webkit-transform:skew(4deg) rotate(20deg);
    -moz-transform:skew(4deg) rotate(20deg);
    -ms-transform:skew(4deg) rotate(20deg);
    -o-transform:skew(4deg) rotate(20deg);
}

.label-2-arrow {
    position:absolute;
    margin-top:10px;
    width:0;height:0;
    border-bottom:20px solid var(--Label-2-Arrow);
    border-left:50px solid transparent;
}

.label-2-arrow-shadow {
    position:absolute;
    margin-top:calc(10px + 6px);
    margin-left:10px;
    width:0;height:0;
    border-bottom:20px solid var(--Label-2-Arrow-Shadow);
    border-left:calc(50px - 12px) solid transparent;
    z-index:-1;
}

/* label 2 box */
.label-2-a {
    margin-left:48px;
    display:inline-block;
    box-shadow:6px 6px var(--Label-2-Shadow);
    border:3px solid var(--Label-2-Outer-Border);
    transform-origin:left;
    -webkit-transform-origin:left;
    -moz-transform-origin:left;
    -ms-transform-origin:left;
}

.label-2-b {
    border:6px solid var(--Label-2-Inner-Border);
    padding:12px 16px;
    background:var(--Label-2-Background);
}

/* label 2 text */
.label-2-c {
    font-family:p5;
    font-size:18px;
    letter-spacing:0.5px;
    color:var(--Label-2-Text);
    line-height:1em;
}

/*------------------MAIN (RIGHT) ABOUT------------------*/
#mainbox-a {
    margin-left:calc(12px + 40px);
    margin-right:20px;
    -webkit-flex:1;
    -ms-flex:1;
    -moz-flex:1;
    flex:1;
    align-self:center;
    -webkit-align-self:center;
    transform:skew(-10deg);
    -webkit-transform:skew(-10deg);
    -moz-transform:skew(-10deg);
    -ms-transform:skew(-10deg);
    -o-transform:skew(-10deg);
}

.unskew {
    transform:skew(10deg);
    -webkit-transform:skew(10deg);
    -moz-transform:skew(10deg);
    -ms-transform:skew(10deg);
    -o-transform:skew(10deg);
}

/* first row - name label */
.mainbox-header {
    margin-bottom:calc(8px + 20px);
    box-shadow:8px 8px var(--Name-Header-Shadow);
    border:4px solid var(--Name-Header-Border);
    background:var(--Name-Header-Background);
    display:flex;
}

.about-name-label {
    padding:9px 12px;
    background:var(--Name-Header-Label-Background);
    font-family:p5;
    font-size:17px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--Name-Header-Label-Text);
}

.about-name-text {
    align-self:center;
    -webkit-align-self:center;
    margin-left:14px;
    font-family:p5;
    font-size:18px;
    letter-spacing:0.5px;
    color:var(--Name-Header-Text);
}

/* about boxes */
.mainbox-item {
    margin-bottom:calc(8px + 20px);
    box-shadow:8px 8px var(--About-Box-Shadow);
    border:4px solid var(--About-Box-Border);
    background:var(--About-Box-Background);
    padding:30px 30px 18px 30px;
    font-family:lato;
    font-size:13px;
    color:var(--About-Box-Text);
}

/* about boxes - title labels */
.box-label-a {
    position:relative;
    margin-bottom:-24px;
    margin-left:32px;
    display:inline-block;
    border:4px solid var(--About-Box-Label-Outer-Border);
    padding:4px;
    background:var(--About-Box-Label-Inner-Border);
    z-index:3;
}

.box-label-b {
    padding:8px 12px;
    background:var(--About-Box-Label-Background);
}

/* about boxes - title labels: shadow */
.box-label-a:after {
    content:"";
    position:absolute;
    top:4px;
    left:calc(100% + 4px);
    width:4px;
    height:18px;
    background:var(--About-Box-Label-Shadow);
}

/* about boxes - title labels: text */
.box-label-c {
    font-family:p5;
    font-size:18px;
    line-height:1em;
    color:var(--About-Box-Label-Text);
    letter-spacing:0.5px;
}

.bio {
    line-height:1.7em;
}

/* general links */
#mainbox-a a {
    color:var(--Link);
    padding-bottom:1px;
    border-bottom:1px solid var(--Link-Bottom-Border);
}

/*------------------STATISTICS BOX------------------*/
.stat-row {
    display:flex;
    margin-bottom:10px;
}

.stat-row:last-child {margin-bottom:0px;}

.stat-row > * {
    align-self:center;
    -webkit-align-self:center;
}

/* 1st stat column */
.stat-a {
    margin-right:20px;
    width:80px;
}

/* 2nd stat column */
.stat-b {
    margin-right:20px;
    width:40px;
    font-family:exo;
    font-size:12px;
    letter-spacing:0.5px;
    text-align:center;
}

/* percentage bar */
.statbar {
    -webkit-flex:1;
    -ms-flex:1;
    -moz-flex:1;
    flex:1;
    height:5px;
    border:1px solid var(--Meter-Bar-Border);
}

.statfill {
    height:inherit;
    background:var(--Meter-Bar-Fill);
}

/*--------------------CUSTOM LINKS--------------------*/
#customlinks {
    margin:calc((6px + 3px) * -1);
}

#customlinks a {
    display:inline-block;
    margin:calc(6px + 3px);
}

.ccc-i {
    box-shadow:6px 6px var(--Custom-Links-Shadow);
    border:4px solid var(--Custom-Links-Outer-Border);
    padding:4px;
    background:var(--Custom-Links-Inner-Border);
}

.ccc-ii {
    padding:8px 12px;
    background:var(--Custom-Links-Background);
}

/* custom links - text */
.ccc-iii {
    font-family:p5;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--Custom-Links);
}

#customlinks a:hover .ccc-ii {
    background:var(--Custom-Links-Background-On-Hover);
}

#customlinks a:hover .ccc-iii {
    color:var(--Custom-Links-On-Hover);
}

/*---------------CREDIT---------------*/
/* pls do not cover or remove! thank you! */
#please-respect-theme-makers {
    position:fixed;
    bottom:0;margin-bottom:22px;
    right:0;margin-right:22px;
    font-family:Quicksand;font-weight:500;
    font-size:9px;
    letter-spacing:1.7px;
    text-transform:uppercase;
    color:var(--Credit-Text);
    line-height:1em;
    z-index:99;
}


</style>

</head>

<body>

<!----PAGE CREDIT---->
<!--pls do not remove! tysm!-->
<a id="please-respect-theme-makers" href="//glenthemes.tumblr.com" title="Page by glenthemes">credit</a>

<div id="sesame">
<div id="bun">

<div id="flexwrap">
<div id="chara-cont">

    <!----LEFT IMAGE---->
    <img class="chara" src="//66.media.tumblr.com/b171970c43c301a54c93ca6df837d8a5/tumblr_pn6p30Ze8l1qg2f5co3_r1_1280.png">


    <div class="speech-a">
    <div class="speech-b">

    <div class="speech-name-1">
    <div class="speech-name-2 unskew">Tsugumi</div> <!--SPEECH BOX LABEL-->
    </div><!--speech-name end-->


    <div class="speech-c">
    <div class="speech-d">
    <div class="speech-e unskew">I don't seem to be getting any better at playing keyboard, but I'll keep trying!</div> <!--SPEECH BOX TEXT-->

    </div><!--speech-d-->
    </div><!--speech-c-->
    </div><!--speech-b-->
    </div><!--speech-a-->
</div><!--chara-cont-->


<div id="labelwrap">

    <div class="label-1">
    <div class="label-1-arrow"></div>
    <div class="label-1-arrow-shadow"></div>
    <div class="label-1-a">
    <div class="label-1-b">

    <!--LABEL 1 TEXT-->
    <!--use <jp>...</jp> for Japanese characters-->
    <div class="label-1-c">羽沢 <jp>つぐみ</jp></div>

    </div></div><!--end label 1 a/b-->
    </div><!--end label-1-->


    <div class="label-2">
    <div class="label-2-arrow"></div>
    <div class="label-2-arrow-shadow"></div>
    <div class="label-2-a">
    <div class="label-2-b">

    <!--LABEL 2 TEXT-->
    <div class="label-2-c">Pianist</div>

    </div></div><!--end label 2 a/b-->
    </div><!--end label-2-->
</div><!--labelwrap-->


<!----MAIN ABOUT---->
<!----FIRST ROW---->
<div id="mainbox-a">
<div class="mainbox-header">
    <div class="about-name-label">
    <div class="unskew">Name:</div> <!--FIRST ROW: NAME LABEL-->
    </div>

    <div class="about-name-text">
    <div class="unskew">Hazawa Tsugumi</div> <!--FIRST ROW: NAME TEXT-->
    </div>
</div><!--mainbox-header-->


<!-----FIRST ABOUT BOX----->
<div class="box-label-a">
<div class="box-label-b">
<div class="box-label-c unskew">Information</div> <!--1ST ABOUT BOX TITLE-->
</div><!--box-label-b-->
</div><!--box-label-a-->

<div class="mainbox-item">
    <!--1ST ABOUT BOX CONTENT-->
    <div class="bio unskew">
    Your about text here :)
    </div><!--end bio-->
</div><!--end one box-->


<!-----STATS (2ND) BOX----->
<div class="box-label-a">
<div class="box-label-b">
<div class="box-label-c unskew">Card Stats</div> <!--STATS BOX TITLE-->
</div><!--box-label-b-->
</div><!--box-label-a-->

<div class="mainbox-item">
    <div class="stats unskew">


    <!--START ONE ROW-->
    <div class="stat-row">
    <div class="stat-a">Performance:</div> <!--STAT ROW COLUMN 1 TEXT-->
    <div class="stat-b">8748</div> <!--STAT ROW COLUMN 2 TEXT-->

    <!--PERCENTAGE BAR WIDTH %-->
    <div class="statbar"><div class="statfill" style="width:61%">
    </div></div>
    </div><!--stat-row-->
    <!--END ONE ROW-->


    <!--START ONE ROW-->
    <div class="stat-row">
    <div class="stat-a">Technique:</div> <!--STAT ROW COLUMN 1 TEXT-->
    <div class="stat-b">8990</div> <!--STAT ROW COLUMN 2 TEXT-->

    <!--PERCENTAGE BAR WIDTH %-->
    <div class="statbar"><div class="statfill" style="width:63%">
    </div></div>
    </div><!--stat-row-->
    <!--END ONE ROW-->


    <!--START ONE ROW-->
    <div class="stat-row">
    <div class="stat-a">Visual:</div> <!--STAT ROW COLUMN 1 TEXT-->
    <div class="stat-b">10250</div> <!--STAT ROW COLUMN 2 TEXT-->

    <!--PERCENTAGE BAR WIDTH %-->
    <div class="statbar"><div class="statfill" style="width:71%">
    </div></div>
    </div><!--stat-row-->
    <!--END ONE ROW-->


    <!--START ONE ROW-->
    <div class="stat-row">
    <div class="stat-a">Overall:</div> <!--STAT ROW COLUMN 1 TEXT-->
    <div class="stat-b">27988</div> <!--STAT ROW COLUMN 2 TEXT-->

    <!--PERCENTAGE BAR WIDTH %-->
    <div class="statbar"><div class="statfill" style="width:88%">
    </div></div>
    </div><!--stat-row-->
    <!--END ONE ROW-->

    </div><!--end stats-->
</div><!--end one box-->


<!-----CUSTOM LINKS----->
<div id="customlinks">
    <!--START ONE LINK-->
    <a href="/"> <!--LINK URL-->
    <div class="ccc-i">
    <div class="ccc-ii">
    <div class="ccc-iii unskew">home</div> <!--LINK TEXT-->
    </div></div></a>
    <!--END ONE LINK-->

    <!--START ONE LINK-->
    <a href="/ask"> <!--LINK URL-->
    <div class="ccc-i">
    <div class="ccc-ii">
    <div class="ccc-iii unskew">mail</div> <!--LINK TEXT-->
    </div></div></a>
    <!--END ONE LINK-->

    <!--START ONE LINK-->
    <a href="/archive"> <!--LINK URL-->
    <div class="ccc-i">
    <div class="ccc-ii">
    <div class="ccc-iii unskew">archive</div> <!--LINK TEXT-->
    </div></div></a>
    <!--END ONE LINK-->

    <!--START ONE LINK-->
    <a href="/"> <!--LINK URL-->
    <div class="ccc-i">
    <div class="ccc-ii">
    <div class="ccc-iii unskew">navigate</div> <!--LINK TEXT-->
    </div></div></a>
    <!--END ONE LINK-->

</div><!--end customlinks-->
</div><!--mainbox-a-->
</div><!--flexwrap-->
</div><!--bun-->
</div><!--sesame-->


</body>

</html>