Improve verified checkmark icon, css improvements

public/css/fontello.css

@@ -1,53 +1,138 @@
 @font-face {
-  font-family: 'fontello';
-  src: url('/fonts/fontello.eot?61663884');
-  src: url('/fonts/fontello.eot?61663884#iefix') format('embedded-opentype'),
-       url('/fonts/fontello.woff2?61663884') format('woff2'),
-       url('/fonts/fontello.woff?61663884') format('woff'),
-       url('/fonts/fontello.ttf?61663884') format('truetype'),
-       url('/fonts/fontello.svg?61663884#fontello') format('svg');
+  font-family: "fontello";
+  src: url("/fonts/fontello.eot?77185648");
+  src:
+    url("/fonts/fontello.eot?77185648#iefix") format("embedded-opentype"),
+    url("/fonts/fontello.woff2?77185648") format("woff2"),
+    url("/fonts/fontello.woff?77185648") format("woff"),
+    url("/fonts/fontello.ttf?77185648") format("truetype"),
+    url("/fonts/fontello.svg?77185648#fontello") format("svg");
   font-weight: normal;
   font-style: normal;
 }
-[class^="icon-"]:before, [class*=" icon-"]:before {
+
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
   speak: never;
- 
+
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
+  margin-right: 0.2em;
   text-align: center;
 
   /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
- 
+
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
- 
+
   /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-views:before { content: '\e800'; } /* '' */
-.icon-heart:before { content: '\e801'; } /* '' */
-.icon-quote:before { content: '\e802'; } /* '' */
-.icon-comment:before { content: '\e803'; } /* '' */
-.icon-ok:before { content: '\e804'; } /* '' */
-.icon-play:before { content: '\e805'; } /* '' */
-.icon-link:before { content: '\e806'; } /* '' */
-.icon-calendar:before { content: '\e807'; } /* '' */
-.icon-location:before { content: '\e808'; } /* '' */
-.icon-picture:before { content: '\e809'; } /* '' */
-.icon-lock:before { content: '\e80a'; } /* '' */
-.icon-down:before { content: '\e80b'; } /* '' */
-.icon-retweet:before { content: '\e80c'; } /* '' */
-.icon-search:before { content: '\e80d'; } /* '' */
-.icon-pin:before { content: '\e80e'; } /* '' */
-.icon-cog:before { content: '\e80f'; } /* '' */
-.icon-rss:before { content: '\e810'; } /* '' */
-.icon-info:before { content: '\f128'; } /* '' */
-.icon-bird:before { content: '\f309'; } /* '' */
+.icon-views:before {
+  content: "\e800";
+}
+
+/* '' */
+.icon-heart:before {
+  content: "\e801";
+}
+
+/* '' */
+.icon-quote:before {
+  content: "\e802";
+}
+
+/* '' */
+.icon-comment:before {
+  content: "\e803";
+}
+
+/* '' */
+.icon-play:before {
+  content: "\e805";
+}
+
+/* '' */
+.icon-link:before {
+  content: "\e806";
+}
+
+/* '' */
+.icon-calendar:before {
+  content: "\e807";
+}
+
+/* '' */
+.icon-location:before {
+  content: "\e808";
+}
+
+/* '' */
+.icon-picture:before {
+  content: "\e809";
+}
+
+/* '' */
+.icon-lock:before {
+  content: "\e80a";
+}
+
+/* '' */
+.icon-down:before {
+  content: "\e80b";
+}
+
+/* '' */
+.icon-retweet:before {
+  content: "\e80c";
+}
+
+/* '' */
+.icon-search:before {
+  content: "\e80d";
+}
+
+/* '' */
+.icon-pin:before {
+  content: "\e80e";
+}
+
+/* '' */
+.icon-cog:before {
+  content: "\e80f";
+}
+
+/* '' */
+.icon-rss:before {
+  content: "\e810";
+}
+
+/* '' */
+.icon-ok:before {
+  content: "\e811";
+}
+
+/* '' */
+.icon-circle:before {
+  content: "\f111";
+}
+
+/* '' */
+.icon-info:before {
+  content: "\f128";
+}
+
+/* '' */
+.icon-bird:before {
+  content: "\f309";
+}
+
+/* '' */

public/fonts/fontello.svg

@@ -14,8 +14,6 @@
 
 <glyph glyph-name="comment" unicode="&#xe803;" d="M1000 350q0-97-67-179t-182-130-251-48q-39 0-81 4-110-97-257-135-27-8-63-12-10-1-17 5t-10 16v1q-2 2 0 6t1 6 2 5l4 5t4 5 4 5q4 5 17 19t20 22 17 22 18 28 15 33 15 42q-88 50-138 123t-51 157q0 73 40 139t106 114 160 76 194 28q136 0 251-48t182-130 67-179z" horiz-adv-x="1000" />
 
-<glyph glyph-name="ok" unicode="&#xe804;" d="M0 260l162 162 166-164 508 510 164-164-510-510-162-162-162 164z" horiz-adv-x="1000" />
-
 <glyph glyph-name="play" unicode="&#xe805;" d="M772 333l-741-412q-13-7-22-2t-9 20v822q0 14 9 20t22-2l741-412q13-7 13-17t-13-17z" horiz-adv-x="785.7" />
 
 <glyph glyph-name="link" unicode="&#xe806;" d="M294 116q14 14 34 14t36-14q32-34 0-70l-42-40q-56-56-132-56-78 0-134 56t-56 132q0 78 56 134l148 148q70 68 144 77t128-43q16-16 16-36t-16-36q-36-32-70 0-50 48-132-34l-148-146q-26-26-26-64t26-62q26-26 63-26t63 26z m450 574q56-56 56-132 0-78-56-134l-158-158q-74-72-150-72-62 0-112 50-14 14-14 34t14 36q14 14 35 14t35-14q50-48 122 24l158 156q28 28 28 64 0 38-28 62-24 26-56 31t-60-21l-50-50q-16-14-36-14t-34 14q-34 34 0 70l50 50q54 54 127 51t129-61z" horiz-adv-x="800" />
@@ -40,6 +38,10 @@
 
 <glyph glyph-name="rss" unicode="&#xe810;" d="M184 93c0-51-43-91-93-91s-91 40-91 91c0 50 41 91 91 91s93-41 93-91z m261-85l-125 0c0 174-140 323-315 323l0 118c231 0 440-163 440-441z m259 0l-136 0c0 300-262 561-563 561l0 129c370 0 699-281 699-690z" horiz-adv-x="704" />
 
+<glyph glyph-name="ok" unicode="&#xe811;" d="M933 534q0-22-16-38l-404-404-76-76q-16-15-38-15t-38 15l-76 76-202 202q-15 16-15 38t15 38l76 76q16 16 38 16t38-16l164-165 366 367q16 16 38 16t38-16l76-76q16-15 16-38z" horiz-adv-x="1000" />
+
+<glyph glyph-name="circle" unicode="&#xf111;" d="M857 350q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="info" unicode="&#xf128;" d="M393 149v-134q0-9-7-15t-15-7h-134q-9 0-16 7t-7 15v134q0 9 7 16t16 6h134q9 0 15-6t7-16z m176 335q0-30-8-56t-20-43-31-33-32-25-34-19q-23-13-38-37t-15-37q0-10-7-18t-16-9h-134q-8 0-14 11t-6 20v26q0 46 37 87t79 60q33 16 47 32t14 42q0 24-26 41t-60 18q-36 0-60-16-20-14-60-64-7-9-17-9-7 0-14 4l-91 70q-8 6-9 14t3 16q89 148 259 148 45 0 90-17t81-46 59-72 23-88z" horiz-adv-x="571.4" />
 
 <glyph glyph-name="bird" unicode="&#xf309;" d="M920 636q-36-54-94-98l0-24q0-130-60-250t-186-203-290-83q-160 0-290 84 14-2 46-2 132 0 234 80-62 2-110 38t-66 94q10-4 34-4 26 0 50 6-66 14-108 66t-42 120l0 2q36-20 84-24-84 58-84 158 0 48 26 94 154-188 390-196-6 18-6 42 0 78 55 133t135 55q82 0 136-58 60 12 120 44-20-66-82-104 56 8 108 30z" horiz-adv-x="920" />

src/sass/general.scss

@@ -23,6 +23,7 @@
     font-weight: bold;
     width: 30px;
     height: 30px;
+    padding: 0px 5px 1px 8px;
   }
 
   input {

src/sass/index.scss

@@ -50,7 +50,7 @@ body {
 
   background-color: var(--bg_color);
   color: var(--fg_color);
-  font-family: $font_0, $font_1, $font_2, $font_3;
+  font-family: $font_0, $font_1;
   font-size: 15px;
   line-height: 1.3;
   margin: 0;
@@ -143,30 +143,50 @@ ul {
 }
 
 .verified-icon {
-  color: var(--icon_text);
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin: 2px 0 3px 3px;
-  padding-top: 3px;
-  height: 11px;
-  width: 14px;
-  font-size: 8px;
   display: inline-block;
-  text-align: center;
-  vertical-align: middle;
+  width: 14px;
+  height: 14px;
+  margin-left: 2px;
+
+  .verified-icon-circle {
+    position: absolute;
+    font-size: 15px;
+  }
+
+  .verified-icon-check {
+    position: absolute;
+    font-size: 9px;
+    margin: 5px 3px;
+  }
 
   &.blue {
-    background-color: var(--verified_blue);
+    .verified-icon-circle {
+      color: var(--verified_blue);
+    }
+
+    .verified-icon-check {
+      color: var(--icon_text);
+    }
   }
 
   &.business {
-    color: var(--bg_panel);
-    background-color: var(--verified_business);
+    .verified-icon-circle {
+      color: var(--verified_business);
+    }
+
+    .verified-icon-check {
+      color: var(--bg_panel);
+    }
   }
 
   &.government {
-    color: var(--bg_panel);
-    background-color: var(--verified_government);
+    .verified-icon-circle {
+      color: var(--verified_government);
+    }
+
+    .verified-icon-check {
+      color: var(--bg_panel);
+    }
   }
 }
 

src/sass/navbar.scss

@@ -59,13 +59,9 @@ nav {
     justify-content: flex-end;
   }
 
-  &.right a {
-    padding-left: 4px;
-
-    &:hover {
-      color: var(--accent_light);
-      text-decoration: unset;
-    }
+  &.right a:hover {
+    color: var(--accent_light);
+    text-decoration: unset;
   }
 }
 
@@ -81,10 +77,11 @@ nav {
   }
 }
 
-.icon-info:before {
+.icon-info {
   margin: 0 -3px;
 }
 
 .icon-cog {
   font-size: 15px;
+  padding-left: 0 !important;
 }

src/sass/search.scss

@@ -13,6 +13,7 @@
 
   button {
     margin: 0 2px 0 0;
+    padding: 0px 1px 1px 4px;
     height: 23px;
     display: flex;
     align-items: center;
@@ -35,7 +36,7 @@
     background-color: var(--bg_elements);
     color: var(--fg_color);
     border: 1px solid var(--accent_border);
-    padding: 1px 6px 2px 6px;
+    padding: 1px 1px 2px 4px;
     font-size: 14px;
     cursor: pointer;
     margin-bottom: 2px;
@@ -56,20 +57,17 @@
   font-weight: initial;
   text-align: left;
 
-  > div {
-    line-height: 1.7em;
-  }
-
   .checkbox-container {
     display: inline;
     padding-right: unset;
-    margin-bottom: unset;
+    margin-bottom: 5px;
     margin-left: 23px;
   }
 
   .checkbox {
     right: unset;
     left: -22px;
+    line-height: 1.6em;
   }
 
   .checkbox-container .checkbox:after {

src/sass/tweet/video.scss

@@ -2,7 +2,7 @@
 @import "_mixins";
 
 video {
-  max-height: 100%;
+  height: 100%;
   width: 100%;
 }
 
@@ -13,6 +13,7 @@ video {
 
 .gallery-video.card-container {
   flex-direction: column;
+  width: 100%;
 }
 
 .video-container {
@@ -20,9 +21,6 @@ video {
   min-width: 200px;
   max-height: 530px;
   margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 
   img {
     max-height: 100%;

src/views/general.nim

@@ -52,8 +52,8 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=21")
-    link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=3")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=22")
+    link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=4")
 
     if theme.len > 0:
       link(rel="stylesheet", type="text/css", href=(&"/css/themes/{theme}.css"))

src/views/renderutils.nim

@@ -26,7 +26,9 @@ proc icon*(icon: string; text=""; title=""; class=""; href=""): VNode =
 template verifiedIcon*(user: User): untyped {.dirty.} =
   if user.verifiedType != VerifiedType.none:
     let lower = ($user.verifiedType).toLowerAscii()
-    icon "ok", class=(&"verified-icon {lower}"), title=(&"Verified {lower} account")
+    buildHtml(tdiv(class=(&"verified-icon {lower}"))):
+      icon "circle", class="verified-icon-circle", title=(&"Verified {lower} account")
+      icon "ok", class="verified-icon-check", title=(&"Verified {lower} account")
   else:
     text ""