Created
May 25, 2021 07:37
-
-
Save normdoow/0f395ce9cfe8a1448252b64c20c994fb to your computer and use it in GitHub Desktop.
Notion styles for Potion Site Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="nav"> | |
<div class="nav-links"> | |
<a href="/"><img class="nav-logo" src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/fe3eb369-fe14-4082-9cb0-e88b3bea1381/nav-logo.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210523%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210523T194226Z&X-Amz-Expires=86400&X-Amz-Signature=814efe1a451da8c0ad60f79a5c1e04acf0d3bff2e3b1669b7b3e370050d42c3e&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22nav-logo.svg%22" alt="logo"/></a> | |
<a href="/" class="nav-link">Home</a> | |
<a href="/Storywatch" class="nav-link">Storywatch</a> | |
<a href="/Framework" class="nav-link">Framework</a> | |
<a href="/Mechanics" class="nav-link">Mechanics</a> | |
<a href="/About" class="nav-link">About</a> | |
</div> | |
<div class="nav-links"> | |
<a href="https://www.google.com/" class="nav-link" class="btn-shop" target="_blank">Shop</a> | |
</div> | |
</nav> | |
<style> | |
:root { | |
--bg-color: #050d11; | |
--fg-color: #ffffff; | |
--notion-blue: #007cb1; | |
} | |
/* Don't show page logo or title */ | |
.notion-title, | |
.notion-page-icon-wrapper, | |
.icon notion-page-icon, | |
.title, | |
.icon.notion-page-icon, | |
.breadcrumbs { | |
display: none !important; | |
} | |
/* Navigation */ | |
.nav, | |
.nav-links, | |
.nav-link { | |
justify-content: center; | |
align-items: center; | |
display: flex; | |
} | |
.nav { | |
box-shadow: 0 10px 20px -10px rgba(0,0,0,0.1); | |
background: var(--color-bg-default); | |
justify-content: space-between; | |
padding: 0 30px; | |
position: fixed; | |
z-index: 9999 !important; | |
height: 60px; | |
width: 100%; | |
left: 0; | |
top: 0; | |
} | |
.nav-logo { | |
margin: 0 20px; | |
width: 34px; | |
} | |
.nav-links, | |
.nav-link { | |
height: 100%; | |
} | |
.nav-link { | |
transition: all .1s ease-in-out; | |
text-decoration: none; | |
padding: 0 20px; | |
color: #ffffff; | |
} | |
.nav-links, | |
.btn-shop { | |
color: #42ff37 !important; | |
} | |
.nav-link:hover { | |
color: #0595d3; | |
transition: all .2s ease-in-out; | |
transform: scale(1.05); | |
} | |
/* mobile view */ | |
@media (max-width: 680px) { | |
.nav, | |
.nav-links { | |
justify-content: flex-start; | |
align-items: flex-start; | |
flex-direction: column; | |
} | |
.nav { | |
padding: 30px; | |
height: auto; | |
} | |
.nav-logo { | |
margin: 0 0 20px 0; | |
} | |
.nav-link { | |
padding: 4px 0; | |
} | |
.notion-callout.notion-blue_background_co { | |
width: 100% !important; | |
} | |
.notion-callout.notion-blue_background_co:hover { | |
width: 100% !important; | |
} | |
} | |
/* Notion gallery */ | |
.notion-gallery.notion-title { | |
display: block !important; | |
} | |
/* Notion Call outs*/ | |
.notion-callout.notion-purple_background_co { | |
background-color: #ffb32c; | |
} | |
.notion-callout.notion-red_background_co { | |
color: white !important; | |
border: solid 2px #007cb1; | |
background-color: var(--color-bg-default) !important; | |
} | |
.notion-callout.notion-red_background_co.notion-page-icon { | |
display: none !important; | |
} | |
/* Notion green call out - reviews*/ | |
.notion-callout.notion-teal_background_co { | |
background-color: var(--color-bg-default); | |
border: solid 2px var(--notion-blue) !important; | |
} | |
/* Notion general btn blue*/ | |
.notion-callout.notion-blue_background_co { | |
background-image: linear-gradient(to right, #2ab7dd 0%, #2F80ED 51%, #2ab7dd 100%); | |
} | |
.notion-callout.notion-blue_background_co { | |
background-color: #007cb1 !important; | |
color: white; | |
width: 50%; | |
justify-content: center; | |
border: 2px solid none; | |
border-radius: 5px; | |
transition: all .5s ease-in-out; | |
box-shadow: 0 0 01px #eee; | |
-webkit-transition: .5s; | |
-moz-transition: .5s; | |
-ms-transition: .5s; | |
-o-transition: .5s; | |
} | |
.notion-callout.notion-blue_background_co:hover { | |
color: white; | |
width: 50%; | |
justify-content: center; | |
border: 2px solid none; | |
border-radius: 5px; | |
transition: all .3s ease-in-out; | |
transform: scale(1.02); | |
-webkit-transition: .3s; | |
-moz-transition: .3s; | |
-ms-transition: .3s; | |
-o-transition: .3s; | |
} | |
.notion-callout.notion-blue_background_co.notion-page-icon { | |
display: none !important; | |
} | |
.notion-callout.notion-brown_background_co { | |
background-image: linear-gradient(to right, #2ab7dd 0%, #2F80ED 51%, #2ab7dd 100%); | |
} | |
.notion-callout.notion-brown_background_co { | |
background-color: #007cb1 !important; | |
color: white; | |
justify-content: center; | |
border: 2px solid none; | |
border-radius: 5px; | |
transition: all .5s ease-in-out; | |
box-shadow: 0 0 01px #eee; | |
-webkit-transition: .5s; | |
-moz-transition: .5s; | |
-ms-transition: .5s; | |
-o-transition: .5s; | |
} | |
.notion-callout.notion-brown_background_co:hover { | |
color: white; | |
justify-content: center; | |
border: 2px solid none; | |
border-radius: 5px; | |
transition: all .3s ease-in-out; | |
transform: scale(1.02); | |
-webkit-transition: .3s; | |
-moz-transition: .3s; | |
-ms-transition: .3s; | |
-o-transition: .3s; | |
} | |
.notion-callout.notion-brown_background_co.notion-page-icon { | |
display: none !important; | |
} | |
/* end of Notion Call outs*/ | |
/* notion titles*/ | |
.notion-h1 { | |
font-size: 2.5em !important; | |
} | |
/* homepage*/ | |
/* what are ppl saying about 3100 svg*/ | |
.notion-asset-wrapper notion-asset-wrapper-image.notion-block-ad86e81aa03641d9a6d5ae7bd6397ea6 { | |
background-color: white; | |
width: 99vw !important; | |
max-width: 99vw !important; | |
} | |
.notion-block-ad86e81aa03641d9a6d5ae7bd6397ea6 div { | |
background-color: white; | |
width: 100vw !important; | |
max-width: 100vw !important; | |
} | |
/* end of homepage and start of about page*/ | |
.notion-block-2120cb65ff89477eb298f17c835d2fc4 { | |
background-color: none !important; | |
border: solid 2px var(--notion-blue) !important; | |
} | |
/* storywatch page*/ | |
/* imag person jump*/ | |
.notion-asset-wrapper notion-asset-wrapper-image.notion-block-8ad80c77dd00421193ccc0768248240e { | |
background-color: white; | |
width: 100vw !important; | |
max-width: 100vw !important; | |
} | |
.notion-block-8ad80c77dd00421193ccc0768248240e div { | |
background-color: white; | |
width: 100vw !important; | |
max-width: 100vw !important; | |
} | |
/* framework page*/ | |
.notion-asset-wrapper notion-asset-wrapper-image.notion-block-57b04b9b864f47ed9ebadd3adf34fc1a { | |
width: 99vw !important; | |
max-width: 99vw !important; | |
} | |
.notion-block-57b04b9b864f47ed9ebadd3adf34fc1a div { | |
width: 100vw !important; | |
max-width: 100vw !important; | |
} | |
/* foother*/ | |
.notion-hr { | |
color: white; | |
border-color: var(--notion-blue); | |
} | |
.notion-page { | |
width: 720px; | |
} | |
.notion { | |
font-size: 16px; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment