From 43b9edf3b426e8c9670f4d3ad39aa6757d2f9854 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Mon, 17 Dec 2018 22:11:49 +0000
Subject: [PATCH] Improve logo focus state

---
 css/logo.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/css/logo.css b/css/logo.css
index b07f727..95afca9 100644
--- a/css/logo.css
+++ b/css/logo.css
@@ -7,15 +7,22 @@
   margin: 0 auto;
   max-width: 320px;
   position: relative;
+  border-radius: 50%;
+  transition: box-shadow var(--transition-fs) ease-out;
+}
+
+.logo__link:focus {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--color-light-blue);
 }
 
 .logo__link:before {
   background-image: var(--windy-svg);
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 92%;
+  background-size: 100%;
   content: "";
   display: block;
+  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
   padding-bottom: 100%;
   width: 100%;
 }
@@ -23,18 +30,11 @@
 .logo__image {
   bottom: 0;
   display: block;
-  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
   height: 100%;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
-  transition:
-    filter var(--transition-md) ease-in,
-    opacity var(--transition-md) ease-in;
+  transition: opacity var(--transition-sl) ease-out;
   width: 100%;
 }
-
-.logo__link:focus .logo__image {
-  filter: drop-shadow(6px 4px 4px var(--color-light-blue));
-}