glenthemes/pages
glenthemes
/
pages
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
pages/about-pages/09-Siderea

829 lines
20 KiB
Plaintext
Raw Permalink Blame History

<!-----------------------------------------------------------------------
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 theme 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.
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" 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>
Reference in New Issue View Git Blame Copy Permalink