From 4a15ced90cf63110827ede80275199f7a7ebac70 Mon Sep 17 00:00:00 2001
From: Cobular <22972550+Cobular@users.noreply.github.com>
Date: Mon, 15 Jun 2020 19:49:12 -0700
Subject: [PATCH] Fixed fade animations, actually looks pretty damn good right
 now

---
 css/main.css      |  3 ++-
 css/masonry.css   | 24 +++++++++++++-----------
 index.html        |  5 ++++-
 notes.txt         | 19 +------------------
 sass/main.sass    |  3 +++
 sass/masonry.sass | 37 ++++++++++++++++---------------------
 6 files changed, 39 insertions(+), 52 deletions(-)

diff --git a/css/main.css b/css/main.css
index 67f33b7..cbf6b9f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -44,7 +44,8 @@
   height: fit-content;
   padding: 10px;
   margin-top: 10px;
-  font-family: "Montserrat", sans-serif; }
+  font-family: "Montserrat", sans-serif;
+  border-radius: 3px; }
 
 @media (min-width: 992px) {
   .page {
diff --git a/css/masonry.css b/css/masonry.css
index 0b5506b..1c71715 100644
--- a/css/masonry.css
+++ b/css/masonry.css
@@ -1,4 +1,6 @@
 .grid-item {
+  background-color: #eaeaea;
+  border-radius: 3px;
   width: 240px;
   margin-bottom: 10px;
   padding: 5px;
@@ -28,16 +30,16 @@
   .grid-item--width2 {
     width: 100%; } }
 .blur-me {
-  animation: FadeOut 0.22s;
-  animation-fill-mode: both; }
-
-@keyframes FadeOut {
-  to {
-    opacity: 0.8;
-    filter: grayscale(20%) blur(0.7px) brightness(94%); } }
-@keyframes FadeIn {
-  to {
-    opacity: 1;
-    filter: grayscale(0%) blur(0px) brightness(100%); } }
+  filter: grayscale(10%) blur(0.5px) brightness(100%);
+  opacity: 0.8;
+  box-shadow: none; }
+
+.unblur-me {
+  filter: grayscale(0%) blur(0px) brightness(100%);
+  opacity: 1;
+  box-shadow: none; }
+
+.grid:hover .grid-item:hover {
+  opacity: 1; }
 
 /*# sourceMappingURL=masonry.css.map */
diff --git a/index.html b/index.html
index 7c01fe4..e5e6668 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,8 @@
     <div class="grid">
         <!--Distest-->
         <div class="grid-item grid-item--tall4">
-            Distest
+            Distest <br>
+            One of my favorite Python projects, my attempt at implementing a test suite for discord bots.
         </div>
         <!--CodeDay-->
         <div class="grid-item grid-item--image">
@@ -54,9 +55,11 @@
     $(".grid-item").hover(
         function () {
             $(this).siblings().addClass('blur-me')
+            $(this).siblings().removeClass('unblur-me')
         },
         function () {
             $(this).siblings().removeClass('blur-me')
+            $(this).siblings().addClass('unblur-me')
         }
     )
 </script>
diff --git a/notes.txt b/notes.txt
index c5c7bdc..ff1d1ab 100644
--- a/notes.txt
+++ b/notes.txt
@@ -1,18 +1 @@
-http://www.alexafalcone.com/
-http://gudh.github.io/ihover/dist/index.html#circle10
-http://gudh.github.io/ihover/dist/index.html#circle13
-http://gudh.github.io/ihover/dist/index.html#circle17
-http://gudh.github.io/ihover/dist/index.html#square3
-http://gudh.github.io/ihover/dist/index.html#square6
-http://gudh.github.io/ihover/dist/index.html#square12
-https://codepen.io/honglio/pen/FKyxG
-https://codepen.io/russpate/pen/qRaepv --- Requires the whole area to be blurred
-https://codepen.io/Mamboleoo/pen/XgBvrJ ---
-https://codepen.io/cassidoo/pen/RZOWQb
-https://codepen.io/Sherpa23/pen/rKvJXg !!
-https://codepen.io/markmead/pen/MqmOVB !!
-https://codepen.io/ViktorKorolyuk/pen/GYGwpv
-https://ianlunn.github.io/Hover/ (border section)
-https://codepen.io/bhautikbharadava/full/OdPzdW (gives borders too)
-https://tympanus.net/Development/ProximityFeedback/index5.html
-https://tympanus.net/Development/ProximityFeedback/index7.html (scroll icon)
\ No newline at end of file
+https://codepen.io/exah/pen/Lqyem - Consider doing a fun border and having that change on hover
\ No newline at end of file
diff --git a/sass/main.sass b/sass/main.sass
index 43c9667..eeabcc0 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -49,9 +49,12 @@
   padding: 10px
   margin-top: 10px
   font-family: 'Montserrat', sans-serif
+  border-radius: 3px
+
 
 @include respond-above(md)
   .page
     width: 80%
     margin: 10px auto auto
 
+
diff --git a/sass/masonry.sass b/sass/masonry.sass
index ecf9ee1..1da0b9e 100644
--- a/sass/masonry.sass
+++ b/sass/masonry.sass
@@ -1,7 +1,8 @@
 @import "breakpoint-helpers"
 
 .grid-item
-  //background-color: coral
+  background-color: #eaeaea
+  border-radius: 3px
   width: 240px
   margin-bottom: 10px
   padding: 5px
@@ -37,30 +38,24 @@
 
 
 .blur-me
-  animation: FadeOut 0.22s
-  animation-fill-mode: both
+  filter: grayscale(10%) blur(0.5px) brightness(100%)
+  opacity: .8
+  //transform: scale(.995)
+  box-shadow: none
 
-@keyframes FadeOut
-  to
-    opacity: 0.8
-    filter: grayscale(20%) blur(0.7px) brightness(94%)
 
-@keyframes FadeIn
-  to
-    opacity: 1
-    filter: grayscale(0%) blur(0px) brightness(100%)
+.unblur-me
+  filter: grayscale(0%) blur(0px) brightness(100%)
+  opacity: 1
+  //transform: scale(.995)
+  box-shadow: none
 
+.grid:hover .grid-item:hover
+  //transform: scale(1.005)
+  opacity: 1
+  //box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125)
+  //filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3))
 
-//  filter:
-//  opacity: .8
-//  //transform: scale(.995)
-//  box-shadow: none
-//
-//.grid:hover .grid-item:hover
-//  //transform: scale(1.005)
-//  filter: blur(0px)
-//  opacity: 1
-//  //box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125)
 
 //.grid-img
 //  display: inline-block