red-01-blog

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

Description:

this is the blog css for the red-01 layout.

this is ONLY for blogs.

I have the profile css layout here

check out my blog for more info or questions or comments ~

Here is a Black and White CSS Template for you to use to make your own blog layout! :)

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.