style: added image-header CSS component; style: removed stackedTabs and middle section SCSS files

src/components/TheContent.vue

@@ -31,11 +31,23 @@
 </template>
 
 <style lang="scss">
+@import '../styles/scss/base/_variables.scss';
+// src/components/TheContent.vue
 #container {
+	--container-width: 95%;
+
 	margin: 0 auto;
 	max-width: 1280px;
 	width: var(--container-width);
 	transform: scale(1);
+
+	@media only screen and (min-width: $small) {
+		--container-width: 85%;
+	}
+
+	@media only screen and (min-width: $medium) {
+		--container-width: 70%;
+	}
 }
 
 main {

src/components/globals/TheQualityModal.vue

@@ -22,7 +22,9 @@
 		</div>
 	</div>
 </template>
-<style>
+<style lang="scss">
+@import '../../styles/scss/base/_variables.scss';
+
 .smallmodal {
 	position: fixed;
 	z-index: 1250;
@@ -36,12 +38,22 @@
 }
 
 .smallmodal-content {
+	--modal-content-width: 95%;
+
 	background-color: transparent;
 	margin: auto;
 	width: var(--modal-content-width);
 	position: relative;
 	top: 50%;
 	transform: translateY(-50%);
+
+	@media only screen and (min-width: $small) {
+		--modal-content-width: 85%;
+	}
+
+	@media only screen and (min-width: $medium) {
+		--modal-content-width: 70%;
+	}
 }
 
 .smallmodal-content button {

src/components/pages/Artist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="artist_tab" class="relative image_header" ref="root">
+	<div id="artist_tab" class="relative image-header" ref="root">
 		<header
 			class="inline-flex"
 			:style="{

src/components/pages/LinkAnalyzer.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="analyzer_tab" class="image_header" ref="root">
+	<div id="analyzer_tab" class="image-header" ref="root">
 		<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.linkAnalyzer') }}</h1>
 
 		<div v-if="link === ''">

src/components/pages/Tracklist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="relative fixed_footer image_header" ref="root">
+	<div class="relative fixed_footer image-header" ref="root">
 		<header
 			:style="{
 				'background-image':

src/styles/css/components.css

@@ -46,4 +46,11 @@
 		@apply text-primary border-primary bg-background-secondary;
 		@apply bg-opacity-25;
 	}
+
+	/* Image header */
+	.image-header header {
+		@apply bg-cover pt-56 px-6 pb-2 rounded-t-lg;
+
+		background-position: 0% 35%;
+	}
 }

src/styles/scss/_middle-section.scss

@@ -1,24 +0,0 @@
-#container {
-	--container-width: 95%;
-
-	@media only screen and (min-width: $small) {
-		--container-width: 85%;
-	}
-
-	@media only screen and (min-width: $medium) {
-		--container-width: 70%;
-	}
-}
-
-/* Modal Content */
-.smallmodal-content {
-	--modal-content-width: 95%;
-
-	@media only screen and (min-width: $small) {
-		--modal-content-width: 85%;
-	}
-
-	@media only screen and (min-width: $medium) {
-		--modal-content-width: 70%;
-	}
-}

src/styles/scss/_stackedTabs.scss

@@ -1,7 +0,0 @@
-// Make a component? But it would be only one HTML tag with a bunch of classes and a prop (the img src)...
-.image_header {
-	header {
-		@apply bg-cover pt-56 px-6 pb-2 rounded-t-lg;
-		background-position: 0% 35%;
-	}
-}

src/styles/scss/style.scss

@@ -28,6 +28,3 @@ body {
 @import './tabs/search-tab';
 @import './tabs/settings-tab';
 @import './tabs/tabs';
-
-@import './middle-section';
-@import './stackedTabs';