pause

src/styles/components/_btn.scss

@@ -1,85 +0,0 @@
-.btn {
-	--font: 8px;
-	--border: theme('colors.black.default');
-	--padding-y: theme('spacing.1');
-	--padding-x: theme('spacing.2');
-	--gap: theme('spacing.2');
-	--radius: theme('borderRadius.full');
-	--btn-text: theme('colors.white');
-	--text-height: 10px;
-	color: var(--btn-text);
-	display: inline-flex;
-	padding: var(--padding-y) var(--padding-x);
-	font-size: var(--font);
-	gap: var(--gap);
-	overflow: hidden;
-	position: relative;
-	align-items: center;
-	justify-self: center;
-	cursor: pointer;
-	border-radius: var(--radius);
-	line-height: var(--text-height);
-	transition: all ease-in-out .3s;
-
-	@media all and (min-width: 640px) {
-		--padding-x: 40px;
-		--font: 12px;
-		--text-height: 22px;
-	}
-	@media all and (min-width: 1200px) {
-		--padding-x: 54px;
-		--padding-y: 12px;
-		--font: 14px;
-		--text-height: 22px;
-	}
-
-
-	> * {
-		z-index: 9;
-	}
-
-	&:before {
-		content: '';
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		border-radius: var(--radius);
-		left: 0;
-		border: 1px solid;
-		z-index: 0;
-		border-color: var(--border);
-		transition: all ease-in-out .6s;
-	}
-
-	&.border-gradient {
-		&:before {
-			border: none;
-			padding: 1px; // Border thickness
-			background: linear-gradient(to right, #ffa04c, #42b99d);
-			-webkit-mask: linear-gradient(#ffffff 0 0) content-box,
-			linear-gradient(#ffffff 0 0);
-			mask: linear-gradient(#ffffff 0 0) content-box,
-			linear-gradient(#ffffff 0 0);
-			mask-composite: exclude;
-			-webkit-mask-composite: exclude;
-			pointer-events: none; // Ensure the gradient is not interactive
-		}
-	}
-
-	&.type-1 {
-		@extend .border-gradient;
-		--font: 14px;
-		--padding-y: theme('spacing.4');
-		--padding-x: theme('spacing.4');
-		--gap: theme('spacing.2');
-		--radius: theme('borderRadius.xl');
-		--btn-text: theme('colors.white');
-		--text-height: 1.2;
-		justify-content: center;
-
-		&:before {
-			padding: 2px;
-		}
-	}
-}

src/styles/main.scss

@@ -5,9 +5,4 @@
 @use "components/btn.scss";
 
 //	Complex reusable blocks
-@use "partials/load-spinner.scss";
-
-// Tailwind essentials
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@use "partials/load-spinner.scss";

vite.config.js

@@ -6,7 +6,7 @@ import vue from '@vitejs/plugin-vue';
 import {visualizer} from 'rollup-plugin-visualizer';
 
 
-const portNumber = 4850;
+const portNumber = 6633;
 export default defineConfig({
     server: {
         port: portNumber,