Rejig highlights page

_includes/post_summary.html

@@ -23,8 +23,10 @@
 </a>
 
 <section>
+  <section class="title-date-container">
     <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
-  <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
+    <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: '%b %Y' }}</time>
+  </section>
   <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
 </section>
 </article>

_includes/project_summary.html

@@ -8,8 +8,10 @@
     </a>
 
     <section>
+    <section class="title-date-container">
         <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
-    <!-- <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time> -->
+        <time class="dt-modified" datetime="{{ post.last_modified_at | date_to_xmlschema }}">{{ page.last_modified_at | date: '%b %Y' }}</time>
+    </section> 
     <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
     </section>
 </article>

_sass/base.scss

@@ -12,6 +12,7 @@
 @import "model_viewer"; //Styles for the 3D model viewer
 @import "mastodon_timeline";
 @import "night_mode_toggle";
+@import "highlights";
 
 // The syntax highlighting css
 // generated with rougify style bw > code_style_bw.scss
@@ -34,6 +35,7 @@
   --theme-subtle-outline: oklch(90% 0 50);
   --theme-highlight-color: hsl(338, 75%, 60%);
   --theme-highlight-color-transparent: hsla(338, 75%, 60%, 33%);
+  --theme-subtle-text-color: #606984;
 
   // constrain width and center
   --body-max-width: 900px;
@@ -114,6 +116,19 @@ main {
   }
 }
 
+// Used for both blog and project summaries
+section.title-date-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  // flex-wrap: wrap;
+  time {
+    font-size: 0.75em;
+    text-align: right;
+    color: var(--theme-subtle-text-color);
+  }
+}
+
 :is(h1, h2, h3, h4, .text-balance) {
   text-wrap: balance;
 }
@@ -263,9 +278,9 @@ body:not(.has-wc) .has-wc {
     margin-left: 0px;
   }
 
-  h1 {
+  //   h1 {
-    font-size: 1.5em !important;
+  //     font-size: 1.5em !important;
-  }
+  //   }
   .MathJax {
     font-size: 0.8em !important;
     overflow-x: auto;

_sass/blogroll.scss

@@ -2,7 +2,6 @@ h2.blogroll-title {
   a {
     text-decoration: none;
   }
-
 }
 
 hr.blogroll {
@@ -16,24 +15,6 @@ article.draft {
   opacity: 0.5;
 }
 
-section.highlights {
-    margin-bottom: 2rem;
-
-    h1 {
-        margin-bottom: 1rem;
-    }
-}
-
-a.highlights-more {
-    margin-left: $left_pad;
-}
-
-h1.highlights {
-    font-size: 1.75rem;
-    margin-left: $left_pad;
-    margin-bottom: 1em;
-}
-
 article.blogroll {
   padding-bottom: 0px;
   display: flex;
@@ -42,11 +23,6 @@ article.blogroll {
     margin-top: 0;
     font-size: 1.3em;
   }
-    time {
-        display: block;
-        margin-bottom: 0.2em;
-        font-size: 14px;
-    }
 
   figure {
     margin-right: 1em;
@@ -64,11 +40,11 @@ article.blogroll {
   }
 }
 
-@media 
+@media only screen and (max-width: $horizontal_breakpoint),
-    only screen and (max-width: $horizontal_breakpoint),
+  only screen and (max-height: $vertical_breakpoint) {
-    only screen and (max-height: $vertical_breakpoint)
+  hr.blogroll {
-    {  
+    border-width: 1px;
-    hr.blogroll {border-width: 1px}
+  }
   article.blogroll {
     h2 {
       font-size: 1.2em;
@@ -77,5 +53,4 @@ article.blogroll {
   a.highlights-more {
     font-size: 1.25rem;
   }
-
 }

_sass/highlights.scss

@@ -0,0 +1,43 @@
+section.highlights {
+  margin-bottom: 2rem;
+
+  h1 {
+    margin-bottom: 1rem;
+  }
+
+  a.highlights-more {
+    margin-left: $left_pad;
+  }
+
+  h1.highlights {
+    font-size: 1.75rem;
+    //   margin-left: $left_pad;
+    margin-bottom: 0.75em;
+  }
+  a.heading {
+    text-decoration: none;
+
+    h1 {
+      margin-bottom: 0.5em;
+    }
+  }
+
+  hr.heading {
+    width: 100%;
+    margin-top: 0;
+    margin-bottom: 2em;
+    border: 1px solid rgba(128, 128, 128, 0.2);
+    height: 0;
+  }
+
+  hr.blogroll {
+    border-width: 0 !important;
+  }
+}
+
+@media only screen and (max-width: $horizontal_breakpoint),
+  only screen and (max-height: $vertical_breakpoint) {
+  a.highlights-more {
+    font-size: 1.25rem;
+  }
+}

blog.md

@@ -1,6 +1,7 @@
 ---
 title: Blog
 layout: default
+permalink: /blog/
 excerpt: |
   I'm Tom Hodson. Welcome to my little home on the web! There's a blog, a cv and some projects to look at.
 mathjax: false

highlights.md

@@ -3,12 +3,11 @@ title: Home
 layout: default
 excerpt: |
   Hi, I'm Tom Hodson. Welcome to my little home on the web.
-permalink: /highlights
+permalink: /
 mathjax: false
 img:
     src: /assets/images/avatar.jpeg
     alt: A picture of me.
-permalink: /
 head: |
     <link rel="stylesheet" href="/node_modules/@idotj/mastodon-embed-timeline/dist/mastodon-timeline.min.css">
     <script src="/node_modules/@idotj/mastodon-embed-timeline/dist/mastodon-timeline.umd.js"></script>
@@ -18,7 +17,8 @@ head: |
 Welcome to my little home on the web! Below you'll find recent blog posts, projects and mastodon toots. You'll also find links to the web version of my thesis <a href = "/thesis/4_Amorphous_Kitaev_Model/4.2_AMK_Methods.html#:~:text=Figure 1:,on the torus.">(with animations!)</a> and my <a href="/cv/">CV</a>. 
 
 <section class = "highlights">
-<h1 class = "highlights">Posts</h1>
+<a href = "/blog/" class="heading"><h1 class = "highlights">Posts</h1></a>
+<hr class="heading">
 {% for post in site.posts limit:5 %}
 {% include post_summary.html %}
 {% endfor %}
@@ -27,7 +27,8 @@ Welcome to my little home on the web! Below you'll find recent blog posts, proje
 </section>
 
 <section class = "highlights">
-<h1 class = "highlights">Projects</h1>
+<a href = "/projects/" class = "heading"><h1 class = "highlights">Projects</h1></a>
+<hr class="heading">
 {% for post in site.projects limit:5 %}
 {% include project_summary.html %}
 {% endfor %}
@@ -35,7 +36,8 @@ Welcome to my little home on the web! Below you'll find recent blog posts, proje
 </section>
 
 <section class = "highlights">
-<h1 class = "highlights">Toots</h1>
+<a href = "https://tech.lgbt/@Tomhodson" class = "heading"><h1 class = "highlights">Toots</h1></a>
+<hr class="heading">
 <div id="mt-container" class="mt-container">
   <div class="mt-body" role="feed">
     <div class="mt-loading-spinner"></div>