red-01-blog

Tags: red, black, grunge, darkred, blog, bela

Description:

preview the blog here

Copy the code below and Paste it into your blog above your content.

You can add the css before writing your blog content, or afterwards.
I find it easier to add it after you have your blog content if you plan to add more styling or if you want to edit the CSS code.

Here is a quick how-to if you need it:

If you still need help, check out my blog for more info or questions or comments ~

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Arizonia&family=Quintessential&display=swap');
</style>
<style>
html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url("https://i.ibb.co/5YNx4Y8/QpnTsrV.jpg");
    content: "";
    height: 300%;
    left: -50%;
    opacity:.2;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
}
@keyframes grain {
 0%, 100% { transform:translate(0, 0) }
 10% { transform:translate(-5%, -10%) }
 20% { transform:translate(-15%, 5%) }
 30% { transform:translate(7%, -25%) }
 40% { transform:translate(-5%, 25%) }
 50% { transform:translate(-15%, 10%) }
 60% { transform:translate(15%, 0%) }
 70% { transform:translate(0%, 15%) }
 80% { transform:translate(3%, 35%) }
 90% { transform:translate(-10%, 10%) }
}

:root{
  --gray: #000; /* background color */
  --logo-blue: transparent; /* navigation background color */
  --lighter-blue: transparent; /* nav links background */
  --lightest-blue: transparent; /*sidebar background */
  --light-orange: #000; /* comments table first child background */
  --even-lighter-orange: #000; /* comments table second child background */
  --borders: none;
  --font-family: 'Quintessential', cursive;
  --header: crimson;
  --text: darkred;
  --othertext: crimson;
  --links: red;
  --hover: red;
}
body{
  background-image: url('https://wallpaper.dog/large/982663.jpg'), url('https://wallpaper.dog/large/982663.jpg');
  background-size: 30%;
  background-attachment: fixed;
  background-position: left, right;
  background-repeat: no-repeat;
  font-family: var(--font-family);
}
a{
  color: var(--links);
}
a:hover{
  color: var(--hover);
  text-decoration: underline;
}
nav{
  color: var(--links);
  border: var(--borders);
}
nav .top{
  background: var(--logo-blue);
  color: var(--header);
}

/* 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(--header);
}
nav .links{
    text-align: center;
}
nav .links a{
  color: var(--links);
  text-shadow:none;
}

nav .links a:hover{
  color: var(--hover);
}

/* this is where you edit your blog entry */

.blog-entry .comments .heading{
  border-top: 2px solid var(--othertext); /* this is the line that appears under the kudos */
}

.blog-entry .title{
  padding:0px;
  background-color: var(--lightest-blue);
  color: var(--header);
  border: var(--borders);
  font-family: var(--font-family);
}

.blog-entry .content{
  padding: 0px;
  background-color: var(--lightest-blue);
  border: var(--borders);
}

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(19%) sepia(57%) saturate(4801%) hue-rotate(352deg) brightness(76%) contrast(84%)!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 1px solid darkred!important;
    border-radius: 3px;
    color: var(--links) !important;
}

button{
    border: 0px solid var(--links) !important;
    background-color: transparent !important;
    color: var(--links) !important;
}

.count{
  color: var(--links);
}

main{
  background: transparent;
  color: var(--text);
}

footer{
  color: var(--text);
  background: var(--gray);
  border: var(--borders);
}

/* side bar with your profile image */

.edit-info{
  background: var(--lightest-blue);
  border: var(--borders);
}
/* red divider */
.edit-info:after{
    background-image: url('https://www.clipartmax.com/png/full/294-2943352_separator-1511402728-red-separator-png.png');
    height:30px;
    display: block;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 20px;
}
.edit-info img:not(.icon){
    background-image: url('https://i.ibb.co/xhm7bY7/Red-Static.gif');
    background-size: 50%;
    padding:8px;
}

/* comments table */

/* this is the border around the replies */
.comment-replies{
    border:1px solid darkred;
    border-radius: 3px;
} 
/* line in between comment replies*/
.comment-reply:not(:first-child){
    border-top: 4px double darkred;
}
.comments-table{
    border:none;
    border-spacing: 0px 10px;
}
.comments-table td{
    background-color: transparent!important;
}
.comments-table td:first-child img:not(.icon){
    background-image: url('https://i.ibb.co/xhm7bY7/Red-Static.gif');
    background-size: 60%;
    padding:5px;
    border-radius: 3px;
}
.comments-table button{
    border:none;
    background-color: transparent;
    color:crimson;
    font-family: 'Quintessential', cursive;
    font-size: 13px!important;
    font-weight: 1;
    letter-spacing: 1px;
    text-shadow: 0px 0px 4px red;
}
</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 12 of 12 comments ( View all | Add Comment )

AJax FInn	1726132157 ussingg ^^ Report Comment
P0rcelainV4mp1334	1722023763 using, might change backgrounds Report Comment
vincenzo	1718650414 using Report Comment
✮m (1931)✮	1709748100 using ^_^ Report Comment
Dewdrop	1709468376 Using, might change Report Comment
mossings	1708232094 usingg Report Comment
Kenia☆	1705260114 Using, might change in the future though. Im not sure, but definitely using!!! Report Comment
𝑘𝑢𝑟𝑎𝑖	1704217640 using Report Comment
kuzu	1704148085 using, thx Report Comment
Boxycliff	1700671071 love it. using! Report Comment
kamo	1700008840 using! Report Comment
Krzztl	1698112984 using Report Comment