Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My personal Scrapbook Profile CSS Customization
/* body customization */
body {
background-color: black;
background-image: url("https://transparenttextures.com/patterns/cartographer.png");
}
/* nav-link customization */
.nav-link-home {
font-weight: bold;
color: #fd5b11;
}
.nav-link-home:hover {
color: #ec2f3a;
}
.nav-link-home::before {
content: "Javier's ";
}
.nav-link-about {
font-weight: bold;
color: #fd5b11;
}
.nav-link-about:hover {
color: #ec2f3a;
}
.nav-link-github {
font-weight: bold;
color: #fd5b11;
}
.nav-link-github:hover {
color: #ec2f3a;
}
/* header customization */
.header-link {
transition: 250ms ease;
}
.header-link:hover {
transform: scale(1.25, 1.25);
color: cyan;
}
.header-streak {
background: linear-gradient(0.25turn, yellow, #fe8019);
}
/* posts customization */
.posts {
border-radius: 0px;
grid-gap: 10px;
}
.post {
border-radius: 4px;
border: 3px solid #ec2f3a;
transition: 250ms ease;
}
.post-attachment:hover {
transform: scale(1.015);
}
/* custom animation */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.header-title-avatar {
animation: rotate 5s infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment