₊⁺✿˚
This commit is contained in:
parent
8b13312e0c
commit
235b9a70e9
|
@ -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>
|
Loading…
Reference in New Issue