misc: improvements to grid, linkable headings

aaronczichon · Mar 21, 2024 · e566527 · e566527
1 parent bf9fbd1
commit e566527
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 3 deletions.
diff --git a/design/src/styles/layout/entry-grid.css b/design/src/styles/layout/entry-grid.css
@@ -32,6 +32,6 @@
 
 .entry--date {
 	color: var(--primary-font-color);
-	margin-left: 8px;
+	margin: var(--entry-date-margin);
 	font-size: 0.8em;
 }
diff --git a/design/src/styles/variants/variables-aaron.css b/design/src/styles/variants/variables-aaron.css
@@ -16,6 +16,8 @@
 	--nav-border: 1px solid var(--primary-color-dark);
 	--nav-border-radius: 8px;
 
+	--entry-date-margin: 0 0 0 0;
+
 	@media (prefers-color-scheme: dark) {
 		--primary-color: #f2f0e9;
 		--primary-color-dark: #e8c872;

diff --git a/design/src/styles/variants/variables-canada.css b/design/src/styles/variants/variables-canada.css
@@ -13,4 +13,6 @@
 	--nav-margin: 0;
 	--nav-border: none;
 	--nav-border-radius: 0;
+
+	--entry-date-margin: 0 0 0 8px;
 }
diff --git a/personal/src/pages/blog.astro b/personal/src/pages/blog.astro
@@ -55,7 +55,7 @@ import rssIcon from "../resources/rss.svg";
                 />
               ) : null}
               <h3>
-                {post.data.title}
+                {post.data.title} <br />
                 <span class="entry--date">
                   {new Date(post.data.pubDate).toLocaleDateString(
                     "en-CA",

diff --git a/personal/src/pages/blog/[...slug].astro b/personal/src/pages/blog/[...slug].astro
@@ -38,3 +38,18 @@ const readingTime = Math.ceil(wordCount / averageWPM);
     </article>
   </main>
 </Layout>
+<script is:inline>
+  /**
+   * Build linkable headings so they can be send as links if the article is large
+   * and you want to share a specific section with some people.
+   */
+  const anchorHeadings = document.querySelectorAll("h2, h3, h4, h5, h6");
+  [...anchorHeadings].forEach((heading) => {
+    const anchor = document.createElement("a");
+    anchor.href = `#${heading.id}`;
+    anchor.style.textDecoration = "none";
+    heading.parentNode.insertBefore(anchor, heading);
+
+    anchor.appendChild(heading);
+  });
+</script>
diff --git a/personal/src/pages/index.astro b/personal/src/pages/index.astro
@@ -70,7 +70,7 @@ const dateOptions: object = {
                 />
               ) : null}
               <h3>
-                {post.data.title}
+                {post.data.title} <br />
                 <span class="entry--date">
                   {new Date(post.data.pubDate).toLocaleDateString(
                     "en-CA",