One issue is that it reduces the vibrance alot- there is a shader over it that needs to be removed
Can i make it like it is on the dev site instead?
Shorter might be better
The fading isn’t really
Optimism Fractal Website Code
Trying to Fix Header Version
#page-index .notion-header__cover.has-cover { position: static!important; max-height: 45vh!important; height: 300vh!important; margin-top: 0px!important; }
.notion-collection-card__property:last-child, .notion-collection-list__item-property:last-child {
background: none!important;
border-radius: 0px!important;
color: var(--color-text-default)!important;
font-size: 16px!important;
font-weight: 300!important;
opacity: 1!important;
position: static!important;
}
:root {
--primary-color: #202B3F;
--color-text-default: #F4F0DF!important;
--color-bg-default:#000000!important;
--button-bg-color: #202B3F!important;
--button-text-color: #ffffff!important;
--mobile-menu-background-color: #FFFFFF!important;
--list-item-border: #E1E9FF;
--list-item-hover: #F1F5FF;
--page-width: 1280px;
--button-rounding: 50px!important;
}
.notion-header__cover:after {
background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(0, 0, 0, 0) 98%)!important;
}
#page-index .notion-header__cover.has-cover {
position: static!important;
max-height: 45vh!important;
height: 300vh!important;
margin-top: 0px!important;
}
#page-index .notion-text, h1.notion-heading:first-of-type {
text-align: left!important;
margin: 0!important;
}
.notion-toggle {
display: none !important;
}
[id^="page-blog"] .notion-property__text.notion-collection-card__property {
padding-left:0px !important;
}
.gallery .notion-collection-card__property.notion-semantic-string {
line-height: 1.6rem !important;
}Currently Working Version with ok header
.notion-collection-card__property:last-child, .notion-collection-list__item-property:last-child {
background: none!important;
border-radius: 0px!important;
color: var(--color-text-default)!important;
font-size: 16px!important;
font-weight: 300!important;
opacity: 1!important;
position: static!important;
}
:root {
--primary-color: #202B3F;
--color-text-default: #F4F0DF!important;
--color-bg-default:#000000!important;
--button-bg-color: #202B3F!important;
--button-text-color: #ffffff!important;
--mobile-menu-background-color: #FFFFFF!important;
--list-item-border: #E1E9FF;
--list-item-hover: #F1F5FF;
--page-width: 1280px;
--button-rounding: 50px!important;
}
.notion-header__cover:after {
background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(0, 0, 0, 0) 98%)!important;
}
#page-index .notion-text, h1.notion-heading:first-of-type {
text-align: left!important;
margin: 0!important;
}
.notion-toggle {
display: none !important;
}
[id^="page-blog"] .notion-property__text.notion-collection-card__property {
padding-left:0px !important;
}
.gallery .notion-collection-card__property.notion-semantic-string {
line-height: 1.6rem !important;
}Original Version
.notion-collection-card__property:last-child, .notion-collection-list__item-property:last-child {
background: none!important;
border-radius: 0px!important;
color: var(--color-text-default)!important;
font-size: 16px!important;
font-weight: 300!important;
opacity: 1!important;
position: static!important;
}
:root {
--primary-color: #202B3F;
--color-text-default: #F4F0DF!important;
--color-bg-default:#000000!important;
--button-bg-color: #202B3F!important;
--button-text-color: #ffffff!important;
--mobile-menu-background-color: #FFFFFF!important;
--list-item-border: #E1E9FF;
--list-item-hover: #F1F5FF;
--page-width: 1280px;
--button-rounding: 50px!important;
}
.notion-header__cover:after {
background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(0, 0, 0, 1) 98%)!important;
}
#page-index .notion-text, h1.notion-heading:first-of-type {
text-align: left!important;
margin: 0!important;
}
.notion-toggle {
display: none !important;
}
[id^="page-blog"] .notion-property__text.notion-collection-card__property {
padding-left:0px !important;
}
.gallery .notion-collection-card__property.notion-semantic-string {
line-height: 1.6rem !important;
}Dev Site Page
.notion-collection-card__property:last-child, .notion-collection-list__item-property:last-child {
background: none!important;
border-radius: 0px!important;
color: var(--color-text-default)!important;
font-size: 16px!important;
font-weight: 300!important;
opacity: 1!important;
position: static!important;
}
:root {
--primary-color: #202B3F;
--color-text-default: #F4F0DF!important;
--color-bg-default:#000000!important;
--button-bg-color: #202B3F!important;
--button-text-color: #ffffff!important;
--mobile-menu-background-color: #FFFFFF!important;
--list-item-border: #E1E9FF;
--list-item-hover: #F1F5FF;
--page-width: 1280px;
--button-rounding: 50px!important;
}
.notion-header__cover:after {
background-image: none!important;
}
.notion-header__cover {
height: 500px !important; /* Adjust this value to make the header image taller */
#page-index .notion-text, h1.notion-heading:first-of-type {
text-align: left!important;
margin: 0!important;
}
#page-index .notion-text, h1.notion-heading:first-of-type {
text-align: left!important;
margin: 0!important;
}
.notion-toggle {
display: none !important;
}
[id^="page-blog"] .notion-property__text.notion-collection-card__property {
padding-left:0px !important;
}
.gallery .notion-collection-card__property.notion-semantic-string {
line-height: 1.6rem !important;
}
#page-index .notion-text {
max-width: initial!important;
}