Merge pull request #506 from thegreenwebfoundation/hs/tweak-footer-ctas

Hs/tweak footer ctas

apps/theme/static_src/src/css/components.css

@@ -144,10 +144,19 @@
 	.heading-icon__sunburst--yellow::before {
 		@apply bg-sunburst-yellow;
 	}
+	.heading-icon__sunburst--black::before {
+		@apply bg-sunburst-black;
+	}
 	.heading-icon__plant--orange::before {
 		@apply bg-plant-orange;
 	}
+	.heading-icon__plant--black::before {
+		@apply bg-plant-black;
+	}
 	.heading-icon__lightning--purple::before {
 		@apply bg-lightning-purple;
 	}
+	.heading-icon__lightning--black::before {
+		@apply bg-lightning-black;
+	}
 }

apps/theme/static_src/tailwind.config.js

@@ -132,9 +132,11 @@ module.exports = {
 				'external-link': "url('../../img/icon-external-link.svg')",
 				'sunburst-green': "url('../../img/GWF-icon-sunburst--green.svg')",
 				'sunburst-yellow': "url('../../img/GWF-icon-sunburst--yellow.svg')",
+				'sunburst-black': "url('../../img/GWF-icon-sunburst--black.svg')",
 				'plant-orange': "url('../../img/GWF-icon-plant--orange.svg')",
+				'plant-black': "url('../../img/GWF-icon-plant--black.svg')",
 				'lightning-purple': "url('../../img/GWF-icon-lightning--purple.svg')",
-
+				'lightning-black': "url('../../img/GWF-icon-lightning--black.svg')",
 			},
         },
     },

apps/theme/templates/greencheck/partials/_directory_ctas.html

@@ -10,27 +10,26 @@ <h2 class="text-2xl md:text-4xl md:text-black border-none mb-0">Found this Direc
 
 		<div class="md:max-w-[65ch] lg:max-w-none mx-auto mt-10 xl:mt-16 mb-6 md:grid md:grid-flow-col md:gap-x-12 lg:gap-x-16 xl:gap-x-20 2xl:gap-x-24 md:gap-y-0 md:grid-cols-3 md:auto-rows-auto md:items-start" style="grid-template-rows: repeat(3, auto);">
 
-			<h3 class="heading-icon__sunburst--green uppercase text-2xl md:text-med lg:text-2xl font-normal">Spread<br/> the word</h3>
+			<h3 class="heading-icon__sunburst--black uppercase text-2xl md:text-med lg:text-2xl font-normal">Spread<br/> the word</h3>
 			<p class="mt-3 lg:mt-4 pt-4 lg:pt-6 border-t-2">When you use our open source work and cite us publically it helps us show our impact to funders.</p>
 			<a class="btn btn-white btn-sm mt-4 lg:mt-6 mb-16 md:mb-0" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/how-to-cite-our-work/">
 				How to cite our work
 				<img class="utility-icon external-link-icon" width="16px" height="16px" src="{% static 'img/icon-external-link.svg' %}" alt="Visit {{ obj.name }}'s website"/>
 			</a>
 
-			<h3 class="heading-icon__plant--orange uppercase text-2xl md:text-med lg:text-2xl font-normal">Share your<br/> suggestions</h3>
+			<h3 class="heading-icon__plant--black uppercase text-2xl md:text-med lg:text-2xl font-normal">Share your<br/> suggestions</h3>
 			<p class="mt-3 lg:mt-4 pt-4 lg:pt-6 border-t-2">We welcome your feedback and perspectives on how to make this Directory better.</p>
 			<a class="btn btn-black text-white btn-sm mt-4 lg:mt-6 mb-16 md:mb-0" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/support-form/">
 				Send us a message
 				<img class="utility-icon external-link-icon" width="16px" height="16px" src="{% static 'img/icon-external-link-white.svg' %}" alt="Visit {{ obj.name }}'s website"/>
 			</a>
 
-			<h3 class="heading-icon__lightning--purple uppercase text-2xl md:text-med lg:text-2xl font-normal">Support<br/> the mission</h3>
+			<h3 class="heading-icon__lightning--black uppercase text-2xl md:text-med lg:text-2xl font-normal">Support<br/> the mission</h3>
 			<p class="mt-3 lg:mt-4 pt-4 lg:pt-6 border-t-2">We are non-profit working for the public benefit, with more funding we can have more impact.</p>
 			<a class="btn btn-green btn-sm mt-4 lg:mt-6" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/donate/">
-				Support us financially
+				How donating works
 				<img class="utility-icon external-link-icon" width="16px" height="16px" src="{% static 'img/icon-external-link.svg' %}" alt="Visit {{ obj.name }}'s website"/>
 			</a>
-
 		</div>
 	</div>