little tweaks

README.md

@@ -3,7 +3,14 @@ Generates my personal website.
 ## Installing Ruby
 You probably want to run ruby from a version manager like `chruby`, see [here](https://jekyllrb.com/docs/installation/macos/).
 
+## Changes checklist
+A list of things to check once in a while to make sure I haven't broken them inadvertently.
+- Mobile and web layouts looks ok.
+- Dark mode and light mode both look ok.
+- OG tags render nicely, use https://www.opengraph.xyz/
+
 ## Todo
+  - change the OG image used for the landing page so it's not just my face.
   - add humans.txt https://humanstxt.org/
   - fix the OG tags so that https://cards-dev.twitter.com/validator works
   - consider switching to using pandoc as a markdown renderer

_includes/footer.html

@@ -1,6 +1,6 @@
 <footer>
     <a href="https://github.com/TomHodson/tomhodson.github.com/blob/main/{{page.path}}?plain=1">
-        This Page's Source</a>
+        Page Source</a>
          | 
         <a href="/credits">
         Credits</a>

_includes/project_summary.html

@@ -1,6 +1,8 @@
 <article class="h-entry project">
     <a class="u-uid u-url photo" href="{{ post.url }}">
-    <img class="u-photo {{post.img.class}}" src = "{{post.img.src}}" alt="{{post.img.alt}}">
+    <img class="u-photo {{post.img.class}}"
+        src = "{{post.img.src}}" 
+        alt="{{post.img.alt | smartify}}">
     </a>
 
     <section>

_posts/2024-05-17-threejs-earth.md

@@ -22,5 +22,5 @@ head: |
     </script>
     <script src="/assets/blog/sphere_geodesics/index.js" type="module"></script>
 ---
-A small earth renderer made using ThreeJS.
+A small earth renderer made using ThreeJS. The most fun thing here is to max out the dislacement scale to see how big the Himalayas are! <a href = "https://github.com/TomHodson/tomhodson.github.com/tree/main/assets/blog/sphere_geodesics">Code here.</a>
 <sphere-viewer style="height: 500px; display: block;"></sphere-viewer>

_sass/_vars.scss

@@ -2,4 +2,8 @@ $font_stack: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, B
 $title_font_stack: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif", HelveticaNeue-CondensedBlack;
 
 $horizontal_breakpoint: 700px;
-$vertical_breakpoint: 500px;
+$vertical_breakpoint: 500px;
+
+// For the images on the blogroll, projects and highlights pages
+$thumbnail_image_size: clamp(5rem, 25vw, 8rem);
+$left_pad: calc(clamp(5rem, 25vw, 8rem) + 1rem);

_sass/blogroll.scss

@@ -1,6 +1,3 @@
-$image_size: clamp(5em, 25vw, 8em);
-$left_pad: calc(clamp(5em, 25vw, 8em) + 1em);
-
 h2.blogroll-title {
     a {
         text-decoration: none;
@@ -19,11 +16,21 @@ article.draft {
     opacity: 0.5;
 }
 
+a.highlights-more {
+    margin-left: $left_pad;
+}
+
+main > h2 {
+    font-size: 1.75rem;
+    margin-left: $left_pad
+}
+
 article.blogroll {
     padding-bottom: 0px;
     display: flex;
 
-    h2 {margin-top: 0;
+    h2 {
+        margin-top: 0;
         font-size: 1.3em;
     }
     time {
@@ -34,7 +41,7 @@ article.blogroll {
 
     figure {
         margin-right: 1em;
-        width: $image_size;
+        width: $thumbnail_image_size;
         height: 100%;
         flex-shrink: 0;
         margin: 0 1em 0 0;
@@ -42,8 +49,8 @@ article.blogroll {
     }
     img {
         margin: 0;
-        max-width: $image_size;
-        max-height: $image_size;
+        max-width: $thumbnail_image_size;
+        max-height: $thumbnail_image_size;
         border-radius: 0.5em;
         }
 }

_sass/projects.scss

@@ -8,16 +8,15 @@ article.project {
     h2 {margin-top: 0;}
 
     a.photo {
-        width: 7em;
-        height: 7em;
+        width: $thumbnail_image_size;
+        height: $thumbnail_image_size;
         margin-right: 1em;
     }
     
     img {
-        max-height: 7em;
+        max-height: $thumbnail_image_size;
         width: unset;
         aspect-ratio: 1 / 1;
-        margin-right: 1em;
     }
     figure {
         padding: 0;

_sass/thesis_styles.scss

@@ -26,7 +26,7 @@ figure {
 }
 
 figure > img, figure > svg {
-    max-width: 90% !important;
+    // max-width: 90% !important;
     margin-bottom: 2em;
 }
 

highlights.md

@@ -1,8 +1,8 @@
 ---
-title: Blog
+title: Home
 layout: default
 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.
+  Hi, I'm Tom Hodson. Welcome to my little home on the web.
 permalink: /highlights
 mathjax: false
 img:
@@ -15,12 +15,14 @@ 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>. 
+
 ## Posts
 <br>
 {% for post in site.posts limit:5 %}
 {% include post_summary.html %}
 {% endfor %}
-<section class="center"><a href = "/blog/">More Posts</a></section>
+<a href = "/blog/" class = "highlights-more">More Posts</a>
 
 ## Projects
 <br>
@@ -29,7 +31,7 @@ head: |
 {% endfor %}
 
 
-<section class="center"><a href = "/projects/">More Projects</a></section>
+<a href = "/projects/" class = "highlights-more">More Projects</a>
 
 ## Toots
 <div id="mt-container" class="mt-container">
@@ -38,7 +40,7 @@ head: |
   </div>
 </div>
 
-<section class="center"><a href = "https://tech.lgbt/@Tomhodson">More Toots</a></section>
+<a href = "https://tech.lgbt/@Tomhodson" class = "highlights-more">More Toots</a>
 
 <script type="module">
 const myTimeline = new MastodonTimeline.Init({