In beta message at the top

thegreenwebfoundation · Aug 30, 2023 · 4a71825 · 4a71825
1 parent 5c0d67c
commit 4a71825
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/apps/theme/templates/base_directory.html b/apps/theme/templates/base_directory.html
@@ -16,7 +16,7 @@
 			<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="https://www.thegreenwebfoundation.org/">
 							<img width="200px" height="48px" src="{% static 'img/TGWF-logo.svg' %}" alt="The Green Web Foundation logo"/>
@@ -31,12 +31,13 @@
 					</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">

diff --git a/apps/theme/templates/greencheck/partials/_directory_beta-msg.html b/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>
+