glenthemes/pages
glenthemes
/
pages
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

₊⁺✿˚

This commit is contained in:
HT 2022-07-22 04:19:05 +01:00
parent 8b13312e0c
commit 235b9a70e9
1 changed files with 861 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

861
about-pages/17-Love-Letter Normal file
View File

@ -0,0 +1,861 @@
<!-----------------------------------------------------------------------
About Page [17]: Love Letter
Made by glenthemes
Initial release: 2020/05/07
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
------------------------------------------------------------------------>
<!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=Work+Sans|Handlee|Barlow|DM+Sans|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:20px;
background-color:var(--Container-Background);
border:1px solid var(--Container-Border);
border-radius:2px;
font-family:work sans;
font-size:9px;
letter-spacing:0.5px;
text-transform:uppercase;
color:var(--Main-Text);
z-index:99;
max-width:40vw;
}
/*--------------------TUMBLR CONTROLS--------------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:calc(var(--Window-Margin) - 5px)!important;
right:calc(var(--Window-Margin) - 5px)!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 {
color:var(--Text-Highlight);
}
::-moz-selection {
color:var(--Text-Highlight);
}
/*--------------------BASICS--------------------*/
body {
line-height:1.6em;
font-size:12px;
text-align:left;
}
a, .bache span {
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;
}
pre, code {white-space:pre-wrap;}
img {vertical-align:middle;}
/*----------- CUSTOMIZATION OPTIONS -----------*/
/*--🌹🌹🌹🌹🌹🌹🌹--*/
body { /* BACKGROUND ASSETS */
background:#000 url('//cdn.discordapp.com/attachments/382037367940448256/708029140288274592/zzzz.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
/* COLORS, SIZES, GAPS, ETC */
/*--🌹🌹🌹🌹🌹🌹🌹--*/
:root {
/*------ CONTAINER/BOX ------*/
--Container-Width:520px;
--Container-Background:#121212;
--Container-Border-Size:2px;
--Container-Border:#413e4a;
--Container-Shadow-Color:0,0,0; /* RGB value */
--Container-Shadow-Size:69px;
--Container-Shadow-Opacity:0.69;
--Container-Frame-Padding:25px; /* outer padding */
--Container-Inner-Padding:10px;
/*------ TOP LEFT TEXT ------*/
--Intro-Text-Label-Font-Size:11px;
--Intro-Text-Label:#b74760;
--Intro-Text-Detail-Font-Size:12px;
--Intro-Text-Detail:#8a8892;
--Intro-Text-Bottom-Border-Size:1px;
--Intro-Text-Bottom-Border:#413e4a;
/*------ CORNER ICON / AVATAR ------*/
--Icon-Size:42px;
--Icon-Padding:9px;
/*------ POSTMARK WAVES ------*/
--Squiggles-Size:48px;
--Squiggles-Thickness:1px;
--Squiggles:#413e4a;
--Squiggles-Spacing:12px;
--Squiggles-Right-Margin:11px;
/*------ MAIN ABOUT TEXT ------*/
--Main-Text:#878c91;
--Main-Text-Font-Size:12px;
--Main-Text-Links:#a4a3aa;
--Main-Text-Links-Bottom-Border:#35323c;
--Main-Text-Heading:#a33b5a;
--Main-Text-Bullet-Hearts:#b64264;
--Main-Text-Padding:25px;
--Scrollbar:#413e4a;
/*------ BOTTOM LEFT TEXT ------*/
--Corner-Text-Font-Size:10px;
--Corner-Text:#8b869a;
/*------ BOTTOM RIGHT TRIANGLE ------*/
--Corner-Triangle-Size:17px;
--Corner-Triangle:#413e4a;
/*------ CUSTOM LINKS [BOTTOM] ------*/
--Custom-Links-Top-Gap:30px;
--Custom-Links-Font-Size:10px;
--Custom-Links-Text:#8a8892;
--Custom-Links-Background:#100f12;
--Custom-Links-Padding:9px;
--Custom-Links-Bottom-Border:#413e4a;
--Custom-Links-Right-Text:#8a8892;
--Custom-Links-Right-Text-Font-Size:12px;
--Custom-Links-Spacing:11px;
/*------ MUSIC PLAYER ------*/
--Circle-Size:36px;
--Progress-Border-Size:2px;
--Progress-Empty:#090909;
--Progress-Fill:#a33b5a;
--Player-Background:#121212;
--Play-Pause-Buttons-Size:12px;
--Play-Pause-Buttons-Color:#a33b5a;
--Player-Text-Margin:12px;
--Song-Name-Font-Size:9px;
--Song-Name-Color:#d7597e;
--Artist-Name-Font-Size:10px;
--Artist-Name-Color:#8a8892;
/*------ 'BACK TO BLOG' [TOP LEFT] ------*/
--Back-Arrow-Size:17px;
--Back-Arrow:#64626b;
--Back-Text-Font-Size:10px;
--Back-Text:#8a8892;
/*------ MISC/GENERAL/OTHER ------*/
--Window-Margin:22px;
--Text-Highlight:#a43f56;
--Credit-Color:#706e79;
}
/*------ CONTAINER ------*/
#cont-h-a {
position:fixed;
top:0;left:0;right:0;
text-align:center;
z-index:-1;
}
#cont-h-b {
display:inline-block;
}
#cont-v-a {
height:100vh;
display:table;
}
#cont-v-b {
display:table-cell;
vertical-align:middle;
}
.container {
margin-top:calc(var(--Custom-Links-Top-Gap));
transform:rotate(1.69deg);
width:var(--Container-Width);
background:var(--Container-Background);
border-radius:3px;
box-shadow:0px 0px var(--Container-Shadow-Size) 0px rgba(var(--Container-Shadow-Color),var(--Container-Shadow-Opacity));
}
@-webkit-keyframes burrito {
0% {
margin-top:69px;
transform:rotate(3.69deg);
}
100% {
margin-top:calc(var(--Custom-Links-Top-Gap));
transform:rotate(1.69deg);
}
}
.animate-on-load {
animation:burrito ease-in 1;
animation-fill-mode:forwards;
animation-duration:1s;
}
.frame {
width:calc(100% - (var(--Container-Frame-Padding) * 2));
height:calc(100% - (var(--Container-Frame-Padding) * 2));
padding:var(--Container-Frame-Padding);
}
.border {
position:relative;
width:calc(100% - (var(--Container-Border-Size) * 2));
height:calc(100% - (var(--Container-Border-Size) * 2));
border:var(--Container-Border-Size) solid var(--Container-Border);
border-radius:2px;
}
/*------ TOP LEFT TEXT ------*/
.intro-text {
position:absolute;
margin-top:var(--Container-Inner-Padding);
margin-left:var(--Container-Inner-Padding);
text-align:left;
}
.text-row {
margin-bottom:7px;
padding-bottom:3px;
padding-right:7px;
padding-left:2px;
border-bottom:var(--Intro-Text-Bottom-Border-Size) solid var(--Intro-Text-Bottom-Border);
line-height:1em;
}
.text-row label {
margin-right:1px;
font-family:handlee;
font-size:var(--Intro-Text-Label-Font-Size);
letter-spacing:.5px;
color:var(--Intro-Text-Label);
}
.text-row detail {
font-family:barlow;
font-size:var(--Intro-Text-Detail-Font-Size);
color:var(--Intro-Text-Detail);
}
/*------ CORNER IMAGE [ICON] ------*/
.corner {
position:absolute;
margin-top:calc(var(--Container-Border-Size) * -1);
right:0;margin-right:calc(var(--Container-Border-Size) * -1);
border-left:calc(var(--Container-Border-Size) * 2) solid var(--Container-Background);
border-bottom:calc(var(--Container-Border-Size) * 2) solid var(--Container-Background);
}
.corner-icon {
width:var(--Icon-Size);
height:var(--Icon-Size);
padding:var(--Icon-Padding);
border:var(--Container-Border-Size) solid var(--Container-Border);
}
/*------ SQUIGGLES ------*/
.squid {
position:absolute;
top:0;
right:0;
margin-right:calc(var(--Icon-Padding) + (var(--Icon-Size) / 2) + var(--Squiggles-Right-Margin));
height:calc(var(--Icon-Size) + (var(--Icon-Padding) * 2));
display:table;
}
.sqm {
display:table-cell;
vertical-align:middle;
}
.squid-row {
display:flex;
align-items:center;
height:0;
margin-bottom:var(--Squiggles-Spacing);
}
.squid-u {
margin-top:calc(var(--Squiggles-Size) / -2);
width:var(--Squiggles-Size);
height:var(--Squiggles-Size);
border:var(--Squiggles-Thickness) solid var(--Squiggles);
border-color:transparent transparent var(--Squiggles) transparent;
border-radius:0 0 calc(var(--Squiggles-Size) / 2) 50%/calc(var(--Squiggles-Size) / 2);
}
.squid-n {
margin-top:var(--Squiggles-Size);
margin-left:calc((var(--Squiggles-Size) / 3) * -1);
width:var(--Squiggles-Size);
height:var(--Squiggles-Size);
border:var(--Squiggles-Thickness) solid var(--Squiggles);
border-color:var(--Squiggles) transparent transparent transparent;
border-radius:50%/calc(var(--Squiggles-Size) / 2) calc(var(--Squiggles-Size) / 2) 0 0;
}
/*------ MAIN ABOUT TEXT ------*/
.main-text {
margin-top:calc(var(--Icon-Size) + (var(--Icon-Padding) * 2) + (var(--Container-Border-Size) * 3));
margin-bottom:calc((var(--Container-Inner-Padding) * 2) + var(--Corner-Triangle-Size));
padding:var(--Main-Text-Padding);
width:calc(100% - (var(--Main-Text-Padding) * 2));
font-family:dm sans;
font-size:var(--Main-Text-Font-Size);
color:var(--Main-Text);
text-align:left;
line-height:1.85em;
}
.scb {
position:relative;
/*--🌹🌹🌹🌹🌹🌹🌹--*/
/* uncomment the following lines if your text is long */
/* you can change 180px to whatever you wish */
/*
padding-right:10px;
max-height:180px;
overflow:auto;
*/
}
.scb::-webkit-scrollbar {
width:17px;
height:17px;
background-color:var(--Container-Background);
}
.scb::-webkit-scrollbar-thumb {
border:8px solid var(--Container-Background);
background-color:var(--Scrollbar);
}
.main-text h1 {
margin:0.5em auto;
font-size:calc(var(--Main-Text-Font-Size) + 1px);
text-transform:uppercase;
letter-spacing:1px;
color:var(--Main-Text-Heading);
}
.main-text a {
color:var(--Main-Text-Links);
padding-bottom:1px;
border-bottom:1px solid var(--Main-Text-Links-Bottom-Border);
}
.main-text p:last-child {margin-bottom:0;}
.main-text right {
display:block;
text-align:right;
}
.main-text ul:only-of-type, .main-text ol:only-of-type {
margin-left:calc((var(--Main-Text-Font-Size) + 2px) * -1);
margin-top:0;
margin-bottom:0;
}
.main-text ul {
list-style:none;
}
.main-text ul li:before {
content:"♡";
position:absolute;
margin-left:calc((var(--Main-Text-Font-Size) + 2px) * -1.5);
font-size:calc(var(--Main-Text-Font-Size) + 2px);
color:var(--Main-Text-Bullet-Hearts);
}
/*------ CORNER TRIANGLE ------*/
.tri-hol {
position:absolute;
bottom:0;margin-bottom:calc(var(--Container-Inner-Padding) - var(--Container-Border-Size));
right:0;margin-right:calc(var(--Container-Inner-Padding) - var(--Container-Border-Size));
width:var(--Corner-Triangle-Size);
height:var(--Corner-Triangle-Size);
}
.cheesecake {
width:0;height:0;
border-left:var(--Corner-Triangle-Size) solid transparent;
border-bottom:var(--Corner-Triangle-Size) solid var(--Corner-Triangle);
}
.cs {
position:absolute;
margin-top:calc(var(--Container-Border-Size) * 2);
margin-right:calc(var(--Container-Border-Size) - .5px);
right:0;
width:0;height:0;
border-left:calc(var(--Corner-Triangle-Size) - (var(--Container-Border-Size) * 3)) solid transparent;
border-bottom:calc(var(--Corner-Triangle-Size) - (var(--Container-Border-Size) * 3)) solid var(--Container-Background);
}
.td {
position:absolute;
bottom:0;
right:0;
width:0;height:0;
border-left:calc(var(--Corner-Triangle-Size) * 0.65) solid transparent;
border-bottom:calc(var(--Corner-Triangle-Size) * 0.65) solid var(--Corner-Triangle);
}
.fc {
position:absolute;
bottom:0;margin-bottom:var(--Container-Border-Size);
right:0;margin-right:calc(var(--Container-Border-Size) - .5px);
width:0;height:0;
border-left:calc((var(--Corner-Triangle-Size) * 0.65) - (var(--Container-Border-Size) * 3)) solid transparent;
border-bottom:calc((var(--Corner-Triangle-Size) * 0.65) - (var(--Container-Border-Size) * 3)) solid var(--Container-Background);
}
/*------ CORNER TEXT ------*/
.corner-text {
position:absolute;
bottom:0;margin-bottom:var(--Container-Inner-Padding);
left:0;margin-left:var(--Container-Inner-Padding);
font-family:handlee;
font-size:var(--Corner-Text-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
color:var(--Corner-Text);
line-height:1em;
}
/*------ CUSTOM LINKS ------*/
.botnav {
margin-top:var(--Custom-Links-Top-Gap);
display:flex;
align-items:center;
justify-content:center;
}
.botnav a {
display:block;
margin:0 var(--Custom-Links-Spacing);
background:var(--Custom-Links-Background);
padding:var(--Custom-Links-Padding);
border-radius:3px;
border-bottom:2px solid var(--Custom-Links-Bottom-Border);
font-family:work sans;
font-size:var(--Custom-Links-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
color:var(--Custom-Links-Text);
line-height:1em;
}
/*------ 'BACK TO BLOG' BUTTON ------*/
.bache {
position:fixed;
top:0;margin-top:var(--Window-Margin);
left:0;margin-left:var(--Window-Margin);
display:flex;
align-items:center;
}
.bache svg {
width:var(--Back-Arrow-Size);
height:var(--Back-Arrow-Size);
color:var(--Back-Arrow);
}
.bache span {
margin-left:7px;
font-family:work sans;
font-size:var(--Back-Text-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
color:var(--Back-Text);
opacity:0;
}
.bache:hover span {
opacity:1;
}
.glenjamin {
position:fixed;
bottom:0;padding-bottom:var(--Window-Margin);
right:0;padding-right:var(--Window-Margin);
}
.glenjamin svg {
width:12px;
height:12px;
color:var(--Credit-Color);
}
/*-------MUSIC PLAYER-------*/
#glenplayer07 {
position:fixed;
bottom:0;margin-bottom:var(--Window-Margin);
left:0;margin-left:var(--Window-Margin);
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:work sans;
font-size:var(--Song-Name-Font-Size);
text-transform:uppercase;
letter-spacing:1.5px;
color:var(--Song-Name-Color);
}
.artist-name {
margin-top:4px;
font-family:dm sans;
font-size:var(--Artist-Name-Font-Size);
letter-spacing:0.3px;
color:var(--Artist-Name-Color);
}
</style>
</head>
<body>
<a class="bache" href="/">
<i data-feather="arrow-left"></i>
<span>return home</span>
</a>
<div id="cont-h-a">
<div id="cont-h-b">
<div id="cont-v-a">
<div id="cont-v-b">
<!--🌹🌹🌹🌹🌹🌹🌹-->
<!-- remove animate-on-load if you don't want the animation -->
<div class="container animate-on-load">
<div class="frame">
<div class="border">
<div class="intro-text">
<!--🌹🌹🌹🌹🌹🌹🌹-->
<!------ TOP LEFT TEXT ------>
<!--start one row-->
<div class="text-row">
<label>To:</label>
<detail>a very special someone</detail>
</div>
<!--end one row-->
<!--start one row-->
<div class="text-row">
<label>From:</label>
<detail>a handsome entity</detail>
</div>
<!--end one row-->
</div><!--do not delete this line-->
<div class="corner">
<!--🌹🌹🌹🌹🌹🌹🌹-->
<!------ CORNER ICON / AVATAR IMAGE ------>
<!-- put image url between quote marks of src="" -->
<img class="corner-icon" src="//cdn.discordapp.com/attachments/382037367940448256/708019156091666442/tumblr_po9g8hQTkV1qirvsvo6_400.png">
</div><!--do not delete this line-->
<div class="squid">
<div class="sqm">
<div class="squid-row">
<div class="squid-u"></div>
<div class="squid-n"></div>
</div>
<div class="squid-row">
<div class="squid-u"></div>
<div class="squid-n"></div>
</div>
<div class="squid-row">
<div class="squid-u"></div>
<div class="squid-n"></div>
</div>
</div><!--sqm-->
</div><!--squid-->
<div class="main-text">
<div class="scb">
<!--🌹🌹🌹🌹🌹🌹🌹-->
<!------ MAIN ABOUT TEXT ------>
<!-- if you need a scrollbar, go to .scb -->
<h1>this is a heading:</h1>
<!--this is an non-numbered list (heart bullets)-->
<ul>
<li>bullet one
<li>bullet two
<li>bullet three
</ul>
<p>
this is a new paragraph!
</div><!--scb-->
</div><!--end main text | do not delete this line-->
<!--🌹🌹🌹🌹🌹🌹🌹-->
<!------ BOTTOM LEFT CORNER TEXT ------>
<div class="corner-text">here's your corner text</div>
<div class="tri-hol">
<div class="cheesecake">
<div class="cs"></div>
<div class="td"></div>
<div class="fc"></div>
</div>
</div><!--tri-hol-->
</div><!--border-->
</div><!--frame-->
</div><!--container-->
<div class="botnav">
<!--🌹🌹🌹🌹🌹🌹🌹-->
<!------ CUSTOM LINKS (BOTTOM) ------>
<!--edit, add, or delete as you like-->
<a href="/ask">message</a>
<a href="/archive">archive</a>
<a href="//tumblr.com/dashboard">dashboard</a>
</div><!--botnav | do not delete below this line-->
</div><!--cont-v-b-->
</div><!--cont-v-a-->
</div><!--cont-h-b-->
</div><!--cont-h-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">Tomorrow Never Came</div>
<div class="artist-name">Laura Brehm, Luke Black</div>
</div><!--music-info-->
</div><!--flamingo-->
</div><!--glenplayer07-->
<!------- MUSIC URL ------->
<!--
to obtain a working audio, link:
linktr.ee/direct_file_links
put the audio url between the quote marks of src=""
-->
<!--🌹🌹🌹🌹🌹🌹🌹-->
<audio id="audio" src="https://cdn.discordapp.com/attachments/900670626774265886/900756214412115969/Laura_Brehm_and_Luke_Black_-_Tomorrow_Never_Came_Cover.mp3" type="audio"></audio>
<!----end music player---->
<a class="glenjamin" href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
<script>feather.replace()</script>
</body>
</html>