Merge pull request #3 from openairmx/donationHEADmain

Update donation methods

1 files changed, 70 insertions, 0 deletions

diff --git a/_sass/main.scss b/_sass/main.scss
index ac8d238..d87ab71 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -104,6 +104,11 @@ body {
   padding-inline: 1.5rem;
 }
 
+.site-main h2 {
+  font-size: 1.125rem;
+  margin-block-end: 1rem;
+}
+
 .site-main p {
   margin-block-end: 1.5rem;
 }
@@ -142,6 +147,24 @@ body {
   color: var(--color-neutral-50);
 }
 
+.site-main hr {
+  margin-block: 2rem;
+  background-color: var(--color-neutral-900);
+  border: 0;
+  height: 1px;
+}
+
+.site-main blockquote {
+  margin-block-start: 0.75rem;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
+  font-size: 0.875rem;
+  color: var(--color-neutral-300);
+  background-color: var(--color-neutral-900);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
 .site-footer {
   grid-area: footer;
   padding-inline: 1.5rem;
@@ -183,3 +206,50 @@ body {
     align-items: center;
   }
 }
+
+.donation {
+  margin-block-end: 2rem;
+
+  @media (min-width: 48rem) {
+    width: 40%;
+    margin-inline-start: 2rem;
+    float: right;
+  }
+}
+
+.donation-details {
+  margin-top: 1rem;
+  background-color: var(--color-neutral-900);
+  border: 1px solid var(--color-neutral-800);
+  border-radius: 0.5rem;
+}
+
+.donation-summary {
+  display: flex;
+  align-items: center;
+  padding-block: 1rem;
+  padding-inline: 1rem;
+  gap: 0.5rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M4.22 6.222a.75.75 0 0 1 1.06 0L8 8.942l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
+  background-position: right 1rem top 50%;
+  background-repeat: no-repeat;
+  list-style: none;
+  cursor: pointer;
+}
+
+.donation-summary + p {
+  padding: 1rem;
+}
+
+.donation-details[open] .donation-summary {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M11.78 9.783a.75.75 0 0 1-1.06 0L8 7.063l-2.72 2.72a.75.75 0 1 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
+  border-bottom: 1px solid var(--color-neutral-800);
+}
+
+.donation-note {
+  margin-block-start: 1rem;
+  font-size: 0.875rem;
+  color: var(--color-neutral-600);
+}