From 204a5f931b158aed7a7f491b08531022a0f5eb81 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 18 Feb 2021 02:07:47 +0000
Subject: [PATCH] Task 8 - Add responsive tweaks

Add a mobile navigation button, change text sizes, change the layout of
the sponsors block.
---
 templates/includes/home/intro-text.html.twig |  4 ++--
 templates/includes/navbar.html.twig          | 14 ++++++++++----
 templates/includes/sponsor-list.html.twig    | 16 ++++++++--------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/templates/includes/home/intro-text.html.twig b/templates/includes/home/intro-text.html.twig
index 4186a69..941e507 100644
--- a/templates/includes/home/intro-text.html.twig
+++ b/templates/includes/home/intro-text.html.twig
@@ -1,5 +1,5 @@
 <div class="max-w-3xl px-4 py-8 mx-auto text-center">
-    <p class="text-3xl leading-loose text-blue-dark">Florida DrupalCamp is an annual conference that brings together web developers from all over the world to learn, network and discuss web development and the Drupal content management system.</p>
+    <p class="text-xl leading-loose lg:text-3xl text-blue-dark">Florida DrupalCamp is an annual conference that brings together web developers from all over the world to learn, network and discuss web development and the Drupal content management system.</p>
 
-    <a class="inline-block px-5 py-4 mt-8 text-3xl transition-colors duration-200 ease-in-out border-2 text-blue-dark border-blue-dark hover:bg-blue-dark focus:bg-blue-dark hover:text-white focus:text-white" href="#0">Learn more</a>
+    <a class="inline-block px-4 py-3 mt-8 text-xl transition-colors duration-200 ease-in-out border-2 lg:px-5 lg:py-4 lg:text-3xl text-blue-dark border-blue-dark hover:bg-blue-dark focus:bg-blue-dark hover:text-white focus:text-white" href="#0">Learn more</a>
 </div>
diff --git a/templates/includes/navbar.html.twig b/templates/includes/navbar.html.twig
index cedb328..2031dff 100644
--- a/templates/includes/navbar.html.twig
+++ b/templates/includes/navbar.html.twig
@@ -1,12 +1,18 @@
 <div class="sticky top-0 z-30 px-4 mx-auto bg-white max-w-screen-2xl">
-    <div class="grid grid-cols-2 gap-4">
+    <div class="grid h-full grid-cols-2 gap-4">
         <div>
             <a class="absolute" href="#0">
-                <img class="relative z-20" src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/header-logo-general.svg">
+                <img class="relative z-20 w-auto h-20 md:h-24" src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/header-logo-general.svg">
             </a>
         </div>
-        <div>
-            <ul class="flex justify-end h-full">
+        <div class="flex items-center justify-end h-full">
+            <button class="my-4 lg:hidden" type="button" aria-label="Toggle menu">
+                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                </svg>
+            </button>
+
+            <ul class="justify-end hidden h-full md:flex">
                 {% for menu_item in menu_items.findAll() %}
                     {% set linkClasses = [
                         'block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark',
diff --git a/templates/includes/sponsor-list.html.twig b/templates/includes/sponsor-list.html.twig
index 8bf6610..1303db5 100644
--- a/templates/includes/sponsor-list.html.twig
+++ b/templates/includes/sponsor-list.html.twig
@@ -13,14 +13,14 @@
     <div class="mt-6">
         <ul class="flex flex-wrap justify-center mx-auto -mt-2 -ml-2">
             {% for sponsor in sponsors.findByType(type) %}
-                <li class="mt-2 ml-2">
-                    <a class="flex flex-col items-center justify-center w-64 h-48 p-4 bg-gray-light" href="#0">
-                        <span class="flex items-center h-full">
-                            <img class="block w-4/5 max-h-full mx-auto" src="{{ sponsor.logo_url }}" alt="">
-                        </span>
-                        <p class="sr-only">{{ sponsor.name }}</p>
-                    </a>
-                </li>
+            <li class="w-full mt-2 ml-2 sm:w-auto">
+                <a class="flex flex-col items-center justify-center p-4 sm:w-64 sm:h-48 sm:bg-gray-light" href="#0">
+                    <span class="flex items-center h-full">
+                        <img class="block w-4/5 max-h-full mx-auto" src="{{ sponsor.logo_url }}" alt="">
+                    </span>
+                    <p class="sr-only">{{ sponsor.name }}</p>
+                </a>
+            </li>
             {% endfor %}
         </ul>
     </div>