task 6: HTML export

res/template/song.css

@@ -0,0 +1,61 @@
+@keyframes shadow-anim {
+	0% {
+		box-shadow: 0.0em 0.2em 0.6em #344c34a0;
+	}
+
+	25% {
+		box-shadow: 0.1em 0.3em 0.8em #344c34a0;
+	}
+
+	50% {
+		box-shadow: 0.2em 0.4em 1.2em #344c34a0;
+	}
+
+	75% {
+		box-shadow: 0.1em 0.3em 0.8em #344c34a0;
+	}
+
+	100% {
+		box-shadow: 0.0em 0.2em 0.6em #344c34a0;
+	}
+	
+}
+
+#song {
+	display: grid;
+	animation: shadow-anim 10s infinite alternate;
+	border-radius: 0.8em;
+	padding: 0.8em;
+	grid-template-columns: auto 1fr auto;
+	grid-template-rows: auto 1fr;
+	grid-template-areas:
+		"num title duration"
+		"cover cover cover";
+	max-height: 20em;
+	min-width: 50%;
+	max-width: 30em;
+	margin: auto;
+	gap: 0.4em;
+	align-items: center;
+}
+
+#song .number {
+	grid-area: num;
+}
+
+#song .title {
+	grid-area: title;
+}
+
+#song .duration {
+	grid-area: duration;
+}
+
+#song .cover {
+	grid-area: cover;
+	object-fit: contain;
+
+	background-color: #393939;
+	width: 8em;
+	height: 8em;
+}