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 4 of 4 comments ( View all | Add Comment )

Chomp	1696236022 this is such a cool one, i just couldnt get it working on my profile for some reason Report Comment
nev	1681181850 i love this theme im going to use it thx! Report Comment
Jace R	1636824800 Almost got this one! Would love to see it in non-binary colors :D Report Comment
itriedtoescape	1614008393 awesome! Report Comment