:Fade resume icons in lower-res views

1 files changed, 12 insertions, 0 deletions

diff --git a/docs/about/resume/style.css b/docs/about/resume/style.css
index 2becf20..d1bb5f0 100644
--- a/docs/about/resume/style.css
+++ b/docs/about/resume/style.css
@@ -203,6 +203,10 @@ h1 { font-size: 2.2em; }
 
   list-style: none;
   margin:     0px;
+
+  /* see @media layouts */
+  transition: filter 0.15s;  /* quick fade in */
+
 }
 #header ul.links li {
   margin:  0px;
@@ -303,6 +307,14 @@ h1 { font-size: 2.2em; }
     padding: 0px 2em 0px 3em;
     margin:  0px 50px 0px 0px;
   }
+
+  /* now that icons are a part of the main content,
+     make them blend better (otherwise the vibrant color
+     is too jarring/distracting) */
+  #header ul.links:not(:hover) {
+    filter:     saturate(25%);
+    transition: filter 3s;  /* slow fade */
+  }
 }