[~vladh pointed out][1] that the pricing table added in 4ea3c80a didn't
display well in narrow viewports, so I took it upon myself to try to
make the design work better for narrow viewports, as well as make it
easier to scan visually by adjusting the alignment and size of the text.

[1]: https://lists.sr.ht/~sircmpwn/sr.ht-discuss/%3C0051be59-c0c5-4984-b853-238db2818158%40anche.no%3E#%3Cdb1b1471-6e2e-4752-a490-dbb9832d725d@app.fastmail.com%3E

Noelle Leigh (4):
  pricing: two-column layout
  pricing: reorder services to be easier to scan
  css: Move pricing table styles to CSS class
  css: Customize .pricing-table

 assets/main.scss     | 28 +++++++++++++++++++++++++++-
 content/pricing.html | 38 +++++++++++++++++++++-----------------
 2 files changed, 48 insertions(+), 18 deletions(-)

--
2.39.2

---
 content/pricing.html | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/content/pricing.html b/content/pricing.html
index f2e70a7..f214250 100644
--- a/content/pricing.html
+++ b/content/pricing.html
@@ -141,38 +141,42 @@ require payment to use.
     <tr>
       <th>Service</th>
       <th>Payment</th>
-      <th>Service</th>
-      <th>Payment</th>
-      <th>Service</th>
-      <th>Payment</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>git.sr.ht</td>
       <td>Optional</td>
-
+    </tr>
+    <tr>
       <td>hg.sr.ht</td>
       <td>Optional</td>
-
+    </tr>
+    <tr>
       <td>builds.sr.ht</td>
       <td>Required</td>
     </tr>
-
     <tr>
       <td>Project hub</td>
       <td>Optional</td>
+    </tr>
+    <tr>
       <td>todo.sr.ht</td>
       <td>Optional</td>
+    </tr>
+    <tr>
       <td>lists.sr.ht</td>
       <td>Optional</td>
     </tr>
-
     <tr>
       <td>SourceHut pages</td>
       <td>Optional</td>
+    </tr>
+    <tr>
       <td>chat.sr.ht</td>
       <td>Required</td>
+    </tr>
+    <tr>
       <td>paste.sr.ht</td>
       <td>Optional</td>
     </tr>
-- 
2.39.2

Move paid services to the top, sort by line lengths
---
 content/pricing.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/pricing.html b/content/pricing.html
index f214250..78afafa 100644
--- a/content/pricing.html
+++ b/content/pricing.html
@@ -145,19 +145,19 @@ require payment to use.
   </thead>
   <tbody>
     <tr>
-      <td>git.sr.ht</td>
-      <td>Optional</td>
+      <td>builds.sr.ht</td>
+      <td>Required</td>
     </tr>
     <tr>
-      <td>hg.sr.ht</td>
-      <td>Optional</td>
+      <td>chat.sr.ht</td>
+      <td>Required</td>
     </tr>
     <tr>
-      <td>builds.sr.ht</td>
-      <td>Required</td>
+      <td>git.sr.ht</td>
+      <td>Optional</td>
     </tr>
     <tr>
-      <td>Project hub</td>
+      <td>hg.sr.ht</td>
       <td>Optional</td>
     </tr>
     <tr>
@@ -169,15 +169,15 @@ require payment to use.
       <td>Optional</td>
     </tr>
     <tr>
-      <td>SourceHut pages</td>
+      <td>paste.sr.ht</td>
       <td>Optional</td>
     </tr>
     <tr>
-      <td>chat.sr.ht</td>
-      <td>Required</td>
+      <td>Project hub</td>
+      <td>Optional</td>
     </tr>
     <tr>
-      <td>paste.sr.ht</td>
+      <td>SourceHut pages</td>
       <td>Optional</td>
     </tr>
   </tbody>
-- 
2.39.2

Also add payment-required classes
---
 assets/main.scss     | 6 +++++-
 content/pricing.html | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index b997f6b..825fd4a 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -172,7 +172,7 @@ nav {
 .icon {
   display: inline-block;
   line-height: .75em;
-  
+
   path {
     fill: currentColor;
   }
@@ -612,3 +612,7 @@ table td {
 	padding: .5em;
 	border: 1px solid lightgrey;
 }
+
+.pricing-table {
+  width: 100%;
+}
diff --git a/content/pricing.html b/content/pricing.html
index 78afafa..9ae454f 100644
--- a/content/pricing.html
+++ b/content/pricing.html
@@ -136,7 +136,7 @@ Payment is optional for most most features during the alpha, but some services
 require payment to use.
 </p>
 
-<table style="width: 100%">
+<table class="pricing-table">
   <thead>
     <tr>
       <th>Service</th>
@@ -146,11 +146,11 @@ require payment to use.
   <tbody>
     <tr>
       <td>builds.sr.ht</td>
-      <td>Required</td>
+      <td><span class="payment-required">Required</span></td>
     </tr>
     <tr>
       <td>chat.sr.ht</td>
-      <td>Required</td>
+      <td><span class="payment-required">Required</span></td>
     </tr>
     <tr>
       <td>git.sr.ht</td>
-- 
2.39.2

Intended to make the table more scannable by:
- Limiting max table width
- Right-aligning the services
- Tweaking font width
---
 assets/main.scss | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/assets/main.scss b/assets/main.scss
index 825fd4a..6c7d8df 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -615,4 +615,26 @@ table td {
 
 .pricing-table {
   width: 100%;
+  max-width: 20rem;
+
+  // Right-align first column
+  > thead > tr > th:first-child,
+  > tbody > tr > td:first-child {
+    text-align: right;
+  }
+
+  // Increase table headers to be larger than first column
+  > thead > tr > th {
+    font-size: 1.2rem;
+  }
+
+  // Distinguish services from prices by making them a bit larger
+  > tbody > tr > td:first-child {
+    font-size: 1.1rem;
+  }
+
+  // Emphasize services which require payment
+  .payment-required {
+    font-weight: bold;
+  }
 }
-- 
2.39.2

Thanks!

To git@git.sr.ht:~sircmpwn/sourcehut.org
   5164d19..2bca1e9  master -> master