fix: Navbar styles leaking to comments header, use real icons for verified badge

sass/_comments.scss

@@ -1,3 +1,20 @@
+.avatar-link.op::after,
+.instance.op::before,
+.reblogs::before,
+.favourites::before {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-family: "bootstrap-icons" !important;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal !important;
+  line-height: 1;
+  margin-inline-end: 0.25rem;
+  text-transform: none;
+  vertical-align: -0.125em;
+}
+
 section#comments {
   .comment {
     display: grid;
@@ -45,16 +62,11 @@ section#comments {
         border-radius: 50%;
         bottom: -0.25rem;
         color: var(--light2);
-        content: "✓";
+        display: flex;
-        display: block;
-        font-size: 1.25rem;
-        font-weight: bold;
-        height: 1.5rem;
-        line-height: 1.5rem;
         position: absolute;
         right: -0.25rem;
-        text-align: center;
+        padding: 0.25rem;
-        width: 1.5rem;
+        content: "\F4B5";
       }
     }
 
@@ -73,6 +85,7 @@ section#comments {
         font-size: 0.8rem;
         font-weight: 600;
         padding: 0.25rem 0.75rem;
+        text-decoration: none;
         transition: var(--transition);
 
         &:hover {
@@ -85,8 +98,8 @@ section#comments {
           color: var(--light2);
 
           &::before {
-            content: "✓";
+            content: "\F4B5";
-            font-weight: 600;
+            display: inline-block;
             margin-inline-end: 0.25rem;
             margin-inline-start: -0.25rem;
           }
@@ -122,7 +135,7 @@ section#comments {
       color: inherit;
       grid-area: card;
       max-width: 400px;
-      text-decoration: none; 
+      text-decoration: none;
 
       &:hover {
         text-decoration: none;
@@ -208,21 +221,6 @@ section#comments {
         &:active {
           transform: scale(var(--active));
         }
-
-        &::before {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          display: inline-block;
-          font-family: "bootstrap-icons" !important;
-          font-style: normal;
-          font-variant: normal;
-          font-weight: normal !important;
-          line-height: 1;
-          margin-inline-end: 0.25rem;
-          text-transform: none;
-          vertical-align: -0.125em;
-          transform: scale(1);
-        }
       }
 
       .reblogs {

sass/_nav.scss

@@ -1,4 +1,4 @@
-header {
+#header {
   -webkit-backdrop-filter: blur(24px);
   backdrop-filter: blur(24px);
   background-color: var(--nav-bg);

templates/includes/nav.html

@@ -1,4 +1,4 @@
-<header>
+<header id="header">
   <nav>
     <a href="{{ get_url(path='') }}">
       {% if config.extra.nav.icons %}