opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Responsive nav

Browse source
This commit is contained in:
Oliver Davies 2018-06-07 20:30:08 +01:00
parent c962a84415
commit 9a888d8efc
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
source/_partials/nav-item.html.twig
View file

@ -1,4 +1,4 @@
<a href="{{ href }}" class="block p-4 border-l-3 md:border-l-0 md:border-b-2 md:ml-4 md:mr-0 md:p-0 hover:no-underline {{ page.url matches '#' ~ pattern ~ '#' ? 'border-blue' : 'border-transparent hover:border-grey-light' }} {{ loop.first ? 'border-t border-grey-lighter md:border-t-0 md:border-transparent' }}">
<a href="{{ href }}" class="block p-4 border-l-3 sm:border-l-0 sm:border-b-2 sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline {{ page.url matches '#' ~ pattern ~ '#' ? 'border-blue' : 'border-transparent hover:border-grey-light' }} {{ loop.first ? 'border-t border-grey-lighter sm:border-t-0 sm:border-transparent' }}">
<span class="flex items-center h-full">
{{- title -}}
</span>

10
source/_partials/navbar.html.twig
View file

@ -1,21 +1,21 @@
<div class="navbar border-bottom border-b border-grey-light mb-6" role="banner">
<header class="md:container md:mx-auto px-4">
<div class="md:flex">
<div class="w-full md:w-1/3 lg:w-1/4 flex items-center">
<header class="container mx-auto px-4">
<div class="sm:flex">
<div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
<div class="w-3/4 py-5">
<a href="/" title="Home" class="text-grey-darkest no-underline hover:underline">
{{ site.title }}
</a>
</div>
<div class="w-1/4 text-right md:hidden">
<div class="w-1/4 text-right sm:hidden">
<button type="button" class="nav-toggle appearance-none">
<svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
</button>
</div>
</div>
<nav class="hidden block w-full -mx-4 md:w-2/3 lg:w-3/4 md:flex md:flex-wrap md:justify-end" role="navigation">
<nav class="hidden block w-full -mx-4 sm:w-2/3 lg:w-3/4 sm:flex sm:flex-wrap sm:justify-end" role="navigation">
{% include 'nav-item.html.twig' with {
title: 'About',
href: '/',