implement checkbox filtering + timeline animations

src/assets/css/App.css

@@ -66,6 +66,10 @@ h3, h4 {
   color: #a8a8a8;
 }
 
+strong {
+  color: #ecebeb;
+}
+
 p, li {
   color: rgb(212, 212, 212);
   font-size: 1rem;
@@ -240,6 +244,10 @@ a {
   justify-content: space-between;
 }
 
+.start {
+  justify-content: left;
+}
+
 .onRight {
   position: absolute;
   right: 0;
@@ -430,6 +438,8 @@ a {
   height: 22rem;
   border: .3rem rgba(156, 49, 45, .8) solid;
   background-color: rgba(22, 22, 22, .8);
+  transition: .3s;
+  overflow: hidden;
 }
 
 .projTitle > * {
@@ -706,6 +716,13 @@ a {
   color: #db7e3b;
 }
 
+.timeitem {
+  transition: .4s;
+  overflow-y: clip;
+  height: auto;
+  max-height: 100px;
+}
+
 .timeline-item{
   border-left: solid #AAAAAA 3px;
 }

src/assets/css/checkbox.css

@@ -2,27 +2,38 @@
     display: none;
 }
 
-/* checkbox by Matt Smith */
+.hiddenup {
+    max-height: 0px !important;
+}
+
+.checkbox-wrapper > div {
+    margin-bottom: .5em;
+}
+
+.checkbox-wrapper > div:last-child {
+    margin-bottom: 0;;
+}
+
 .checkbox-wrapper .switch {
-    display: inline-block;
-    height: 34px;
+    display: flex;
     position: relative;
-    width: 60px;
+    cursor: pointer;
+}
+
+.checkbox-wrapper .switch > * {
+    align-self: center;
 }
 
 .checkbox-wrapper .switch input {
     display: none;
 }
 
+
 .checkbox-wrapper .slider {
     background-color: #ccc;
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
     transition: 0.4s;
+    height: 34px;
+    width: 60px;
 }
 
 .checkbox-wrapper .slider:before {
@@ -50,4 +61,8 @@
 
 .checkbox-wrapper .slider.round:before {
     border-radius: 50%;
-}
+}
+
+.checkbox-wrapper strong {
+    margin-left: .5em;
+}