Format and style user donations

2020-12-19 13:16:04 +01:00
parent 40f3e8327a
commit 2f70bae523
4 changed files with 88 additions and 27 deletions
--- a/app/assets/stylesheets/donations.scss
+++ b/app/assets/stylesheets/donations.scss
@@ -0,0 +1,40 @@
+ul.donations {
+  list-style: none;
+
+  li {
+    margin-bottom: 2rem;
+    display: grid;
+    grid-row-gap: 0.5rem;
+    grid-column-gap: 2rem;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "date amount-btc"
+      "public-name amounts-fiat";
+
+    h3 {
+      grid-area: "date";
+      margin-bottom: 0;
+    }
+
+    p {
+      margin-bottom: 0;
+
+      &.amount-btc {
+        grid-area: amount-btc;
+        text-align: right;
+        font-family: monospace;
+        font-size: 1.25rem;
+      }
+      &.amounts-fiat {
+        grid-area: amounts-fiat;
+        text-align: right;
+        font-family: monospace;
+        font-size: 0.85rem;
+        color: #888;
+      }
+      &.public-name {
+        grid-area: public-name;
+      }
+    }
+  }
+}