diff --git a/_includes/donate-card.html b/_includes/donate-card.html index 2328273fa9..374f861de1 100644 --- a/_includes/donate-card.html +++ b/_includes/donate-card.html @@ -1,26 +1,8 @@
{% include donation/in-kind.html %} -
-
-
- -
    -
  1. - Please follow this link to the Code for America - donation - form -
  2. -
  3. - To make a donation please select Hack for LA under the brigades - listed. -
  4. -
-
- - +
+
+ + {% include donation/donate-gif-text.html %}
diff --git a/_includes/donation/donate-gif-text.html b/_includes/donation/donate-gif-text.html new file mode 100644 index 0000000000..f5c9964778 --- /dev/null +++ b/_includes/donation/donate-gif-text.html @@ -0,0 +1,21 @@ +
+
+

Hack for LA takes donations through Code for America.

+
    +
  1. + Please follow this link to the Code for America + donation form. +
  2. +
  3. + To make a donation please select Hack for LA under the brigades + listed. +
  4. +
+
+ + +
\ No newline at end of file diff --git a/_sass/components/_donate-components.scss b/_sass/components/_donate-components.scss index 135375a7c1..3fd4710373 100644 --- a/_sass/components/_donate-components.scss +++ b/_sass/components/_donate-components.scss @@ -12,7 +12,6 @@ .circle-full-container { display: flex; flex-direction: column; - padding: 1em 2em; justify-content: center; align-items: center; padding: 0; @@ -73,4 +72,93 @@ flex-direction: column; justify-content: center; align-items: center; +} + +.donation-gif { + box-shadow: 0px 2px 4px 0px #00000040; +} + +.donation-grid { + display: flex; + flex-direction: column; + align-items: center; + p { + margin-top: 20px; + margin-left: 20px; + } +} + +.donation-body { + p { + margin-left: -10px; + font-size: 18px; + } + + ol { + padding-left: 5px; + } + + li { + padding-bottom: 15px; + } +} + +.donation-footer { + margin-left: -10px; + font-style: italic; +} + +@media #{$bp-tablet-up} { + .donation-grid{ + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 50% 50%; + padding: 20px; + text-align: left; + align-items: flex-start; + font-size:18px; + + .donation-body { + grid-column: 1 / span 1; + grid-row: 1 / span 1; + + p { + margin-left: 0px; + } + + ol { + margin-bottom: 0px; + padding-left: 50px; + max-width: 360px; + line-height: 24px; + } + + li { + padding: 10px 10px 25px 0px; + font-size: 1.125rem; + } + } + + .donation-footer { + max-width: 3340px; + margin: 20px 0px 0px -10px; + padding: 0px 48px 0px 60px; + font-size: 15px; + } + + .donation-gif { + grid-column: 2 / span 1; + grid-row: 1 / span 2; + margin: auto; + width: 318px; + padding-bottom: 20px; + } + + p { + margin-top: 0px; + padding: 0 10px 0 30px; + grid-row: 2 / span 3; + grid-column: 1 / span 1; + } + } } \ No newline at end of file diff --git a/_sass/components/_donate.scss b/_sass/components/_donate.scss index 9acd018402..4207156072 100644 --- a/_sass/components/_donate.scss +++ b/_sass/components/_donate.scss @@ -1,6 +1,10 @@ /*-------- | Mobile ----------*/ +.donate-title { + text-align: center; + font-size: 1.5rem; +} .donate-wrapper { min-height: 100vh; @@ -12,16 +16,13 @@ align-items: center; padding: 4rem 1rem; height: fit-content; - .donate-banner-text { display: flex; flex-direction: column; align-items: center; - .title1 { padding-bottom: 28px; } - p { font-size: 18px; max-width: 300px; @@ -31,7 +32,8 @@ } @media #{$bp-mobile-up} { font-size: 16px; - text-align: left; + text-align: left; + padding-left: 0px; } } } @@ -39,71 +41,4 @@ .page-card--donate{ padding: 32px; - - .donate-title { - text-align: center; - } - .donation-gif { - box-shadow: 0px 2px 4px 0px #00000040; - } -} - -.donation-grid{ - display: flex; - flex-direction: column; - align-items: center; - - p { - margin-top: 20px; - } -} - - -@media #{$bp-tablet-up} { - .donation-grid{ - display: grid; - grid-template-columns: 50% 50%; - grid-template-rows: 50% 50%; - padding: 20px; - text-align: left; - align-items: flex-start; - - .donation-body { - grid-column: 1 / span 1; - grid-row: 1 / span 1; - margin-top: 15%; - padding: 0 32px 0 16px; - - h3 { - text-align: left; - } - - ol { - padding-left: 30px; - max-width: 480px; - line-height: 24px; - } - - li { - padding: 5px 0; - font-size: 1.125rem; - } - } - - .donation-gif { - grid-column: 2 / span 1; - grid-row: 1 / span 2; - margin: auto; - width: 318px; - padding-bottom: 20px; - } - - p { - margin-top: 10px; - padding: 0 32px 0 36px; - font-size: 15px; - grid-row: 2 / span 3; - grid-column: 1 / span 1; - } - } -} +} \ No newline at end of file