961 lines
24 KiB
Plaintext
961 lines
24 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
About Page [02]: Night's Kiss
|
|
Made by glenthemes
|
|
|
|
Initial release: 2017/02/08
|
|
Last updated: 2023/05/12
|
|
|
|
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.
|
|
|
|
Customization pointers:
|
|
🌙🌙🌙🌙🌙🌙🌙 = places to edit
|
|
------------------------------------------------------------------------>
|
|
|
|
<!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:50,
|
|
tip_fade_speed:0,
|
|
attribute:"title"
|
|
});
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
|
|
|
|
<script src="//static.tumblr.com/2pnwama/lnLppjutr/gletanica.js"></script>
|
|
|
|
<script src="//glen-themes.gitlab.io/abt-pages/02/bm-diana.js"></script>
|
|
|
|
<!-------------------------------------------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
@font-face { font-family: "beaufort"; src: url('//glen-assets.github.io/fonts/Beaufort W01 Regular.ttf'); }
|
|
|
|
/*--------------------TOOLTIPS--------------------*/
|
|
#s-m-t-tooltip {
|
|
padding:5px 10px;
|
|
margin:20px;
|
|
background-color:rgba(var(--Tooltips-BG),var(--Tooltips-BG-Opacity));
|
|
border-radius:2px;
|
|
font-family:beaufort;
|
|
font-weight:bold;
|
|
font-size:calc(var(--Main-Text-Font-Size) - 2.5px);
|
|
text-transform:uppercase;
|
|
letter-spacing:1.3px;
|
|
color:var(--Tooltips-Text);
|
|
z-index:99;
|
|
max-width:40vw;
|
|
}
|
|
|
|
/*--------------------TUMBLR CONTROLS--------------------*/
|
|
iframe#tumblr_controls, .iframe-controls--desktop {
|
|
top:5px!important;
|
|
right:5px!important;
|
|
position:fixed!important;
|
|
|
|
transform:scale(0.85,0.85);
|
|
-webkit-transform:scale(0.85,0.85);
|
|
-moz-transform:scale(0.85,0.85);
|
|
-o-transform:scale(0.85,0.85);
|
|
-ms-transform:scale(0.85,0.85);
|
|
|
|
transform-origin:100% 0;
|
|
-webkit-transform-origin:100% 0;
|
|
-moz-transform-origin:100% 0;
|
|
-o-transform-origin:100% 0;
|
|
-ms-transform-origin:100% 0;
|
|
z-index:999999!important;
|
|
}
|
|
|
|
/*--------------------TEXT HIGHLIGHT--------------------*/
|
|
::selection {
|
|
background:var(--Highlighted-Text-BG);
|
|
color:var(--Highlighted-Text);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:var(--Highlighted-Text-BG);
|
|
color:var(--Highlighted-Text);
|
|
}
|
|
|
|
/*--------------------BASICS--------------------*/
|
|
body {
|
|
font-family:karla;
|
|
line-height:1.6em;
|
|
font-size:12px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
a {
|
|
color:var(--Main-Text-Links);
|
|
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[title]:not([href]):hover {cursor:help;}
|
|
|
|
pre, code {white-space:pre-wrap;}
|
|
|
|
img {vertical-align:middle;}
|
|
|
|
/*---------------CUSTOMIZATION OPTIONS---------------*/
|
|
/*-- 🌙🌙🌙🌙🌙🌙🌙 --*/
|
|
|
|
/* all colors are edited in the :root list below
|
|
EXCEPT for the background image, changed here:
|
|
*/
|
|
|
|
body {
|
|
background-color:#10080a;
|
|
}
|
|
|
|
:root {
|
|
/*
|
|
♡ ------- GENERAL NOTE ------- ♡
|
|
|
|
be careful not to remove the COLON or SEMICOLON
|
|
e.g. what will work: --Sample:#fff;
|
|
what won't work: --Sample#fff
|
|
|
|
♡ ------- NOTE ABOUT 'RBG' ------- ♡
|
|
|
|
RGB values are different from color hexes.
|
|
To convert hex to RGB, use this site:
|
|
codepen.io/joshuajcollinsworth/full/mdJmBQz
|
|
|
|
you only need the numbers
|
|
e.g.: the result will give you rgb(0, 0, 0)
|
|
but here you only need to put 0, 0, 0
|
|
|
|
♡ ------- ABOUT 'OPACITY' ------- ♡
|
|
|
|
You can put any number between 0 and 1
|
|
0 = invisible
|
|
1 = visible
|
|
*/
|
|
|
|
/*------- OUTER FRAME -------*/
|
|
--Frame-Thickness:40px;
|
|
--Frame-Color:23, 10, 16; /* RGB value only */
|
|
--Frame-Opacity:0.73;
|
|
|
|
/*------- INNER CONTAINER -------*/
|
|
--Container-Padding:25px;
|
|
--Container-BG:23, 10, 16;
|
|
--Container-BG-Opacity:0.63;
|
|
|
|
/*------- LEFT SIDEBAR -------*/
|
|
--Sidebar-Width:185px;
|
|
--Sidebar-Image-Size:120px;
|
|
--Sidebar-Image-Shadow-Size:20px;
|
|
--Sidebar-Image-Shadow-Color:#170a10;
|
|
|
|
--Sidebar-Title-Font-Size:13px;
|
|
--Sidebar-Title-Color:#c884a0;
|
|
--Sidebar-Title-Padding:10px;
|
|
--Sidebar-Title-BG:23, 10, 16; /* RGB value only */
|
|
--Sidebar-Title-BG-Opacity:0.6;
|
|
|
|
--Stats-Left-Border-Color:#c6b0b8;
|
|
--Stats-Text:#baa1af;
|
|
--Stats-Font-Size:12px;
|
|
|
|
--Sidebar-Items-Spacing:14px;
|
|
|
|
/*------- CUSTOM LINKS -------*/
|
|
--Custom-Links-Per-Row:2; /* works best with 1 or 2 */
|
|
--Custom-Links-Padding:4px;
|
|
--Custom-Links-BG:23, 10, 16; /* RGB value only */
|
|
--Custom-Links-BG-Opacity:0.6;
|
|
--Custom-Links-Font-Size:10px;
|
|
--Custom-Links-Color:#c884a0;
|
|
--Custom-Links-Spacing:4px;
|
|
|
|
--Gutter-Width:25px; /* space between sidebar and text */
|
|
|
|
/*------- MAIN TEXT (RIGHTSIDE) -------*/
|
|
--Main-Text-Width:460px;
|
|
--Scrollbar-Thumb:#473546;
|
|
--Scrollbar-Track:#170a10;
|
|
--Quote-Font-Size:14px;
|
|
--Quote-Color:#b5a7ba;
|
|
--Main-Text-Blockquote-Border:#c6b0b8;
|
|
--Main-Text-Font-Size:12px;
|
|
--Main-Text-Color:#c6b0b8;
|
|
--Main-Text-Bold:#ccc;
|
|
--Main-Text-Italic:#ef9598;
|
|
--Main-Text-Links:#ff6a80;
|
|
--Main-Text-Links-BG:23, 10, 16; /* RGB value only */
|
|
--Main-Text-Links-BG-Opacity:0.4;
|
|
--Main-Text-Underline:#5c4e58;
|
|
--SubHeading-Font-Size:13px;
|
|
--SubHeading-Text:#c884a0;
|
|
--SubHeading-Link:#d9748f;
|
|
--SubHeading-BG:23, 10, 16; /* RGB value only */
|
|
--SubHeading-BG-Opacity:0.6;
|
|
--SubHeading-Padding:10px;
|
|
|
|
--Background-Gradient-Color:#170a10;
|
|
--Background-Gradient-Height:40%;
|
|
|
|
/*------- BOTTOM BAR -------*/
|
|
--Bottom-Bar-Height:100px;
|
|
--Bottom-Bar-BG:#170a10;
|
|
--Bottom-Bar-Side-Margins:28px;
|
|
|
|
/*------- MUSIC PLAYER -------*/
|
|
--Music-Player-Color:#170a10;
|
|
--Music-Player-BG:#0d0203;
|
|
--Music-Player-Text:#b5a7ba;
|
|
|
|
/*------- BOTTOM CENTER TEXTBOX -------*/
|
|
--Bottom-TextBox-Width:430px;
|
|
--Bottom-TextBox-BG:#170a10;
|
|
--Bottom-TextBox-Padding:25px;
|
|
|
|
--Moon-Icon-Size:24px;
|
|
--Moon-Icon-Color:#867888;
|
|
|
|
--Bottom-Title-Font-Size:26px;
|
|
--Bottom-Title-Color:#b5a7ba;
|
|
|
|
--Bottom-Subtitle-Font-Size:12px;
|
|
--Bottom-Subtitle-Color:#b5a7ba;
|
|
|
|
--Bottom-Text-Spacing:4px;
|
|
|
|
/*------- CREDIT -------*/
|
|
--Credit-BG:#170a10;
|
|
--Credit-Text:#b5a7ba;
|
|
|
|
/*------- MISC/OTHER -------*/
|
|
--Tooltips-BG:23, 10, 16; /* RGB value only */
|
|
--Tooltips-BG-Opacity:0.83;
|
|
--Tooltips-Text:#b5a7ba;
|
|
|
|
--Highlighted-Text-BG:#170a10;
|
|
--Highlighted-Text:#c5c5c5;
|
|
}
|
|
|
|
#background {
|
|
position:fixed;
|
|
top:0;left:0;
|
|
width:100vw;
|
|
height:100vh;
|
|
|
|
/*-------- BACKGROUND IMAGE --------*/
|
|
/*-- 🌙🌙🌙🌙🌙🌙🌙 --*/
|
|
/*-- 🦀🦀🦀🦀🦀🦀🦀 --*/
|
|
|
|
/* put the image url between the brackets of url() */
|
|
/* do not remove the brackets or the semicolon at the end */
|
|
|
|
background-image:url(//static.tumblr.com/18ff7605554871c7c2b4a605be59ce6e/2pnwama/VYJovqk1v/tumblr_static_d7ou6t3s2y8s40804c8go04cg.png);
|
|
|
|
background-attachment:fixed;
|
|
background-size:cover;
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
z-index:-2;
|
|
display:none;
|
|
}
|
|
|
|
/* background gradient */
|
|
#loveislikeagradient {
|
|
position:fixed;
|
|
bottom:0;left:0;
|
|
width:100vw;
|
|
padding-top:var(--Background-Gradient-Height);
|
|
background-image:linear-gradient(to bottom, transparent, var(--Background-Gradient-Color));
|
|
z-index:-2;
|
|
}
|
|
|
|
/*-------- FRAME & CONTAINER --------*/
|
|
#horizontal-a {
|
|
position:fixed;
|
|
top:0;left:0;right:0;
|
|
margin:0 auto;
|
|
height:100vh;
|
|
text-align:center;
|
|
z-index:-1;
|
|
}
|
|
|
|
#horizontal-b {display:inline-block;}
|
|
|
|
#vertigo-a {
|
|
height:100vh;
|
|
display:table;
|
|
}
|
|
|
|
#vertigo-b {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
#frame {
|
|
margin-top:calc(var(--Bottom-Bar-Height) * -1);
|
|
border:var(--Frame-Thickness) solid rgba(var(--Frame-Color),var(--Frame-Opacity));
|
|
}
|
|
|
|
#main-cont {
|
|
padding:var(--Container-Padding);
|
|
background:rgba(var(--Container-BG),var(--Container-BG-Opacity));
|
|
display:flex;
|
|
}
|
|
|
|
/*---------- LEFT SIDEBAR ----------*/
|
|
#sidebar {
|
|
align-self:center;
|
|
width:var(--Sidebar-Width);
|
|
max-height:calc(87vh - var(--Bottom-Bar-Height) - (var(--Container-Padding) * 2) - (var(--Frame-Thickness) * 2));
|
|
overflow:hidden;
|
|
padding-top:var(--Sidebar-Image-Shadow-Size);
|
|
margin-top:calc(var(--Sidebar-Image-Shadow-Size) * -1);
|
|
}
|
|
|
|
.sb-image {
|
|
margin:2px 0;
|
|
width:var(--Sidebar-Image-Size);
|
|
height:var(--Sidebar-Image-Size);
|
|
border-radius:100%;
|
|
box-shadow:0 0 var(--Sidebar-Image-Shadow-Size) 0 var(--Sidebar-Image-Shadow-Color);
|
|
}
|
|
|
|
.sb-title {
|
|
margin-top:var(--Sidebar-Items-Spacing);
|
|
padding:var(--Sidebar-Title-Padding);
|
|
background:rgba(var(--Sidebar-Title-BG),var(--Sidebar-Title-BG-Opacity));
|
|
font-family:beaufort;
|
|
font-size:var(--Sidebar-Title-Font-Size);
|
|
font-weight:bold;
|
|
text-transform:uppercase;
|
|
letter-spacing:2px;
|
|
color:var(--Sidebar-Title-Color);
|
|
line-height:1.25em;
|
|
}
|
|
|
|
.stats {
|
|
margin-top:var(--Sidebar-Items-Spacing);
|
|
font-family:karla;
|
|
font-size:var(--Stats-Font-Size);
|
|
color:var(--Stats-Text);
|
|
line-height:1.6em;
|
|
}
|
|
|
|
.stats blockquote {
|
|
margin:10px;
|
|
padding-left:15px;
|
|
border-left:2px solid var(--Stats-Left-Border-Color);
|
|
text-align:left;
|
|
}
|
|
|
|
.stats blockquote:first-of-type {margin-top:0;}
|
|
.stats blockquote:last-of-type {margin-bottom:0;}
|
|
|
|
.customlinks {
|
|
margin-top:calc(var(--Sidebar-Items-Spacing) - var(--Custom-Links-Spacing));
|
|
margin-bottom:calc(var(--Custom-Links-Spacing) * -1);
|
|
margin-left:calc(var(--Custom-Links-Spacing) * -1);
|
|
width:calc(100% + (var(--Custom-Links-Spacing) * 2));
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.customlinks a {
|
|
margin:var(--Custom-Links-Spacing);
|
|
width:calc((100% / var(--Custom-Links-Per-Row)) - (var(--Custom-Links-Spacing) * 2));
|
|
box-sizing:border-box;
|
|
padding:var(--Custom-Links-Padding);
|
|
background:rgba(var(--Custom-Links-BG),var(--Custom-Links-BG-Opacity));
|
|
font-family:beaufort;
|
|
font-size:var(--Custom-Links-Font-Size);
|
|
font-weight:bold;
|
|
text-transform:uppercase;
|
|
letter-spacing:1.3px;
|
|
color:var(--Custom-Links-Color);
|
|
}
|
|
|
|
/*---------- RIGHT SIDE (main text) ----------*/
|
|
#text-cont {
|
|
margin:calc(var(--Container-Padding) * -1);
|
|
margin-left:var(--Gutter-Width);
|
|
padding:var(--Container-Padding);
|
|
padding-left:0;
|
|
width:var(--Main-Text-Width);
|
|
max-height:calc(87vh - var(--Bottom-Bar-Height) - (var(--Container-Padding) * 2) - (var(--Frame-Thickness) * 2));
|
|
overflow-y:auto;
|
|
font-family:karla;
|
|
font-size:var(--Main-Text-Font-Size);
|
|
color:var(--Main-Text-Color);
|
|
text-align:justify;
|
|
}
|
|
|
|
.txt::-webkit-scrollbar {
|
|
width:4px;
|
|
height:4px;
|
|
}
|
|
|
|
.txt::-webkit-scrollbar-thumb {
|
|
background-color:var(--Scrollbar-Thumb);
|
|
}
|
|
|
|
.txt::-webkit-scrollbar-track {
|
|
background-color:var(--Scrollbar-Track);
|
|
}
|
|
|
|
.quote {
|
|
font-family:beaufort;
|
|
font-size:var(--Quote-Font-Size);
|
|
font-weight:bold;
|
|
text-transform:uppercase;
|
|
letter-spacing:2px;
|
|
color:var(--Quote-Color);
|
|
text-align:right;
|
|
line-height:1.569em;
|
|
}
|
|
|
|
.txt blockquote {
|
|
margin:10px;
|
|
margin-left:0;
|
|
padding-right:15px;
|
|
border-right:2px solid var(--Main-Text-Blockquote-Border);
|
|
text-align:right;
|
|
}
|
|
|
|
/* bold text */
|
|
.txt b, .txt strong {
|
|
color:var(--Main-Text-Bold);
|
|
}
|
|
|
|
/* italicized text */
|
|
.txt i, .txt em {
|
|
color:var(--Main-Text-Italic);
|
|
}
|
|
|
|
/* links (if any) */
|
|
.txt a {
|
|
padding:3px 5px;
|
|
background:rgba(var(--Main-Text-Links-BG),var(--Main-Text-Links-BG-Opacity));
|
|
border-radius:2px;
|
|
border-bottom:2px solid rgba(var(--Main-Text-Links-BG),var(--Main-Text-Links-BG-Opacity));
|
|
font-size:calc(var(--Main-Text-Font-Size) - 2px);
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
color:var(--Main-Text-Links);
|
|
}
|
|
|
|
/* underlined words (if any) */
|
|
.txt u {
|
|
text-decoration:none;
|
|
padding-bottom:1px;
|
|
border-bottom:1px solid var(--Main-Text-Underline);
|
|
}
|
|
|
|
.txt p, .txt h1 {margin-bottom:0;}
|
|
|
|
/* heading(s) */
|
|
.txt h1, .txt h1 > a {
|
|
padding:var(--SubHeading-Padding);
|
|
background:rgba(var(--SubHeading-BG), var(--SubHeading-BG-Opacity));
|
|
font-family:beaufort;
|
|
font-weight:bold;
|
|
font-size:var(--SubHeading-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:2px;
|
|
color:var(--SubHeading-Text);
|
|
text-align:center;
|
|
}
|
|
|
|
.rm_pd {padding:0px!important;}
|
|
|
|
.txt h1 > a {
|
|
display:block;
|
|
color:var(--SubHeading-Link);
|
|
}
|
|
|
|
/*---------- BOTTOM BAR ----------*/
|
|
#botbar {
|
|
position:fixed;
|
|
bottom:0;left:0;
|
|
width:100%;
|
|
height:var(--Bottom-Bar-Height);
|
|
background:var(--Bottom-Bar-BG);
|
|
background-image:url(https://rhizo.gitlab.io/random/images/Ky8nj56.png);
|
|
background-repeat:repeat;
|
|
background-position:center;
|
|
z-index:69;
|
|
}
|
|
|
|
/*---------- MUSIC PLAYER ----------*/
|
|
#ban-pyke-in-aram {
|
|
position:fixed;
|
|
bottom:0;
|
|
left:0;margin-left:var(--Bottom-Bar-Side-Margins);
|
|
height:var(--Bottom-Bar-Height);
|
|
display:table;
|
|
z-index:70;
|
|
}
|
|
|
|
#i-mean-it {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
/* music player skin by vitanica */
|
|
#musicplayer {
|
|
display:flex;
|
|
-webkit-transition:all .7s ease;
|
|
-moz-transition:all .7s ease;
|
|
-o-transition:all .7s ease;
|
|
transition:all .7s ease;
|
|
}
|
|
|
|
#musicplayer > *, .play > * {align-self:center;-webkit-align-self:center}
|
|
|
|
.roundthing {
|
|
width:31px;
|
|
height:31px;
|
|
border-radius:100%;
|
|
background:var(--Music-Player-Color); /* icon background */
|
|
}
|
|
|
|
.roundthing img {
|
|
margin:8px;
|
|
width:15px;
|
|
}
|
|
|
|
.midline {
|
|
width:0px;
|
|
height:3px;
|
|
background:var(--Music-Player-Color);
|
|
-webkit-transition:all .4s ease;
|
|
-moz-transition:all .4s ease;
|
|
-o-transition:all .4s ease;
|
|
transition-delay: .9s;
|
|
-webkit-transition-delay: .9s;
|
|
}
|
|
|
|
#musicplayer:hover .midline {
|
|
width:20px;
|
|
transition-delay:0s;
|
|
-webkit-transition-delay:0s;
|
|
}
|
|
|
|
.play {
|
|
display:flex;
|
|
height:31px;
|
|
text-align: left;
|
|
padding:0px 8px;
|
|
background: var(--Music-Player-BG); /* player background */
|
|
border-left: 3px solid var(--Music-Player-Color); /* player border */
|
|
color:var(--Music-Player-Text);
|
|
opacity: 0;
|
|
-webkit-transition: all .4s ease;
|
|
-moz-transition: all .4s ease;
|
|
-o-transition: all .4s ease;
|
|
transition-delay: .4s;
|
|
-webkit-transition-delay: .4s;
|
|
}
|
|
|
|
.music-controls, .music-controls > * {
|
|
user-select:none;
|
|
-webkit-user-select:none;
|
|
width:11px;
|
|
font-size:11px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.pausee {display:none;}
|
|
|
|
.playtext {
|
|
margin-left:8px;
|
|
font-family:courier new;
|
|
font-size:9px;
|
|
}
|
|
|
|
#musicplayer:hover .play {
|
|
opacity:1;
|
|
transition-delay: .6s;
|
|
-webkit-transition-delay: .6s;
|
|
}
|
|
|
|
/*---------- BOTTOM CENTER TEXTBOX ----------*/
|
|
#botshit {
|
|
position:fixed;
|
|
margin:0 auto;
|
|
bottom:0;left:0;right:0;
|
|
width:var(--Bottom-TextBox-Width);
|
|
z-index:70;
|
|
}
|
|
|
|
#tryangel {
|
|
width:0;height:0;
|
|
border-left:calc(var(--Bottom-TextBox-Width) / 2) solid transparent;
|
|
border-right:calc(var(--Bottom-TextBox-Width) / 2) solid transparent;
|
|
border-bottom:calc(var(--Bottom-Bar-Height) * 0.45) solid var(--Bottom-TextBox-BG);
|
|
}
|
|
|
|
#botpanel {
|
|
width:100%;
|
|
height:calc(var(--Bottom-Bar-Height) * 1.2);
|
|
background:var(--Bottom-TextBox-BG);
|
|
}
|
|
|
|
#bt-holder {
|
|
position:fixed;
|
|
margin:0 auto;
|
|
bottom:0;left:0;right:0;
|
|
margin-bottom:var(--Bottom-TextBox-Padding);
|
|
width:calc(var(--Bottom-TextBox-Width) - (var(--Bottom-TextBox-Padding) * 2));
|
|
height:calc(((var(--Bottom-Bar-Height) * 1.2) + (var(--Bottom-Bar-Height) * 0.45)) - (var(--Bottom-TextBox-Padding) * 2));
|
|
display:table;
|
|
z-index:420;
|
|
}
|
|
|
|
#ban-yasuo {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
text-align:center;
|
|
}
|
|
|
|
#ban-yasuo > * {
|
|
line-height:1.6em;
|
|
}
|
|
|
|
.lnr {
|
|
font-size:var(--Moon-Icon-Size);
|
|
color:var(--Moon-Icon-Color);
|
|
}
|
|
|
|
.bigname {
|
|
margin-top:calc(var(--Bottom-Text-Spacing) * 1.4);
|
|
font-family:beaufort;
|
|
font-size:var(--Bottom-Title-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:3px;
|
|
color:var(--Bottom-Title-Color);
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top:var(--Bottom-Text-Spacing);
|
|
margin-bottom:calc(var(--Bottom-Text-Spacing) * -1);
|
|
font-family:beaufort;
|
|
font-size:var(--Bottom-Subtitle-Font-Size);
|
|
letter-spacing:0.5px;
|
|
color:var(--Bottom-Subtitle-Color);
|
|
}
|
|
|
|
/*---------- CREDIT ----------*/
|
|
#what-is-a-skeletons-favorite-snack {
|
|
position:fixed;
|
|
bottom:0;
|
|
right:0;margin-right:var(--Bottom-Bar-Side-Margins);
|
|
height:var(--Bottom-Bar-Height);
|
|
display:table;
|
|
z-index:70;
|
|
}
|
|
|
|
#ribs_spare-ribs {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.instalock-ap-lucian {
|
|
padding:5px 8px;
|
|
background:var(--Credit-BG);
|
|
font-family:karla;
|
|
font-size:calc(var(--Main-Text-Font-Size) - 3.5px);
|
|
text-transform:uppercase;
|
|
letter-spacing:1.5px;
|
|
color:var(--Credit-Text);
|
|
line-height:1em;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!------- BACKGROUND IMAGE ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
|
|
<!--
|
|
only the fade option is set here.
|
|
to change the image, scroll back up & find this guy: 🦀🦀🦀🦀🦀🦀
|
|
|
|
currently, the background image fades in once it is loaded.
|
|
to turn off this option, change "yes" to "no" below:
|
|
-->
|
|
<div id="background" fade-in="yes"></div>
|
|
|
|
|
|
<!------ GRADIENT ------>
|
|
<div id="loveislikeagradient"></div>
|
|
|
|
|
|
<!------ FRAME & CONTAINER ------>
|
|
<div id="horizontal-a">
|
|
<div id="horizontal-b">
|
|
<div id="vertigo-a">
|
|
<div id="vertigo-b">
|
|
<div id="frame">
|
|
<div id="main-cont">
|
|
|
|
<!------ LEFT SIDEBAR ------>
|
|
<div id="sidebar">
|
|
|
|
<!------- SIDEBAR IMAGE ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
<!--
|
|
to change the image, put the image url between the
|
|
quotation marks of src=""
|
|
-->
|
|
<a href="/" title="return home">
|
|
<img class="sb-image" src="https://rhizo.gitlab.io/random/images/WvFi8aC.png">
|
|
</a>
|
|
|
|
|
|
<!------- SIDEBAR TITLE ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
|
|
<div class="sb-title">about me</div>
|
|
|
|
|
|
|
|
<!------- SIDEBAR STATS (BLOCKQUOTES) ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
|
|
<div class="stats">
|
|
<blockquote>
|
|
<b>Q:</b> Moonsilver Blade
|
|
</blockquote>
|
|
|
|
<blockquote>
|
|
<b>W:</b> Pale Cascade
|
|
</blockquote>
|
|
|
|
<blockquote>
|
|
<b>E:</b> Lunar Rush
|
|
</blockquote>
|
|
|
|
<blockquote>
|
|
<b>R:</b> Moonfall
|
|
</blockquote>
|
|
|
|
</div><!--end stats-->
|
|
|
|
|
|
|
|
<!------ CUSTOM LINKS ------>
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
|
|
<!--
|
|
put the url between the quotation marks of href=""
|
|
feel free to add/delete as many as you like
|
|
|
|
if (e.g.) your link names are too long to fit
|
|
into 2 per row, you can change them to 1 per row.
|
|
search for: /* works best with 1 or 2 */
|
|
-->
|
|
<div class="customlinks">
|
|
|
|
<a href="/">return</a>
|
|
<a href="/ask">message</a>
|
|
<a href="">link</a>
|
|
<a href="">link</a>
|
|
<a href="">link</a>
|
|
<a href="">link</a>
|
|
<a href="">link</a>
|
|
<a href="">link</a>
|
|
|
|
</div><!--customlinks-->
|
|
</div><!--sidebar-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!------ MAIN TEXT (RIGHTSIDE) ------>
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
|
|
<div id="text-cont" rightside class="txt">
|
|
|
|
<div class="quote">
|
|
"Here is the quote.
|
|
<br>
|
|
Have a nice day
|
|
</div><!--end quote-->
|
|
|
|
<blockquote>
|
|
<b>Alias:</b> Scorn of the Moon
|
|
</blockquote>
|
|
|
|
<blockquote>
|
|
<b>Region:</b> Mount Targon
|
|
</blockquote>
|
|
|
|
<blockquote>
|
|
<b>Role:</b> Fighter
|
|
</blockquote>
|
|
|
|
|
|
|
|
Here is where your main about text goes.
|
|
<br>
|
|
A scrollbar will appear if you have too much text.
|
|
|
|
<p>
|
|
|
|
<b>bold</b> | <i>italic</i> | <u>underline</u>
|
|
|
|
<p>
|
|
|
|
<a href="//google.com">sample link</a>
|
|
|
|
<h1>Here is a normal heading.</h1>
|
|
|
|
<h1>
|
|
<a href="//google.com">Here is a heading that links to something.</a>
|
|
</h1>
|
|
</div><!--end rightside-->
|
|
</div><!--main-cont-->
|
|
</div><!--frame-->
|
|
</div><!--vertigo-b-->
|
|
</div><!--vertigo-a-->
|
|
</div><!--horizontal-b-->
|
|
</div><!--horizontal-a-->
|
|
|
|
|
|
<!------ BOTTOM BAR ------>
|
|
<div id="botbar"></div>
|
|
|
|
<!------ MUSIC PLAYER ------>
|
|
<div id="ban-pyke-in-aram">
|
|
<div id="i-mean-it">
|
|
<div id="musicplayer">
|
|
<div class="roundthing">
|
|
<!--more music player gifs here:-->
|
|
<!--stewlate.tumblr.com/post/28218185078/music-player-gifs-->
|
|
<img src="//68.media.tumblr.com/tumblr_m7w2o3N94I1r6o8v2.gif"></div>
|
|
<div class="midline"></div>
|
|
<div class="play">
|
|
<div class="music-controls">
|
|
<div class="playy">►</div>
|
|
<div class="pausee">❚❚</div>
|
|
</div>
|
|
|
|
<!------- MUSIC TRACK NAME ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
|
|
<div class="playtext">Blood Moon Diana Theme</div>
|
|
|
|
</div><!--play--><!--do not delete this line-->
|
|
|
|
|
|
<!------- MUSIC LINK ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
<!--
|
|
to change the music, you can upload songs from your computer
|
|
and grab the link. here are a few ways you can do it:
|
|
|
|
linktr.ee/direct_file_links
|
|
|
|
insert your music link between the quotation marks of src=""
|
|
-->
|
|
|
|
<audio id="tune" src="https://rhizo.gitlab.io/m/Blood_Moon_Diana.mp3" type="audio"></audio>
|
|
|
|
</div><!--musicplayer-->
|
|
</div><!--i-mean-it-->
|
|
</div><!--ban-pyke-in-aram-->
|
|
<!--end music player-->
|
|
|
|
|
|
<div id="botshit">
|
|
<div id="tryangel"></div>
|
|
<div id="botpanel"></div>
|
|
</div>
|
|
|
|
|
|
|
|
<!------ BOTTOM CENTER TEXTBOX ------>
|
|
|
|
<div id="bt-holder">
|
|
<div id="ban-yasuo">
|
|
|
|
<!------- MOON ICON ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
<!--
|
|
you can change the icon, but there are only a certain selection
|
|
of icons that you can choose from.
|
|
|
|
instructions:
|
|
1. go to this site: //linearicons.com/free
|
|
2. pick an icon you like; copy the name
|
|
3. below, replace lnr-moon with the name you just copied
|
|
-->
|
|
<span class="lnr lnr-moon"></span>
|
|
|
|
|
|
|
|
<!------- BIG TITLE (BOTTOM) ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
|
|
<div class="bigname">diana</div>
|
|
|
|
|
|
|
|
<!------- SUBTITLE / SMALL TEXT (VERY BOTTOM) ------->
|
|
<!-- 🌙🌙🌙🌙🌙🌙🌙 -->
|
|
|
|
<div class="subtitle">
|
|
Looks best with 2 lines.
|
|
<br>
|
|
I love you
|
|
</div><!--end subtitle-->
|
|
|
|
</div><!--ban-yasuo-->
|
|
</div><!--bt-holder-->
|
|
|
|
|
|
<!------ CREDIT ------>
|
|
<!-- pls do not delete the credit! thank you *\^o^)/ -->
|
|
<div id="what-is-a-skeletons-favorite-snack">
|
|
<div id="ribs_spare-ribs">
|
|
<a class="instalock-ap-lucian" href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
|
|
</div><!--do not delete this line-->
|
|
</div><!--do not delete this line-->
|
|
|
|
</body>
|
|
|
|
</html>
|