heart aspect layout! ft dirk stuff

Tags: homestuck, heart, dirk strider

Description:

uhm yeah!! wanted to post this before I forgot, comment if using ^_^

Preview:

click on the image for a larger preview

Code:

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

<style>
          .general-about img , .profile .friends .person img{
  -webkit-mask-image: url(https://cdn-icons-png.flaticon.com/512/44/44672.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;
}
.general-about{
  position: relative;
  margin-top: 30px;
}
body, a, a:hover { cursor:url(http://media.tumblr.com/tumblr_mdhwabtE5T1qg3bod.png), auto }
.table-section + .table-section {
        display: none;
    }
/*the username glow and shadow*/
h1
{
	color: /*the username glow and shadow*/
h1
{         color: #75144d; 
	//text-shadow: 1px 1px #75144d;
	
};
	text-shadow: 2px 2px 3px #75144d, 0 0 25px #75144d, 0 0 5px black;
}
body {
 margin:0;
background-color: black;
background-image: url("https://i.pinimg.com/564x/2b/51/26/2b5126710cdafb473c6356c390bb457c.jpg");
background-attachment: fixed;
no-repeat fixed; background-size:cover;

}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

a, .profile .friends .person p, .logout-btn {
color: #75144d !important;
text-decoration: underline !important;
}
.container {
margin: 0 auto 0;
}
.icon {
display: none;
}
nav, nav .links a {
color: #75144d;
}
nav .top {
margin-top: 2px;
background: none;
background-color: rgba(0, 0, 0, 0.5);
border: 2px dotted #75144d;
border-bottom: none;
}
nav .links {
background-color: rgba(0, 0, 0, 0.5);
border: 2px dotted #75144d;
text-align: center;
}
main {
background: black;
background-color: rgba(0, 0, 0, 0.5);
color: #75144d;
border-left: 2px dotted #75144d;
border-right: 2px dotted #75144d;
border-bottom: 2px dotted #75144d;
}
.heading {
color: #75144d !important;
background: none;
background-color: transparent !important;
border: 2px solid #75144d !important;
}

.url-info {
color: #75144d !important;
background: none;
background-color: transparent !important;
border: 2px dotted #75144d !important;
}

.inner {
color: #75144d !important;
border: 2px dotted #75144d;
border-top: none;
}
.profile-info {
border: 2px dotted #75144d;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px dotted #75144d;
}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;
}

/* contact icons */
.contact .inner a img {
font-size: 0;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png")
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png")

}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("http://media.tumblr.com/tumblr_mdhlazxPmp1qg3bod.png")
}

.profile .contact .f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.profile .blurbs .section h4 {
color: #75144d !important;
text-align: center;
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 1px dotted #75144d;
border-collapse: collapse;
}
td {
color: #75144d !important;
background: none;
background-color: transparent !important;
} 
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 2em;
color: #75144d;
}
footer {
background-color: rgba(0, 0, 0, 0.5);
border: 2px dotted #75144d;
}
footer p {
color: #75144d !important;
}
.comments-table {
border: none;
border-collapse: collapse;
}
.comment-replies {
border: 1px dotted #75144d;
margin: 2px;
}
nav .info {
background: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}
table.comments-table{
background-color: rgba(0, 0, 0, 0.5);
display: block;
height: 300px!important;
overflow-y: scroll;

}
::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: #75144d;}

    ::-webkit-scrollbar-track {
    background:black;}
.comments-table td:first-child{
background-color: rgba(0, 0, 0, 0.5);

}

.comments-table td{
border-width:0;
background-color: rgba(0, 0, 0, 0.5);
border: 2px dotted #75144d;
}
          </style>

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.