opdavies/presentations
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Task 8 - Add responsive tweaks

Browse source 
Add a mobile navigation button, change text sizes, change the layout of
the sponsors block.
This commit is contained in:
Oliver Davies 2021-02-18 02:07:47 +00:00
parent 5f6f7bdb4a
commit 204a5f931b
3 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

14
templates/includes/navbar.html.twig
View file

@ -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',