1078 lines
30 KiB
Plaintext
1078 lines
30 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
Music Page [03]: Starchild
|
|
Made by glenthemes
|
|
|
|
Initial release: 2020/03/28
|
|
Last updated: 2022/05/19
|
|
|
|
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 || begin copy
|
|
🛑🛑🛑🛑🛑🛑🛑 = end of a section || end copy
|
|
|
|
Guide here:
|
|
docs.google.com/document/d/1Yn7TQ0IhVCN557tpo4Jyd9z4p_BcUH9ReFulap18MDA/edit?usp=sharing
|
|
------------------------------------------------------------------------>
|
|
|
|
<!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=Nunito|Philosopher|Work+Sans|Quicksand:500|Press+Start+2P|Material+Icons" rel="stylesheet">
|
|
|
|
<link href="//gt-starchild.glitch.me/left.css" rel="stylesheet">
|
|
<link href="//gt-starchild.glitch.me/right.css" rel="stylesheet">
|
|
<link href="//gt-starchild.glitch.me/nails.css" rel="stylesheet">
|
|
<link href="//gt-starchild.glitch.me/hmain.css" rel="stylesheet">
|
|
|
|
<script src="https://glen-assets.github.io/music-page-03-stardust/load-svgs.js"></script>
|
|
|
|
<script src="//gt-starchild.glitch.me/ineedsomemilk.js"></script>
|
|
<script src="//gt-starchild.glitch.me/get-durations.js"></script>
|
|
|
|
<!-------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
/*-----------------FONTS-----------------*/
|
|
@font-face { font-family: "pixeloperator bold"; src: url('//glen-assets.github.io/fonts/PixelOperator-Bold.ttf'); }
|
|
|
|
@font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
|
|
|
|
@font-face { font-family: "8bit madness"; src: url('//glen-assets.github.io/fonts/8-Bit%20Madness.ttf'); }
|
|
|
|
/*-----------------TOOLTIPS-----------------*/
|
|
#s-m-t-tooltip {
|
|
padding:2px 8px;
|
|
margin:18px;
|
|
background-color:var(--Tooltips-BG);
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
text-transform:uppercase;
|
|
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.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);
|
|
}
|
|
|
|
/*-----------------CURSOR SETTINGS-----------------*/
|
|
body, a[title]:not([href]):hover {
|
|
cursor:url(https://cdn.discordapp.com/attachments/900692000364445736/900738287617060904/diagonal_resize_1.png), auto;
|
|
}
|
|
|
|
a {
|
|
cursor:url(https://cdn.discordapp.com/attachments/900692000364445736/900738348128297060/link_2.png), auto;
|
|
}
|
|
|
|
.shufflebutton, .one-song-row {
|
|
cursor:url(https://cdn.discordapp.com/attachments/900692000364445736/900738411877515384/vertical_resize_2.png), auto;
|
|
}
|
|
|
|
/*--------------CUSTOMIZATION OPTIONS--------------*/
|
|
body {
|
|
background:#89e3ea url(""); /* background color & image, if u want one */
|
|
background-size:cover;
|
|
background-position:center;
|
|
background-attachment:fixed;
|
|
overflow-x:hidden;
|
|
line-height:1.6em;
|
|
text-align:left;
|
|
}
|
|
|
|
/* colors, sizes, margins, etc */
|
|
:root {
|
|
--Foreground-Clouds-Size-1:245px;
|
|
--Foreground-Clouds-Size-2:120px;
|
|
--Foreground-Clouds-Size-3:76px;
|
|
--Foreground-Clouds-Color:#ecf9d2;
|
|
--Foreground-Clouds-Speed:60s;
|
|
|
|
--Background-Clouds-Size-1:69px;
|
|
--Background-Clouds-Size-2:129px;
|
|
--Background-Clouds-Size-3:76px;
|
|
--Background-Clouds-Size-4:100px;
|
|
--Background-Clouds-Color:#a7ede6;
|
|
--Background-Clouds-Speed:190s;
|
|
|
|
--Album-Image-Width:275px;
|
|
--Album-Image-Bottom-Gap:25px;
|
|
--Sidebar-Desc-Width:250px;
|
|
--Sidebar-Desc-Font-Size:15px;
|
|
--Sidebar-Desc-Text:#604c3a;
|
|
--Sidebar-Desc-Links:#fff;
|
|
--Sidebar-Desc-Links-Background:#30adc9;
|
|
--Sidebar-Desc-Text-Shadow:#51afc4;
|
|
--Sidebar-Desc-Line-Height:1.5em;
|
|
|
|
--Container-Center-Gap:42px;
|
|
|
|
--Heading-Border-Height:3px;
|
|
--Heading-Border:#f7c282;
|
|
--Heading-Border-Highlight-1:#f2d0ad;
|
|
--Heading-Border-Highlight-2:#dcab8a;
|
|
--Heading-Border-Shadow-1:#5f2d24;
|
|
--Heading-Border-Shadow-2:#1d1d1d;
|
|
--Heading-Border-Shadow-3:#563746;
|
|
|
|
--Heading-Background:#623437;
|
|
--Heading-Font-Size:11px;
|
|
--Heading-Text:#f6cfb0;
|
|
--Heading-Text-Shadow:#000;
|
|
--Heading-Width:269px; /* essentially the width of the right section */
|
|
--Heading-Bottom-Gap:16px;
|
|
|
|
--Music-Controls-Size:16px;
|
|
--Music-Controls:#623437;
|
|
--Music-Controls-Shadow:#30ADC9;
|
|
--Music-Controls-Text:#623437;
|
|
--Music-Controls-Text-Shadow:#30ADC9;
|
|
--Music-Controls-Text-Font-Size:17px;
|
|
--Music-Controls-Spacing:24px;
|
|
--Music-Controls-Bottom-Gap:20px;
|
|
|
|
--Song-Bullet-Icon-Size:18px;
|
|
--Song-Bullet-Gap:12px;
|
|
--Music-Name:#623437;
|
|
--Music-Name-Font-Size:15px;
|
|
--Music-Name-Text-Shadow:#30ADC9;
|
|
--Music-Tracks-Spacing:14px;
|
|
--Music-Name-When-Playing:#30adc9;
|
|
--Music-Name-Text-Shadow-When-Playing:#a7ede6;
|
|
--Scrollbar:#A7EDE6; /* if you want one. find 🌊🌊🌊 to adjust */
|
|
|
|
--Navlinks-Top-Margin:35px;
|
|
--Navlinks-Font-Size:15px;
|
|
--Navlinks:#623437;
|
|
--Navlinks-Text-Shadow:#30ADC9;
|
|
--Navlinks-Divider-Image-Width:22px;
|
|
--Navlinks-Spacing:4px;
|
|
|
|
--Tooltips-BG:#30adc9;
|
|
--Tooltips-Text:#fff;
|
|
--BG-On-Highlight:#30adc9;
|
|
--Text-On-Highlight:#fff;
|
|
|
|
--Corner-Text-Font-Size:15px;
|
|
--Corner-Text:#fff;
|
|
--Corner-Text-Link:#fff;
|
|
|
|
--Credit-Color:#30adc9;
|
|
}
|
|
|
|
/*-----------------BASICS-----------------*/
|
|
a {
|
|
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;
|
|
display:block;
|
|
}
|
|
|
|
audio{display:none;}
|
|
img {vertical-align:middle;}
|
|
:after {display:flex;}
|
|
|
|
/*-----------------CLOUDS-----------------*/
|
|
/* foreground cloud 1 */
|
|
.cloud1 {
|
|
position:absolute;
|
|
top:0;margin-top:169px;
|
|
-webkit-animation:foreground_clouds_1 var(--Foreground-Clouds-Speed) linear infinite;
|
|
}
|
|
|
|
.cloud1 svg {
|
|
width:var(--Foreground-Clouds-Size-1);
|
|
}
|
|
|
|
@-webkit-keyframes foreground_clouds_1 {
|
|
0% {margin-left:calc(var(--Foreground-Clouds-Size-1) * -1);}
|
|
100% {margin-left:100vw;}
|
|
}
|
|
|
|
/* foreground cloud 2 */
|
|
.cloud2 {
|
|
position:absolute;
|
|
top:0;margin-top:310px;
|
|
-webkit-animation:foreground_clouds_2 var(--Foreground-Clouds-Speed) linear infinite;
|
|
}
|
|
|
|
.cloud2 svg {
|
|
width:var(--Foreground-Clouds-Size-2);
|
|
}
|
|
|
|
@-webkit-keyframes foreground_clouds_2 {
|
|
0% {margin-left:calc((var(--Foreground-Clouds-Size-2) * -1) - 300px);}
|
|
100% {margin-left:100vw;}
|
|
}
|
|
|
|
/* foreground cloud 3 */
|
|
.cloud3 {
|
|
position:absolute;
|
|
bottom:0;margin-bottom:100px;
|
|
-webkit-animation:foreground_clouds_3 var(--Foreground-Clouds-Speed) linear infinite;
|
|
}
|
|
|
|
.cloud3 svg {
|
|
width:var(--Foreground-Clouds-Size-3);
|
|
}
|
|
|
|
@-webkit-keyframes foreground_clouds_3 {
|
|
0% {margin-left:calc((var(--Foreground-Clouds-Size-3) * -1) - 69px);}
|
|
100% {margin-left:100vw;}
|
|
}
|
|
|
|
/* background cloud 1 */
|
|
.bgcloud1 {
|
|
position:absolute;
|
|
bottom:0;margin-bottom:100px;
|
|
-webkit-animation:background_clouds_1 var(--Background-Clouds-Speed) linear infinite;
|
|
z-index:-1;
|
|
}
|
|
|
|
.bgcloud1 svg {
|
|
width:var(--Background-Clouds-Size-1);
|
|
}
|
|
|
|
@-webkit-keyframes background_clouds_1 {
|
|
0% {
|
|
margin-left:240px;
|
|
opacity:0;
|
|
}
|
|
|
|
1% {
|
|
opacity:1;
|
|
}
|
|
|
|
99% {
|
|
opacity:0;
|
|
}
|
|
|
|
100% {
|
|
margin-left:calc(100vw - 240px);
|
|
}
|
|
}
|
|
|
|
/* background cloud 2 */
|
|
.bgcloud2 {
|
|
position:absolute;
|
|
top:0;margin-top:260px;
|
|
-webkit-animation:background_clouds_2 var(--Background-Clouds-Speed) linear infinite;
|
|
z-index:-1;
|
|
}
|
|
|
|
.bgcloud2 svg {
|
|
width:var(--Background-Clouds-Size-2);
|
|
}
|
|
|
|
@-webkit-keyframes background_clouds_2 {
|
|
0% {
|
|
margin-left:420px;
|
|
opacity:0;
|
|
}
|
|
|
|
1% {
|
|
opacity:1;
|
|
}
|
|
|
|
99% {
|
|
opacity:0;
|
|
}
|
|
|
|
100% {
|
|
margin-left:calc(100vw - 240px);
|
|
}
|
|
}
|
|
|
|
/* background cloud 3 */
|
|
.bgcloud3 {
|
|
position:absolute;
|
|
top:0;margin-top:360px;
|
|
-webkit-animation:background_clouds_3 var(--Background-Clouds-Speed) linear infinite;
|
|
z-index:-1;
|
|
}
|
|
|
|
.bgcloud3 svg {
|
|
width:var(--Background-Clouds-Size-3);
|
|
}
|
|
|
|
@-webkit-keyframes background_clouds_3 {
|
|
0% {
|
|
margin-left:600px;
|
|
opacity:0;
|
|
}
|
|
|
|
1% {
|
|
opacity:1;
|
|
}
|
|
|
|
99% {
|
|
opacity:0;
|
|
}
|
|
|
|
100% {
|
|
margin-left:calc(100vw - 300px);
|
|
}
|
|
}
|
|
|
|
/* background cloud 4 */
|
|
.bgcloud4 {
|
|
position:absolute;
|
|
top:0;margin-top:160px;
|
|
-webkit-animation:background_clouds_4 var(--Background-Clouds-Speed) linear infinite;
|
|
z-index:-1;
|
|
}
|
|
|
|
.bgcloud4 svg {
|
|
width:var(--Background-Clouds-Size-4);
|
|
}
|
|
|
|
@-webkit-keyframes background_clouds_4 {
|
|
0% {
|
|
margin-left:-130px;
|
|
opacity:0;
|
|
}
|
|
|
|
1% {
|
|
opacity:1;
|
|
}
|
|
|
|
99% {
|
|
opacity:0;
|
|
}
|
|
|
|
100% {
|
|
margin-left:calc(100vw - 70px);
|
|
}
|
|
}
|
|
|
|
/*--------------------CONTAINER--------------------*/
|
|
#horizontal-a {
|
|
position:fixed;
|
|
top:0;left:0;right:0;
|
|
margin:0 auto;
|
|
height:100vh;
|
|
text-align:center;
|
|
}
|
|
|
|
#horizontal-b {
|
|
display:inline-block;
|
|
}
|
|
|
|
#vertical-a {
|
|
height:100vh;
|
|
display:table;
|
|
}
|
|
|
|
#vertical-b {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.spreadcont {
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
|
|
/*-----------------LEFT SIDEBAR-----------------*/
|
|
.potatoe {
|
|
margin-right:var(--Container-Center-Gap);
|
|
}
|
|
|
|
.album-image {
|
|
margin-bottom:var(--Album-Image-Bottom-Gap);
|
|
width:var(--Album-Image-Width);
|
|
}
|
|
|
|
.sidebar-desc {
|
|
margin:0 auto;
|
|
width:var(--Sidebar-Desc-Width);
|
|
font-family:"8bit madness";
|
|
font-size:var(--Sidebar-Desc-Font-Size);
|
|
color:var(--Sidebar-Desc-Text);
|
|
text-shadow:1px 1.5px 0 var(--Sidebar-Desc-Text-Shadow);
|
|
line-height:var(--Sidebar-Desc-Line-Height);
|
|
}
|
|
|
|
.sidebar-desc a {
|
|
color:var(--Sidebar-Desc-Links);
|
|
background:var(--Sidebar-Desc-Links-Background);
|
|
}
|
|
|
|
|
|
/*--------------RIGHT SIDEBAR - MUSIC STUFF--------------*/
|
|
.minfo {
|
|
width:calc(var(--Heading-Width) + (var(--Heading-Border-Height) * 18));
|
|
}
|
|
|
|
.praysouffle {
|
|
margin-top:var(--Heading-Bottom-Gap);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
user-select:none;
|
|
}
|
|
|
|
.tracknos, .tracknos span {
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
|
|
.tracknos li {
|
|
list-style-type:none;
|
|
margin-right:5px;
|
|
}
|
|
|
|
.praysouffle .material-icons {
|
|
font-size:var(--Music-Controls-Size);
|
|
color:var(--Music-Controls);
|
|
text-shadow:1px 1.5px 0 var(--Music-Controls-Shadow);
|
|
}
|
|
|
|
.shufflebutton {
|
|
display:flex;
|
|
align-items:center;
|
|
margin-left:var(--Music-Controls-Spacing);
|
|
}
|
|
|
|
.praysouffle span {
|
|
margin-left:6px;
|
|
font-family:pixeloperator bold;
|
|
font-size:var(--Music-Controls-Text-Font-Size);
|
|
text-transform:uppercase;
|
|
color:var(--Music-Controls-Text);
|
|
text-shadow:1px 1.5px 0 var(--Music-Controls-Text-Shadow);
|
|
}
|
|
|
|
.themusics {
|
|
margin-top:var(--Music-Controls-Bottom-Gap);
|
|
|
|
/* if you don't want a scrollbar, delete/modify the following lines */
|
|
/* 🌊🌊🌊🌊🌊🌊🌊 */
|
|
|
|
max-height:420px;
|
|
overflow-y:auto;
|
|
padding-right:10px;
|
|
}
|
|
|
|
.themusics::-webkit-scrollbar {
|
|
width:11px;
|
|
height:11px;
|
|
background-color:transparent url('//assets.tumblr.com/images/x.gif?v=1') repeat-y !important;
|
|
}
|
|
|
|
.themusics::-webkit-scrollbar-thumb {
|
|
background-clip:padding-box;
|
|
background-color:var(--Scrollbar);
|
|
border:4px solid transparent;
|
|
}
|
|
|
|
.one-song-row:before {
|
|
content:"";
|
|
display:inline-block;
|
|
margin-right:var(--Song-Bullet-Gap);
|
|
height:var(--Song-Bullet-Icon-Size);
|
|
width:var(--Song-Bullet-Icon-Size);
|
|
background-image:url(//66.media.tumblr.com/39905cd3a8b5fd888703e96da5440f77/c6e52d2ccae4ec56-7c/s250x400/ce81e96a698b309c6b1ebed95c262fdc82ff7800.png);
|
|
background-size:contain;
|
|
background-repeat:no-repeat;
|
|
}
|
|
|
|
.one-song-row {
|
|
display:flex;
|
|
align-items:center;
|
|
margin-bottom:var(--Music-Tracks-Spacing);
|
|
list-style:none;
|
|
font-family:pixeloperator bold;
|
|
font-size:var(--Music-Name-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:.5px;
|
|
color:var(--Music-Name);
|
|
text-shadow:1px 1.5px 0 var(--Music-Name-Text-Shadow);
|
|
user-select:none;
|
|
}
|
|
|
|
.whenplaying {
|
|
color:var(--Music-Name-When-Playing);
|
|
text-shadow:1px 1.5px 0 var(--Music-Name-Text-Shadow-When-Playing);
|
|
}
|
|
|
|
.ostie {
|
|
display:flex;
|
|
flex:1;
|
|
justify-content:space-between;
|
|
}
|
|
|
|
.dur {
|
|
display:none;
|
|
}
|
|
|
|
/*----------------HEADING/BANNER----------------*/
|
|
.heading {
|
|
position:relative;
|
|
display:flex;
|
|
align-items:center;
|
|
margin-left:calc(var(--Heading-Border-Height) * 9);
|
|
}
|
|
|
|
.tline-grad {
|
|
position:absolute;
|
|
width:var(--Heading-Width);
|
|
height:calc(var(--Heading-Border-Height) * 2);
|
|
background-image:linear-gradient(to right,transparent,var(--Heading-Border-Highlight-1),var(--Heading-Border-Highlight-2),transparent);
|
|
}
|
|
|
|
.stuff-onleft {
|
|
align-self:baseline;
|
|
}
|
|
|
|
.stuff-onright {
|
|
align-self:baseline;
|
|
}
|
|
|
|
.textarea {
|
|
display:flex;
|
|
width:calc(100% - var(--Heading-Border-Height));
|
|
min-height:calc(var(--Heading-Border-Height) * 9);
|
|
background:var(--Heading-Background);
|
|
text-align:left;
|
|
}
|
|
|
|
.text-text {
|
|
align-self:center;
|
|
margin:var(--Heading-Border-Height) auto 0 auto;
|
|
max-width:calc(var(--Heading-Width) - (var(--Heading-Border-Height) * 14));
|
|
font-family:"press start 2p";
|
|
font-size:var(--Heading-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
color:var(--Heading-Text);
|
|
text-shadow:0 2px 0 var(--Heading-Text-Shadow);
|
|
-webkit-text-stroke:0.3px var(--Heading-Text-Shadow);
|
|
overflow:hidden;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
/*-----------------NAVLINKS (BOTTOM)-----------------*/
|
|
.navlinks {
|
|
margin-top:var(--Navlinks-Top-Margin);
|
|
margin-bottom:calc(var(--Navlinks-Spacing) * -1);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
font-family:"pixeloperator bold";
|
|
font-size:var(--Navlinks-Font-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:.7px;
|
|
}
|
|
|
|
.navlinks a {
|
|
padding:var(--Navlinks-Spacing);
|
|
color:var(--Navlinks);
|
|
text-shadow:1px 1.5px 0 var(--Navlinks-Text-Shadow);
|
|
}
|
|
|
|
.divider {
|
|
padding:0px var(--Navlinks-Spacing);
|
|
width:var(--Navlinks-Divider-Image-Width);
|
|
height:auto;
|
|
}
|
|
|
|
/*-----------------CORNER TEXT-----------------*/
|
|
.corner-text {
|
|
position:fixed;
|
|
top:0;margin-top:30px;
|
|
left:0;margin-left:30px;
|
|
font-family:"8bit madness";
|
|
font-size:var(--Corner-Text-Font-Size);
|
|
color:var(--Corner-Text);
|
|
line-height:1.2em;
|
|
z-index:2;
|
|
}
|
|
|
|
.corner-text a {color:var(--Corner-Text-Link);}
|
|
|
|
/*-----------------CREDIT-----------------*/
|
|
.glencrd {
|
|
display:block;
|
|
position:fixed;
|
|
bottom:0;margin-bottom:30px;
|
|
right:0;margin-right:30px;
|
|
z-index:99;
|
|
}
|
|
|
|
.glen-svg svg {
|
|
width:20px;
|
|
height:auto;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a class="glencrd" href="//glenthemes.tumblr.com" title="coded by glenthemes">
|
|
<div class="glen-svg"></div>
|
|
</a>
|
|
|
|
<!------- TOP-LEFT CORNER TEXT ------->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<div class="corner-text">
|
|
some text in the corner,
|
|
<br>
|
|
if you wish
|
|
</div><!--end cornertext-->
|
|
|
|
<!------- BACKGROUND CLOUDS ------->
|
|
<!-- 🌟🌟🌟🌟🌟🌟🌟 -->
|
|
<div class="cloud1"></div>
|
|
<div class="cloud2"></div>
|
|
<div class="cloud3"></div>
|
|
<div class="bgcloud1"></div>
|
|
<div class="bgcloud2"></div>
|
|
<div class="bgcloud3"></div>
|
|
<div class="bgcloud4"></div>
|
|
<!-- 🛑🛑🛑🛑🛑🛑🛑-->
|
|
<!---------------------->
|
|
|
|
|
|
<!------- CONTAINER ------->
|
|
<div id="horizontal-a">
|
|
<div id="horizontal-b">
|
|
<div id="vertical-a">
|
|
<div id="vertical-b">
|
|
|
|
<div class="spreadcont">
|
|
|
|
<!------- LEFT SIDEBAR ------->
|
|
<div class="potatoe">
|
|
|
|
<!---- SIDEBAR IMAGE ---->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<!-- put image url between quote marks of src="" -->
|
|
<img class="album-image" src="//66.media.tumblr.com/a6c6eb92bc63ba9bb9fa607bcd4a8483/865cd7c4889d766a-06/s1280x1920/87ed2be237f8ece84d0f186262402d56c70e5f43.png">
|
|
|
|
<!---- SIDEBAR DESCRIPTION ---->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<div class="sidebar-desc">
|
|
|
|
some text here
|
|
|
|
</div><!--end desc-->
|
|
|
|
</div><!--end leftside-->
|
|
|
|
|
|
|
|
<!------- RIGHTSIDE ------->
|
|
<div class="minfo">
|
|
|
|
<!-- heading made with css. long, boring stuff -->
|
|
<!-- skip ahead until you see the next cloud emojis -->
|
|
<div class="heading">
|
|
<div class="stuff-onleft">
|
|
<div class="celery">
|
|
<div class="sss s1">
|
|
<div class="stumpy"></div>
|
|
<div class="stoo"></div>
|
|
</div>
|
|
|
|
<div class="sss s2">
|
|
<div class="stumpy"></div>
|
|
<div class="stoo"></div>
|
|
</div>
|
|
|
|
<div class="sss s3">
|
|
<div class="stumpy"></div>
|
|
<div class="stoo"></div>
|
|
</div>
|
|
|
|
<div class="sss s4">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s5">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s6">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s7">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sidestub"></div>
|
|
|
|
<div class="sss s8">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s9">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s10">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s11">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s12">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s13">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s14">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s15">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="sss s16">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div><!--stuff-onleft-->
|
|
|
|
<div class="midsect">
|
|
<div class="topline">
|
|
<div class="tline-grad">
|
|
</div><!--t-shad-->
|
|
</div><!--topline-->
|
|
|
|
<div class="shad-a">
|
|
<div class="sa-stub"></div>
|
|
<div class="sa-long"></div>
|
|
<div class="sa-stub"></div>
|
|
</div>
|
|
|
|
<div class="shad-b">
|
|
<div class="sb-stub"></div>
|
|
<div class="sb-long"></div>
|
|
<div class="sb-stub"></div>
|
|
</div>
|
|
|
|
<div class="textarea">
|
|
<div class="nutcase">
|
|
<div class="n1"></div>
|
|
<div class="n2"></div>
|
|
<div class="n3"></div>
|
|
<div class="n4 l"></div>
|
|
<div class="n5"></div>
|
|
<div class="n1"></div>
|
|
</div>
|
|
|
|
|
|
|
|
<!------- MAIN TITLE (HEADING) ------->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<!-- 1 line please -->
|
|
<div class="text-text">Starchild</div>
|
|
|
|
|
|
|
|
<!-- again, boring stuff here, skip ahead -->
|
|
<div class="nutcase">
|
|
<div class="n1"></div>
|
|
<div class="n2"></div>
|
|
<div class="n3"></div>
|
|
<div class="n4 r"></div>
|
|
<div class="n5"></div>
|
|
<div class="n1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="botline">
|
|
<div class="tline-grad">
|
|
</div><!--t-shad-->
|
|
</div><!--topline-->
|
|
|
|
<div class="bs-line-b"></div>
|
|
<div class="bs-line-c"></div>
|
|
</div><!--midsect-->
|
|
|
|
<div class="stuff-onright">
|
|
<div class="celery">
|
|
<div class="ccc c1">
|
|
<div class="stumpy"></div>
|
|
<div class="stoo"></div>
|
|
</div>
|
|
|
|
<div class="ccc c2">
|
|
<div class="stumpy"></div>
|
|
<div class="stoo"></div>
|
|
</div>
|
|
|
|
<div class="ccc c3">
|
|
<div class="stumpy"></div>
|
|
<div class="stoo"></div>
|
|
</div>
|
|
|
|
<div class="ccc c4">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c5">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c6">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c7">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc sidestub"></div>
|
|
|
|
<div class="ccc c8">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c9">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c10">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c11">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c12">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c13">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c14">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c15">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
|
|
<div class="ccc c16">
|
|
<div class="stumpy"></div>
|
|
</div>
|
|
</div><!--celery-->
|
|
</div><!--stuff-onright-->
|
|
</div><!--end one heading-->
|
|
|
|
|
|
|
|
<div class="praysouffle">
|
|
|
|
|
|
<div class="tracknos">
|
|
<!---- TRACK NO.: ICON ---->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<!-- if u want to change it, go to this website: -->
|
|
<!-- //material.io/resources/icons/?style=baseline -->
|
|
<!-- and replace the word ALBUM with it -->
|
|
<i class="material-icons playy">album</i>
|
|
|
|
|
|
<!---- TRACK NO.: TEXT ---->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<!-- the number of tracks is automatically generated, -->
|
|
<!-- but you can replace the word TRACKS if u wish -->
|
|
<span>
|
|
<li id="count"></li>
|
|
<label>tracks</label>
|
|
</span>
|
|
</div><!--tracknos-->
|
|
|
|
|
|
|
|
<div class="shufflebutton">
|
|
|
|
<!---- SHUFFLE ICON ---->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<!-- if u want to change it, go to this website: -->
|
|
<!-- //material.io/resources/icons/?style=baseline -->
|
|
<!-- and replace the word SHUFFLE with it -->
|
|
<i class="material-icons souffle">shuffle</i>
|
|
|
|
|
|
<!---- 'SHUFFLE' TEXT ---->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<span>shuffle</span>
|
|
|
|
</div><!--shufflebutton--><!--do not delete this line-->
|
|
</div><!--praysouffle--><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
<!------- MUSIC CONTAINER ------->
|
|
<div class="themusics">
|
|
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<!-- THINGS TO NOTE: -->
|
|
<!-- song durations are automated. no need to manually type them -->
|
|
<!-- to insert your own song, pick a tutorial: -->
|
|
<!-- linktr.ee/direct_file_links -->
|
|
|
|
<!-- when you insert a new song, remember to: -->
|
|
<!-- change all 1s to 2s -->
|
|
<!-- use the second & third songs below as examples -->
|
|
|
|
<!---------------------->
|
|
<!--🌟🌟🌟🌟🌟🌟🌟-->
|
|
<!---- START ONE SONG ---->
|
|
<li class="one-song-row track1">
|
|
<div class="ostie">
|
|
<span>Gear Up for Adventure</span>
|
|
<span id="d1" class="dur"></span>
|
|
</div>
|
|
|
|
<audio id="track1" src="https://cdn.discordapp.com/attachments/900670626774265886/900738578697564241/Gear_Up_for_Adventure.mp3" type="audio"></audio>
|
|
</li>
|
|
<!---- end one song ---->
|
|
<!--🛑🛑🛑🛑🛑🛑🛑-->
|
|
<!---------------------->
|
|
|
|
|
|
|
|
<!---------------------->
|
|
<!--🌟🌟🌟🌟🌟🌟🌟-->
|
|
<!---- START ONE SONG ---->
|
|
<li class="one-song-row track2">
|
|
<div class="ostie">
|
|
<span>Abandon Ship</span>
|
|
<span id="d2" class="dur"></span>
|
|
</div>
|
|
|
|
<audio id="track2" src="https://cdn.discordapp.com/attachments/900670626774265886/900738763121111100/Abandon_Ship.mp3" type="audio"></audio>
|
|
</li>
|
|
<!---- end one song ---->
|
|
<!--🛑🛑🛑🛑🛑🛑🛑-->
|
|
<!---------------------->
|
|
|
|
|
|
|
|
<!---------------------->
|
|
<!--🌟🌟🌟🌟🌟🌟🌟-->
|
|
<!---- START ONE SONG ---->
|
|
<li class="one-song-row track3">
|
|
<div class="ostie">
|
|
<span>The Vinelands</span>
|
|
<span id="d3" class="dur"></span>
|
|
</div>
|
|
|
|
<audio id="track3" src="https://cdn.discordapp.com/attachments/900670626774265886/900738866061934612/The_Vinelands.mp3" type="audio"></audio>
|
|
</li>
|
|
<!---- end one song ---->
|
|
<!--🛑🛑🛑🛑🛑🛑🛑-->
|
|
<!---------------------->
|
|
|
|
</div><!--themusics--><!--do not delete this line-->
|
|
</div><!--minfo--><!--do not delete this line-->
|
|
</div><!--spreadcont--><!--do not delete this line-->
|
|
|
|
|
|
|
|
<!---- NAVLINKS (BOTTOM) ---->
|
|
<!--☁️☁️☁️☁️☁️☁️☁️-->
|
|
<!-- to change divider image, put new image url between: -->
|
|
<!-- quote marks of src="" -->
|
|
<div class="navlinks">
|
|
|
|
<a href="/">home</a>
|
|
|
|
<img class="divider" src="//66.media.tumblr.com/33cdbc70744ef045145e3ff9b8705e31/b673b6835374224f-af/s75x75_c1/247c6567d07fcee336cff3c841675db3470fdf60.png">
|
|
|
|
<a href="/ask">message</a>
|
|
|
|
<img class="divider" src="//66.media.tumblr.com/33cdbc70744ef045145e3ff9b8705e31/b673b6835374224f-af/s75x75_c1/247c6567d07fcee336cff3c841675db3470fdf60.png">
|
|
|
|
<a href="/archive">archive</a>
|
|
|
|
</div><!--do not delete this line-->
|
|
|
|
</div><!--do not delete this line-->
|
|
</div><!--do not delete this line-->
|
|
</div><!--do not delete this line-->
|
|
</div><!--do not delete this line-->
|
|
|
|
</body>
|
|
</html> |