About Page [09]: Siderea

<!-----------------------------------------------------------------------
About Page [09]: Siderea
Made by glenthemes

Initial release: 2019/01/20
Last updated: 2023/06/20

Latest update: fixed broken sticky sidebar feature

TERMS OF USE:
1) Do not remove the credit.
2) Do not remove parts of the code without my permission.
3) Do not claim my codes as your own.
4) Do not use my works as base codes.
5) You may add widgets to my themes and pages.

Please stick to the Terms! Make D.Va proud :)

Editing guide notes are found in GRAY! Please look out for them!

Credits:
- all image icons by @zaryamei
- "Big Noodle Titling Oblique" font by Sentinel Type @ dafont
  www.dafont.com/bignoodletitling.font
- "Silkscreen" font by Jason Aleksandr Kottke @ dafont
  www.dafont.com/silkscreen.font
- Bottom border hover transition by web-tiki @ stackoverflow:
  stackoverflow.com/questions/28623446#28623513
- D.Va 'call mech' ability icon: Overwatch
- Feather icon font by colebemis @ twitter
  feathericons.com/
- 'Leafo' sticky kit by Leaf Cocoran
  leafo.net/sticky-kit/
- layout inspired by Overwatch's career profile page
------------------------------------------------------------------------>

<!DOCTYPE html>
<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:0,
attribute:"title"
});
});
})(jQuery);
</script>

<link href="//fonts.googleapis.com/css?family=Karla|Inconsolata|Source+Code+Pro" rel="stylesheet">

<script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>

<script src="//cdn.jsdelivr.net/gh/leafo/sticky-kit@master/dist/sticky-kit.min.js"></script>

<script>
$(document).ready(function(){
var tote = Math.floor(47 + 45 + 40);
$("#rec-left").stick_in_parent({
    offset_top:tote,
    bottoming:false
});
$("#rec-right").stick_in_parent({
    offset_top:tote,
});
});
</script>
<!-------------------------------------------------------------------->

<style type="text/css">

@font-face { font-family: "big noodle titling"; src: url('//glen-assets.github.io/fonts/big_noodle_titling_oblique.ttf'); }

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


/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
    padding: 4px 9px;
    margin: 26px 9px 0px 15px;
    background-color: #333; /* tooltip background color */
    border-radius:3px;
    font-family: source code pro;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ddd; /* tooltip text color */
    z-index:99999999999999999999999999998!important;
    max-width:40vw;
}

/*--------------------TUMBLR CONTROLS--------------------*/
#plus-s {
    position:fixed;
    top:0;margin-top:17px;
    right:0;margin-right:15px;
    z-index:10;
}

#plus-s svg {
    width:15px;height:15px;
    color:#555; /* tumblr controls 'plus' symbol color */
}

iframe#tumblr_controls, .iframe-controls--desktop {
    top:calc(1px + 5px)!important;
    right:calc(5px)!important;
    padding-right:40px;
    position:fixed!important;

    transform:scale(0.7,0.7);
    -webkit-transform:scale(0.7,0.7);

    transform-origin:100% 0;
    z-index:999999!important;
    opacity:0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
    opacity:1;
}

/*--------------------SCROLLBAR--------------------*/
::-webkit-scrollbar {
    background-color:#fbfbfb; /* scrollbar background color */
    height:13px;
    width:13px;
}

::-webkit-scrollbar-thumb {
    background-color:#aaa; /* scrollbar color */
    border:6px solid #fbfbfb; /* scrollbar background color */
}

::-webkit-scrollbar-track {
    background-color:#fbfbfb; /* scrollbar background color */
}

/*--------------------SMALL CURSOR--------------------*/
/* feel free to not use this */
* {
    cursor:url(//78.media.tumblr.com/66991e3a24432876aa22db906d5071de/tumblr_pe9t1ipv6S1qg2f5co6_r1_75sq.png), auto;
}

/*--------------------TEXT HIGHLIGHT--------------------*/
::selection {
background:transparent;
color:#F9878F; /* text highlight color */
}

::-moz-selection {
background:transparent;
color:#F9878F; /* text highlight color */
}

/*--------------------BACKGROUND IMAGE--------------------*/
body, #top-bg {
    background:#fcfcfc url('//66.media.tumblr.com/e9eccce5b5cd2c1eb27592f6ce3bd933/tumblr_pllid0huwL1qg2f5co1_400.png'); /* background image url */
    background-attachment:fixed;
    background-repeat:repeat;
}

#top-bg {
    position:fixed;
    top:0;left:0;right:0;
    margin:0 auto;
    width:820px;
    height:50px;
    z-index:4;
}

/*--------------------BASICS--------------------*/
body {
    color:#888;
    cursor:normal;
    font-family:inconsolata;
    line-height:1.6em;
    font-size:12px;
    text-align:left;
}

blockquote {
    padding-left:10px;
    margin-left:5px;
    border-left:1px solid;
    border-color:#aaa;
    margin:10px;
}

a, svg {
    text-decoration:none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

a {color:#d88989;}

b, b {
    font-weight:bold;
}

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

hr {
    width:70%;
    border-width:0px;
    height:1px;
    background-color:#bbb;
}

/*--------------------MAIN CONTAINER--------------------*/
#lucio-oh {
    position:absolute;
    top:0;left:0;right:0;
    margin:45px auto;
    width:820px;
}

/*--------------------TOP BAR--------------------*/
#topbar {
    position:fixed;
    width:inherit;
    height:47px;
    background-color:#37353A; /* top bar background */
    border-radius:3px;
    overflow:hidden;
    z-index:4;
}

/*--------------------TOP BAR - LEFT--------------------*/
#topnav {float:left;}

/* TOP BAR NAV LINKS */
#topnav a {
    display:inline-block;
    margin:0px -3px;
    padding:20px 15px 15px 15px;
    border-bottom:3px solid transparent;
    font-family:silkscreen;
    text-transform:uppercase;
    font-size:9px;
    color:#e5e5e5; /* top bar links color */
    line-height:1em;
}

#topnav a:not(.left-mini-title):after {
    display:block;
    content:'';
    width:calc(100% + (15px * 2));
    margin-left:-15px;
    padding-bottom:15px;
    margin-bottom:-18px;
    border-bottom:solid 3px #feaeba; /* top bar links hover border color */
    transform:scaleX(0);
    -webkit-transform:scaleX(0);
    -moz-transform:scaleX(0);
    -o-transform:scaleX(0);
    -ms-transform:scaleX(0);
}

#topnav a:not(.left-mini-title):hover:after {
    transform:scaleX(1);
    -webkit-transform:scaleX(1);
    -moz-transform:scaleX(1);
    -o-transform:scaleX(1);
    -ms-transform:scaleX(1);
    transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
}

/* TOP BAR - LEFT - MINI TITLE */
.left-mini-title, .left-mini-title:hover {
    background-color:#F9878F; /* left mini title background color */
    border-bottom:3px solid #feaeba!important; /* left mini title border */
    color:#fff!important; /* left mini title text color */
}

#topnav a:first-child {margin-left:0px;}
#topnav a:last-child {margin-right:0px;}

/*--------------------TOP BAR - RIGHT--------------------*/
#user-deco-nav {
    float:right;
    display:flex;
    height:100%;
}

#user-deco-nav > * {
    align-self:center;
    -webkit-align-self:center;
}

/* FOLLOW BUTTON */
#user-deco-nav svg {
    width:18px;height:18px;
    padding:15px 13px;
    border-bottom:0px solid transparent;
    color:#e5e5e5; /* follow button color */
}

#user-deco-nav a:hover svg {
    padding-bottom:12px;
    border-bottom:3px solid #feaeba; /* follow button border on hover */
}

/* ACTIVE STATUS INDICATOR BAR */
.green-active-border {
    width:6px;
    height:inherit;
    background:#a5eb81; /* green active status bar color */
}

.small-avi-img {
    width:48px;
    height:48px;
}

/* TOP BAR - RIGHT - MINI TITLE */
.nametag {
    padding:0 15px;
    font-family:silkscreen;
    font-size:9px;
    color:#e5e5e5; /* right mini title text color */
}

/*--------------------INTRO SECTION--------------------*/
#beef {
    position:absolute;
    top:0;margin-top:calc(47px + 40px);
    width:inherit;
    max-height:124px;
    overflow:hidden;
    z-index:3;
}

/*--------------------INTRO - LEFT--------------------*/
#beef-left {
    float:left;
    display:flex;
}

#beef-left > * {
    align-self:center;
    -webkit-align-self:center;
}

/* MAIN 100PX ICON IMAGE */
.square-pic {
    width:100px;
    height:100px;
    background-color:#444147; /* 100px icon background color */
    border:12px solid #444147;  /* 100px icon border color */
    border-radius:3px;
}

.diamond {
    margin-left:-11px;
    width:22px;
    height:22px;
    background:#444147;  /* 100px icon arrow color */
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    z-index:-1;
}

.sq-txt {margin-left:calc(11px + 17px);}

/* LARGE TITLE */
.sq-name {
    font-family:big noodle titling;
    font-size:30px;
    letter-spacing:2px;
    color:#3d3a40;  /* large title text color */
}

 /* MAIN EXP BAR */
.sq-bar {
    margin-top:17px;
    width:250px;
    height:5px;
    background:#eee; /* main EXP bar color (empty) */
    border-radius:3px;
    overflow:hidden;
}

.sq-fill {
    height:inherit;
    background:#fa9fa6; /* main EXP bar color (filled) */
    border-radius:3px;
}

/* define the main EXP bar (filled) width in the 2nd width property */
/* same value in all of these rows pls! */
@-webkit-keyframes barfill { from { width:0%; } to { width:48%; } }
@-moz-keyframes barfill { from { width:0%; } to { width:48%; } }
@keyframes barfill { from { width:0%; } to { width:48%; } }

.bar-fill {
    width:0%;
    -webkit-animation:barfill ease-out 1;
    -moz-animation:barfill ease-out 1;
    animation:barfill ease-out 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s; animation-duration:1s;
}

/* MAIN EXP BAR - NUMBER STATS */
.sq-numbers {
    margin-top:16px;
    font-family:big noodle titling;
    font-size:16px;
    letter-spacing:1.5px;
    color:#424045; /* main number stats color */
}

/*--------------------INTRO - RIGHT--------------------*/
#beef-right {
    float:right;
    display:flex;
    max-width:413px;
    height:124px;
}

#beef-right > * {
    align-self:center;
    -webkit-align-self:center;
}

/* D.VA MECH ICON */
.right-img {
    width:auto;
    height:50px; /* d.va mech icon image height */
}

.right-quote {
    margin-left:20px;
    width:250px;
    font-family:silkscreen;
    text-transform:uppercase;
    font-size:9px;
    color:#333; /* right quote text color */
    text-align:justify;
    line-height:2em;
}

/*--------------------CONTAINER--------------------*/
#rectangle {
    position:absolute;
    top:0;margin-top:calc(47px + 40px + 124px + 55px);
    margin-bottom:40px;
    width:inherit;
    z-index:2;
}

/*--------------------CHARACTER STATS--------------------*/
#rec-left {float:left;}

.one-row {
    display:flex;
    margin-bottom:12px;
}

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

.one-row:last-of-type {margin-bottom:0px;}

/* CHARACTER/PLAYER STATS ROW */
/* CHARACTER NAME */
.row-nametag {
    width:80px;
    padding:10px 8px;
    background-color:#444147; /* character name background color */
    border-radius:3px;
    font-family:silkscreen;
    font-size:9px;
    color:#e5e5e5; /* character name text color */
    line-height:1em;
    text-align:right;
}

.row-namearrow {
    margin-left:-4px;
    width:8px;
    height:8px;
    background:#444147; /* character name arrow color */
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    z-index:-1;
}

/* CHARACTER ICON */
.row-avi {
    margin-left:10px;
    width:40px;
    height:40px;
    border-radius:3px;
}

/* CHARACTER NUMERIC STATS TEXT */
.row-txt {
    margin-left:10px;
    width:52px;
    padding:9px 7px;
    background-color:#f8f8f8; /* character stat background color */
    border:1px solid #eee; /* character stat border */
    border-radius:3px;
    font-family:silkscreen;
    font-size:9px;
    color:#666; /* character stat text color */
    line-height:1em;
    text-align:center;
}

 /* CHARACTER EXP BARS */
.row-bar {
    margin-left:10px;
    width:225px;
    height:7px;
    border-radius:3px;
    background-color:#f7f7f7; /* character EXP bar color (empty) */
    overflow:hidden;
}

.row-barfill {
    height:inherit;
    border-radius:3px;
    /* individual character EXP bar colors (filled) are done in HTML */
    /* but you can also assign 1 color to all bars if you want to */
}

 /*--------------------BIOGRAPHY SECTION--------------------*/
#rec-right {
    float:right;
    margin-left:40px;
    width:calc(100% - 463px - 40px);
}

 /* BIOGRAPHY TITLE */
.rec-title {
    display:inline-block;
    margin-bottom:8px;
    font-family:big noodle titling;
    font-size:22px;
    letter-spacing:2px;
    color:#424045; /* biography title text color */
}

.info-row {
    margin-top:12px;
    display:flex;
}

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

 /* BULLET POINT STATS - ICONS */
.info-row svg {
    padding:8px;
    background-color:#F9878F; /* bullet point stat icon background color */
    border-radius:3px;
    width:14px;
    height:14px;
    color:#fff;
}

 /* BULLET POINT STATS - TEXT */
.info-txt {
    margin-left:12px;
    font-family:silkscreen;
    font-size:9px;
    color:#555; /* bullet point stat - text color */
}

 /* MAIN BIOGRAPHY TEXT SECTION */
.rec-desc {
    margin-top:20px;
    font-family:inconsolata;
    font-size:12px;
    line-height:2.1em;
    color:#555; /* main biography text color */
    text-align:justify;
}

/* bolded text styling */
.rec-desc b, .rec-desc strong {
    padding:3px 5px;
    background-color:#f9f9f9;
    border:1px solid #eee;
    border-radius:3px;
    color:#666;
}

 /* italicized text styling */
.rec-desc i, .rec-desc em {color:#9badb7;}

 /* links styling */
.rec-desc a {
    color:#d88989;
    padding-bottom:2px;
    border-bottom:1px solid #ddd;
}

.rec-desc a:hover {
    color:#444;
}

.rec-desc p:last-child {margin-bottom:0px;}

</style>

</head>

<body>

<!----TUMBLR CONTROLS---->
<div id="plus-s"><i data-feather="plus"></i></div>

<div id="top-bg"></div>

<div id="lucio-oh">
<div id="topbar">
    <div id="topnav">

        <!----TOP BAR - LEFT---->
        <!--top bar - left - mini title-->
        <a class="left-mini-title">about me</a>

        <!--top bar - nav links-->
        <!--please do not remove the credit! thanks!-->
        <a href="/">return</a>
        <a href="/ask">mailbox</a>
        <a href="/archive">archives</a>
        <a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
    </div><!--topnav-->



<!----TOP BAR - RIGHT---->
<div id="user-deco-nav">

    <!--follow button - replace 'your-username' with your blog username-->
    <a href="//tumblr.com/follow/your-username" title="follow?"><i data-feather="user-plus"></i></a>

    <div class="green-active-border"></div>

    <!--top right icon image-->
    <img class="small-avi-img" src="//78.media.tumblr.com/07dc615cd376b70fcc87996026ff89ea/tumblr_oqxkyjUdBK1taarzno5_r3_400.jpg">

    <!--top right mini title-->
    <div class="nametag">Siderea</div>
</div><!--user-deco-nav-->
</div><!--topbar-->



<!----INTRO SECTION - LEFT---->
<div id="beef">
<div id="beef-left">

    <!--100px icon image-->
    <img class="square-pic" src="//66.media.tumblr.com/62a881181c9c6802f425c8398d05c3ed/tumblr_pllkes1gTi1qg2f5co7_r1_400.png">

    <div class="diamond"></div>

    <div class="sq-txt">

        <!--main big title-->
        <div class="sq-name">ready, player one!</div>

        <div class="sq-bar">
            <div class="sq-fill bar-fill"></div>
        </div><!--sq-bar-->

        <!--number stats-->
        <div class="sq-numbers">9638 / 20000</div>
    </div><!--sq-txt-->
</div><!--beef-left-->



<!----INTRO SECTION - RIGHT---->
<div id="beef-right">

    <!--d.va mech image-->
    <img class="right-img" src="//66.media.tumblr.com/6eeb05f683e22edeb5a10914a944b48a/tumblr_plnbit7kiu1qg2f5co3_r1_250.png">

    <!--right quote-->
    <div class="right-quote">We <i>barely</i> won last time. The enemy is out there — adapting, and getting stronger. The rest of the squad, the country? They're all counting on <i>me!</i></div>

</div><!--beef-right-->
</div><!--beef-->




<!----CHARACTER/PLAYER STATS---->
<div id="rectangle">

<div id="rec-left">

    <!--I've given 2 rows as examples that you can copy-->
    <!--START ONE ROW-->
    <div class="one-row">
        <div class="row-nametag">name</div>
        <div class="row-namearrow"></div>

        <!--character avatar-->
        <img class="row-avi" src="//78.media.tumblr.com/53dc024e5599df92b67f9633fb7996a2/tumblr_inline_ox6a8nkSrl1sf4s4l_400.png">

        <div class="row-txt">100 hrs</div>

        <!--define filled bar width and color as follows:-->
        <div class="row-bar">
        <div class="row-barfill" style="width:100%; background-color:#f6d3d5"></div></div>
    </div><!--one-row-->
    <!--END ONE ROW-->



    <div class="one-row">
        <div class="row-nametag">name</div>
        <div class="row-namearrow"></div>

        <!--character avatar-->
        <img class="row-avi" src="//78.media.tumblr.com/0e64759da8bdb927b18a158406865e44/tumblr_ov65j6yjKr1taarzno3_r1_400.png">

        <div class="row-txt">70 hrs</div>

        <!--define filled bar width and color as follows:-->
        <div class="row-bar">
        <div class="row-barfill" style="width:70%; background-color:#ece6e6"></div></div>
    </div><!--one-row-->
    <!--END ONE ROW-->

</div><!--rec-left-->






<!----RIGHT BIOGRAPHY SECTION---->
<div id="rec-right">
    <div class="rec-title">career profile — D.Va</div>

    <!--here I've given 3 bullet rows as examples you can copy-->
    <!--START ONE BULLET ROW-->
    <div class="info-row">
        <!--bullet point icon-->
        <!--you can choose one from this list:-->
        <!--//feathericons.com-->
        <!--put the name between the quotation marks of feather=""-->
        <i data-feather="user"></i>

        <!--bullet point text-->
        <div class="info-txt"><b>real name:</b> Hana Song</div>
    </div><!--info-row-->
    <!--END ONE BULLET ROW-->


    <!--START ONE BULLET ROW-->
    <div class="info-row">
        <i data-feather="globe"></i>
        <div class="info-txt"><b>nationality:</b> Korean</div>
    </div><!--info-row-->
    <!--END ONE BULLET ROW-->


    <!--START ONE BULLET ROW-->
    <div class="info-row">
        <i data-feather="star"></i>
        <div class="info-txt"><b>occupation:</b> mech pilot, actress</div>
    </div><!--info-row-->
    <!--END ONE BULLET ROW-->




    <!--BIOGRAPHY TEXT SECTION-->
    <div class="rec-desc">

    Text: <b>bold</b>, <i>italic</i>, <a href="/">link</a>

    </div><!--rec-desc-->

</div><!--rec-right-->
</div><!--rectangle-->
</div><!--lucio-oh-->

<script>feather.replace()</script>
</body>

</html>