feat: style paypal checkout items, hide footer rss

partials/footer.hbs

@@ -32,9 +32,11 @@ This footer template is shared across all the pages.
           <span class="icon-twitter" aria-hidden="true"></span>
         </a>
       {{/if}}
-      <a href="{{@site.url}}/rss" aria-label="RSS">
+      {{!-- pyv --}}
+      {{!-- <a href="{{@site.url}}/rss" aria-label="RSS">
         <span class="icon-rss" aria-hidden="true"></span>
-      </a>
+      </a> --}}
+      {{!-- /pyv --}}
     </nav>
     <p class="m-footer-copyright">
       <span>{{@site.title}} &copy; {{date format="YYYY"}}</span>

src/sass/pyv.scss

@@ -139,15 +139,18 @@ body:not(.home-template) {
   }
   .m-nav__left .m-secondary-menu li {
     font-size: 1.125rem;
-  }
+    a {
-  .m-nav__left .m-secondary-menu li a {
+      padding: 0;
-    padding: 0;
+      &:hover {
+        background: none;
+      }
+    }
   }
   .m-nav__right {
     justify-content: flex-start;
-  }
+    .m-icon-button:first-child {
-  .m-nav__right .m-icon-button:first-child {
+      margin-left: -6px;
-    margin-left: -6px;
+    }
   }
 }
 
@@ -284,7 +287,62 @@ body:not(.home-template) {
   margin-left: 4px;
 }
 
+/* icons from https://lucide.dev */
+.icon-plus {
+  mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBsdXMiPjxwYXRoIGQ9Ik01IDEyaDE0Ii8+PHBhdGggZD0iTTEyIDV2MTQiLz48L3N2Zz4=);
+}
+.icon-minus {
+  mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1pbnVzIj48cGF0aCBkPSJNNSAxMmgxNCIvPjwvc3ZnPg==);
+}
+.icon-plus,
+.icon-minus {
+  width: 1em;
+  height: 1em;
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  display: inline-block;
+}
+
 /* payment buttons */
+.paypal-item {
+  align-items: center;
+  border-radius: 5px;
+  border: 1px solid rgb(124 139 154/25%);
+  display: flex;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  line-height: 1;
+  width: 100%;
+  margin-bottom: 25px;
+  .paypal-item-name {
+    padding: 13px 25px;
+  }
+  .paypal-item-remove {
+    margin-left: auto;
+  }
+  .paypal-item-add {
+    margin-left: 8px;
+    margin-right: 13px;
+  }
+  .paypal-item-remove,
+  .paypal-item-add {
+    width: 28px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    &[disabled],
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+  }
+}
+.paypal-checkout-btn {
+}
 .kg-button-card a .paypal-btn {
   height: 42px;
   width: 115.94px;
@@ -311,13 +369,11 @@ body:not(.home-template) {
   border-radius: 5px;
 }
 
-/* page cover sizing + readability */
+/* page cover sizing & readability (inc. uncropped post covers) */
 .m-hero-title.bigger,
 .m-hero-description.bigger {
   text-shadow: 1px 1px 1px black;
 }
-
-/* show full covers in posts (no cropping) */
 .post-template .m-hero.with-picture {
   padding: 0;
   min-height: initial;
@@ -327,7 +383,7 @@ body:not(.home-template) {
     position: static;
     height: max-content;
     img {
-      height: max-content;
+      height: auto;
       -o-object-fit: initial;
       object-fit: initial;
       @include respond-to("large") {