Add opacity effects around

4 files changed, 11 insertions, 11 deletions

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 58bce01..5bf87ae 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -23,7 +23,7 @@
             <img alt="{{ .Site.Title }}" class="w-24 h-24 lg:w-32 lg:h-32 rounded-full mb-3" src="{{.Site.Params.avatar | relURL}}">
           {{ end }}
         {{ end }}
-        <a href="{{ .Site.Home.Permalink }}" class="text-4xl font-normal flex flex-shrink-0 text-center text-white hover:text-gray-300 focus:text-gray-300">
+        <a href="{{ .Site.Home.Permalink }}" class="text-4xl font-normal flex flex-shrink-0 text-center text-white focus:text-gray-300 opacity-75 hover:opacity-100 transition duration-300 ease-in-out">
           {{ .Site.Title }}
         </a>
 
@@ -45,11 +45,11 @@
       </div>
 
       <div class="absolute right-8 top-16 lg:relative lg:right-0 lg:top-0 flex flex-col lg:flex-row items-center rounded-md bg-white shadow lg:bg-transparent lg:shadow-none">
-        <nav id="nav-social-links" class="p-4 lg:p-0 text-gray-400 hidden lg:block lg:order-last w-full lg:w-auto lg:ml-3">
+        <nav id="nav-social-links" class="p-4 lg:p-0 text-gray-600 hidden lg:block lg:order-last w-full lg:w-auto lg:ml-3">
           {{ partial "nav-social-links.html" . }}
         </nav>
 
-        <nav id="nav-menu" class="p-4 lg:p-0 hidden lg:block w-full lg:w-auto text-gray-400">
+        <nav id="nav-menu" class="p-4 lg:p-0 hidden lg:block w-full lg:w-auto text-gray-600">
           {{ partial "nav-links.html" . }}
         </nav>
       </div>
diff --git a/layouts/partials/nav-links.html b/layouts/partials/nav-links.html
index 798a377..15f29b4 100644
--- a/layouts/partials/nav-links.html
+++ b/layouts/partials/nav-links.html
@@ -1,7 +1,7 @@
 <ul class="w-full flex flex-col lg:flex-row justify-end items-end lg:items-center">
   {{ range .Site.Menus.main.ByWeight }}
     <li class="flex my-2 lg:my-2 mx-1 lg:mx-2">
-      <a title="{{ .Name }}" class="lg:border lg:py-2 lg:px-3 rounded text-sm" href="{{ .URL }}">{{ .Name }}</a>
+      <a title="{{ .Name }}" class="lg:border lg:py-2 lg:px-3 rounded text-sm opacity-75 hover:opacity-100 transition duration-300 ease-in-out" href="{{ .URL }}">{{ .Name }}</a>
     </li>
   {{ end }}
 </ul>
diff --git a/layouts/partials/nav-menu-buttons.html b/layouts/partials/nav-menu-buttons.html
index 8b5bce9..a3ba680 100644
--- a/layouts/partials/nav-menu-buttons.html
+++ b/layouts/partials/nav-menu-buttons.html
@@ -1,10 +1,10 @@
-<button class="nav-button w-10 h-10 justify-center flex items-center">
+<button class="nav-button w-10 h-10 justify-center flex items-center opacity-75 hover:opacity-100 transition duration-300 ease-in-out">
   <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <title>Menu</title>
     <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
   </svg>
 </button>
-<button class="hidden nav-button w-10 h-10 justify-center flex items-center">
+<button class="hidden nav-button w-10 h-10 justify-center flex items-center opacity-75 hover:opacity-100 transition duration-300 ease-in-out">
   <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <title>Close menu</title>
     <polygon points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2" transform="rotate(45 10 10)" />
diff --git a/layouts/partials/nav-social-links.html b/layouts/partials/nav-social-links.html
index cc2a60e..326982b 100644
--- a/layouts/partials/nav-social-links.html
+++ b/layouts/partials/nav-social-links.html
@@ -1,7 +1,7 @@
 <ul class="flex justify-end">
   {{ with .Site.Params.twitter }}
     <li>
-      <a class="block p-2" title="Twitter" href="https://www.twitter.com/{{ . }}" rel="me">
+      <a class="block p-2 opacity-75 hover:opacity-100 transition duration-300 ease-in-out" title="Twitter" href="https://www.twitter.com/{{ . }}" rel="me">
         <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
           <title>Twitter</title>
           <path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"></path>
@@ -11,7 +11,7 @@
   {{ end }}
   {{ with .Site.Params.github }}
     <li>
-      <a class="block p-2" title="Github" href="https://www.github.com/{{ . }}" rel="me">
+      <a class="block p-2 opacity-75 hover:opacity-100 transition duration-300 ease-in-out" title="Github" href="https://www.github.com/{{ . }}" rel="me">
         <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
           <title>GitHub</title>
           <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
@@ -21,7 +21,7 @@
   {{ end }}
   {{ with .Site.Params.linkedin }}
     <li>
-      <a class="block p-2" title="Linkedin" href="{{ . }}" rel="me">
+      <a class="block p-2 opacity-75 hover:opacity-100 transition duration-300 ease-in-out" title="Linkedin" href="{{ . }}" rel="me">
         <svg class="fill-current w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <title>LinkedIn</title>
           <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
@@ -31,7 +31,7 @@
   {{ end }}
   {{ with .Site.Params.email }}
     <li>
-      <a class="block p-2" title="Email" href="mailto:{{ . }}">
+      <a class="block p-2 opacity-75 hover:opacity-100 transition duration-300 ease-in-out" title="Email" href="mailto:{{ . }}">
         <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path>
         </svg>
@@ -39,7 +39,7 @@
     </li>
   {{ end }}
   <li>
-    <a class="block p-2" title="Feed" href="{{ with .OutputFormats.Get "RSS" }} {{ .RelPermalink }} {{ end }}">
+    <a class="block p-2 opacity-75 hover:opacity-100 transition duration-300 ease-in-out" title="Feed" href="{{ with .OutputFormats.Get "RSS" }} {{ .RelPermalink }} {{ end }}">
       <svg class="fill-current w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <title>RSS</title>
         <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>