feature: animacje list

src/styles/animations.scss

@@ -0,0 +1,15 @@
+.list-anim-move,
+.list-anim-enter-active,
+.list-anim-leave-active {
+  transition: all 250ms ease;
+}
+
+.list-anim-enter-from,
+.list-anim-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-anim-leave-active {
+  position: absolute;
+}

src/styles/responsive.scss

@@ -1,18 +1,23 @@
 @mixin smallScreen() {
-    @media only screen and (max-width: 700px) {
-        @content;
-    }
+  @media only screen and (max-width: 700px) {
+    @content;
+  }
 }
 
-
 @mixin midScreen() {
-    @media only screen and (max-width: 1150px) {
-        @content;
-    }
+  @media only screen and (max-width: 1150px) {
+    @content;
+  }
+}
+
+@mixin screenLandscape() {
+  @media only screen and (orientation: landscape) and (max-device-height: 450px)  {
+    @content;
+  }
 }
 
 @mixin bigScreen() {
-    @media only screen and (min-width: 2000px) {
-        @content;
-    }
-}
+  @media only screen and (min-width: 2000px) {
+    @content;
+  }
+}