gaiety/portfolio
gaiety/portfolio
1
1
Fork 0
Code Activity

Consistent focus styles everywhere

Browse source
This commit is contained in:
Ava Gaiety Wroten 2021-02-27 15:03:06 -06:00
parent 82b161ac9a
commit 7049b4b4d9
3 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/base-footer.html
View file

@ -1,7 +1,7 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mt-12 rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
{%- for navItem in links -%}
<div class="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-pink-700">
<div class="relative group bg-white p-6 focus:outline-link">
<h3 class="text-lg font-medium">
<a href="{{navItem.url}}" class="focus:outline-none">
<!-- Extend touch target to entire panel -->

6
_includes/base-header.html
View file

@ -55,7 +55,7 @@
<div class="relative flex justify-between h-16">
<div class="absolute inset-y-0 left-0 flex justify-between w-full sm:hidden">
<button
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-link"
aria-expanded="false"
onclick="mobileToggle()"
id="mobileToggleButton">
@ -69,15 +69,17 @@
</button>
<a
href="/"
class="focus:outline-link"
{% if page.url == navItem.url %}aria-current="page"{% endif %}
>
<img class="h-12 w-12 p-2 rounded-full" src="/img/site/avatar.png" alt="Home">
<img class="h-12 w-12 mt-2 rounded-full" src="/img/site/avatar.png" alt="Home">
</a>
</div>
<div class="flex-1 flex justify-between sm:items-stretch sm:justify-start">
<div class="hidden sm:flex sm:space-x-8">
<a
href="/"
class="focus:outline-link"
{% if page.url == navItem.url %}aria-current="page"{% endif %}
>
<img class="h-12 w-12 mt-2 rounded-full" src="/img/site/avatar.png" alt="Home">

2
_includes/pinned.njk
View file

@ -21,7 +21,7 @@
</span>
</a>
</div>
<a href="{{ content.url }}" class="block mt-4">
<a href="{{ content.url }}" class="block mt-4 focus:outline-link">
<h3 class="text-xl font-semibold text-gray-900 hover:underline">
{{ content.data.title }}
</h3>