fix history view on narrow screens

static/css/history.css

@@ -1,12 +1,15 @@
 .version-history {
+    & > .commit-count {
+        margin-left: 2rem;
+    }
 
-    &>ul.commits {
+    & > ul.commits {
         --recursive-mono: 1;
 
         list-style: none;
         padding-left: 0;
 
-        &>li {
+        & > li {
             padding-top: 0.2rem;
             padding-bottom: 0.2rem;
 
@@ -15,11 +18,11 @@
             align-items: start;
             gap: 0.5em;
 
-            &>.revision-number {
+            & > .revision-number {
                 justify-self: end;
             }
 
-            details>summary {
+            details > summary {
                 cursor: pointer;
             }
         }

static/css/main.css

@@ -473,8 +473,9 @@ hr {
 
 h1.page-title {
     --recursive-wght: 850;
-    margin-top: 0;
+
-    margin-bottom: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     margin-left: 2.25rem;
     font-size: 2.5rem;
 

template/_history.hbs

@@ -16,7 +16,7 @@
     {{> components/_header.hbs }}
 
     <main class="version-history">
-        <p>{{ len page.commits }} commits</p>
+        <p class="commit-count">{{ len page.commits }} commits</p>
         
         <ul class="commits">
             {{#each page.commits}}