522 lines
13 KiB
Plaintext
522 lines
13 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
About Page [06]: Outcast
|
|
Made by glenthemes
|
|
|
|
Initial release: 2018/10/26
|
|
Last updated: 2022/09/14
|
|
|
|
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! Thank you!
|
|
Here is the help guide!
|
|
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
|
|
//glenthemes.tumblr.com/outcast
|
|
------------------------------------------------------------------------>
|
|
|
|
<!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:25,
|
|
tip_fade_speed:75,
|
|
attribute:"title"
|
|
});
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
|
|
<script src="//static.tumblr.com/2pnwama/pT3ph6hj0/hearts.js"></script>
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Karla|Nunito|Quicksand:400,500" rel="stylesheet">
|
|
|
|
<!-------------------------------------------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
@font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
|
|
|
|
/*--------------------TOOLTIPS--------------------*/
|
|
#s-m-t-tooltip {
|
|
padding: 4px 9px;
|
|
margin: 20px;
|
|
background-color:#fefefe; /* tooltip background color */
|
|
border:1px solid #edf1ec; /* tooltip border color */
|
|
box-shadow:5px 5px #EAEFEB; /* tooltip solid shadow color */
|
|
font-family: karla;
|
|
font-size: calc(12px - 3px);
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
color: #777; /* tooltip text coloor */
|
|
z-index:9999!important;
|
|
max-width:275px;
|
|
}
|
|
|
|
|
|
/*--------------------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);
|
|
|
|
transform-origin:100% 0;
|
|
z-index:999999!important;
|
|
}
|
|
|
|
/*--------------------TEXT HIGHLIGHT--------------------*/
|
|
::selection {
|
|
background:#fafafa; /* highlighted text background color */
|
|
color:#555; /* highlighted text text color */
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:#fafafa; /* highlighted text background color */
|
|
color:#555; /* highlighted text text color */
|
|
}
|
|
|
|
/*--------------------BASICS--------------------*/
|
|
body {
|
|
background:#fff url('//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/1wspebb34/tumblr_static_3rkx4t9bgaqscw04kw440skgw.png');
|
|
background-attachment:fixed;
|
|
background-repeat:repeat;
|
|
font-family:nunito;
|
|
line-height:1.6em;
|
|
font-size:12px; /* general font size */
|
|
color:#888; /* general text color */
|
|
text-align:left;
|
|
overflow:hidden;
|
|
}
|
|
|
|
blockquote {
|
|
padding-left:10px;
|
|
margin-left:5px;
|
|
border-left:1px solid;
|
|
border-color:#aaa; /* blockquote color */
|
|
margin:10px;
|
|
}
|
|
|
|
a {text-decoration:none;}
|
|
|
|
#bigbox a {
|
|
color:#acc7b9; /* common links color */
|
|
padding-bottom:1px;
|
|
border-bottom:1px solid #eee; /* common links border color */
|
|
-webkit-transition: all 0.4s ease-in-out;
|
|
-moz-transition: all 0.4s ease-in-out;
|
|
-o-transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
b, strong {
|
|
font-weight:bold;
|
|
color:#b7c9c1; /* bolded text color */
|
|
}
|
|
|
|
i, em {color:#99b686;} /* italicized text color */
|
|
|
|
hr {
|
|
width:70%;
|
|
border-width:0px;
|
|
height:1px;
|
|
background-color:#bbb; /* text divider color */
|
|
}
|
|
|
|
pre, code {
|
|
white-space:pre-wrap;
|
|
display:block;
|
|
}
|
|
|
|
/*--------------------CONTAINER--------------------*/
|
|
#cont {
|
|
position:fixed;
|
|
top:50%;left:50%;
|
|
transform:translate(-50%,-50%);
|
|
width:702px;
|
|
}
|
|
|
|
#bigbox {
|
|
margin-top:-2px;
|
|
padding:25px;
|
|
background-color:#fff; /* box background color */
|
|
border:1px solid #eee; /* box top, right, left border color */
|
|
border-bottom:4px solid #EAEFEB; /* box bottom border color */
|
|
border-radius:0px 10px 0px 10px;
|
|
display:flex;
|
|
}
|
|
|
|
/*--------------------TOP LINKS--------------------*/
|
|
#toplinks {
|
|
z-index:2;
|
|
}
|
|
|
|
#toplinks a {
|
|
display:inline-block;
|
|
margin:0px 3px;
|
|
min-width:60px;
|
|
padding:4px 9px;
|
|
background-color:#fff; /* top links background color */
|
|
border-radius:10px 10px 0px 0px;
|
|
border:1px solid #eee; /* top links border color */
|
|
border-bottom:0px solid transparent;
|
|
font-family:silkscreen;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
color:#777; /* top links color */
|
|
text-align:center;
|
|
}
|
|
|
|
#toplinks a:first-child {margin-left:0px;}
|
|
|
|
/*--------------------LEFT--------------------*/
|
|
#leftside {
|
|
width:calc(180px + 30px + 2px);
|
|
height:inherit;
|
|
}
|
|
|
|
/* sidebar image */
|
|
.sbimg {
|
|
width:calc(100% - 30px - 2px);
|
|
height:auto;
|
|
padding:15px;
|
|
border:1px solid #f5f5f5; /* sidebar image border color */
|
|
}
|
|
|
|
/* info labels: underneath sidebar image */
|
|
.sbinfo {
|
|
margin-top:20px;
|
|
font-size:9px;
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
}
|
|
|
|
.sbinfo name {
|
|
margin-right:7px;
|
|
padding:5px 9px;
|
|
background-color:#f5f8f3; /* info labels background color */
|
|
color:#555; /* info labels text color */
|
|
}
|
|
|
|
.sbinfo p {
|
|
margin-block-start:1.2em;
|
|
margin-block-end:1.2em;
|
|
}
|
|
|
|
.sbinfo p:last-child {margin-bottom:0px;}
|
|
|
|
/*--------------------RIGHT--------------------*/
|
|
#rightside {
|
|
margin-left:20px;
|
|
width:calc(100% - 180px - 30px - 2px - 20px);
|
|
height:inherit;
|
|
}
|
|
|
|
/* main title of box */
|
|
.maintitle {
|
|
margin-top:calc(15px + 1px);
|
|
font-family:quicksand;
|
|
font-size:15px;
|
|
text-transform:uppercase;
|
|
letter-spacing:3px;
|
|
color:#666; /* main title color */
|
|
}
|
|
|
|
/* main title underline / divider */
|
|
.bar {
|
|
margin-top:10px;
|
|
margin-left:-20px;
|
|
width:calc(100% + 20px);
|
|
height:1px;
|
|
background-color:#eee; /* main title underline color */
|
|
}
|
|
|
|
/* info labels table area */
|
|
#table {
|
|
margin-top:20px;
|
|
font-size:9px;
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
display:flex;
|
|
}
|
|
|
|
#table name {
|
|
margin-right:7px;
|
|
padding:5px 9px;
|
|
background-color:#f5f8f3; /* info labels background color */
|
|
color:#555; /* info labels text color */
|
|
}
|
|
|
|
#table p {
|
|
margin-block-start:1.2em;
|
|
margin-block-end:1.2em;
|
|
}
|
|
|
|
#table p:last-child {margin-bottom:0px;}
|
|
|
|
/* info labels: left column */
|
|
.stats-left {}
|
|
|
|
/* info labels: right column */
|
|
.stats-right {
|
|
margin-left:20px; /* distance between left & right columns */
|
|
}
|
|
|
|
/* quote line */
|
|
.quote {
|
|
margin-top:20px;
|
|
border-left:10px solid #DFE7E0; /* quote left border color */
|
|
padding:8px 10px;
|
|
background-color:#f5f7f6; /* quote left background color */
|
|
font-family:silkscreen;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
color:#555; /* quote left text color */
|
|
border-radius:5px;
|
|
}
|
|
|
|
/* biography text section */
|
|
.bio {
|
|
margin-top:20px;
|
|
text-align:justify;
|
|
line-height:1.6em;
|
|
overflow-x:hidden;
|
|
|
|
/* delete the next 2 lines if you do not need a scrollbar */
|
|
overflow-y:auto;
|
|
padding-right:10px;
|
|
|
|
/* you might need to adjust the next line if necessary */
|
|
/* just play around with it until you get the perfect height :) */
|
|
max-height:194px;
|
|
}
|
|
|
|
/* biography text section scrollbar */
|
|
.bio::-webkit-scrollbar {
|
|
height:13px;
|
|
width:13px;
|
|
background-color:#fff; /* scrollbar background color */
|
|
}
|
|
|
|
.bio::-webkit-scrollbar-thumb {
|
|
background-color:#c2d1c4; /* ACTUAL scrollbar color */
|
|
|
|
border-top:3px solid #fff; /* scrollbar background color */
|
|
border-right:6px solid #fff; /* scrollbar background color */
|
|
border-bottom:3px solid #fff; /* scrollbar background color */
|
|
border-left:6px solid #fff; /* scrollbar background color */
|
|
}
|
|
|
|
.bio::-webkit-scrollbar-track {
|
|
background-color:#fff;
|
|
}
|
|
|
|
.bio p:last-child {margin-bottom:0px;}
|
|
|
|
.bio img {
|
|
margin-left:50%;transform:translateX(-50%);
|
|
width:100%;
|
|
}
|
|
|
|
/*--------------------BOTTOM LINKS--------------------*/
|
|
#botlinks {
|
|
margin-top:-3px;
|
|
text-align:right;
|
|
z-index:2;
|
|
}
|
|
|
|
#botlinks a {
|
|
display:inline-block;
|
|
margin:0px 3px;
|
|
min-width:60px;
|
|
padding:4px 9px;
|
|
background-color:#EAEFEB; /* bottom custom links background color */
|
|
border-radius:0px 0px 10px 10px;
|
|
border:1px solid transparent;
|
|
font-family:silkscreen;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
color:#777; /* bottom custom links color */
|
|
text-align:center;
|
|
}
|
|
|
|
#botlinks a:last-child {margin-right:0px;}
|
|
|
|
|
|
/*--------------------MUSIC PLAYER--------------------*/
|
|
#glenjamin {
|
|
position:absolute;
|
|
left:100%;
|
|
margin-top:calc(-36px - 29px);
|
|
padding:12px;
|
|
background-color:#eff3f0; /* music player background color */
|
|
border-radius:0px 10px 10px 0px;
|
|
line-height:1em;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.playy, .pausee {
|
|
font-size:13px;
|
|
color:#777; /* music player buttons color */
|
|
z-index:2;
|
|
}
|
|
|
|
.pausee {
|
|
display:none;
|
|
font-size:9px;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="cont">
|
|
|
|
<!----TOP CUSTOM LINKS---->
|
|
<div id="toplinks">
|
|
<a href="/">index</a>
|
|
<a href="/ask">message</a>
|
|
<a href="/archive">archive</a>
|
|
<!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU :)-->
|
|
<a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="bigbox">
|
|
<div id="leftside">
|
|
|
|
|
|
<!----SIDEBAR IMAGE---->
|
|
<!--recommended dimensions: 180px by 282px-->
|
|
<img class="sbimg" src="//66.media.tumblr.com/bd951156c22b90626e12706f89ba3227/tumblr_ph6cl5d9np1qg2f5co10_r1_400.png">
|
|
|
|
|
|
<!--INFO LABELS: underneath sidebar image-->
|
|
<div class="sbinfo">
|
|
<name>name:</name>genji shimada
|
|
<p>
|
|
<name>occupation:</name>adventurer
|
|
<p>
|
|
<name>hometown:</name>hanamura
|
|
</div>
|
|
</div><!--leftside--><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="rightside">
|
|
|
|
|
|
<!----MAIN TITLE---->
|
|
<div class="maintitle">genji shimada</div>
|
|
|
|
|
|
<div class="bar"></div>
|
|
|
|
|
|
<div id="table">
|
|
|
|
<!----INFO LABELS: left column---->
|
|
<div class="stats-left">
|
|
<name>alias:</name>sparrow
|
|
<p>
|
|
<name>difficulty:</name>☆☆☆
|
|
<p>
|
|
<name>likes:</name>gaming, ramen
|
|
</div><!--stats-left--><!--do not delete this line-->
|
|
|
|
|
|
<!----INFO LABELS: right column---->
|
|
<div class="stats-right">
|
|
<name>ultimate:</name>dragonblade
|
|
<p>
|
|
<name>mbti:</name>ISFP (<a title="introverted, observant, feeling, perception">+</a>)
|
|
<p>
|
|
<name>alignment:</name>lawful good (<a title="controversial opinion">?</a>)
|
|
</div><!--stats-right--><!--do not delete this line-->
|
|
</div><!--table--><!--do not delete this line-->
|
|
|
|
|
|
|
|
<!--quote label line-->
|
|
<div class="quote">The heart of a man still beats inside of me.</div>
|
|
|
|
|
|
|
|
<!----BIOGRAPHY TEXT SECTION---->
|
|
<div class="bio">
|
|
|
|
Welcome to your biography area! Write your heart out.
|
|
<p>
|
|
<blockquote>This is what a blockquote looks like.</blockquote>
|
|
<b>This is what bolded text looks like.</b>
|
|
<br>
|
|
<i>This is what italicized text looks like.</i>
|
|
<br>
|
|
<u>This is what underlined text looks like.</u>
|
|
<br>
|
|
<a href="/">This is what a link looks like.</a>
|
|
<p>
|
|
<a href="//theme-hunter.tumblr.com/post/36665898985/cheat-sheet" target="_blank">Here's</a> a HTML cheat sheet to help you out.
|
|
<p>
|
|
<!--optional divider image-->
|
|
<img style="width:70%" src="//66.media.tumblr.com/85c896705d42a0d36c7d33e217e75acf/tumblr_ph6cl5d9np1qg2f5co7_r2_1280.png">
|
|
|
|
</div><!--bio--><!--do not delete this line-->
|
|
</div><!--rightside--><!--do not delete this line-->
|
|
</div><!--bigbox--><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
<!----BOTTOM CUSTOM LINKS---->
|
|
<div id="botlinks">
|
|
<a href="/">link 1</a>
|
|
<a href="/">link 2</a>
|
|
<a href="/">link 3</a>
|
|
<a href="/">link 4</a>
|
|
</div><!--botlinks-->
|
|
|
|
|
|
|
|
|
|
<!----MUSIC PLAYER---->
|
|
<!-- put the music name between the quotation marks of title="" -->
|
|
<a id="glenjamin" title="This Silence is Mine (Chiptune cover by Emily Music)" onclick="kaishi();">
|
|
<div class="playy">▷</div>
|
|
<div class="pausee">⌷⌷</div>
|
|
</a><!--glenjamin-->
|
|
|
|
<!--music URL-->
|
|
<!-- pls read: linktr.ee/direct_file_links -->
|
|
<audio id="tune" src="https://rhizo.gitlab.io/nier/This_Silence_is_Mine.mp3" onended="restart();" type="audio"></audio>
|
|
|
|
</div><!--cont--><!--do not delete this line-->
|
|
|
|
</body>
|
|
|
|
</html> |