style tweaks and add hightlings

posts/bletchley-park-tnmoc-holiday.md

@@ -2,7 +2,7 @@
 title: "Visit to Bletchley Park and The National Museum of Computing"
 slug: /bletchley-park-tnmoc-holiday/
 date: 2024-08-07
-tags: ["personal", "beige", "gruvbox"]
+tags: ["personal", "gruvbox", "highlight"]
 ---
 
 As part of our holiday this year my girlfriend and I went to visit

posts/new-job.md

@@ -12,7 +12,7 @@ professional development.
 
 <div style="display:flex; flex-direction: row; justify-content: center; margin:
     1rem 0;">
-<img src="./img/bbc-leave-gruv-small.png" width="300" />
+<img src="./img/bbc-leave-gruv-small.png" />
 </div>
 I worked with a variety of stakeholders on applications used internally within
 the Corporation. I was able to work across the frontend and the backend in a

src/pages/home.tsx

@@ -22,7 +22,7 @@ const HomePage = () => {
                   </div>
                 </h1>
                 <p className="leading-relaxed text-center sm:text-left md:text-left">
-                  software engineer at ITV, formerly BBC. this is my technical
+                  Software engineer at ITV, formerly BBC. This is my technical
                   scrapbook and digital garden.
                 </p>
               </div>
@@ -31,7 +31,12 @@ const HomePage = () => {
         </div>
       </div>
 
-      <PostListing title="recent posts" posts={posts.slice(0, 5)} />
+      <PostListing title="Recent posts" posts={posts.slice(0, 5)} />
+
+      <PostListing
+        title="Highlights"
+        posts={posts.filter((post) => post.tags.includes("highlight"))}
+      />
     </MainTemplate>
   )
 }

src/templates/BlogTemplate.tsx

@@ -55,7 +55,7 @@ const BlogTemplate = () => {
 							[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-[#504945] [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal		
 							[&>code]:relative [&>code]:rounded [&>code]:bg-[#504945] [&>code]:px-[0.3rem] [&>code]:py-[0.2rem] [&>code]:font-mono [&>code]:text-sm [&>code]:font-normal
 							[&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
-							[&>figure>img]:w-full
+							[&>figure>img]:max-w-2xl [&>figure>img]:max-h-[700px] [&>figure>img]:w-auto [&>figure>img]:h-auto [&>figure>img]:object-contain
 							[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-[#bdae93] [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
 							[&>figure>figcaption>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80
 							[&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-[#689d6a] [&_a]:text-primary