Report Blog Entry
<style>
@import
url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
:root{
--headers: #ff3399;
--links: #ff3399;
--text: #ff3399;
--names:#ff3399;
--background_image: url("https://i.pinimg.com/originals/25/62/57/256257479b04993aad2a1f6514fbbb1d.png");
--font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
--mynamesize: 35px;
--transparency: 0.70;
--curve: 10px;
--hue: 0deg;
--simple_bg: #ffffff;
--topic1: ";
--topic2: "";
--topic3: "";
--topic4: "";
--topic5: "";
--topic6: "";
--myactions: "add me ";
--mytopics: "things i like ";
--mylinks: "follow me on these sites";
}
h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, h2{color: var(--text) !important;} /* color of text */
h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
nav label{color: var(--headers) !important;} /* color of search */
.section h4{color: var(--names) !important;} /* aboutme & want2meet headings */
.online{color: var(--links) !important;} /* color of the 'online' text */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */
:root{ --box_color_and_seethru: rgba(255, 255, 255, var(--transparency));}
h1, h2, h3, h4, h5, a, p, nav label, .section{
font-family: var(--font-family) !important;
text-shadow: 0px 0px black !important;
text-transform:lowercase !important;
}
h1, h2, h3, h4, h5, p {padding-left:5px !important;}
h1{
font-size: var(--mynamesize) !important;
text-transform:lowercase !important;
padding-left:10px !important;
}
body {
background-image: var(--background_image) !important;
background-color:black !important;
/* if you want your bg to stay fixed, use */
/* background-attachment: fixed !important; */
}
.heading, .url-info, .blurbs, .details, .mood, .blog-preview, .friends, .contact, .table, .table-section, footer{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
padding: 8px !important;
border: var(--borders) !important;
/* there's a subtle-ish gradient effect on every box on holmes' page */
/* it's disabled here so the root transparency works right */
/* background-image: linear-gradient(330deg, rgba(90, 90, 90, 0.1), rgba(60,60,60,0.1), rgba(100, 100, 100, 0.1)) !important; */
}
#comments, .blurbs, .blog-preview, .friends, .mood, .contact, .table-section, footer
{ backdrop-filter: blur(0.58px);}
/* ~~~~~ f i n e t u n i n g ~~~~~ */
/* table-section doesn't wanna play nice. needs work */
.table-section{border:none !important;background-color:var(--box_color_and_seethru)!important;border-radius: var(--curve) !important;}
.heading{background:none !important;padding-bottom:0px !important;
}
.profile-pic img{
/* the face rotation is funny, but let's comment it away for default */
/* transform: rotate(90deg) !important; */
outline:none !important;
border-radius: 5px !important;
filter:hue-rotate(var(--hue)) drop-shadow(0px 0px #ff3399) !important;
}
.friends-grid img{
outline:none !important;filter: opacity(90%) !important;
width:80% !important; height:80% !important;
border-radius: 500px !important;
filter:hue-rotate(var(--hue)) !important;
}
.inner img{
outline:none !important;
filter: hue-rotate(var(--hue)) drop-shadow(2px 2px 3px #ff3399) !important;
border-radius: var(--curve) !important;
}
/* ~~~~~ e m b e d d i n g ~~~~~ */
/* this works for youtube well enough, dunno about the others. experiment! try 100x100px soundcloud players c_c (opacity 1.0 is fully visible) */
iframe{border-radius: 5px !important;opacity: 0.66 !important; drop-shadow(1px 1px 2px #f6a2be) !important; }
nav{background-color:var(--box_color_and_seethru); !important;border-radius: 0px 0px var(--curve) var(--curve); !important;}
nav ul{background:none !important;}
nav img{filter: opacity(80%) !important;}
nav ul a img, .mood a img{display:none !important;}
.top{background:none !important;background-color:rgba(0, 0, 0, 0.3); !important;}
/* ~~~~~ s p a c e h e y l o g o ~~~~~ */
/* the color of the spacehey logo can be changed with the help of this awesome tool */
/* https://codepen.io/sosuke/pen/Pjoqqp */
/* you do indeed need the brightness 0 and saturate 100 at the start */
nav img.logo{filter: brightness(0) saturate(100%) invert(34%) sepia(78%) saturate(2934%) hue-rotate(310deg) brightness(100%) contrast(103%) !important;}
/* ~~~~~ t h e u r l - i n f o b o x i s h i d d e n b y d e f a u l t ~~~~~ */
/* cause who needs it...? delete this line to reveal it */
.url-info{display:none !important;}
/* ~~~~~ t a b l e o f i n t e r e s t s ~~~~~ */
/* change 0.0 to 0.3 or higher to make the individual cells darker. looks kinda cool */
td {background-color:rgba(0, 0, 0, 0.0) !important;border-radius: var(--curve) !important;}
/* ~~~~~ l e t t h e r e b e r o u n d n e s s ~~~~~ */
/* curve is in the root */
main{border-radius: var(--curve) !important;}
main{background-color:rgba(0, 0, 0, 0.0); !important;}
.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
{
border: 1px solid #ff3399 !important;
outline: none !important;
}
/* ~~~~~ e x c e p t i o n s e t c . ~~~~~ */
.icon{border:none !important;}
.mood{margin-bottom:10px !important;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:-10px !important;}
.profile-info{border-radius: var(--curve) !important;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:7px !important;}
#comments{margin-top:15px !important;padding-bottom:15px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);
}
/* ~~~~~ n o o b h a c k e r y ~~~~~ */
/* all this to keep the "forward to friend" from overflowing with comic sans. wip */
.contact, .f-row, .f-col{padding-left:0px !important;margin-left:0px !important;margin-right:0px !important;padding-right:0px !important;}
.contact{padding-left:2px !important;}
.f-row{margin-bottom:3px !important;padding-bottom:0px !important;padding-top:2px !important;margin-top:0px !important;}
.f-col a{margin-left:-2px !important;padding-left:-2px !important;}
.contact{padding-bottom:12px !important;}
/* ~~~~~ s e a r c h b a r ~~~~~ */
/* color the search bar using colors from root */
.search-wrapper input[type=text] {background-color: rgba(255, 255, 255, 0.0) !important;border: 1px dotted var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;}
button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(255, 255, 255, 0.5) !important;color:var(--headers) !important;}
/* ~~~~~ a q u i c k f i x ~~~~~ */
/* fix for long strings within code-tags breaking comment tables */
code{ word-break: break-all !important;}
.w-40 .table-section:last-child .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}
.w-40 .table-section:last-child .heading::after{
content: var(--mylinks);
font-family: var(--font-family) !important;
text-shadow: 0px 0px black !important;
text-transform:lowercase !important;color: var(--headers) !important;font-weight: bold !important;}
.w-40 .table-section:nth-last-child(2) .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}
.w-40 .table-section:nth-last-child(2) .heading::after{
content: var(--mytopics);
font-family: var(--font-family) !important;
text-shadow: 0px 0px black !important;
text-transform:lowercase !important;color: var(--headers) !important; font-weight: bold !important;
}
.w-40 .contact .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}
.w-40 .contact .heading::after{
content: var(--myactions);
font-family: var(--font-family) !important;
text-shadow: 0px 0px black !important;
text-transform:lowercase !important;color: var(--headers) !important;font-weight: bold !important;}
.blurbs .heading{display:none !important;}
/* ~~~~~ p e r s o n a l i z e d t o p i x ~~~~~ */
/* we're gonna make our own topics. change these in the root too */
/* same hack as above, though this is somehow even more fragile. might be buggy */
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}
.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 0px 0px black !important;
filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content: var(--topic6);
}
/* ~~~~~ h r t a g ~~~~~ */
/* you can make these lines in your aboutme with the <hr> tag */
hr{ border: 1px dashed var(--names) !important;filter: brightness(55%) !important;}
/* ~~~~~ S I M P L I F I E D v a r i a n t ~~~ move that line over this line */
/* move this entire line over that line to toggle the simplified variant ON/OFF
.heading, .url-info, .blurbs, .details, .mood, .blog-preview, .friends, .contact, .table, .table-section, footer{
background-color:transparent !important; background-image:none !important;
}
main, footer, nav{background-color:var(--simple_bg) !important;border-radius: 0px !important;}
footer{margin:0px !important;border-radius:0px 0px var(--curve) var(--curve) !important; }
p, a, h1, h2, h3, h4, h5, h6{text-shadow:none !important;}
.details-table tr td:first-child p::after{text-shadow:none !important}
.w-40 .contact .heading::after{text-shadow:none !important;}
.w-40 .table-section:last-child .heading::after{text-shadow:none !important;}
.w-40 .table-section:nth-last-child(2) .heading::after{text-shadow:none !important;}
nav label{text-shadow:0px 0px white !important;}
button{background-color:transparent !important}
.profile img, .friends-grid img, .inner img{filter:none !important;}
.search-wrapper input[type=text] {background-color: transparent !important;}
.url-info, #comments, .table, button, .search-wrapper input[type=text]{border:2px dashed var(--text) !important;background-color:rgba(120,120,120,0.014) !important}
*/
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )