Merge pull request #132 from stuartmaxwell:blog-sidebar

Implement a blog sidebar
stuartmaxwell · Oct 21, 2024 · 9881f5b · 9881f5b
2 parents 887ca0e + f1b9e89
commit 9881f5b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -52,6 +52,13 @@ h6 {
   font-style: italic;
 }
 
+/* Use grid display for the main content with the sidebar class */
+main.main-sidebar {
+  display: grid;
+  grid-template-columns: 1fr 0.25fr;
+  gap: 1em;
+}
+
 @media (max-width: 576px) {
   .hide-at-xs {
     display: none;
@@ -62,6 +69,12 @@ h6 {
   .hide-at-s {
     display: none;
   }
+
+  main.main-sidebar {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1em;
+  }
 }
 
 .highlight pre {

diff --git a/static/css/styles.min.css b/static/css/styles.min.css
diff --git a/templates/base.html b/templates/base.html
@@ -26,9 +26,24 @@
       {% include "snippets/navbar.html" %}
     </header>
 
-    <main class="container">
-      {% block content %}
-      {% endblock content %}
+    <main class="container main-sidebar">
+      <div>
+        {% block content %}
+        {% endblock content %}
+      </div>
+      <aside class="hide-at-s">
+        <nav>
+          <ul>
+            <li><strong>Recent Posts</strong></li>
+          </ul>
+          <ul>
+            {% get_recent_posts as posts %}
+            {% for post in posts %}
+              <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+            {% endfor %}
+          </ul>
+        </nav>
+      </aside>
     </main>
 
   </body>

diff --git a/uv.lock b/uv.lock