A few minor tweaks

Author: StanFromIreland

codespeed/static/css/main.css

@@ -75,6 +75,7 @@ div#title {
     padding: 0.4em var(--gap);
     background-color: var(--surface);
     border-bottom: 1px solid var(--border);
+    border-radius: 0 0 var(--radius) var(--radius);
 }
 div#title a { display: inline-flex; align-items: center; }
 div#title img { display: block; height: 40px; padding: 0; margin: 0; }
@@ -184,10 +185,19 @@ div#presentation div.menubox:hover {
 div#presentation div.menubox h2 { font-size: 1.1em; font-weight: 600; }
 div#presentation div.menubox p { color: var(--text-muted); }
 
-div#presentation p { min-height: 5.5em; margin: 0.6em 0 0; padding-left: 118px; text-align: left; }
-div#presentation div#changes p { background: url(../images/changes.png) no-repeat; }
-div#presentation div#timeline p { background: url(../images/timeline.png) no-repeat; }
-div#presentation div#comparison p { background: url(../images/comparison.png) no-repeat; }
+/* The three icons differ in size (98 to 147px wide); scale them to one height */
+div#presentation p {
+    min-height: 5.5em;
+    margin: 0.6em 0 0;
+    padding-left: 122px;
+    text-align: left;
+    background-repeat: no-repeat;
+    background-position: 0 0.2em;
+    background-size: auto 65px;
+}
+div#presentation div#changes p { background-image: url(../images/changes.png); }
+div#presentation div#timeline p { background-image: url(../images/timeline.png); }
+div#presentation div#comparison p { background-image: url(../images/comparison.png); }
 
 div#presentation div#reports { margin-top: 1em; }
 
@@ -214,7 +224,11 @@ div#content, div.about_content {
     text-align: center;
     padding: 1em;
 }
-div.about_content { text-align: left; }
+div.about_content { text-align: left; max-width: calc(100ch + 2em); }
+/* Keep prose readable: wrap paragraphs at roughly 100 characters */
+div.about_content p, div.about_content li, div.about_content h2, div.about_content h3 {
+    max-width: 100ch;
+}
 
 .sidebox {
     overflow: hidden;
@@ -297,7 +311,7 @@ table.reports caption {
     font-size: 1em;
     font-weight: 600;
     margin-bottom: 0.4em;
-    text-align: left;
+    text-align: center;
 }
 table.reports caption a { color: var(--text); }
 table.reports caption a img { border: 0; vertical-align: middle; height: 14px; margin-bottom: 1px; }
@@ -415,7 +429,14 @@ tbody.commits tr td.date { padding: 0.3em; width: 5em; text-align: right; }
     overflow: auto;
 }
 
-a#permalink { float: right; font-size: 0.9em; }
+a#permalink {
+    float: right;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+    font-size: 0.9em;
+}
+a#permalink svg { width: 1.1em; height: 1.1em; }
 
 /* Plot styles */
 div#plot { text-align: left; height: 500px; width: 100%; }

codespeed/templates/codespeed/changes.html

@@ -58,7 +58,7 @@
 
 <div id="configbar">
   <span class="options">Results for revision <select id="revision"></select></span>
-  <a id="permalink" href="#">Permalink</a>
+  {% include "codespeed/permalink.html" %}
 </div>
 <div id="content" class="clearfix">
 <div id="contentwrap"></div>

codespeed/templates/codespeed/comparison.html

@@ -71,10 +71,10 @@
     </select>
   </span>
   <span class="options">
-    <label for="direction">horizontal</label>
+    <label for="direction">Horizontal:</label>
     <input id="direction" type="checkbox" name="direction" value="horizontal"/>
   </span>
-  <a id="permalink" href="#">Permalink</a>
+  {% include "codespeed/permalink.html" %}
 </div>
 <div id="content" class="clearfix">
 <div id="plotwrapper"></div>

codespeed/templates/codespeed/permalink.html

@@ -0,0 +1,2 @@
+{% comment %}Permalink anchor with the Bootstrap Icons "link-45deg" glyph (MIT, twbs/icons).{% endcomment %}
+<a id="permalink" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/></svg>Permalink</a>

codespeed/templates/codespeed/timeline.html

@@ -97,7 +97,7 @@
     <label for="show_extrema_bands">Show extrema bands</label>
   </span>
   {% endif %}
-  <a id="permalink" href="#">Permalink</a>
+  {% include "codespeed/permalink.html" %}
 </div>
 <div id="content" class="clearfix">
 <div id="plotgrid"></div>