Pink Portfolio Blog

Check out the demo.

Find the template Here.

How to use this Template

1. Click the template link above.

2. Duplicate the template in the top right corner.

3. Use your new Notion Url for the page in the Potion Dashboard when setting up the site.

4. After creating the site, in the Potion dashboard under Snippet Injection, copy and paste the following code 👇

<style>
    .notion-viewport {
    	padding: 0;
    }
    
    .notion-header {
    	display: none;
    }
    
    html::-webkit-scrollbar {
    	position: absolute;
    	top: 0;
    	right: 0;
    	width: .4rem;
    	height: .6rem;
    	background-color: #ff9cfa;
    }
    
    .index-page .notion-title {
    	display: none;
    }
    
    .index-page .notion-collection-header {
    	display: none;
    }
    
    .notion-list-item {
    	border-radius: 10px;
    	background-color: #bd56fc;
    	color: white;
    }
    
    html::-webkit-scrollbar-thumb {
    	height: 45px;
    	background-clip: padding-box;
    	border-radius: 0;
    	background-color: #bd56fc;
    }
    
    .notion-list-item-title {
        padding-left: 20px;
    }
    .notion-page-title-icon {
        width: 30px;
        padding-right: 10px;
    }
    
    
    .notion-hr {
    	border-color: #bd56fc;
    }
    
    .notion-h1,
    .notion-title {
    	margin-top: 5px;
    	font-size: 50px;
    	background: -webkit-linear-gradient(#bd56fc, #ff9cfa);
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    }
    
    .notion-collection-row-value {
    	color: #bd56fc;
    }
    
    .notion-collection-card-body {
    	background-color: #bd56fc;
    	color: #fff;
    }
    
    .notion-page {
    	width: 900px !important;
    }
    
    .notion {
    	--bg-color: #ffffff;
    	--fg-color: #000 !important;
    	--fg-color-0: #000 !important;
    	--fg-color-2: #000 !important;
    	--fg-color-3: #000 !important;
    }
    
    .notion-page-cover {
    	width: 900px;
    	border-radius: 30px;
    }
    
    .notion-callout {
    	border-color: #ff9cfa;
    }
    
    /* index title text */
    
    .index-page .notion-title {
    	font-size: 2.5em;
    }
    
    /* blog list styles */
    
    .notion-list-item {
    	flex-direction: column;
    	align-items: flex-start;
    	margin-top: 22px;
    	margin-bottom: 22px;
    	padding-top: 8px;
    	padding-bottom: 8px;
    }
    
    .notion-list-item-title {
    	font-size: 1.6em;
    }
    
    .notion-page-link {
    	height: auto;
    }
    
    .notion-list-item-body {
    	margin-top: 6px;
    }
    
    /* mobile */
    
    @media only screen and (max-width: 750px) {
    	.notion-page-cover {
    		width: 100%;
    	}
    	.notion-h1 {
    		margin-top: 10px;
    		font-size: 30px;
    	}
    	.notion-text,
    	.notion-title,
    	.notion-h1,
    	.notion-h2,
    	.notion-h3,
    	.notion-gallery-grid,
    	.notion-text,
    	img,
    	.notion-hr,
    	.notion-list-item {
    		text-align: center;
    	}
    	.notion-block-7f831d35edea4d3889b942b8cb58ea66 {
    		flex-direction: row;
    	}
    	.notion-list-view {
    		width: 100%;
    		min-width: 100%;
    	}
    }
    
    a {
    	text-decoration: none;
    }
    
    @-webkit-keyframes fadeIn {
    	0% {
    		opacity: 0;
    	}
    	100% {
    		opacity: 1;
    	}
    }
    
    @keyframes fadeIn {
    	0% {
    		opacity: 0;
    	}
    	100% {
    		opacity: 1;
    	}
    }
    
    /* FADE IN */
    
    .notion-h1,
    .notion-h2,
    .notion-h3,
    .notion-gallery-grid,
    .notion-text,
    img,
    .notion-hr,
    .notion-list-item {
    	-webkit-animation-duration: 3s;
    	animation-duration: 3s;
    	webkit-animation-fill-mode: both;
    	animation-fill-mode: both;
    	-webkit-animation-name: fadeIn;
    	animation-name: fadeIn;
    }
    /* links block at bottom*/
    .notion-block-c3a480f0710f4fa2bada935ac07ebdd6 {
        justify-content: center;
    }
    .notion-block-c3a480f0710f4fa2bada935ac07ebdd6 .notion-spacer {
        width: 0px;
    }
</style>