Merge pull request 'Some minor UI improvements' (#25) from fr33zing/poketube:arctic-ui into main

Reviewed-on: https://codeberg.org/Ashley/poketube/pulls/25

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;
@@ -131,6 +132,21 @@ a {
   color: var(--text-link);
 }
 
+a.avatar {
+  height: 36px;
+  margin-left: 6px;
+  font-size: 0;
+}
+
+.video-chnl-info-pill > a:first-child {
+  margin-right: -8px;
+}
+
+/* If the "Encryption duh" duplication bug is fixed, remove this rule. */
+.new-button.button-encryption + a[title="Encryption duh"] {
+  display: none;
+}
+
 .video > .info > .title {
   font-family: var(--text-font-primary);
   width: 10em;
@@ -260,7 +276,7 @@ a {
   font-family: Inter;
   clear: both;
   margin-top: 1.1em;
-  padding: 4.5px;
+  padding: 5px 0;
   background: #0009;
   margin-right: -13px;
   width: fit-content;
@@ -282,7 +298,7 @@ a {
   grid-area: buttons;
   display: flex;
   flex-direction: row;
-  column-gap: 3px;
+  column-gap: var(--ptd-button-spacing);
   height: min-content;
   width: -moz-fit-content;
   width: fit-content;
@@ -557,6 +573,10 @@ a {
   display: block;
 }
 
+label[for="loggedout-dropdown"] {
+  cursor: pointer;
+}
+
 .new-button.engagement:hover {
   background-color: #0009;
 }

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/landing.ejs

@@ -213,6 +213,15 @@ font-stretch: ultra-expanded;
   font-weight: 1000;
 }
 
+.product-container {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: 11.5em;
+  padding-bottom: 2em;
+  overflow: hidden;
+}
+
 .btn-explore {
   padding: 20px;
   display: flex;
@@ -253,13 +262,13 @@ font-stretch: ultra-expanded;
   margin-block-end: 1em;
   margin-inline-start: 0;
   margin-inline-end: 0;
-  margin-top: 0;
+  margin-top: 1rem;
   margin-bottom: 1rem;
+  margin-left: 0.2rem;
  font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
 font-weight: 400;
  font-size: 16px;
 line-height: 24px;
-margin-top: 12px;
 z-index: 10; /* Was 2 */"
    }
       </style>
@@ -316,8 +325,8 @@ z-index: 10; /* Was 2 */"
         <a href="/discover" class="btn-explore">Discover Videos</a>
       </div>
     </div>
-    <div style="display: flex;justify-content: center;">
-           <img src="/css/product.svg" style="width: 25em;margin-top: 11.2em;transform: scale(1.3);margin-right: 1em;margin-bottom: 1em;">
+    <div class="product-container">
+           <img src="/css/product.svg" style="width: 25em;transform: scale(1.3);margin-right: 1em;margin-bottom: 1em;">
          </div>
      </div>
 

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">