From 90e4ba94c34898180984996a54fc2d32692fe592 Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Mon, 9 Sep 2024 09:48:55 +0200
Subject: [PATCH] Rejig highlights page

---
 _includes/post_summary.html    |   6 +-
 _includes/project_summary.html |   6 +-
 _sass/base.scss                |  21 ++++++-
 _sass/blogroll.scss            | 107 +++++++++++++--------------------
 _sass/highlights.scss          |  43 +++++++++++++
 blog.md                        |   1 +
 highlights.md                  |  12 ++--
 7 files changed, 118 insertions(+), 78 deletions(-)
 create mode 100644 _sass/highlights.scss

diff --git a/_includes/post_summary.html b/_includes/post_summary.html
index 44be5cf..2e27154 100644
--- a/_includes/post_summary.html
+++ b/_includes/post_summary.html
@@ -23,8 +23,10 @@
 </a>
 
 <section>
-  <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>
+  <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: '%b %Y' }}</time>
+  </section>
   <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
 </section>
 </article>
diff --git a/_includes/project_summary.html b/_includes/project_summary.html
index 2c1d947..5903824 100644
--- a/_includes/project_summary.html
+++ b/_includes/project_summary.html
@@ -8,8 +8,10 @@
     </a>
 
     <section>
-    <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> -->
+    <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-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>
\ No newline at end of file
diff --git a/_sass/base.scss b/_sass/base.scss
index b828b29..8c6b6e2 100644
--- a/_sass/base.scss
+++ b/_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 {
-    font-size: 1.5em !important;
-  }
+  //   h1 {
+  //     font-size: 1.5em !important;
+  //   }
   .MathJax {
     font-size: 0.8em !important;
     overflow-x: auto;
diff --git a/_sass/blogroll.scss b/_sass/blogroll.scss
index 1ef5e32..957c36a 100644
--- a/_sass/blogroll.scss
+++ b/_sass/blogroll.scss
@@ -1,81 +1,56 @@
 h2.blogroll-title {
-    a {
-        text-decoration: none;
-    }
-
+  a {
+    text-decoration: none;
+  }
 }
 
 hr.blogroll {
-    border: 0px solid rgba(128, 128, 128, 0.2);
-    width: 66%;
-    margin-top: 1em;
-    margin-bottom: 1em;
+  border: 0px solid rgba(128, 128, 128, 0.2);
+  width: 66%;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 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;
+  opacity: 0.5;
 }
 
 article.blogroll {
-    padding-bottom: 0px;
-    display: flex;
+  padding-bottom: 0px;
+  display: flex;
 
-    h2 {
-        margin-top: 0;
-        font-size: 1.3em;
-    }
-    time {
-        display: block;
-        margin-bottom: 0.2em;
-        font-size: 14px;
-    }
+  h2 {
+    margin-top: 0;
+    font-size: 1.3em;
+  }
 
-    figure {
-        margin-right: 1em;
-        width: $thumbnail_image_size;
-        height: 100%;
-        flex-shrink: 0;
-        margin: 0 1em 0 0;
-        padding: 0;
-    }
-    img {
-        margin: 0;
-        max-width: $thumbnail_image_size;
-        max-height: $thumbnail_image_size;
-        border-radius: 0.5em;
-        }
+  figure {
+    margin-right: 1em;
+    width: $thumbnail_image_size;
+    height: 100%;
+    flex-shrink: 0;
+    margin: 0 1em 0 0;
+    padding: 0;
+  }
+  img {
+    margin: 0;
+    max-width: $thumbnail_image_size;
+    max-height: $thumbnail_image_size;
+    border-radius: 0.5em;
+  }
 }
 
-@media 
-    only screen and (max-width: $horizontal_breakpoint),
-    only screen and (max-height: $vertical_breakpoint)
-    {  
-    hr.blogroll {border-width: 1px}
-    article.blogroll {
-        h2 {
-            font-size: 1.2em;
-        }
+@media only screen and (max-width: $horizontal_breakpoint),
+  only screen and (max-height: $vertical_breakpoint) {
+  hr.blogroll {
+    border-width: 1px;
+  }
+  article.blogroll {
+    h2 {
+      font-size: 1.2em;
     }
-    a.highlights-more {
-        font-size: 1.25rem;
-    }
-
-}
\ No newline at end of file
+  }
+  a.highlights-more {
+    font-size: 1.25rem;
+  }
+}
diff --git a/_sass/highlights.scss b/_sass/highlights.scss
new file mode 100644
index 0000000..58efa92
--- /dev/null
+++ b/_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;
+  }
+}
diff --git a/blog.md b/blog.md
index 84cdada..857db5d 100644
--- a/blog.md
+++ b/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
diff --git a/highlights.md b/highlights.md
index 184004c..ddcc1e7 100644
--- a/highlights.md
+++ b/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>