Add to Favorites
View Layouts
View Profile
Report Layout
Tags:
Description:
<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=4342) -->
<style>
/* font */
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
:root{
--gray: transparent; /* background color */
--logo-blue: transparent; /* navigation background color */
--lighter-blue: transparent; /* nav links background */
--lightest-blue: transparent; /*sidebar background */
--light-orange: transparent; /* comments table first child background */
--even-lighter-orange: transparent; /* comments table second child background */
--borders: 0px solid #000;
--font-family: 'Nothing You Could Do', cursive; /* this applies to the whole page. */
--header: #9E1363; /* color of titles */
--text: #fff; /* color of regular text */
--othertext: #D1208F; /* color of line that appears under the Kudos */
--links: #AC1876; /* color of links */
--hover: plum; /* color of links on hover */
}
/*custom cursor */
* {cursor: url('https://img.icons8.com/material-rounded/24/ffffff/cursor.png'), auto !important;}
a:hover {cursor: url('https://cdn.custom-cursor.com/db/8358/32/neon-angel-and-devil-cursor.png'), auto!important;}
body{
background-color: var(--gray);
background-image: url('https://i.imgur.com/wk5zg75.jpg');
background-size: 100%100%;
background-attachment: fixed;
font-family: var(--font-family);
font-size: 16px!important;
}
main{
background: transparent;
color: var(--text);
}
.icon{
font-size: 12px!important;
border: none!important;
}
a{
color: var(--links);
font-size: 16px!important;
}
a:hover{
color: var(--hover);
text-decoration: none!important;
text-shadow: 0px 0px 5px black;
}
h2,h3,h4,h5{
font-size: 16px!important;
}
nav{
color: var(--links);
border: var(--borders);
background-color: var(--logo-blue);
text-align: center;
}
/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
content: " 𝕩 ";
color: var(--othertext);
font-family: 'Rock Salt', cursive;
}
nav .links a{
color: var(--links);
}
nav .links a:hover{
color: var(--hover);
}
/* this is where you edit your blog entry */
.kudos{
text-align: right;
}
.blog-entry .comments .heading{
border-top: 2px solid var(--othertext); /* this is the line that appears under the kudos */
text-align: right;
}
.blog-entry .title{
background-color: var(--gray);
color: var(--header);
border: var(--borders);
font-size: 40px!important;
font-weight: 1;
text-align: center;
font-family: 'Rock Salt', cursive;
}
.blog-entry .content{
background-color: var(--gray);
border: none;
font-family: var(--font-family);
letter-spacing: 1px;
font-size: 16px;
text-align: center;
}
/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
max-width: 120px;
filter: brightness(0) saturate(100%) invert(13%) sepia(87%) saturate(3802%) hue-rotate(309deg) brightness(94%) contrast(91%)!important;
}
/* the search wrapper and button */
.search-wrapper input[type=text] {
background-color: transparent !important;
border-bottom: 1px solid var(--links)!important;
border-top:none;border-left:none;border-right:none;
color: var(--links) !important;
}
button{
border: 0px solid var(--links) !important;
background-color: transparent !important;
color: var(--links) !important;
font-size: 13px!important;
}
.count{
color: var(--links);
}
footer{
color: var(--text);
background: var(--logo-blue);
border: var(--borders);
text-align: center;
font-size: 16px!important;
}
footer .links{
text-align: center;
}
/* side bar with your profile image */
.edit-info{
background: var(--lightest-blue);
border: var(--borders);
}
.edit-info img{
border-width: 3px 4px 3px 5px;
border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
transform: rotate(2deg);
border: 3px solid #D1208F;
}
/* comments table */
#comments p:not(.comments-table p){
text-align: right; /* Displaying 2 of 2 comments ( View all | Add Comment ) */
font-size: 16px!important;
}
.comment-replies{
border-top: 1px solid #D1208F;
border-bottom: none;border-left:none;border-right:none;
background-color: transparent;
}
table.comments-table{
border: none;
background-color: none;
border-spacing: 10px;
direction: rtl;
}
.comments-table td{
background: transparent;
border: 3px solid var(--header);
direction: ltr;
border-width: 3px 4px 3px 5px;
border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
transform: rotate(2deg);
padding:7px;
}
.comments-table td p{
transform: rotate(-2deg);
}
.comments-table td:first-child{
border: none;
filter: drop-shadow(-1px 4px 4px var(--header));
}
.comments-table td:first-child img{
clip-path:polygon(7% 0, 0 89%, 37% 86%, 38% 100%, 52% 86%, 94% 82%, 100% 6%);
}
/* mobile code DON'T DELETE */
@media(max-width: 600px){
body{
background-size: contain;
}
.edit-info, .blog-entry .content, footer{
padding:50px;
}
#comments{
padding:50px;
}
nav .links{
padding-left:50px;
padding-right:50px;
padding-bottom:none;
padding-top: none;
}
}
</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.
Comments
Displaying 0 of 0 comments ( View all | Add Comment )