add :focus for accessibility

_includes/intro.html

@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class="scroll-down-wrapper">
-        <a href="#about-section" class="scroll-down">
+        <a href="#about-section" title="About section" class="scroll-down">
           <img class="logo" src="img/logo-white.png" alt="scroll down">
           <span class="scroll-down-text">
             Learn More

_scss/partials/_404.scss

@@ -101,7 +101,7 @@
         border-radius: 30px;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
-        &:hover {
+        &:hover, &:focus {
           background: #c74739;
         }
       }

_scss/partials/_blockBtn.scss

@@ -14,7 +14,7 @@
   letter-spacing: 1px;
   overflow: hidden;
   transition: background-color 0.5s linear;
-  &:hover {
+  &:hover, &:focus {
     background: $blue;
     transition: all 0.3s ease;
     .resume-text {

_scss/partials/_contact.scss

@@ -120,7 +120,7 @@
       position: relative;
       overflow: hidden;
       transition: all 0.3s ease;
-      &:hover {
+      &:hover, &:focus {
         color: $white;
         background: $blue;
       }

_scss/partials/_dotNav.scss

@@ -26,10 +26,12 @@
       display: inline-block;
       transform: scale(0.6);
     }
-    &:hover span {
+    &:hover span,
+    &:focus span {
       transform: scale(0.75);
     }
-    &:hover .dot-label {
+    &:hover .dot-label,
+    &:focus .dot-label {
       opacity: 1;
     }
     &.is-selected .dot {

_scss/partials/_experience.scss

@@ -201,7 +201,7 @@
             margin-left: 50px;
             padding: 1.5em 1em 2.5em;
           }
-          &:hover {
+          &:hover, &:focus {
             opacity: 1;
             + .timeline-img {
               background: $blue;
@@ -246,7 +246,7 @@
               color: $blue;
               display: inline;
               transition: all 0.3s ease;
-              &:hover {
+              &:hover, &:focus {
                 color: #00dded;
               }
             }

_scss/partials/_footer.scss

@@ -39,7 +39,7 @@
         &.icon {
           color: $white;
           fill: $white;
-          &:hover {
+          &:hover, &:focus {
             color: #fff;
             fill: #fff;
             transition: all 0.3s ease;

_scss/partials/_intro.scss

@@ -127,7 +127,7 @@
           width: 70px;
           margin: 0 auto;
           transition: all 0.3s ease;
-          &:hover {
+          &:hover, &:focus {
             transition: all 0.3s ease;
             .logo {
               opacity: 0;

_scss/partials/_mobileMenu.scss

@@ -11,7 +11,7 @@
   @include MQ(M) {
     display: block;
   }
-  &:hover {
+  &:hover, &:focus {
     opacity: 0.7;
   }
   &.active {
@@ -155,7 +155,7 @@
           &:after {
             transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
           }
-          &:hover {
+          &:hover, &:focus {
             &:before,
             &:after {
               width: 105%;

_scss/partials/_portfolio.scss

@@ -184,7 +184,7 @@
             margin: 0 10px 30px 0;
             top: 0px;
           }
-          &:hover {
+          &:hover, &:focus {
             background: $blue;
             color: $white;
           }