<p>Template: <a href="https://mixasite.notion.site/Blog-Template-f6f9c10535704edcb0dfca150617b66a">https://mixasite.notion.site/Blog-Template-f6f9c10535704edcb0dfca150617b66a</a><br>
Demo: <a href="https://demo-blog.mixa.site">https://demo-blog.mixa.site</a></p>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/docs/img/demo-blog.jpg" priority="1"></p>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/docs/img/demo-blog-content.jpg"></p>
<h2 id="how-to-use-the-template"><a aria-hidden="true" tabindex="-1" href="#how-to-use-the-template"><span class="icon icon-link"></span></a>How to use the template</h2>
<ol>
<li>Clone the template</li>
<li>"Share > Share to web" to make it accessible to Mixa</li>
<li>Go to Mixa dashboard at <a href="https://app.mixa.site">https://app.mixa.site</a></li>
<li>Create a new site or use an existing one</li>
<li>Paste the notion link of your page in Site Setup section and click "Publish"</li>
<li>Your site is now accessible at your domain</li>
</ol>
<h2 id="additional-settings"><a aria-hidden="true" tabindex="-1" href="#additional-settings"><span class="icon icon-link"></span></a>Additional settings</h2>
<ul>
<li>In Navigation settings
<ul>
<li>turn off the sidebar</li>
<li>adjust the header navigations by adding About(url: /about) and Contact(url: /contact), or any other page you want</li>
<li>Change Brand Name to your blog's name</li>
</ul>
</li>
<li>In Theme settings
<ul>
<li>Choose your dark&#x26;light themes</li>
<li>Change Light Header Color and move the opacity all the way to 0</li>
<li>Change Dark Header Color and move the opacity all the way to 0</li>
<li>Set the preferred site width</li>
</ul>
</li>
<li>In Code settings, paste the below CSS into the CSS field</li>
<li>Don't forget to click "Save"</li>
</ul>
<pre><code>.notion-gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  grid-gap: 6vmin;
  gap: 6vmin;
}

.notion-gallery-grid .notion-page-icon-inline {
  display: none;
}

.notion-gallery-grid .notion-page-title-text {
  font-size: 2em;
  white-space: unset;
}

.notion-gallery-grid .notion-collection-card-property {
  white-space: unset;
  text-overflow: unset;
}

.notion-gallery-grid .notion-property-text {
  font-size: 14px;
}

.notion-collection-card {
  border-radius: 16px;
  box-shadow: none;
}

.notion-collection-card-cover img {
  border-radius: 16px;
}

.notion-collection-card {
  overflow: visible;
}

.notion-collection-card-cover {
  border-radius: 16px;
  box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
}

.notion-collection-card:hover .notion-collection-card-cover {
  filter: brightness(120%);
}

.notion-collection-card-body {
  padding: 10px;
}

.notion-title {
  display: block;
  text-align: center;
}

.notion-collection-row {
  padding-bottom: 1em;
}

.notion-collection-page-properties .notion-collection-column-title {
  display: none;
}

.notion-collection-row-property .notion-property {
  display: flex;
  justify-content: center;
}

.notion-collection-row-value {
  display: flex;
  align-items: center;
  padding: 0;
  min-height: 23px;
}

</code></pre>

Creating your site

Installing Mixa Obsidian Plugin

Setting up a Blog With Obsidian/Markdown

Blog

Resume

Using Mixa With Notion

Components

Carousel

Column

Hero

Video

Callouts

Image

Link

Math

Text

Site Editor

Setup

SEO and Analytics

Navigation

Code

Features

Theme

Sitemap and RSS

Search

Home Page

Scheduled Publishing

Static Files

Frontmatter

Quick Start

quick-start

templates

Notion

notion

components

Syntax

syntax

Markdown

markdown

site-editor

features

docs