33 / Pay annual subscription by PayPal (#68)

* Refactors paypal-buttons -> paypal-product-buttons WebComponent

* Pulls out address to data file

* Defines annual subscription prices data hash

* Styles paypal-product-buttons

* Styles <address>

* Details have cursor:pointer on the summary

* Moves Jyne section to separate page

* Rewrites payment options using details components

* Reworks translation typing

* Defines MembershipType enum

* Adds translations for MembershipType enum

* Can pay annual subs by PayPal

* Styles tables better

8 files changed, 51 insertions, 1 deletions

diff --git a/scss/base/_address.scss b/scss/base/_address.scss
new file mode 100644
index 0000000..0206b83
--- /dev/null
+++ b/scss/base/_address.scss
@@ -0,0 +1,5 @@
+address {
+  margin-block: var(--spacing-block-md);
+  font-style: normal;
+  margin-inline-start: var(--spacing-inline-lg);
+}
diff --git a/scss/base/_details.scss b/scss/base/_details.scss
new file mode 100644
index 0000000..6d0b1d4
--- /dev/null
+++ b/scss/base/_details.scss
@@ -0,0 +1,4 @@
+details summary {
+  cursor: pointer;
+}
+
diff --git a/scss/base/_index.scss b/scss/base/_index.scss
index f338772..527b4c7 100644
--- a/scss/base/_index.scss
+++ b/scss/base/_index.scss
@@ -1,4 +1,9 @@
+@use 'address';
+@use 'details';
 @use 'dl';
 @use 'list';
+@use 'paypal-product-buttons';
+@use 'table';
 @use 'theme';
 @use 'typography';
+
diff --git a/scss/base/_paypal-product-buttons.scss b/scss/base/_paypal-product-buttons.scss
new file mode 100644
index 0000000..7339ede
--- /dev/null
+++ b/scss/base/_paypal-product-buttons.scss
@@ -0,0 +1,4 @@
+paypal-product-buttons div {
+  margin-block-start: var(--spacing-block-md);
+}
+
diff --git a/scss/base/_table.scss b/scss/base/_table.scss
new file mode 100644
index 0000000..ca4f957
--- /dev/null
+++ b/scss/base/_table.scss
@@ -0,0 +1,23 @@
+table {
+  border-collapse: collapse;
+  background-color: var(--background-color); // side-scrolling may be needed on narrow screens
+
+  caption {
+    font-style: italic;
+    font-size: var(--font-size-0);
+  }
+}
+
+thead, th {
+  border-block-end: var(--border-width) solid var(--text-color);
+}
+
+:is(th, td) {
+  padding-inline: var(--spacing-inline-sm);
+  padding-block: var(--spacing-block-sm);
+
+  + :is(th, td) {
+    border-inline-start: calc(var(--border-width) / 2) solid var(--text-color);
+  }
+}
+
diff --git a/scss/modules/_index.scss b/scss/modules/_index.scss
index 6e67241..822295f 100644
--- a/scss/modules/_index.scss
+++ b/scss/modules/_index.scss
@@ -5,6 +5,7 @@
 @use 'link-gallery' as *;
 @use 'nav' as *;
 @use 'news-index' as *;
+@use 'payment-methods-list' as *;
 @use 'product' as *;
 @use 'schedule' as *;
 @use 'skip-to-content' as *;
diff --git a/scss/modules/_payment-methods-list.scss b/scss/modules/_payment-methods-list.scss
new file mode 100644
index 0000000..a59831a
--- /dev/null
+++ b/scss/modules/_payment-methods-list.scss
@@ -0,0 +1,8 @@
+.payment-methods-list {
+  list-style: none;
+
+  details[open] :last-child {
+    margin-block-end: var(--spacing-block-sm);
+  }
+}
+
diff --git a/scss/values/spacing/_constants.scss b/scss/values/spacing/_constants.scss
index 9a990b8..c89fdc8 100644
--- a/scss/values/spacing/_constants.scss
+++ b/scss/values/spacing/_constants.scss
@@ -42,7 +42,7 @@ $grid-padding-er: (
 );
 
 $spacing-factor: (
-  'inline': (lg: 4, md: 2, sm: 1),
+  'inline': (lg: 12, md: 6, sm: 3),
   'block': (lg: 16, md: 10, sm: 5)
 );