feat: append link programmatically

src/static/skins/colibris/index.css

@@ -103,6 +103,10 @@ h1 {
   cursor: pointer;
 }
 
+#go2Name [type="submit"]:hover {
+  background-color: oklch(52.7% 0.154 150.069)
+}
+
 #button, #button:hover {
   order: 2;
 }
@@ -149,7 +153,7 @@ body nav {
 }
 
 
-#wrapper {
+#wrapper, .pad-datalist {
   width: 100%;
   max-width: 28rem;
   background: #fff;
@@ -159,6 +163,26 @@ body nav {
   margin: 2rem auto auto;
 }
 
+.pad-datalist {
+  max-width: 56rem;
+}
+
+ul {
+  list-style-type: none;
+}
+
+.pad-datalist h2 {
+  border-bottom: 1px solid var(--muted-border);
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: #e5e7eb;
+  width: 100%;
+}
+
 .card-content {
   padding: 1.5rem;
 }

src/static/skins/colibris/index.js

@@ -34,7 +34,10 @@ window.customStart = () => {
       const li = document.createElement('li');
       li.className = 'recent-pad';
       const padPath = `${window.location.href}p/${pad.name}`;
-      li.innerHTML = `<a href="${padPath}">${pad}</a>`;
+      const link = document.createElement('a');
+      link.href = padPath;
+      link.innerText = pad;
+      li.appendChild(link);
       recentPadList.appendChild(li);
     });
   }

src/templates/index.html

@@ -169,7 +169,7 @@
         <% e.end_block(); %>
         </div>
         <div class="pad-datalist">
-          <h3 data-l10n-id="index.recentPads"></h3>
+          <h2 data-l10n-id="index.recentPads"></h2>
           <ul id="recent-pads">
           </ul>
         </div>