Added TOC and cards to journal page.

6 files changed, 151 insertions, 111 deletions

diff --git a/_includes/footer.liquid b/_includes/footer.liquid
index 8feaa9c..a84d4f0 100644
--- a/_includes/footer.liquid
+++ b/_includes/footer.liquid
@@ -1,33 +1,35 @@
-<div class="content has-text-centered">
-    <p>
-    Site last updated {{ "now" | date: "%A, %b %e, %Y" }}
-    </p>
-    <p>
-    See a problem? 
-    <a href=" mailto:atc@53hor.net?subject=Found%20your%20website!">
-        Tell me so I can fix it
-    </a>
-    or
-    <a href="https://gitlab.com/53hornet/cobalt-site">
-        fix it yourself!
-    </a>
-    </p>
-    <p>
-    Built using 
-    <a href="https://cobalt-org.github.io/">
-        Cobalt.rs
-    </a>
-    , 
-    <a href="https://bulma.io">
-        Bulma.io
-    </a>
-    ,
-    <a href="https://daneden.github.io/animate.css/">
-        Animate.css
-    </a>
-    , and self-hosted with 
-    <a href="https://nginx.org/">
-        NGINX
-    </a>
-    </p>
+<div class="container">
+    <div class="content has-text-centered">
+        <p>
+        Site last updated {{ "now" | date: "%A, %b %e, %Y" }}
+        </p>
+        <p>
+        See a problem? 
+        <a href=" mailto:atc@53hor.net?subject=Found%20your%20website!">
+            Tell me so I can fix it
+        </a>
+        or
+        <a href="https://gitlab.com/53hornet/cobalt-site">
+            fix it yourself!
+        </a>
+        </p>
+        <p>
+        Built using 
+        <a href="https://cobalt-org.github.io/">
+            Cobalt.rs
+        </a>
+        , 
+        <a href="https://bulma.io">
+            Bulma.io
+        </a>
+        ,
+        <a href="https://daneden.github.io/animate.css/">
+            Animate.css
+        </a>
+        , and self-hosted with 
+        <a href="https://nginx.org/">
+            NGINX
+        </a>
+        </p>
+    </div>
 </div>
diff --git a/_includes/nav.liquid b/_includes/nav.liquid
index 3a1fa0c..4ade8b6 100644
--- a/_includes/nav.liquid
+++ b/_includes/nav.liquid
@@ -1,80 +1,81 @@
 <!-- begin navbar -->
-<nav 
-    class="navbar is-primary animated bounceInDown">
-    <!-- begin brand -->
-    <div class="navbar-brand">
-        <a class="navbar-item" href="/">
-            <img src="/public/images/logo.png">
-        </a>
-        <a class="navbar-item"
-           href="/rss.xml"
-           target="_blank"
-           >
-           <span class="icon">
-               {% include mdi-rss-box.html %}
-           </span>
-        </a>
-
-        <a class="navbar-item"
-           href="https://gitlab.com/53hornet"
-           target="_blank"
-           >
-           <span class="icon">
-               {% include mdi-gitlab.html %}
-           </span>
-        </a>
-
-        <a class="navbar-item"
-           href="https://youtube.com/user/my53hornet"
-           target="_blank"
-           >
-           <span class="icon">
-               {% include mdi-youtube.html %}
-           </span>
-        </a>
-
-        <a class="navbar-item"
-           href="https://www.youtube.com/user/STMUAC"
-           target="_blank"
-           >
-           <span class="icon">
-               {% include mdi-video-vintage.html %}
-           </span>
-        </a>
-
-        <a class="navbar-item"
-           href="https://www.linkedin.com/in/adam-carpenter/"
-           target="_blank"
-           >
-           <span class="icon">
-               {% include mdi-linkedin.html %}
-           </span>
-        </a>
+<div class="container">
+    <nav class="navbar is-primary animated bounceInDown">
+        <!-- begin brand -->
+        <div class="navbar-brand">
+            <a class="navbar-item" href="/">
+                <img src="/public/images/logo.png">
+            </a>
+            <a class="navbar-item"
+               href="/rss.xml"
+               target="_blank"
+               >
+               <span class="icon">
+                   {% include mdi-rss-box.html %}
+               </span>
+            </a>
 
-    </div>
-    <!-- end brand -->
+            <a class="navbar-item"
+               href="https://gitlab.com/53hornet"
+               target="_blank"
+               >
+               <span class="icon">
+                   {% include mdi-gitlab.html %}
+               </span>
+            </a>
 
-    <!-- begin menu -->
-    <div class="navbar-menu is-active">
+            <a class="navbar-item"
+               href="https://youtube.com/user/my53hornet"
+               target="_blank"
+               >
+               <span class="icon">
+                   {% include mdi-youtube.html %}
+               </span>
+            </a>
 
-        <!-- begin start -->
-        <div class="navbar-start">
-        </div>
-        <!-- end start -->
+            <a class="navbar-item"
+               href="https://www.youtube.com/user/STMUAC"
+               target="_blank"
+               >
+               <span class="icon">
+                   {% include mdi-video-vintage.html %}
+               </span>
+            </a>
 
-        <!-- begin end -->
-        <div class="navbar-end">
             <a class="navbar-item"
-               href="/journal"
+               href="https://www.linkedin.com/in/adam-carpenter/"
+               target="_blank"
                >
-               Journal
+               <span class="icon">
+                   {% include mdi-linkedin.html %}
+               </span>
             </a>
+
         </div>
-        <!-- end end -->
+        <!-- end brand -->
+
+        <!-- begin menu -->
+        <div class="navbar-menu is-active">
+
+            <!-- begin start -->
+            <div class="navbar-start">
+            </div>
+            <!-- end start -->
 
-    </div>
-    <!-- end menu -->
+            <!-- begin end -->
+            <div class="navbar-end">
+                <a class="navbar-item"
+                   href="/journal"
+                   >
+                   Journal
+                </a>
+            </div>
+            <!-- end end -->
+
+        </div>
+        <!-- end menu -->
 
-</nav>
+    </nav>
+</div>
 <!-- end navbar -->
 
diff --git a/_layouts/index.liquid b/_layouts/index.liquid
index 1bea078..1b124c3 100644
--- a/_layouts/index.liquid
+++ b/_layouts/index.liquid
@@ -21,7 +21,7 @@
 
             <!-- begin hero body -->
             <div class="hero-body">
-                <div class="container is-fluid">
+                <div class="container">
                     <div class="columns">
                         <div class="column">
 
diff --git a/_layouts/journal.liquid b/_layouts/journal.liquid
index 19891bf..01d0fd1 100644
--- a/_layouts/journal.liquid
+++ b/_layouts/journal.liquid
@@ -54,14 +54,17 @@
                             </p>
 
                             <ul class="menu-list">
-                                {% assign title = page.title | downcase %}
-
                                 {% for post in collections.posts.pages %}
-                                        <li>
-                                            <a href="{{ post.permalink }}">
-                                                {{ post.title }}
-                                            </a>
-                                        </li>
+                                    <li>
+                                        <a href="{{ post.permalink }}">
+                                            {{ post.title }}
+                                            {% if post.published_date %}
+                                                <span class="has-text-light">
+                                                {{ post.published_date | date: "%e %b %Y" }}
+                                                </span>
+                                            {% endif %}
+                                        </a>
+                                    </li>
                                 {% endfor %}
                             </ul>
                         </aside>
@@ -70,6 +73,40 @@
 
                     <!-- begin long post list -->
                     <div class="column">
+                    {% for i in (1..20) %}
+                        {% for post in collections.posts.pages %}
+                            <div class="card">
+                                <header class="card-header">
+                                    <p class="card-header-title">
+                                    {% if post.published_date %}
+                                        {{ post.published_date | date: "%A, %b %e, %Y" }}
+                                    {% endif %}
+                                    </p>
+                                </header>
+                                <div class="card-content">
+                                    <p class="subtitle">
+                                    {{ post.title }}
+                                    </p>
+                                    <div class="content">
+                                        {{ post.content | truncatewords: 50 }}
+                                    </div>
+                                </div>
+                                <footer class="card-footer">
+                                    <a class="card-footer-item"
+                                       href="{{ post.permalink }}"
+                                       >
+                                       Read more...
+                                    </a>
+                                    <a class="card-footer-item"
+                                       href="{{ post.permalink }}"
+                                       target="_blank"
+                                       >
+                                       Open in new tab...
+                                    </a>
+                                </footer>
+                            </div>
+                        {% endfor %}
+                {%endfor%}
                     </div>
                     <!-- end long post list -->
 
diff --git a/_layouts/page.liquid b/_layouts/page.liquid
index 9a728d1..1c5cd99 100644
--- a/_layouts/page.liquid
+++ b/_layouts/page.liquid
@@ -18,7 +18,7 @@
 
             <!-- begin hero body -->
             <div class="hero-body">
-                <div class="container is-fluid">
+                <div class="container">
                     <h1 class="title">
                         {{ page.title }}
                     </h1>
@@ -31,7 +31,7 @@
 
         <!-- begin main content -->
         <section class="section">
-            <div class="container is-fluid">
+            <div class="container">
                 <div class="columns">
 
                     <div class="column">
diff --git a/_layouts/post.liquid b/_layouts/post.liquid
index 777f455..50fb240 100644
--- a/_layouts/post.liquid
+++ b/_layouts/post.liquid
@@ -18,7 +18,7 @@
 
             <!-- begin hero body -->
             <div class="hero-body">
-                <div class="container is-fluid">
+                <div class="container">
                     <!-- begin title and date -->
                     <h1 class="title">
                         {{ page.title }}
@@ -66,7 +66,7 @@
 
         <!-- begin main content -->
         <section class="section">
-            <div class="container is-fluid">
+            <div class="container">
                 <div class="columns">
                     <div class="content">
                         {{ page.content }}