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

698 lines
17 KiB
Plaintext
Raw Permalink Blame History

<!-----------------------------------------------------------------------
About Page [16]: Ephemeral
Made by glenthemes
Initial release: 2020/03/30
Last updated: 2022/09/13
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://rhizo.gitlab.io/m/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>
Reference in New Issue View Git Blame Copy Permalink