ElenaMaria's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Minimalist Grey/white/marble layout







<style>

:root{
  --headers: #666666;
  --links: #cccccc;
  --text: #666666;
  --names:#cccccc;

  --background_image: url("https://i.pinimg.com/originals/57/2d/4b/572d4b5803e4e1af09a5f7288fc74c1b.jpg");

  --font-family: times new roman;
   
  --mynamesize: 35px;

  --transparency: 0.60;

  --curve: 0px;

  --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: 0px !important;
filter:hue-rotate(var(--hue)) drop-shadow(0px 0px black) !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 #666666) !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(39%) sepia(0%) saturate(491%) hue-rotate(267deg) brightness(98%) contrast(88%) !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 dotted #cccccc !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>


0 Kudos

Comments

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