INTRO - What this code does and why you want it
/* REQUIRED */
:root {
--color-bg-default: [don't set];
/* This is Super's default variable */
/* It matches the No-Code Theme Designer */
--parralax-effect: fixed;
--parallax-stacking: -1;
}
/* SUPER CONTENT */
/* background-color: MUST BE SET */
/* for Parallax effect */
.super-content {
background-color: var(--color-bg-default) !important;
}
/* HEADER COVER IMAGE */
/* position: MUST BE *FIXED* */
/* z-index: MUST BE *-1* OR LOWER */
/* for Parallax effect */
img.notion-header__cover-image {
position: var(--parallax-effect) !important;
z-index: var(--parallax-stacking) !important;
}
/* OPTIONAL */
:root {
--border-radii-layout: [don't set];
/* This is Super's default variable */
/* It matches the No-Code Theme Designer */
}
.notion-header__title {
background-color: var(----color-bg-default);
/* sets background color page title */
border-radius: var(--border-radii-layout);
/* matches theme rounding */
max-width: fit-content;
/* matches background-color width to title size */
margin: auto;
/* sets margins to force title to center */
/* without margin: auto title is right-aligned */
}
Hope this was helpful!
"Hello! I'm here to help you overcome any challenges you might be facing in regards to Notion + Super websites.
If you have any questions or need guidance, feel free to reach out to me. You can DM me on Twitter, connect with me on Super or use the links below to reach out!
I'm dedicated to providing valuable support to individuals like you. My goal is to ensure your website's success, so don't hesitate to get in touch. Looking forward to helping you achieve your goals!
If you are happy with this page please consider Buying me a Coffee!