<!-- Typekit: Update the link below with your Typekit ID -->
<link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">
<!-- Favicon: Having a custom nav breaks the Favicon that you can upload in the Super settings. To change it, update the link here -->
<link rel="icon" href="https://s3.amazonaws.com/super-notion/images/8a28f49c-9631-4450-89f2-b87a3a60099e.png">
<!-- Meta Description: Having a custom nav breaks the site description that you can edit in the Super settings. To change it, update the text here -->
<meta property="og:description" content="Cy, a minimal portfolio template built on Notion and powered by Super.">
<!-- Share image: Having a custom nav breaks the site share image that you can edit in the Super settings. To include one add a url to your iimage in between the quotes like this > content="[here]" and write an alt description too -->
<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: 18px !important;
}
}
body {
font-family: reason-new, sans-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-weight: 700 !important;
font-size: 0.75rem !important;
line-height: 1.25 !important;
min-height: auto !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
padding: 0 !important;
}
.notion-header__content>div {
margin-bottom: 0px !important;
}
.notion-header {
margin-bottom: 0px !important;
padding-top: 32px !important;
}
@media screen and (min-width:680px) {
.notion-header {
padding-top: 80px !important;
}
}
/* Adjust line-height and letter-spacing for body copy */
.notion-semantic-string {
line-height: 1.7 !important;
letter-spacing: -0.01em !important;
}
/* --- Heading styles --- */
/* H1 */
h1.notion-heading, .notion-page__properties .notion-property__text {
font-family: psfournier-std, serif !important;
font-weight: 200 !important;
font-size: 1.875rem !important;
}
h1.notion-heading .notion-semantic-string, .notion-property__text .notion-semantic-string {
line-height: 1.27 !important;
letter-spacing: -0.03em !important;
}
@media screen and (min-width: 50em) {
h1.notion-heading, .notion-page__properties .notion-property__text .notion-semantic-string {
font-size: 2.55rem !important;
}
}
/* H2 */
h2.notion-heading {
font-family: psfournier-std, serif !important;
font-weight: 200 !important;
letter-spacing: -0.01em !important;
}
/* H3 */
h3.notion-heading {
font-weight: 500 !important;
margin-bottom: 0.25em !important;
}
/* Remove padding */
.notion-heading {
padding: 0 !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: 8px 0 !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: 100%;
flex-direction: column;
justify-content: space-between;
}
@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: 18px;
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: 1080px!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;
}
}
/* --- Control heading spacing in column layout --- */
.notion-column>.notion-heading {
margin-top: 7px !important;
}
.notion-header__icon-wrapper {
padding: 2px!important;
bottom: 8px!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;
}
/* --- PROJECTS LISTING --- */
/* Remove header of the gallery table */
.notion-collection__header {
display: none !important;
}
/* Adjust spacing of gallery grid */
.notion-collection-gallery {
grid-gap: 46px !important;
gap: 46px !important;
grid-row-gap: 66px !important;
border-top: none !important;
}
/* Stop card from breaking out of layout on screens smaller than 370px */
@media screen and (max-width:370px) {
.notion-collection-gallery {
display: block !important;
}
.notion-collection-gallery > a {
display: block !important;
margin-bottom: 44px !important;
}
}
/* Override default card styling */
.notion-collection-card {
border-radius: 0 !important;
box-shadow: none !important;
}
.notion-collection-card:hover {
background: transparent !important;
}
.notion-collection-card__cover.large, .notion-collection-card__cover.large>div, .notion-collection-card__cover.large img, .notion-collection-card__cover.medium, .notion-collection-card__cover.medium>div, .notion-collection-card__cover.medium img {
height: auto !important;
max-height: none !important;
}
.notion-collection-card__cover.large>div {
position: relative !important;
}
.notion-collection-card__cover {
height: auto !important;
min-height: none !important;
border-bottom: none !important;
}
.notion-collection-card__cover img {
position: relative !important;
height: auto !important;
width: 100% !important;
border-radius: 0 !important;
object-fit: contain !important;
object-position: initial !important;
padding-bottom: 0 !important;
}
.notion-collection-card__content {
padding-bottom: 0 !important;
padding-left: 0 !important;
font-size: 1em !important;
overflow: hidden;
}
/* Hides page title */
.notion-property__title {
display: none !important;
}
/* Display text property as a heading */
.notion-collection-card__property .notion-semantic-string {
display: block !important;
margin: 0.6em 0 0.4em !important;
font-family: psfournier-std, serif !important;
font-weight: 200 !important;
font-size: 27px !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
white-space: normal !important;
}
/* Add underline to title on hover of project card */
.notion-collection-gallery > a .notion-collection-card__property .notion-semantic-string span {
border-bottom: 1px solid transparent !important;
transition: border-color .2s ease-in;
}
.notion-collection-gallery > a:hover .notion-collection-card__property .notion-semantic-string span {
border-bottom: 1px solid var(--color-text-default) !important;
}
/* Increase spacing between project meta data */
.notion-collection-card__property {
margin: 3px 0 !important;
}
/* Stop the tags from truncating */
.notion-property__select {
display: inline !important;
white-space: normal !important;
overflow: auto !important;
}
/* Adjust pill styling */
.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;
}
/* --- PROJECT PAGE --- */
/* Hide cover image from page headers */
.notion-header__cover {
display: none !important;
}
.notion-header__content.no-icon.has-cover .notion-header__title-wrapper {
margin-top: 0 !important;
}
/* Amend the display of properties to act as header and meta data */
/* Adjust spacing between header text elements */
.notion-page__properties {
margin: 16px 0 0 0;
}
@media screen and (min-width:680px) {
.notion-page__properties {
margin: 30px 0 60px 0;
}
}
.notion-property__text .notion-semantic-string {
margin-bottom: 16px;
}
/* Display as single column */
.notion-page__property {
grid-template-columns: 1fr !important;
}
/* Remove default styling of properties */
.notion-page__properties .notion-property {
border-radius: 0 !important;
padding: 0 !important;
}
@media screen and (min-width: 50em) {
.notion-page__properties .notion-property {
font-size: 18px !important;
}
}
/* Hide property name */
.notion-page__property-name {
display: none !important;
}
/* Hide divider */
.notion-page__properties .notion-divider {
display: none;
}
/* --- 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>
<!-- CUSTOM NAVIGATION -->
<nav class="nav">
<div class="left">
<a class="nav-link" href="/">Cy</a>
</div>
<div class="right">
<a class="nav-link" href="/projects">Projects</a>
<a class="nav-link" href="/about">About</a>
<a class="nav-link" href="https://medium.com/">Writing</a> <!-- External links can be included in the navigation also -->
</div>
</nav>