Skip to content

Instantly share code, notes, and snippets.

@pmbrull
Created March 9, 2022 11:24
Show Gist options
  • Save pmbrull/e95a27df5464f3d428ba74df226c9403 to your computer and use it in GitHub Desktop.
Save pmbrull/e95a27df5464f3d428ba74df226c9403 to your computer and use it in GitHub Desktop.
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap');
* {
text-decoration: none !important;
outline: none !important;
}
:root {
--transition: all .4s cubic-bezier(0.8,0.04,0.4,1) !important;
--font-serif: 'Cormorant Garamond', serif !important;
--color-text-default-light: #808c99 !important;
--color-border-default: #dbdfe9 !important;
--color-card-bg: transparent !important;
--color-bg-default: #d3d7e3 !important;
--color-text-gray: #808c99 !important;
--color-border: #bcbec8 !important;
}
.notion-collection__header,
.notion-property__title__icon-wrapper,
.notion-callout__icon,
.notion-header__title {
display: none !important;
}
iframe {
background: none !important;
}
.max-width {
max-width: 1000px !important;
}
.super-content {
padding-bottom: 50px !important;
}
.notion-header__cover.no-cover {
max-height: 180px !important;
height: 180px !important;
}
.notion-text__content {
padding: 0 2px 24px !important;
font-size: 18px !important;
line-height: 2 !important;
}
h1 {
color: var(--color-text-default-light) !important;
font-weight: 300 !important;
font-size: 16px !important;
}
h2 {
font-family: var(--font-serif) !important;
line-height: 1.6 !important;
font-weight: 300 !important;
font-size: 48px !important;
max-width: 90% !important;
}
.notion-collection-gallery {
border: 1px solid var(--color-border) !important;
grid-template-columns: 1fr !important;
margin: 80px auto 0 !important;
position: relative !important;
grid-gap: 0 !important;
padding: 0 !important;
z-index: 2 !important;
}
.notion-collection-gallery:last-child {
border-bottom: none !important;
}
.notion-collection-card {
border-bottom: 1px solid var(--color-border) !important;
box-shadow: 0 40px 80px -20px rgba(0,0,0,0) !important;
transition: var(--transition) !important;
padding: 40px 80px 40px 40px !important;
position: relative !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.notion-collection-card:hover {
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.1) !important;
background: var(--color-border-default) !important;
}
.notion-collection-card__property {
min-height: auto !important;
}
.notion-property__title {
font-family: var(--font-serif) !important;
padding: 0 10px 10px 10px !important;
font-size: 30px !important;
}
.notion-property__file {
justify-content: center !important;
pointer-events: none !important;
align-items: center !important;
position: absolute !important;
display: flex !important;
padding: 54px !important;
height: 100% !important;
right: 0 !important;
top: 0 !important;
}
.notion-property__file div {
overflow: visible !important;
}
.notion-property__file img {
transition: var(--transition) !important;
opacity: 0.2 !important;
}
.notion-collection-card:hover .notion-property__file img {
transform: scale(0.8) translateX(40px) translateY(-40px) !important;
opacity: 1 !important;
}
.notion-embed {
margin: -40px auto !important;
}
.notion-collection-list {
border: 1px solid var(--color-border) !important;
align-items: center !important;
flex-direction: row !important;
overflow: visible !important;
grid-gap: 0 !important;
padding: 0 !important;
}
.notion-collection-list__item {
border-right: 1px solid var(--color-border) !important;
transition: var(--transition) !important;
justify-content: center !important;
position: relative !important;
border-radius: 0 !important;
padding: 30px !important;
margin: 0 !important;
}
.notion-collection-list__item:last-child {
border: none !important;
}
.notion-collection-list__item:hover {
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1) !important;
background: var(--color-border-default) !important;
color: var(--color-text-default) !important;
}
.notion-collection-list__item a {
transition: var(--transition) !important;
justify-content: center !important;
align-items: center !important;
position: absolute !important;
display: flex !important;
border: none !important;
height: 100% !important;
width: 100% !important;
opacity: 1 !important;
left: 0 !important;
top: 0 !important;
}
.notion-collection-list__item a:hover {
color: var(--color-text-default) !important;
}
.notion-collection-list .notion-property__title {
display: none !important;
}
@media (max-width: 600px) {
h2 {
font-size: 40px !important;
}
.notion-collection-gallery {
margin: 40px auto 0 !important;
}
.notion-collection-card {
padding: 40px 24px !important;
}
.notion-property__title {
font-size: 24px !important;
}
.notion-property__file {
display: none !important;
}
.notion-embed {
margin: -60px auto !important;
}
.notion-collection-list {
flex-direction: column !important;
}
.notion-collection-list__item {
border-bottom: 1px solid var(--color-border) !important;
border-right: none !important;
}
}
#block-bcdb396c1ef74989bef292d6fce94b5e .notion-caption {
display: none !important;
}
#block-a8b0bf8feea54452ba1127b8b9af89e1 a {
font-size: 14px !important;
position: fixed !important;
z-index: 9999 !important;
border: none !important;
right: 22px !important;
top: 14px !important;
}
#block-9e1ece37b4bf4f6f866972a1bdbcb023 p {
text-align: center !important;
font-size: 14px !important;
}
#block-87d80f4e17d34ba3b8d3d64b10314b69 {
display: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment