Report Blog Entry
I've changed the background image to a solid color because it links to my own website and I don't need that kind of traffic. Other than that it's the same.
<style>
:root { /* this color is the cyan and changes things that are that color */ --logo-blue: #7AF0C6; /* used to be the color for background now it does nothing */ --darker-blue: #161B24; /* heading text color */ --dark-orange: black; /* most text color */ --light-orange: #C98459; /* boxes and links in nav bar color */ --lighter-blue: rgba(85, 79, 89, 0.8); }
body { /* sets background */ background-image: url(https://j.gifs.com/p8xjYy.gif); background-repeat: no-repeat; background-size: 100% 110%; }
main { /* changes made to stuff outside of columns */ background: transparent; padding: 0; font-size: 80%; color: var(--light-orange); }
p, ol li { /* makes plain text a bit bigger */ font-size: 1em; }
footer { /* keeps footer at bottom of page */ position: absolute; width: 100%; }
.w-40 > h1 { /* username */ font-size: 3em; text-align: center; font-family: cursive; width: 100%; padding-bottom: 6%; margin-bottom: -16%; border-radius: 10px; background: linear-gradient(rgba(0,0,0,0), var(--logo-blue), var(--logo-blue)); }
.general-about .profile-pic { /* profile pic container */ height: 100%; width: 100%; background-color: var(--logo-blue); border-radius: 10px; padding-top: 6%; }
.general-about .profile-pic img { /* profile pic */ max-width: 100%; max-height: 100%; margin-right: auto; margin-left: auto; border-radius: 10px; display: block; }
.details { /* makes the status panel special from other boxes */ font-size: medium; border-top-left-radius: 10px; width: 100%; border-top-right-radius: 10px; background-color: var(--lighter-blue); color: var(--light-orange); margin-bottom: -16px; }
.mood { /* makes the mood panel look like part of the status panel */ font-size: small; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; width: 100%; background-color: var(--lighter-blue); color: var(--light-orange); padding-bottom: 2px; margin-bottom: 10px; padding-top: 6% }
.online { /* annoying online indicator off */ display: none; }
.profile-info { /* useless profile box disabled */ display: none; }
.container { /* makes it full screen*/ width: auto; }
.w-40 > p { /* hides edit photo button so go to the homepage to edit that or turn this off by removing it but beware it will make your profile look worse from your view */ display: none; }
.f-col { /* allow contacts to stack */ vertical-align: top; margin-bottom: 5px; display: block; }
.profile .contact .f-row { /* removes extra spacing from contacts */ margin: 0; }
.blog-preview > p { /* makes blogs have the same look as other boxes */ margin: 7px; }
.profile .contact, .blog-preview, .profile .url-info, .profile .table-section, .home-actions, .profile .blurbs, .profile .friends, .blog-entry .comments { /* boxes around stuff */ width: 100%; border: none; margin: 10px 0; background-color: var(--lighter-blue); color: var(--light-orange); border-radius: 10px; padding-bottom: 2px; }
.profile .contact:hover, .blog-preview:hover, .profile .url-info:hover, .profile .table-section:hover, .home-actions:hover, .profile .blurbs:hover, .profile .friends:hover, .blog-entry .comments:hover { /* transform on hover over for boxes */ transform: scale(1.01); }
.profile-pic:hover { /* transform on hover for profile pic */ transform: scale(1.02) }
.w-40 > h1:hover { /* transform on hover for username */ transform: scale(1.02) }
.blog-preview h4,.profile .heading, .profile .contact .heading, .profile .table-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading { /* headers on the boxes */ background: var(--logo-blue); color: var(--light-orange); padding: 2px 7px; border-radius: 10px; }
a { /* color of links */ color: var(--logo-blue); }
.profile .blurbs .heading a, .blog-preview h4 a, .profile .friends .heading a, .profile .contact .heading a, .profile .table-section .heading a, .home-actions .heading a, .profile .blurbs .section h4, .profile .friends .person p { /* color of specific links & other stuff so they don't blend in */ color: var(--light-orange); }
table, .details-table td, .comments-table td, .music-table td, .comments-table td:first-child, .music-table td:first-child, .details-table td:first-child { /* tables */ vertical-align: top; background-color: rgba(0, 0, 0, 0); color: var(--light-orange); border: 0; outline: none; border-bottom: 1px solid var(--light-orange); }
div.friends-grid { /* center friends names */ text-align: center; }
.profile .friends .person img { /* friend images with curved edges */ border-radius: 15px; }
.col.w-40 { /* size of left column but often size is different due to breakpoints */ width: 30%; }
/* everything below is for resizing */
@media (min-width: 1100px) { .col.w-40 { width: 20.1%; background-color: var(--lighter-blue); }
nav { position: absolute; right: 0; width: 80%; height: fit-content; background: var(--lighter-blue); }
nav .top { border-bottom-left-radius: 10px; }
nav .links { background: transparent; }
main .right { padding-top: 8%; } .w-40 > h1 { background: var(--logo-blue) } }
@media (max-width: 1000px) { .col.w-40 { width: 32%; } }
@media screen and (max-width: 800px) { .col.w-40 { width: 36%; } .w-40 > h1 { font-size: 350%; } }
@media screen and (max-width: 667px) { .w-40 > h1 { font-size: 320%; } }
@media screen and (max-width: 600px) { .w-40 > h1 { font-size: 300%; }
@media screen and (max-width: 567px) { .w-40 > h1 { font-size: 230%; } }
@media screen and (max-width: 482px) { .col.w-40 { width: 100%; }
.f-col { display: table-cell; }
.profile .contact .inner { text-align: unset; }
.w-40 > h1 { font-size: 360%; background: var(--logo-blue); margin-bottom: -12%; }
body { background: var(--darker-blue) } }
</style>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
𝓵𝓸𝓼𝓮𝓻 𝓫𝓸𝓲
for anyone still interested I updated this for a while after uploading, but I don't plan to anymore as I've already made so many new horribly written changes, but I might post those changes separately once their more streamlined.