Notion Template Setup

Notion Template Setup

<link rel="stylesheet" href="https://use.typekit.net/ajv8uuv.css">
<link rel="icon" href="https://s3.amazonaws.com/super-notion/images/8a28f49c-9631-4450-89f2-b87a3a60099e.png">
<meta property="og:description" content="The home of Dan Raine">
<meta property="og:image" content="">
<meta property="og:image:alt" content="">
<style>

/* --- Change default colors --- */

:root {
    --color-bg-default: #F9F6F0 !important;
  --color-text-default: #4B5673 !important;
  --color-text-default-light: #4B5673 !important;
  --color-text-gray: #959BA9 !important;
}

/* --- TYPOGRAPHY --- */

/* Increase base font size for large screens */
@media screen and (min-width: 50em) {
    html {
      font-size: 16px !important;
  }
}

body {
  font-family: utopia-std, serif !important;
  
  /* Make the text nice and crisp */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Improve kerning for good measure */
  text-rendering: optimizeLegibility;
}

/* Styling for page names */

.notion-header__title {
  font-family: chaparral-pro, serif !important;
  font-weight: 200 !important;
  margin-top: 20px;
  margin-bottom: 10px;
}
.notion-header__content>div {
    margin-bottom: 0px !important;
}
.notion-header {
  margin-bottom: 0px !important;
  padding-top: 2em !important;
}

/* Adjust line-height and letter-spacing for body copy */

.notion-semantic-string {
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
}

/* --- Heading styles --- */

/* H1 */

h1.notion-heading {
  font-family: chaparral-pro, serif !important;
  font-weight: 200 !important;
  margin-block-start: 0.2em;
}

@media screen and (min-width: 50em) {
  h1.notion-heading {
    font-size: 2.5em !important;
  }
}

h1.notion-heading .notion-semantic-string {
  line-height: 1.27 !important;
  letter-spacing: -0.03em !important;
}

/* H2 */

h2.notion-heading {
  font-family: chaparral-pro, serif !important;
  font-weight: 200 !important;
  letter-spacing: -0.01em !important;
}

/* H3 */

h3.notion-heading {
  font-weight: 500 !important;
  margin-bottom: 0.25em !important;
}

/* Adjust line height for H2 and H3 */
.notion-heading .notion-semantic-string {
    line-height: 1.3 !important;
}

/* Ensure opacity remains at 1 when a heading is a link */
.notion-heading .notion-semantic-string .link {
    opacity: 1 !important;
}

.notion-text__content {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* --- NAVIGATION --- */

/* Hide the Notion nav bar */
.notion-navbar {
    display: none !important;
}

/* Custom nav styling (see HTML at bottom of code) */
.nav {
  align-items: flex-start;
  padding: 25px;
  display: flex;
  position: static;
  z-index: 9999;
  height: 110px;
  width: 900px;
  flex-direction: column;
  justify-content: space-between;
  margin: 0px auto;
}

@media screen and (min-width: 30em) {
  .nav {
    align-items: center;
    padding: 0 25px;
    height: 64px;
    flex-direction: row;
  }
}

.nav .right, .nav .left {
  display: flex;
  margin-bottom: 0.25em;
}

.nav .right {
  margin-right: -20px;
}

.nav-link {
  transition: all .3s ease-in-out;
  justify-content: center;
  align-items: center;
  padding: 0 20px 0 0;
  display: flex;
  height: 100%;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-default);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* --- CONTENT STYLING --- */

/* --- Adjust the max width of pages --- */
.super-content.max-width, .notion-header__content.max-width {
  max-width: 900px!important;
}

/* --- Remove bottom page padding and adjust page padding for smaller screens --- */
.super-content {
  padding-bottom: 40px !important;
}

@media screen and (min-width: 415px) and (max-width: 800px) {
  .super-content, .notion-header__content {
  padding-left: 46px !important;
  padding-right: 46px !important;
  }
}

/* --- Remove additional spacing on mobile that is created by column layout on desktop --- */
@media screen and (max-width:680px) {
  .notion-column {
    padding: 0px!important;
  }
}

/* --- Adjust quote styling so it can be used as a standfirst --- */

.notion-quote {
  border-left: 0px!important;
  padding: 0!important;
  margin: .5rem 0 1rem!important;
}

/* --- Change handling of full width images --- */
  .notion-image.full-width img {
  object-fit: fill!important;
  height: auto!important;
}

/* --- Change Image caption alignment --- */
.notion-image.page-width>figcaption, .notion-image.full-width>figcaption {
  text-align: center!important;
}

.notion-pill {
  font-size: 18px !important;
  border-radius: 0px !important;
  line-height: 24px !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  display: inline !important;
  white-space: normal !important;
  text-overflow: initial !important;
}

/* Adds comma before each item */
.notion-pill::before {
  content: ", ";
  white-space: pre;
}

/* Removes comma before first item */
.notion-pill.first::before {
  content: "";
}

/* Make all but the default colour display as a lighter colour */
.pill-default {
  background: none !important;
}

.pill-gray, .pill-brown, .pill-orange, .pill-yellow, .pill-green, .pill-blue, .pill-purple, .pill-pink, .pill-red {
  background: none !important;
  color: var(--color-text-gray) !important;
}

.notion-header__cover {
  display: none !important;
}

/* --- MISC --- */

/* Hide notion toggle - a hack to hide child pages, drag them into a toggle and they'll disappear */
.notion-toggle {
  display: none !important;
}

/* --- PAGE LOAD ANIMATION --- */

body {
  -webkit-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
  animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
  -moz-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
  -o-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
  -ms-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}

@keyframes fadeIn {
    0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
    0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
    0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
  100% {opacity:1;}
}
</style>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.
com/gtag/js?id=UA-8924464-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-8924464-1');
</script>

<!-- CUSTOM NAVIGATION -->
<nav class="nav">
  <div class="left">
    <a class="nav-link" href="/">Home</a>
  </div>
  <div class="right">
    <a class="nav-link" href="/blog">Blog</a>
		<a class="nav-link" href="https://medium.com/@danraine">Writing</a>
    <a class="nav-link" href="https://core.danraine.com/therainereport">The Raine Report</a>
    <a class="nav-link" href="https://core.danraine.com/members">Members Login</a>
		<a class="nav-link" href="https://core.danraine.com/helpdesk">Support Desk</a>
  </div>
</nav>