add SmallCaps component and use for title

src/components/Toc.vue

@@ -69,7 +69,7 @@ onBeforeUnmount(() => {
 
 <template>
     <div id="toc">
-        <h5><span class="initial">C</span>ontents</h5>
+        <h5>C<span class="lower">ontents</span></h5>
         <ul id="toc-list">
             <li
                 v-for="heading in headings"
@@ -108,7 +108,7 @@ onBeforeUnmount(() => {
 
 h5 {
     font-variant: petite-caps;
-    font-weight: 500;
+    font-weight: 350;
     font-size: var(--content-size);
     font-family: 'Figtree Variable';
     color: var(--content-color-faded);
@@ -122,12 +122,9 @@ h5 {
     /* make the border stretch beyond the text just a bit, because I like the effect */
     padding-right: 1.5rem;
 
-    & .initial {
-        /*
-        Our font doesn't have "proper" smallcaps, but we can fake it by
-        setting the weight separately for the initial (non-small) capital
-        */
-        font-weight: 350
+    /* SmallCaps is an Astro component so we can't use it here, but we can fake it */
+    & .lower {
+        font-weight: 500;
     }
 }