Make nicer heading with last modified column header

_sass/base.scss

@@ -116,16 +116,34 @@ main {
   }
 }
 
+hr.heading {
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 2em;
+  border: 1px solid rgba(128, 128, 128, 0.2);
+  height: 0;
+}
+
 // Used for both blog and project summaries
+@mixin time-text {
+  font-size: 0.75em;
+  color: var(--theme-subtle-text-color);
+}
+
+span.dt-label {
+  display: block;
+  width: 100%;
+  text-align: right;
+  @include time-text;
+}
+
 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);
+    @include time-text;
   }
 }
 
@@ -150,6 +168,13 @@ a {
   color: var(--theme-text-color);
 }
 
+h1 > a,
+h2 > a,
+h3 > a,
+li > a {
+  text-decoration: None;
+}
+
 header a,
 nav a {
   text-decoration: none;

_sass/cv.scss

@@ -77,10 +77,6 @@ summary h3 {
   flex: 0 1 auto;
 }
 
-button {
-  height: 2em;
-}
-
 div.details-container {
   display: flex;
   margin-left: 2.2rem;
@@ -89,32 +85,20 @@ div.details-container {
 .cv-title-container {
   display: flex;
   align-items: baseline;
-}
-
-div.cv-title-container {
+  justify-content: space-between;
   margin-bottom: 1em;
   margin-top: 1em;
-}
-div.cv-title-container h2 {
+
+  border-bottom: var(--theme-subtle-outline) 1px solid;
+  h2 {
     margin: 0px;
   }
-
-div.cv-title-container a {
+  a {
     cursor: pointer;
-  margin-left: 3em;
-
-  border-style: solid;
-  border-radius: 5px;
-  border-width: 1px;
-  border-color: transparent;
-  offset: None;
-
-  background-color: transparent;
-  font-size: 1em;
+    text-decoration: None;
+    color: var(--theme-text-color);
+    font-size: 0.75em;
   }
-
-div.cv-title-container button:hover {
-  border-color: black;
 }
 
 @media only screen and (max-width: 900px) {

_sass/highlights.scss

@@ -1,3 +1,12 @@
+// Also affects blog and posts pages
+h1.highlights {
+  font-size: 1.75rem;
+  margin-bottom: -0.2em;
+  a {
+    text-decoration: none;
+  }
+}
+
 section.highlights {
   margin-bottom: 2rem;
 
@@ -9,27 +18,6 @@ section.highlights {
     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;
   }

blog.md

@@ -9,6 +9,11 @@ img:
     src: /assets/images/avatar.jpeg
     alt: A picture of me.
 ---
+<section class="title-date-container">
+    <h1 class = "highlights">Blog</h1>
+    <span class="dt-label">Date Posted</span>
+</section>
+<hr class="heading">
 {% for post in site.posts %}
 {% include post_summary.html %}
 {% endfor %}

highlights.md

@@ -17,26 +17,35 @@ 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">
-<a href = "/blog/" class="heading"><h1 class = "highlights">Posts</h1></a>
+
+<section class="title-date-container">
+    <h1 class = "highlights"><a href = "/blog/" class="heading">Posts</a></h1>
+    <span class="dt-label">Date Posted</span>
+</section>
+
 <hr class="heading">
 {% for post in site.posts limit:5 %}
 {% include post_summary.html %}
 {% endfor %}
 <br>
-<a href = "/blog/" class = "highlights-more">More Posts</a>
+<a href = "/blog/" class = "highlights-more">More</a>
 </section>
 
 <section class = "highlights">
-<a href = "/projects/" class = "heading"><h1 class = "highlights">Projects</h1></a>
+
+<section class="title-date-container">
+    <h1 class = "highlights"><a href = "/projects/" class = "heading">Projects</a></h1>
+    <span class="dt-label">Last Modified</span>
+</section>
 <hr class="heading">
 {% for post in site.projects limit:5 %}
 {% include project_summary.html %}
 {% endfor %}
-<a href = "/projects/" class = "highlights-more">More Projects</a>
+<a href = "/projects/" class = "highlights-more">More</a>
 </section>
 
 <section class = "highlights">
-<a href = "https://tech.lgbt/@Tomhodson" class = "heading"><h1 class = "highlights">Toots</h1></a>
+<h1 class = "highlights"><a href = "https://tech.lgbt/@Tomhodson" class = "heading">Toots</a></h1>
 <hr class="heading">
 <div id="mt-container" class="mt-container">
   <div class="mt-body" role="feed">

projects.md

@@ -11,6 +11,12 @@ img:
     
 social_image: /assets/projects/lego_adapters/thumbnail.png
 ---
+<section class="title-date-container">
+    <h1 class = "highlights">Projects</h1>
+    <span class="dt-label">Last Modified</span>
+</section>
+<hr class="heading">
+
 {% for post in site.projects %}
 {% include project_summary.html %}
 {% endfor %}