Add a popularity modal to the page when clicking on the popularity value (finishes #5 )

css/card.css

@@ -61,7 +61,10 @@ div.card .bottom { bottom: 0; }
 
 
 /* border-radius: top-left top-right lower-right lower-left */
-div.card .popularity { border-radius: 0 var(--border-radius) 0 var(--border-radius); }
+div.card .popularity {
+	border-radius: 0 var(--border-radius) 0 var(--border-radius);
+	cursor: pointer;
+}
 div.card .followers,
 div.card .duration { border-radius: var(--border-radius) 0 var(--border-radius) 0; }
 

css/modal.css

@@ -0,0 +1,56 @@
+div.modal-container {
+	width: 100%;
+	height: 100%;
+	z-index: 5;
+	background-color: var(--modal-container-background);
+	position: fixed;
+	left: 0;
+	top: 0;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+div.modal {
+	z-index: 6;
+	width: 90%;
+	max-height: 85%;
+	background-color: var(--modal-background);
+	border-radius: 5px;
+	padding: 0 15px;
+	position: relative;
+}
+
+div.modal * { color: var(--modal-text); }
+
+div.modal h2 { margin-top: 30px; }
+
+div.modal p { padding: 0px 5px 15px 5px; }
+
+div.modal .close-modal {
+	width: 25px;
+	height: 25px;
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	color: var(--spotify-green);
+}
+div.modal .close-modal:hover {
+	color: var(--error);
+	transform: scale(1.2, 1.2);
+	transition: ease-in-out;
+	cursor: pointer;
+}
+
+
+
+@media only screen and (min-width: 768px) {
+	div.modal {
+		width: 50%;
+		max-height: 75%;
+	}
+	div.modal h2 {
+		margin-top: 19.920px;
+	}
+}

css/transitions.css

@@ -0,0 +1,62 @@
+/* Transition for modal background appearing/disappearing */
+.fade-enter-active, .fade-leave-active {
+	transition: opacity .5s;
+}
+
+.fade-enter, .fade-leave-to {
+	opacity: 0;
+}
+
+
+
+/* Transition for modal card appearing disappearing */
+.burst-enter-active {
+	animation: burst-in .5s;
+}
+.burst-leave-active { animation: burst-out .5s; }
+
+@keyframes burst-in {
+	0% {
+		transform: scale(0);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes burst-out {
+	0% {
+		transform: scale(1);
+	}
+	100% {
+		transform: scale(0);
+	}
+}
+
+
+
+@media only screen and (min-width: 768px) {
+	@keyframes burst-in {
+		0% {
+			transform: scale(0);
+		}
+		50% {
+			transform: scale(1.25);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	@keyframes burst-out {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.25);
+		}
+		100% {
+			transform: scale(0);
+		}
+	}
+}