698 lines
17 KiB
Plaintext
698 lines
17 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
About Page [16]: Ephemeral
|
|
Made by glenthemes
|
|
|
|
Initial release: 2020/03/30
|
|
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.
|
|
|
|
Customization pointers:
|
|
🥡🥡🥡🥡🥡🥡🥡 = places to edit
|
|
🐙🐙🐙🐙🐙🐙🐙 = start of a section || start copy
|
|
🛑🛑🛑🛑🛑🛑🛑 = end of a section || end copy
|
|
------------------------------------------------------------------------>
|
|
|
|
<!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:50,
|
|
tip_fade_speed:0,
|
|
attribute:"title"
|
|
});
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Sen|Gotu|Libre+Franklin:300|Josefin+Sans:100|ABeeZee|Material+Icons" rel="stylesheet">
|
|
|
|
<script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
|
|
|
|
<script src="//glenthemes.github.io/-music-/glenplayer07.js"></script>
|
|
|
|
<!-------------------------------------------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
/*--------------------TOOLTIPS--------------------*/
|
|
#s-m-t-tooltip {
|
|
padding:5px 10px;
|
|
margin:14px;
|
|
background-color:var(--Tooltips-BG);
|
|
border-radius:2px;
|
|
font-family:sen;
|
|
font-size:9px;
|
|
text-transform:uppercase;
|
|
letter-spacing:.5px;
|
|
color:var(--Tooltips-Text);
|
|
z-index:99;
|
|
max-width:40vw;
|
|
}
|
|
|
|
/*--------------------TUMBLR CONTROLS--------------------*/
|
|
iframe#tumblr_controls, .iframe-controls--desktop {
|
|
top:7px!important;
|
|
right:7px!important;
|
|
position:fixed!important;
|
|
|
|
transform:scale(0.7,0.7);
|
|
-webkit-transform:scale(0.7,0.7);
|
|
-moz-transform:scale(0.7,0.7);
|
|
-o-transform:scale(0.7,0.7);
|
|
-ms-transform:scale(0.7,0.7);
|
|
|
|
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(--BG-On-Highlight);
|
|
color:var(--Text-On-Highlight);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:var(--BG-On-Highlight);
|
|
color:var(--Text-On-Highlight);
|
|
}
|
|
|
|
/*--------------------BASICS--------------------*/
|
|
body {
|
|
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[title]:not([href]):hover {cursor:help;}
|
|
|
|
b, strong {
|
|
font-weight:bold;
|
|
}
|
|
|
|
pre, code {
|
|
white-space:pre-wrap;
|
|
display:block;
|
|
}
|
|
|
|
img {vertical-align:middle;}
|
|
audio {display:none;}
|
|
|
|
#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;
|
|
}
|
|
|
|
#vertical-a {
|
|
height:100vh;
|
|
display:table;
|
|
}
|
|
|
|
#vertical-b {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
#thesearenotmymusclesbutiwillflexit {
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
|
|
/*--------------CUSTOMIZATION OPTIONS--------------*/
|
|
:root {
|
|
--Sidebar-Image:url(//66.media.tumblr.com/8b89bca23eb4dd95ceec83feb8627ccd/6b6c8d10fd033f1f-fd/s400x600/90c44930abedb723fc8ce4fd5c506009c4b18936.png);
|
|
/* do not remove the brackets or semicolon */
|
|
--Sidebar-Image-Width:100px;
|
|
--Sidebar-Image-Height:110px;
|
|
--Sidebar-Image-Background-Color:#8b8b8b;
|
|
--Sidebar-Image-Border-Size:4px;
|
|
--Sidebar-Image-Border-Color:#fffffd;
|
|
--Sidebar-Image-Bottom-Gap:21px;
|
|
|
|
--SB-Links-Symbol-Size:9px;
|
|
--SB-Links-Symbol-Background:#1d1d1d;
|
|
--SB-Links-Symbol-Padding:6px;
|
|
--SB-Links-Symbol:#ccc;
|
|
--SB-Links-Symbol-Right-Gap:11px;
|
|
--SB-Links-Font-Size:9px;
|
|
--SB-Links-Text-Color:#ccc;
|
|
|
|
--SB-Links-Symbol-Background-On-Hover:#dec171;
|
|
--SB-Links-Symbol-On-Hover:#000;
|
|
--SB-Links-Text-On-Hover:#dec171;
|
|
--SB-Links-Spacing:12px;
|
|
|
|
--Sidebar-Right-Margin:50px;
|
|
|
|
--Main-Title-Font-Size:18px;
|
|
--Main-Title-Color:#bbb;
|
|
|
|
--Main-Text-Top-Gap:17px;
|
|
--Main-Text-Width:300px;
|
|
--Main-Text-Line-Height:1.8em;
|
|
--Main-Text-Bottom-Gap:17px;
|
|
|
|
--Main-Text-Color:#a5a5a5;
|
|
--Main-Text-Font-Size:12px;
|
|
--Main-Text-Links:#dec171; /* if any */
|
|
|
|
--Info-Bullets-Size:4px;
|
|
--Info-Bullets:#dec171;
|
|
--Info-Bullets-Glow:#ffe6a2;
|
|
--Info-Bullets-Spacing:10px;
|
|
--Info-Bullets-Label:#dec171;
|
|
--Info-Bullets-Label-Font-Size:9px;
|
|
--Info-Bullets-Label-Right-Gap:4px;
|
|
|
|
--Brackets-Top-Gap:19px;
|
|
--Brackets-Size:64px;
|
|
--Brackets-Color:#636363;
|
|
--Brackets-Text:#696969;
|
|
--Brackets-Text-Margin:12px;
|
|
|
|
--BG-On-Highlight:#ffe6a2;
|
|
--Text-On-Highlight:#fff;
|
|
|
|
--Tooltips-BG:#1d1d1d;
|
|
--Tooltips-Text:#ccc;
|
|
|
|
--Credit-Color:#999;
|
|
--Credit-Color-On-Hover:#dec171;
|
|
|
|
/*---- MUSIC PLAYER ----*/
|
|
--Circle-Size:32px;
|
|
--Progress-Border-Size:1.5px;
|
|
--Progress-Empty:#090909;
|
|
--Progress-Fill:#dec171;
|
|
--Player-Background:#1d1d1d;
|
|
--Play-Pause-Buttons-Size:12px;
|
|
--Play-Pause-Buttons-Color:#dec171;
|
|
--Player-Text-Margin:13px;
|
|
|
|
--Song-Name-Font-Size:8.5px;
|
|
--Song-Name-Color:#dec171;
|
|
|
|
--Artist-Name-Font-Size:9.5px;
|
|
--Artist-Name-Color:#bbb;
|
|
}
|
|
|
|
body {
|
|
background:#090909 url(''); /* background color & image, if u want one */
|
|
background-attachment:fixed;
|
|
background-repeat:repeat;
|
|
}
|
|
|
|
.sb {
|
|
width:calc(var(--Sidebar-Image-Width) + (var(--Sidebar-Image-Border-Size) * 2));
|
|
}
|
|
|
|
.sb-frame {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:calc(var(--Sidebar-Image-Width) + (var(--Sidebar-Image-Border-Size) * 2));
|
|
height:calc(var(--Sidebar-Image-Height) + (var(--Sidebar-Image-Border-Size) * 2));
|
|
background:var(--Sidebar-Image-Border-Color);
|
|
clip-path:polygon(7% 0, 0 89%, 37% 86%, 38% 100%, 52% 86%, 94% 82%, 100% 6%);
|
|
}
|
|
|
|
.sb-ico {
|
|
width:var(--Sidebar-Image-Width);
|
|
height:var(--Sidebar-Image-Height);
|
|
background-color:var(--Sidebar-Image-Background-Color);
|
|
background-image:var(--Sidebar-Image);
|
|
background-size:cover;
|
|
background-position:center;
|
|
clip-path:polygon(7% 0, 0 89%, 37% 86%, 38% 100%, 52% 86%, 94% 82%, 100% 6%);
|
|
}
|
|
|
|
.sb-links {
|
|
margin-top:var(--Sidebar-Image-Bottom-Gap);
|
|
}
|
|
|
|
.one-link {
|
|
display:flex;
|
|
align-items:center;
|
|
padding-bottom:var(--SB-Links-Spacing);
|
|
}
|
|
|
|
.one-link:last-of-type {
|
|
padding-bottom:0;
|
|
}
|
|
|
|
.one-link svg {
|
|
margin-right:var(--SB-Links-Symbol-Right-Gap);
|
|
width:var(--SB-Links-Symbol-Size);
|
|
height:var(--SB-Links-Symbol-Size);
|
|
background:var(--SB-Links-Symbol-Background);
|
|
padding:var(--SB-Links-Symbol-Padding);
|
|
border-radius:3px;
|
|
color:var(--SB-Links-Symbol);
|
|
}
|
|
|
|
.one-link:hover svg {
|
|
background:var(--SB-Links-Symbol-Background-On-Hover);
|
|
color:var(--SB-Links-Symbol-On-Hover);
|
|
}
|
|
|
|
.one-link span {
|
|
font-family:sen;
|
|
font-size:var(--SB-Links-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:.5px;
|
|
color:var(--SB-Links-Text-Color);
|
|
}
|
|
|
|
.one-link:hover span {
|
|
color:var(--SB-Links-Text-On-Hover);
|
|
}
|
|
|
|
/*-------MAIN CONTENT [RIGHT]-------*/
|
|
.maaain {
|
|
margin-left:var(--Sidebar-Right-Margin);
|
|
width:var(--Main-Text-Width);
|
|
font-family:sen;
|
|
font-size:var(--Main-Text-Font-Size);
|
|
color:var(--Main-Text-Color);
|
|
text-align:left;
|
|
line-height:var(--Main-Text-Line-Height);
|
|
}
|
|
|
|
.maaain a {
|
|
color:var(--Main-Text-Links);
|
|
}
|
|
|
|
.main-title {
|
|
margin-bottom:var(--Main-Title-Bottom-Gap);
|
|
font-family:gotu;
|
|
font-size:var(--Main-Title-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:.5px;
|
|
color:var(--Main-Title-Color);
|
|
}
|
|
|
|
.about-text {
|
|
margin-top:var(--Main-Text-Top-Gap);
|
|
}
|
|
|
|
.bullets {
|
|
margin-top:var(--Main-Text-Bottom-Gap);
|
|
margin-left:calc(var(--Info-Bullets-Size) + (var(--Info-Bullets-Spacing) * 2));
|
|
}
|
|
|
|
.bullets li {
|
|
position:relative;
|
|
display:flex;
|
|
align-items:center;
|
|
list-style-type:none;
|
|
}
|
|
|
|
.bullets li:before {
|
|
content:"";
|
|
position:absolute;
|
|
display:flex;
|
|
margin-left:calc((var(--Info-Bullets-Size) + var(--Info-Bullets-Spacing)) * -1);
|
|
width:var(--Info-Bullets-Size);
|
|
height:var(--Info-Bullets-Size);
|
|
background:var(--Info-Bullets);
|
|
box-shadow:0px 0px 3px var(--Info-Bullets-Glow);
|
|
border-radius:100%;
|
|
}
|
|
|
|
.bullets label {
|
|
margin-right:var(--Info-Bullets-Label-Right-Gap);
|
|
font-size:var(--Info-Bullets-Label-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:.5px;
|
|
color:var(--Info-Bullets-Label);
|
|
}
|
|
|
|
.bullets span {
|
|
margin-top:-1px;
|
|
}
|
|
|
|
.in-brackets {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
margin-top:var(--Brackets-Top-Gap);
|
|
}
|
|
|
|
.brck {
|
|
margin-bottom:-8px;
|
|
font-family:josefin sans;
|
|
font-size:var(--Brackets-Size);
|
|
color:var(--Brackets-Color);
|
|
line-height:1em;
|
|
user-select:none;
|
|
}
|
|
|
|
.brackets-text {
|
|
padding:0 var(--Brackets-Text-Margin);
|
|
font-style:italic;
|
|
color:var(--Brackets-Text);
|
|
}
|
|
|
|
/*-------MUSIC PLAYER-------*/
|
|
#glenplayer07 {
|
|
position:fixed;
|
|
bottom:0;margin-bottom:30px;
|
|
left:0;margin-left:30px;
|
|
z-index:99;
|
|
}
|
|
|
|
.flamingo {
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
|
|
.circleofdeath {
|
|
width:var(--Circle-Size);
|
|
height:var(--Circle-Size);
|
|
border-radius:100%;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.tinfoil {
|
|
width:var(--Circle-Size);
|
|
height:var(--Circle-Size);
|
|
background:var(--Progress-Empty);
|
|
border-radius:100%;
|
|
}
|
|
|
|
.oven {
|
|
background:var(--Progress-Fill);
|
|
}
|
|
|
|
.oliveoil {
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
.crust {
|
|
position:absolute;
|
|
top:0;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:var(--Circle-Size);
|
|
height:var(--Circle-Size);
|
|
}
|
|
|
|
.cherry {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
|
|
height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
|
|
background:var(--Player-Background);
|
|
border-radius:100%;
|
|
cursor:pointer;
|
|
z-index:1;
|
|
}
|
|
|
|
.music-controls {display:flex;align-items:center}
|
|
|
|
.music-controls .material-icons {
|
|
font-size:var(--Play-Pause-Buttons-Size);
|
|
color:var(--Play-Pause-Buttons-Color);
|
|
}
|
|
|
|
.pausee {display:none;}
|
|
|
|
.beff {display:none;}
|
|
.aff {display:block;}
|
|
|
|
.music-info {
|
|
margin-left:var(--Player-Text-Margin);
|
|
line-height:1em;
|
|
}
|
|
|
|
.song-name {
|
|
font-family:ABeeZee;
|
|
font-size:var(--Song-Name-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:1.5px;
|
|
color:var(--Song-Name-Color);
|
|
}
|
|
|
|
.artist-name {
|
|
margin-top:3px;
|
|
font-family:sen;
|
|
font-size:var(--Artist-Name-Font-Size);
|
|
letter-spacing:0.3px;
|
|
color:var(--Artist-Name-Color);
|
|
}
|
|
|
|
.glenjamin {
|
|
position:fixed;
|
|
bottom:0;padding-bottom:21px;
|
|
right:0;padding-right:21px;
|
|
}
|
|
|
|
.glenjamin svg {
|
|
width:11px;
|
|
height:11px;
|
|
color:var(--Credit-Color);
|
|
}
|
|
|
|
.glenjamin:hover svg {color:var(--Credit-Color-On-Hover);}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a class="glenjamin" href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
|
|
|
|
<!-------MUSIC PLAYER------->
|
|
<div id="glenplayer07">
|
|
<div class="flamingo">
|
|
<div class="circleofdeath">
|
|
<div class="tinfoil">
|
|
<div class="oliveoil"></div>
|
|
</div>
|
|
<div class="crust">
|
|
<div class="cherry">
|
|
<div class="music-controls">
|
|
<i class="material-icons playy">play_arrow</i>
|
|
<i class="material-icons pausee">pause</i>
|
|
</div>
|
|
</div><!--cherry-->
|
|
</div><!--crust-->
|
|
</div><!--circleofdeath-->
|
|
|
|
<div class="music-info">
|
|
|
|
|
|
|
|
<!------ MUSIC TITLE & ARTIST NAME ------->
|
|
<!--🥡🥡🥡🥡🥡🥡🥡-->
|
|
|
|
<div class="song-name">Headspace</div>
|
|
<div class="artist-name">Corentin Brasart</div>
|
|
|
|
|
|
|
|
</div><!--music-info-->
|
|
</div><!--flamingo-->
|
|
</div><!--glenplayer07-->
|
|
|
|
|
|
<!------- MUSIC URL ------->
|
|
<!-- to obtain a working audio, link:
|
|
linktr.ee/direct_file_links
|
|
-->
|
|
<audio id="audio" src="https://cdn.discordapp.com/attachments/900670626774265886/900755703424225331/Headspace.mp3" type="audio"></audio>
|
|
<!----end music player---->
|
|
|
|
<div id="horizontal-a">
|
|
<div id="horizontal-b">
|
|
<div id="vertical-a">
|
|
<div id="vertical-b">
|
|
<div id="thesearenotmymusclesbutiwillflexit">
|
|
<div class="sb">
|
|
<div class="sb-frame">
|
|
<!---- SIDEBAR ICON - not edited here ---->
|
|
<!-- look for :root -->
|
|
<div class="sb-ico"></div>
|
|
</div>
|
|
|
|
<div class="sb-links">
|
|
|
|
|
|
<!------- SIDEBAR LINKS ------->
|
|
<!-- 🥡🥡🥡🥡🥡🥡🥡 -->
|
|
|
|
<!-- to change the symbol, go to this website:
|
|
|
|
//feathericons.com
|
|
|
|
COPY the symbol name, DO NOT click it
|
|
(if you click it, it will download the svg)
|
|
|
|
type out the name between
|
|
the quotation marks of data-feather=""
|
|
-->
|
|
|
|
<!---------------------->
|
|
<!-- 🐙🐙🐙🐙🐙🐙🐙-->
|
|
<!---- ONE SIDEBAR LINK ---->
|
|
<a class="one-link" href="/">
|
|
<i data-feather="home"></i>
|
|
<span>index</span>
|
|
</a>
|
|
<!-- 🛑🛑🛑🛑🛑🛑🛑 -->
|
|
<!---------------------->
|
|
|
|
|
|
|
|
<!---------------------->
|
|
<!-- 🐙🐙🐙🐙🐙🐙🐙-->
|
|
<!---- ONE SIDEBAR LINK ---->
|
|
<a class="one-link" href="/">
|
|
<i data-feather="send"></i>
|
|
<span>message</span>
|
|
</a>
|
|
<!-- 🛑🛑🛑🛑🛑🛑🛑 -->
|
|
<!---------------------->
|
|
|
|
|
|
|
|
</div><!--end sb links-->
|
|
</div><!--end sidebar-->
|
|
|
|
<div class="maaain">
|
|
|
|
|
|
<!------- MAIN TITLE ------->
|
|
<!-- 🥡🥡🥡🥡🥡🥡🥡 -->
|
|
|
|
<div class="main-title">your name here</div>
|
|
|
|
|
|
|
|
|
|
<!------- A PARAGRAPH ------->
|
|
<!-- 🥡🥡🥡🥡🥡🥡🥡 -->
|
|
|
|
<div class="about-text">
|
|
|
|
some stuff about you
|
|
|
|
</div><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
<!------- BULLET POINTS ------->
|
|
<!-- 🥡🥡🥡🥡🥡🥡🥡 -->
|
|
|
|
<div class="bullets">
|
|
|
|
<!---------------------->
|
|
<!-- 🐙🐙🐙🐙🐙🐙🐙 -->
|
|
<!---- one bullet line ---->
|
|
<li>
|
|
<label>label:</label>
|
|
<span>detail</span>
|
|
</li>
|
|
<!-- 🛑🛑🛑🛑🛑🛑🛑 -->
|
|
<!---------------------->
|
|
|
|
|
|
<!---------------------->
|
|
<!-- 🐙🐙🐙🐙🐙🐙🐙 -->
|
|
<!---- one bullet line ---->
|
|
<li>
|
|
<label>label:</label>
|
|
<span>detail</span>
|
|
</li>
|
|
<!-- 🛑🛑🛑🛑🛑🛑🛑 -->
|
|
<!---------------------->
|
|
|
|
|
|
<!---------------------->
|
|
<!-- 🐙🐙🐙🐙🐙🐙🐙 -->
|
|
<!---- one bullet line ---->
|
|
<li>
|
|
<label>label:</label>
|
|
<span>detail</span>
|
|
</li>
|
|
<!-- 🛑🛑🛑🛑🛑🛑🛑 -->
|
|
<!---------------------->
|
|
|
|
</div><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
<div class="in-brackets">
|
|
<div class="brck">(</div>
|
|
|
|
|
|
<!------- SOME TEXT IN BRACKETS ------->
|
|
<!-- 🥡🥡🥡🥡🥡🥡🥡 -->
|
|
|
|
<div class="brackets-text">She lets out a silvery laugh. It's very soothing in tone, the laugh of someone you can trust.</div>
|
|
|
|
|
|
|
|
<div class="brck">)</div>
|
|
</div>
|
|
</div><!--end main-->
|
|
</div><!--end mainflex-->
|
|
</div><!---->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>feather.replace()</script>
|
|
</body>
|
|
</html> |