less hacky fix for spacing + new variable

css/poketube.css

@@ -73,6 +73,7 @@
   --ptd-margin-base: 4px;
   --ptd-avatar-size: 32px;
   --ptd-toolbar-height: 56px;
+  --ptd-button-spacing: 6px;
 
   /* margins */
   --ptd-margin-2x: 8px;
@@ -141,12 +142,9 @@ a.avatar {
   margin-right: -8px;
 }
 
-.video-info-buttons.pill > .engagement {
-  margin-right: 2px;
-}
-
-.video-info-buttons.pill > div:nth-child(2) > .new-button, .button-encryption {
-  margin-right: 2px;
+/* If the "Encryption duh" duplication bug is fixed, remove this rule. */
+.new-button.button-encryption + a[title="Encryption duh"] {
+  display: none;
 }
 
 .video > .info > .title {
@@ -300,7 +298,7 @@ a.avatar {
   grid-area: buttons;
   display: flex;
   flex-direction: row;
-  column-gap: 4px;
+  column-gap: var(--ptd-button-spacing);
   height: min-content;
   width: -moz-fit-content;
   width: fit-content;

css/watch.main.css

@@ -322,7 +322,7 @@ a.icon-button > img {
   color: var(--text-primary);
   justify-content: center;
   align-content: center;
-  column-gap: 4px;
+  column-gap: var(--ptd-button-spacing);
   text-decoration: none;
   height: 36px;
   line-height: 32px;

html/poketube.ejs

@@ -596,7 +596,7 @@ display: block;" autoplay controls
                                                     
  <% if (!video.Channel.Name.endsWith(' - Topic')) { %> 
     <% if (!video.Title.endsWith('Audio)')) { %>                         
-      <div class="new-button button-lite" style=";margin-left: -4px;">
+      <div class="new-button button-lite">
         <a title="Low Bandwidth? try PokeTube Lite!" style="color:var(--text-color);text-decoration: none" href="/lite?v=<%=video.id%>">
                                         <div class="pill-button">