CSS for Scholar Star Page

 
:root { --primary-font: 'Domine'; --secondary-font: "Roboto Slab"; --border-radius: 5px; --fg-color-h: 0; --fg-color-s: 0%; --fg-color-l: 0%; --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l)); --bg-color-h: 42; --bg-color-s: 38%; --bg-color-l: 95%; --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l)); --footer-bg-color: rgb(247, 244, 237); --navbar-bg-color: rgb(247, 244, 237); --navbar-fg-color: black; --navbar-btn-fg-color: white; --navbar-btn-bg-color: #4807ea; --navbar-brand-font-size: 1.375rem; --heading-font-size: 1.5rem; --heading1: calc(var(--heading-font-size) * 2.7); --heading2: calc(var(--heading-font-size) * 2.3); --heading3: calc(var(--heading-font-size) * 1.18); /* --bg-color: linear-gradient(to top, #f5f1ee, white, white, #f5f1ee, white, white, #f5f1ee); */ --notion-gray-h: 0; --notion-gray-s: 0%; --notion-gray-l: 0%; --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l)); --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 0%); --notion-gray_background_co: var(--notion-gray_background); --notion-blue-h: 0; --notion-blue-s: 0%; --notion-blue-l: 100%; --notion-blue: hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l)); --notion-blue_background: hsl(var(--notion-blue-h), var(--notion-blue-s), 100%); --notion-blue_background_co: var(--notion-blue_background); --notion-blue: #4807ea; } .navbar-link { color: #03582F; } .navbar-link:hover { color: var(--fg-color); } /* navbar */ .navbar-item:focus { background-color: unset !important; color: unset !important; } .bullet-footer { background: var(--footer-bg-color); } .bullet-navbar { background: var(--navbar-bg-color); } .notion-frame { padding: 0; } /* .bullet-navbar { box-shadow: none; } */ .navbar-brand>.navbar-item { color: var(--navbar-fg-color); font-size: var(--navbar-brand-font-size); font-weight: 700; } .navbar-item:hover { background-color: unset !important; color: var(--navbar-fg-color) !important; } .navbar-end>.navbar-item { color: var(--navbar-fg-color); padding: 0px 30px; } .buttons>.nav-cta-btn { color: var(--navbar-btn-fg-color); background-color: var(--navbar-btn-bg-color); } /* page width */ .notion-page { --notion-max-width: calc(min(1440px, 100vw)); } .notion-page-no-cover { margin: 0 !important; } main { background: var(--bg-color) } /* common css */ .notion-title { display: none; } .notion-h1 { font-size: 65px; font-size: var(--heading1); font-weight: 900; margin-top: 0; } .notion-h3 { margin: 10px 0px; font-size: 28px; font-size: var(--heading3); } .notion-text { font-size: 1.125rem; font-weight: 400; } .notion-list-disc { font-size: 1.063rem; font-weight: 400 !important; } .notion-list-numbered { font-size: 1.188rem; font-weight: 400 !important; } .bullet-btn { border: none; background: var(--navbar-btn-bg-color); padding: 15px 25px; opacity: 1; border-radius: var(--border-radius); color: var(--navbar-btn-fg-color) !important; font-weight: 600; } .bullet-btn:hover { color: var(--navbar-btn-fg-color) !important; } .notion-h2 { font-size: 55px; font-size: var(--heading2); font-weight: 900; margin: 0; } .bullet-3-column>.notion-column>.notion-h2 { text-align: center; } .bullet-3-column>.notion-column>.notion-text { text-align: center; } .bullet-3-column { padding: 0px 30px; } /* notion callout default */ .notion-callout-text { text-align: center; font-size: 1.5rem; font-weight: 900; } .notion-callout .notion-page-icon-inline { width: 30px; height: 60px; display: flex; align-items: center; margin: 0 auto; } .notion-page-icon-inline { max-width: 100px; max-height: 100px; } .notion-callout { display: unset; border: none; } .notion-hash-link { display: none; } /* .notion-blue_background_co */ .notion-blue_background_co { background-color: #C9D3EC; } .notion-blue_background_co>.notion-callout-text { color: #3E363F; text-align: left; } .notion-blue_background_co>.notion-h3 { color: #3E363F; text-align: left; } /* gallery medium view */ .notion-gallery-grid { border: none; padding: 0; } .notion-gray_background_co>.notion-page-icon-inline { margin: 0; } .notion-gallery-grid-size-medium { grid-template-columns: repeat(3, minmax(260px, 3fr)); gap: 50px; } .notion-gallery-grid-size-medium>.notion-collection-card { box-shadow: none; } .notion-collection-card-size-medium .notion-collection-card-cover { height: 230px !important; border: none; } .notion-collection-card-property .notion-page-title-icon { display: none; } .notion-gallery-grid-size-medium>.notion-collection-card>.notion-collection-card-body { display: none; } /* gray background */ .notion-gray_background_co { background-color: #03582F; } .notion-gray_background_co>.notion-callout-text { color: white; text-align: left; } .notion-gray_background_co>.notion-h3 { color: var(--navbar-btn-fg-color); text-align: left; } .notion-gray_background_co>.notion-callout-text>.notion-text>.notion-link { color: white; cursor: pointer; text-align: left; opacity: 1; } .notion-gray_background_co>.notion-link:hover { color: #F8D649; } /* BLOG */ .active-toc { font-size: inherit !important; } /* toggle style */ .notion-toggle { border-bottom: 1px solid lightgray; padding: 20px 0px; font-size: 1.5rem; position: relative; padding: 20px 30px; font-weight: 500; width: 100%; } summary { list-style: none; } summary { list-style-type: none; width: 100%; } summary::after { content: "+"; position: absolute; right: 27px; top: 15px; } details[open] summary::after { content: "-"; position: absolute; right: 27px; top: 15px; } img { flex: 1 !important; } @media screen and (max-width:800px) { .notion-gallery-grid-size-medium { grid-template-columns: repeat(1, minmax(260px, 3fr)); gap: 50px; } .bullet-3-column { padding: 0; } .notion-full-width { padding: 5px 10px; } .notion-blank { display: none; } .notion-text { padding: 10px 0px; } }