General style improvements

5 files changed, 88 insertions, 30 deletions

diff --git a/content/_index.md b/content/_index.md
index f4ae211..b7159b1 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -3,4 +3,5 @@ title = "Sorre"
 description = "Random thoughts written down so I can come back to them later"
 template = "index.html"
 page_template = "blog-page.html"
+sort_by = "date"
 +++
diff --git a/content/shell-snippets.md b/content/shell-snippets.md
index 72a1686..7607d77 100644
--- a/content/shell-snippets.md
+++ b/content/shell-snippets.md
@@ -1,5 +1,7 @@
 +++
 title = "Shell snippets"
+date = "2023-11-15"
+updated = "2023-11-15"
 +++
 ## Scraping images from open tabs
 ```zsh
diff --git a/sass/style.scss b/sass/style.scss
index d4cc71c..50b4bef 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,37 +1,84 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 body {
   width: max-content;
+  max-width: 100%;
+  margin: 0;
+  padding: .25rem 1rem;
+}
+
+header {
+  display: flex;
+  align-items: baseline;
+  gap: 0 1rem;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  margin: 1rem 0;
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+p {
+  max-width: 40em;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  -webkit-hyphens: auto; /* for Safari */
 }
 
 pre {
   padding: 1rem;
   font-size: 1rem;
   overflow: auto;
+
+  // The line numbers already provide some kind of left/right padding
+  [data-lineos] {
+    padding: 1rem 0;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    td {
+      padding: 0;
+
+      // The line number cells
+      :nth-of-type(1) {
+        text-align: center;
+        user-select: none;
+      }
+    }
+  }
+
+  mark {
+    // If you want your highlights to take the full width.
+    display: block;
+    // The default background colour of a mark is bright yellow
+    background-color: rgba(254, 252, 232, 0.9);
+  }
 }
-// The line numbers already provide some kind of left/right padding
-pre[data-linenos] {
-  padding: 1rem 0;
-}
-pre table td {
-  padding: 0;
-}
-// The line number cells
-pre table td:nth-of-type(1) {
-  text-align: center;
-  user-select: none;
-}
-pre mark {
-  // If you want your highlights to take the full width.
-  display: block;
-  // The default background colour of a mark is bright yellow
-  background-color: rgba(254, 252, 232, 0.9);
-}
-pre table {
-  width: 100%;
-  border-collapse: collapse;
+
+ul > li {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: baseline;
+  gap: 0 1rem;
 }
 
-p {
-  max-width: 40em;
-  word-wrap: break-word;
-  text-align: justify;
+nav {
+  p, ul, li {
+    margin: 0;
+    padding: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  align-content: flex-start;
+  gap: .25rem;
 }
diff --git a/templates/blog-page.html b/templates/blog-page.html
index f6e7ac7..0414d85 100644
--- a/templates/blog-page.html
+++ b/templates/blog-page.html
@@ -2,12 +2,16 @@
 
 {% block content %}
 
-<div style="display:flex; align-items:baseline; gap:1rem;">
+<header>
   <h1 class="title">
     {{ page.title }}
   </h1>
+  <div>
+    <p>written: {{ page.date }}</p>
+    <p>updated: {{ page.updated }}</p>
+  </div>
   <a href="/">home</a>
-</div>
+</header>
 
 {{ page.content | safe }}
 {% endblock content %}
diff --git a/templates/index.html b/templates/index.html
index 8fb3c95..d894455 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,13 +7,17 @@
 
 <p>{{ section.description }}</p>
 
-<p>
+<nav>
   Posts:
   <ul>
     {% for page in section.pages %}
-    <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+    <li>
+      <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+      <p>written: {{ page.date }}, </p>
+      <p>updated: {{ page.updated }}</p>
+    </li>
     {% endfor %}
   </ul>
-</p>
+</nav>
 
 {% endblock %}