Merge pull request #510 from thegreenwebfoundation/hs-pre-mvp-launch-…

…changes

Hs pre mvp launch changes

apps/theme/templates/base_directory.html

@@ -16,25 +16,28 @@
 			<div class="container mx-auto px-2 sm:px-4">
 
 				{% block nav %}
-				<nav class="flex gap-8 justify-between items-center bg-white py-6">
+				<nav class="flex flex-wrap min-[520px]-flex-nowrap gap-x-8 gap-y-4 justify-between items-center bg-white py-4">
 					<div class="">
-						<a href="/">
+						<a href="https://www.thegreenwebfoundation.org/">
 							<img width="200px" height="48px" src="{% static 'img/TGWF-logo.svg' %}" alt="The Green Web Foundation logo"/>
 						</a>
 					</div>
 
 					{% block nav-menu %}
 					<div class="flex-grow border-l text-medium pl-8 h-12 flex items-center">
-						<p class="font-bold">Directory</p>
+							<p class="font-bold">
+								<a href="https://app.greenweb.org/directory/" class="no-underline">Directory</a>
+							</p>
 					</div>
 					{% endblock nav-menu %}
 
+					{% include "greencheck/partials/_directory_beta-msg.html" %}
 				</nav>
 				{% endblock nav %}
 
 			</div>
 		</header>
-		
+
 		<div class="relative">
 
 			<div class="container mx-auto pt-6 md:pt-8 px-2 sm:px-4">

apps/theme/templates/greencheck/partials/_directory_beta-msg.html

@@ -0,0 +1,8 @@
+<div class="flex items-center grow justify-end gap-2 text-right min-[520px]:block min-[520px]:grow-0 min-[520px]:text-center">
+
+	<p class="text-xs min-[520px]:mb-2">Be kind, we're still in</p>
+	<p class="uppercase py-2 px-5 border-2 border-black rounded-3xl text-sm font-bold">beta</p>
+	<p class="text-xs min-[520px]:mt-2"><a href="/">More info</a></p>
+
+</div>
+

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

@@ -5,17 +5,17 @@
 
 		<div class="prose ml-0 mr-auto"> 
 			<h2 class="text-2xl md:text-4xl md:text-black border-none mb-0">Found this Directory useful?</h3>
-			<p>Help speed up the transition towards a greener internet by supporting our work.</p>
+			<p>Here's how you can speed up the transition to a greener internet.</p>
 		</div>
 
 		<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--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
+
+			<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">Help sustain this work as an open source project in service to the public’s interest.</p>
+			<a class="btn btn-green btn-sm mt-4 lg:mt-6" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/donate/">
+				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>
+			</a>			
 
 			<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>
@@ -24,12 +24,13 @@ <h3 class="heading-icon__plant--black uppercase text-2xl md:text-med lg:text-2xl
 				<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--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 a small 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/">
-				How donating works
+			<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 cite us publicly, it helps more people discover this work and take action.</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>
+
 		</div>
 	</div>
 

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

@@ -50,7 +50,7 @@ <h4 class="text-green text-base uppercase font-normal mb-2">About</h4>
 		<div class="mb-8 md:mb-0 min-[450px]:w-full md:w-1/2 lg:w-1/3">
 			<div class="flex gap-8 items-center md:justify-end py-6 md:pt-0">
 				<div class="">
-					<a href="/">
+					<a href="https://www.thegreenwebfoundation.org/">
 						<img width="200px" height="48px" src="{% static 'img/GWF-logo-white.svg' %}" alt="The Green Web Foundation logo"/>
 					</a>
 				</div>

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

@@ -26,10 +26,10 @@
 			<h2 class="sticky z-10 top-0 mb-4 pt-4 text-2xl bg-white border-b-2 border-black">{{ country.grouper }} ({{ country.list|length }})</h2>
 
 			{% for obj in country.list %}
-				<article class="provider-listing lg:w-3/4 my-6 lg:mr-0 lg:ml-auto py-6 last-of-type:pb-2 border-b-2 border-neutral-200 last:border-0">
+				<article id="{{ obj.id }}" class="provider-listing lg:w-3/4 my-6 lg:mr-0 lg:ml-auto py-6 last-of-type:pb-2 border-b-2 border-neutral-200 last:border-0 scroll-mt-12">
 					<div class="prose mx-auto lg:ml-0 lg:mr-auto">
 
-						<h4 class="inline-block mb-0 font-bold text-xl" id="{{ obj.id }}">
+						<h4 class="inline-block mb-0 font-bold text-xl">
 							{% if obj.website %}						
 								<a class="no-underline" target="_blank" rel="noopener noreferrer" href="https://{{ obj.website|urlencode }}">	
 							{% endif %}