Blog Layout Cathedral

Tags:

Description:

This took me forever to figure out so I hope this can help others with their blogs. If you want to change the pictures or colors it's super simple just switch the urls/color name. Enjoy! :) edit:idk why the picture didn't upload but if you look up test blog you'll see what it looks like.

Code:

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

<style>
* { 
	cursor: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/761ed729-794d-4221-96a9-a82ff8671d38/dg782gq-471e3623-d81b-484a-9894-17103e9fadfa.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzc2MWVkNzI5LTc5NGQtNDIyMS05NmE5LWE4MmZmODY3MWQzOFwvZGc3ODJncS00NzFlMzYyMy1kODFiLTQ4NGEtOTg5NC0xNzEwM2U5ZmFkZmEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.NQ_Rb8VW16K2DijBxbAsG2xyhlBO35TzF_V_DJAuIGE), auto; 
}

html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url(https://images.unsplash.com/photo-1610337673044-720471f83677?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dHYlMjBzdGF0aWMlMjB0ZXh0dXJlfGVufDB8fDB8fHww);
    content: "";
    height: 300%;
    left: -50%;
    opacity: .05;
    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%) }
}

body {
    background: url(https://images.unsplash.com/photo-1567031107131-5a80b61f7dba?q=80&w=2126&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    color: transparent;
    font-family: "Times New Roman", Times, serif;
    font-size: 25px;
    font-display: bold;
}

main {
    background: black;
    opacity: .7;
    color: var(--text);
    border-bottom: 10px solid #000;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
}

:root {
    --logo-blue: transparent;
    --darker-blue: white;
    --lighter-blue: transparent;
    --even-lighter-blue: url(https://images.unsplash.com/photo-1601556402973-7c31205cbc30?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y3Jvd3N8ZW58MHwxfDB8fHww);
    --lightest-blue: url(https://images.unsplash.com/photo-1601556402973-7c31205cbc30?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y3Jvd3N8ZW58MHwxfDB8fHww);
    --light-orange:;
    --even-lighter-orange:;
    --green: red;
    --font-family: terminal, small fonts;
    --header: #ffffff70;
    --text: #FFFFFF;
}

footer {    
    background-color: black;    
}
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/pjd1gxO6NEg/?autoplay=1&loop=1&controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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.