Website: Homepage carousel fixes (#11151)

+ changed up logo images that didn't have a transparent background
(white bg was visible on the off-white cards)
+ made it so the top border shows up on the tweet cards
+ made the carousel indicators a bit smaller (but kept clickable area
the same) — looked a little bulky on mobile when we have more dots

---------

Co-authored-by: Eric <eashaw@sailsjs.com>

website/assets/styles/pages/homepage.less

@@ -305,7 +305,7 @@
   [purpose='scrollable-tweets'] {
     font-size: 13px;
     line-height: 20px;
-    margin-top: 80px;
+    margin-top: 79px;
     margin-bottom: 80px;
 
     [purpose='tweets']::-webkit-scrollbar {
@@ -318,6 +318,7 @@
       padding-left: 120px;
       padding-right: 120px;
       padding-bottom: 16px;
+      padding-top: 1px; //« makes the top of the card border visible
       scrollbar-width: none;
       -ms-overflow-style: none;
     }
@@ -334,23 +335,31 @@
       text-align: left;
       padding: 40px;
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
-      border: 2px solid #FFFFFF;
-      box-shadow: 0px 0px 1px 1px #E2E4EA;
+      border: none;
+      box-shadow: 0px 0px 1px 1px #E2E4EA, inset 0px 0px 0px 2px #FFFFFF;
       border-radius: 16px;
     }
     [purpose='tweets-page-indicator'] {
       margin-bottom: 40px;
       cursor: pointer;
       li {
-        padding: 4px;
+        padding: 2px;
         height: 16px;
         width: 16px;
         border-radius: 100%;
         margin-right: 8px;
-        background-color: @core-vibrant-blue-15;
+        [purpose='page-item-dot'] {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          background-color: @core-vibrant-blue-15;
+        }
       }
       li.selected {
-        background-color: @core-fleet-black-50;
+        [purpose='page-item-dot'] {
+          background-color: @core-fleet-black-50;
+        }
       }
     }
   }
@@ -592,7 +601,10 @@
       }
       [purpose='tweets-page-indicator'] {
         li {
-          padding: 12px;
+          width: 24px;
+          height: 24px;
+          padding: 6px;
+          margin-right: 0;
         }
       }
     }

website/views/pages/homepage.ejs

@@ -206,7 +206,7 @@
       <div purpose="" class="mx-auto d-flex flex-row justify-content-center">
         <nav aria-label="..." >
           <ul purpose="tweets-page-indicator" class="pagination pagination-sm" v-if="numberOfTweetPages > 1">
-            <li class="page-item" :class="[currentTweetPage === index ? 'selected' : '']" v-for="(pageNumber, index) in numberOfTweetPages" @click="scrollTweetsDivToPage(index)"></li>
+            <li class="page-item" :class="[currentTweetPage === index ? 'selected' : '']" v-for="(pageNumber, index) in numberOfTweetPages" @click="scrollTweetsDivToPage(index)"><span purpose="page-item-dot"></span></li>
           </ul>
         </nav>
       </div>