Skip to content

Instantly share code, notes, and snippets.

@jasonappah

jasonappah/style.css

Last active Jul 1, 2020
Embed
What would you like to do?
CSS uploaded by scrapbook.hackclub.com/customizer
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
:root {
--background: linear-gradient(145deg, #198dd2, #1ea8f9);
}
#__next {
background-color: #1c9de9;
font-family: 'Lato', sans-serif;
}
.header-link svg {
fill: white;
}
.header-link {
margin-right: 10px;
margin-bottom: 10px;
padding: 10px;
border-radius: 50px;
background: var(--background);
animation: fadeDown 0.2s;
animation-fill-mode: forwards;
}
.header-link:hover {
animation: fadeIn 0.2s;
animation-fill-mode: forwards;
}
@media (max-width: 48em) {
.header-chart {
padding-top: 40px;
border-radius: 50px;
background: var(--background);
box-shadow: 20px 20px 60px #1885c6,
-20px -20px 60px #20b5ff;
margin-bottom: 20px;
}
}
.react-calendar-heatmap text {
fill: white;
}
.nav-link, .header-title-name {
color: white;
font-weight: 900;
}
@-webkit-keyframes fadeIn {
from {
box-shadow: none;
}
to {
box-shadow: 20px 20px 60px #1885c6,
-20px -20px 60px #20b5ff;
}
}
@keyframes fadeIn {
from {
box-shadow: none;
}
to {
box-shadow: 20px 20px 60px #1885c6,
-20px -20px 60px #20b5ff;
}
}
@-webkit-keyframes fadeDown {
from {
box-shadow: 20px 20px 60px #1885c6,
-20px -20px 60px #20b5ff;
}
to {
box-shadow: none;
}
}
@keyframes fadeDown {
from {
box-shadow: 20px 20px 60px #1885c6,
-20px -20px 60px #20b5ff;
}
to {
box-shadow: none;
}
}
@keyframes fadeIn2 {
from {
box-shadow: none;
background: white;
color: black;
}
to {
box-shadow: 20px 20px 60px #1885c6,
-20px -20px 60px #20b5ff ;
background: var(--background);
color: white;
}
}
@keyframes fadeDown2 {
from {
box-shadow: 20px 20px 60px #1885c6,
-20px -20px 60px #20b5ff;
background: var(--background);
color: white;
}
to {
box-shadow: none;
background: white;
color: black;
}
}
.post:hover {
animation: fadeIn2 0.3s;
animation-fill-mode: forwards;
}
.post {
animation: fadeDown2 0.3s;
animation-fill-mode: forwards;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.