Hi, I am Asyrof.
Hi, I am Asyrof.

Hi, I am Asyrof.

Architect and Product Designer. Currently designing AR/VR at Arutala.

Get in touch · My Resume · Design Reel

Website code
  1. Duplicate this template to your Notion workspace
  2. Create a site using Super, using your newly created page as the Notion URL.
  3. Add the settings below to your Super site settings:
    4. Fonts

    The fonts used in the demo are: PS Fournier: Light Reason New: Regular and Medium You’ll need to add these fonts to a new web project in your Adobe Typekit account and paste the unique ID into the code below.

    If you want to use your own fonts you can find and replace all instances of the mentioned font names in the CSS below. 

    /* The names of the font families in the code below in case you want to quickly find and replace them with your own fonts */
psfournier-std
reason-new

    Code

    Paste the code below into the ‘Snippet Injection’ field in your Super site settings.

    <!-- 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://i.ibb.co/r212ZZM/ic-logo.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="Asyrof, An architect and product designer">

<!-- 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 image 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: #FFFFFF!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="/">Asyrof</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>

    Code (font stolzl)

    Paste the code below into the ‘Snippet Injection’ field in your Super site settings.

    <!-- Typekit: Update the link below with your Typekit ID -->
<link rel="stylesheet" href="https://use.typekit.net/app7bln.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://i.ibb.co/r212ZZM/ic-logo.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="Asyrof, An architect and product designer">

<!-- 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 image 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: #FFFFFF!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: stolzl, serif !important;
  font-weight: 500 !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: stolzl, serif !important;
  font-weight: 400 !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: stolzl, serif !important;
  font-weight: 400 !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="/">Asyrof</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>

    Code - custom 2 Mar 2021

    Paste the code below into the ‘Snippet Injection’ field in your Super site settings.

    <!-- 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="Asyrof, An architect and product designer">

<!-- 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 image 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>

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

/* Remove padding */
.notion-heading {
  padding: 0 !important;
}

/* Add header top padding */
.notion-header {
  margin-bottom: 0px !important;
  padding-top: 32px !important;
}

/* Remove Main title*/

/* 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;
}

/* 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: ;
  font-weight: 400 !important;
  font-size: 24px !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: 14px !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="/">Asyrof</a>
  </div>
  <div class="right">
    <a class="nav-link" href="/projects">Projects</a>
    <a class="nav-link" href="/about">About</a>
  </div>
</nav>

4. Make sure you’ve done these things before you go live

Go live checklist
Change all links in the footer and copy-paste the new footer to every page and project.
Check the favicon, update if necessary in the snippet code.
Amend the meta description in the snippet code.
Check that all navigation labels and links are correct and that they point to the right pages. Note, they do not automatically update when you amend page names or add new pages. The default ‘Writing’ link goes to Medium.com so that needs to updated or removed too.
Add pretty links for your pages and projects into Super’s pretty URL settings.
Example of pretty links and url structure
image

Featured projects

Projects database

Capabilities

Projects database

image
image
image
image
image
image

image

That's all from me. Let me know about you.

Since 2016, I have the experience working for world-wide range of clients with remote and on-site work environments. Most of them even have 12hrs time differences.

*I'm in UTC+7

Contact me or Book a call

© 2021 nurasyrof.com // Email · Twitter · Dribbble · Linkedin

Hide your pages in this toggle menu, only you will see it
Book A Call
Get in touch
Projects
My Resume
About
Projects database
Quotation Hello Ramadan Festival