sunrise sunset

Tags: dynamic, cory, pacdude, sunrise, sunset, blue, yellow, purple

Description:

a new dynamic theme from cory. based on the time of day, your profile will dynamically change colors, from a deep blue at midnight to a sunny orange and yellow at high noon.

NOW! This is pretty advanced code, and I do have to use my personal web server in order to serve up the style sheet. If you do use this code, I would appreciate a $1/month subscription to my Patreon or at the very least throwing me a few bucks on my CashApp, just to cover the costs of the bandwidth. You don't have to, but I thought I'd throw it out there.

After copying the style sheet, change the "-5" in the time zone to whatever reflects your time zone compared to GMT. If you don't know what your time zone compared to GMT is, you can use this link to figure it out.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Cory (https://layouts.spacehey.com/layout?id=1908) -->

@import url("https://www.pacdudegames.com/spacehey/dynamic_style.php?timezone=-5");
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Corben:wght@700&amp;display=swap');
nav{
	margin-bottom:20px;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner{
	padding: 10px;
}
.container{
	margin:auto auto;
}
footer{
	background:#00000066;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius:25px 25px 0 0;
	padding:25px;
	padding-bottom:55px;
	color:#FFFFFF;
	z-index:-1;
	margin-bottom:0;
}
footer p{
	margin-top:0;
	margin-bottom:0;
}
.comments-table{
	display:none;
}
.profile-info{
	position:fixed;
	width:80vw;
	bottom:0;
	left:0; 
	right:0;
	margin:auto;
	padding:0;
	border:0;
	z-index:35;
}
.blog-preview p{
	background-color:#00000055;
	padding:5px;
	border-radius:10px;
}
.friends-grid{
	text-align:center;
}
.profile h1{
	font-family: 'Corben', cursive;
	font-size:4em;
	line-height:1em;
	letter-spacing:-5px;
	margin-bottom:.8em;
    text-shadow:   0px -6px 0 #212121,  
                    0px -6px 0 #212121,
                    0px  6px 0 #212121,
                    0px  6px 0 #212121,
                   -6px  0px 0 #212121,  
                    6px  0px 0 #212121,
                   -6px  0px 0 #212121,
                    6px  0px 0 #212121,
                   -6px -6px 0 #212121,  
                    6px -6px 0 #212121,
                   -6px  6px 0 #212121,
                    6px  6px 0 #212121,
                   -6px  12px 0 #212121,
                    0px  12px 0 #212121,
                    6px  12px 0 #212121,
                    0 19px 1px rgba(0,0,0,.1),
                    0 0 6px rgba(0,0,0,.1),
                    0 6px 3px rgba(0,0,0,.3),
                    0 12px 6px rgba(0,0,0,.2),
                    0 18px 18px rgba(0,0,0,.25),
                    0 24px 24px rgba(0,0,0,.2),
                    0 36px 36px rgba(0,0,0,.15);
}
nav .links{
	border-radius:0 0 25px 25px;
	text-align:center;
}
nav .top, nav .links{
	background:#00000066;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions{
	border:none;
}
.profile .contact .f-row, .profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p{
	margin:0;
}
.friends{
	margin-bottom:20px;
}
.left{
	width:65%!important;
}
.details-table{
	border-spacing:0;
}
.inner{
	background: #00000066;
	padding: 10px;
	border-radius: 0 0 10px 10px;
}
.profile-info .inner{
	border-radius:10px 10px 0 0;
	background: #000000CC;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.profile-info .inner h3{
	margin:0;
}
.details-table td:first-child{
	background:none;
}
.profile .blurbs .section:last-child{
	margin-bottom:0;
}
.table-section:nth-last-child(2) .details-table td:first-child{
	display:none;
}
.details-table td{
	background:none;
}
main{
	background:#00000066;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius:25px;
	padding:25px;
	color:#FFFFFF;
}
.profile .left .table-section:last-child .details-table tbody {display:flex;}
.profile .left .table-section:last-child .details-table tbody tr{display:flex;flex-direction:column;flex:1;line-height:0;}
.profile .left .table-section:last-child .details-table tbody tr td{width:100%!important;text-align:center;background:none;}
.profile .left .table-section:last-child .details-table tbody tr td p a{font-size:0;transition:all .3s}
.profile .left .table-section:last-child .details-table tbody tr td p img{font-size:36px;transition:all .3s;height:auto;margin:0;}
@media only screen and (max-width: 600px) {
	.container{
	max-width:95%;
	}
	.left{
		width:100%!important;
	}
}

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 12 of 12 comments ( View all | Add Comment )

voop	1733852137 using because pretty :) Report Comment
insomniac 🇧🇷 (experiencing the horrors)	1733163066 hey guys place < style > at the start and < / style > at the end of the code to make it work!! Report Comment
blamejohn	1727916659 using:3 Report Comment
★ cameron ★	1723121572 Using!! Thank you again for all the hard work Report Comment
chrome08	1714743260 Nice work dude! Using! Also; to all the folks out there that JUST can't get it to work, just place at the start and at the end of the layout! Hope this helps! :D Report Comment
SdjFR	1708567938 using Report Comment
2CUT3L0V3RS	1706894684 IT WONT WORK!! Report Comment Yo! Found a solution, place at the start, and at the end of the layout! Hope this helps! by chrome08; 1714743154; Report what to u mean by place by 2CUT3L0V3RS; 1717093818; Report ok so what you need to do is: [insert code here] [your about me text] and it'll work :P by lambda leon; 1723678460; Report AGH < style > [code] style> w/o the spaces tho by lambda leon; 1723678502; Report the last part is < / style > istg html makes me go insane sometimes- by lambda leon; 1723678552; Report
Cass	1704730515 Using ty! Report Comment
Chomp	1696236022 this is such a cool one, i just couldnt get it working on my profile for some reason Report Comment Yo! Found a solution, place at the start, and at the end of the layout! Hope this helps! by chrome08; 1714743178; Report
nev	1681181850 i love this theme im going to use it thx! Report Comment
Jace Varona	1636824800 Almost got this one! Would love to see it in non-binary colors :D Report Comment
itriedtoescape	1614008393 awesome! Report Comment