style: removed some classes and ids; style: added typography.css; style: added vendor folder; wip: BaseAccordion component

src/components/globals/BaseAccordion.vue

@@ -0,0 +1,33 @@
+<template functional>
+	<details :class="{ 'with-arrow': props.withArrow }">
+		<summary class="mb-6 cursor-pointer">
+			<slot name="title">Setting</slot>
+		</summary>
+
+		<slot name="default">
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos distinctio sint culpa, recusandae vel fugit esse hic
+			tenetur autem. Debitis.
+		</slot>
+	</details>
+</template>
+
+<style>
+details > summary::-webkit-details-marker {
+	display: none;
+}
+
+details.with-arrow > summary::-webkit-details-marker {
+	display: initial;
+}
+</style>
+
+<script>
+export default {
+	props: {
+		withArrow: {
+			type: Boolean,
+			default: false
+		}
+	}
+}
+</script>

src/components/globals/CoverContainer.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="relative cover_container group">
+	<div class="relative cover-container group">
 		<img
 			aria-hidden="true"
 			class="block w-full opacity-100 coverart"
-			:class="{ rounded: isRounded, circle: isCircle }"
+			:class="{ rounded: isRounded, 'rounded-full': isCircle }"
 			:src="cover"
 		/>
 
@@ -21,7 +21,11 @@
 </template>
 
 <style lang="scss" scoped>
-.cover_container {
+.cover-container {
+	width: 156px;
+	height: 156px;
+	margin-bottom: 10px;
+
 	.coverart {
 		backface-visibility: hidden;
 		transition: 0.5s ease;