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 @@
- Distest + Distest
+ One of my favorite Python projects, my attempt at implementing a test suite for discord bots.
@@ -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') } ) 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