Get index page to render basic info

The structure is not even close to being finished, and only looks decent on desktop.

assets/css/screen.css

@@ -39,7 +39,7 @@ a {
 }
 
 a:hover {
-    color: pink;
+    color: #d9b9e6
 }
 
 /* Generic class to make things unselectable */
@@ -63,6 +63,34 @@ a:hover {
     margin: auto;
 }
 
+.ptheme-global-navbar_primary {
+    background-color: #201724;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: center;
+
+    white-space: nowrap;
+    text-transform: uppercase;
+}
+
+.ptheme-global-navbar_primary ul {
+    display: block;
+    width: 100%;
+}
+
+.ptheme-global-navbar_primary li {
+    display: inline-block;
+}
+
+.ptheme-index-post_article {
+    padding: 20px 0;
+    display: flex;
+    flex-direction: row;
+}
+
 .ptheme-content_main {
     max-width: 1260px;
     width: 80%;
@@ -70,17 +98,38 @@ a:hover {
     overflow: hidden;
 }
 
-.ptheme-index-post_article {
-    padding: 20px 0;
+.ptheme-index-post_feature-image-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
-a.ptheme-index-post_article_link {
-    display: flex;
-    flex-direction: row;
-}
 
 .ptheme-index-post_feature-image {
-    max-width: 100%;
+    width: 250px;
+    height: 140px;
+    padding: 20px;
+    
+    object-fit: cover;
+    border-radius: 25px;
+}
+
+.ptheme-index-post_excerpt {
+    width: 100%;
+    text-align: justify;
+}
+
+.ptheme-index-post_footer {
+    padding: 10px;
+    display: flex;
+    justify-content: right;
+    align-items: center;
+}
+
+.ptheme-index-post_author-image {
+    width: 25px;
+    padding: 10px;
+    border-radius: 100%;
 }
 
 .kg-width-wide {

index.hbs

@@ -1,48 +1,56 @@
 {{!< default}}
 
-<div class="ptheme-index-header_main unselectable" id="vantajs">
+<div class="ptheme-index-header_main unselectable">
     <h1>{{@site.title}}</h1>
 </div>
 
 
 <main>
 
+    <nav id="ptheme-global-navbar_primary" class="ptheme-global-navbar_primary unselectable">
+        {{navigation}}
+    </nav>
+    
     <div class="ptheme-content_main">
 
     {{!-- Looping through every post --}}
     {{#foreach posts}}
         <article class="ptheme-index-post_article">
-            <a class="ptheme-index-post_article_link" href="{{url}}">
 
-                <div>
+                <div class="ptheme-index-post_feature-image-container">
                     {{#if feature_image}}
-                        <img class="ptheme-index-post_feature-image" src="{{img_url feature_image size="m"}}" alt="{{title}}"/>
+                        <a href="{{url}}">
+                            <img class="ptheme-index-post_feature-image" src="{{img_url feature_image size="m"}}" alt="{{title}}"/>
+                        </a>
                     {{/if}}
                 </div>
 
-                <div>
-                    <header>
-                        <p><span>{{primary_tag.name}}</span>
-                            •
-                            <time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format="DD MMMM YYYY"}}</time>
-                        </p>
-                        <h3>{{title}}</h3>
-                    </header>
+                <div class="ptheme-index-post_excerpt">
+                    <p>
+                        {{#foreach tags}}
+                                <a href="{{url}}" title="{{name}}" class="tag tag-{{id}} {{slug}}"><b>{{name}}</b></a>{{#unless @last}}, {{/unless}}
+                        {{/foreach}}
+                        •
+                        <time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format="DD MMMM YYYY"}}</time>
+                    </p>
+                    <a href="{{url}}">
+                        <header>
+                            <h3>{{title}}</h3>
+                        </header>
 
-                    <section>
-                        <p>{{excerpt words="26"}}</p>
-                    </section>
-                </div>
-
-                <div>
-                    <footer>
-                        {{primary_author.name}}
+                        <section>
+                            <p>{{excerpt words="60"}}</p>
+                        </section>
+                    </a>
+                    {{!-- author info disabled because i'm the only one posting here
+                    <footer class="ptheme-index-post_footer">
                         {{#if primary_author.profile_image}}
-                            <img src="{{img_url primary_author.profile_image size="xxs"}}"
+                            <img class="ptheme-index-post_author-image" src="{{img_url primary_author.profile_image size="xxs"}}"
                                 alt="{{title}}"/>{{/if}}
+                        {{primary_author.name}}
                     </footer>
+                     --}}
                 </div>
-            </a>
         </article>
 
     {{/foreach}}

post.hbs

@@ -0,0 +1,6 @@
+{{!< default}}
+<div>
+    {{#post}}
+                        {{content}}
+    {{/post}}
+</div>