Skip to content

Instantly share code, notes, and snippets.

@snthcy
Last active Sep 3, 2021
Embed
What would you like to do?
CSS uploaded by scrapbook.hackclub.com/customizer
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Work+Sans&display=swap');
:root {
--colors-background: #18181B;
--colors-text: #ffffff;
--colors-secondary: #27272A;
--colors-elevated: #27272A;
--colors-sunken: #18181B;
--colors-accent: #3F3F46;
--colors-hover: #FFFFFF;
--colors-link: rgba(204, 76, 62, 0.5);
--colors-link-hover: rgba(204, 76, 62, 0.8);
--colors-sheet: #27272A;
--fonts-body: 'Inter', sans-serif;
--fonts-bold: 'Inter', sans-serif;
}
#__next {
font-family: 'Inter';
}
.container {
max-width: 84rem;
}
.nav {
height: 64px;
}
.nav-flag {
font-family: var(--fonts-body);
background-image: url("https://assets.hackclub.com/icon-rounded.svg") !important;
animation: none !important;
-webkit-animation: none !important;
text-decoration: none;
/*font-family: var(--fonts-bold);*/
height: 64px !important;
width: 2.6rem !important;
background-position: center !important;
margin-right: 12px;
}
.nav-link:hover, .nav-link:focus {
color: var(--colors-text);
}
.header-title-name {
font-weight: 300;
margin-bottom: 1rem;
}
.header-link {
color: var(--colors-text);
}
.header-link:hover, .header-link:focus {
color: var(--colors-text);
}
.posts {
grid-gap: 30px;
padding: 30px;
}
.post {
padding: 20px;
border-radius: 25px;
box-shadow: 9px 9px 16px #27272A, -9px -9px 16px #3F3F46;
}
.post-text {
color: var(--colors-text);
}
.header-chart {
grid-column-start: 3;
}
.post-header {
margin-bottom: 25px;
font-family: var(--fonts-bold);
}
.post-header-date:before {
content: "";
position: absolute;
width: 12%;
height: 1px;
top: 0;
left: 0;
margin-top: 46px;
margin-left: 19px;
border-bottom: 4px solid var(--colors-muted);
transition: all 0.4s ease-in-out;
}
.post:hover .post-header-date:before {
width: 25%;
border-bottom: 4px solid var(--colors-slate);
}
.post-attachment img {
transition: all 0.2s ease-in-out;
}
.post:hover .post-attachment img {
border-radius: 16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment