Merge pull request realstoman#26 from realstoman/add-fonts-fix-darkmode-and-ui

Add new fonts, fix dark-mode and UI updates

Author: realstoman

package-lock.json

@@ -12,15 +12,211 @@
 /* Custom Styles Below */
 
 body {
-	font-family: 'Poppins', sans-serif !important;
+	font-family: 'GeneralSans-Regular';
 }
 
-h1,
-h2,
-h3,
-h4 {
-	font-family: 'Poppins', sans-serif !important;
-	font-weight: 500 !important;
+/* Theme Colors */
+
+/* Fonts */
+@font-face {
+	font-family: 'GeneralSans-Variable';
+	src: url('../fonts/GeneralSans-Variable.woff2') format('woff2'),
+		url('../fonts/GeneralSans-Variable.woff') format('woff'),
+		url('../fonts/GeneralSans-Variable.ttf') format('truetype');
+	font-weight: 200 700;
+	font-display: swap;
+	font-style: normal;
 }
 
-/* Theme Colors */
+.font-general-variable {
+	font-family: 'GeneralSans-Variable';
+}
+
+@font-face {
+	font-family: 'GeneralSans-VariableItalic';
+	src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
+		url('../fonts/GeneralSans-VariableItalic.woff') format('woff'),
+		url('../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
+	font-weight: 200 700;
+	font-display: swap;
+	font-style: italic;
+}
+
+.font-general-variable-italic {
+	font-family: 'GeneralSans-VariableItalic';
+}
+
+@font-face {
+	font-family: 'GeneralSans-Extralight';
+	src: url('../fonts/GeneralSans-Extralight.woff2') format('woff2'),
+		url('../fonts/GeneralSans-Extralight.woff') format('woff'),
+		url('../fonts/GeneralSans-Extralight.ttf') format('truetype');
+	font-weight: 200;
+	font-display: swap;
+	font-style: normal;
+}
+
+.font-general-extralight {
+	font-family: 'GeneralSans-Extralight';
+}
+
+@font-face {
+	font-family: 'GeneralSans-ExtralightItalic';
+	src: url('../fonts/GeneralSans-ExtralightItalic.woff2') format('woff2'),
+		url('../fonts/GeneralSans-ExtralightItalic.woff') format('woff'),
+		url('../fonts/GeneralSans-ExtralightItalic.ttf') format('truetype');
+	font-weight: 200;
+	font-display: swap;
+	font-style: italic;
+}
+
+.font-general-extralight-italic {
+	font-family: 'GeneralSans-ExtralightItalic';
+}
+
+@font-face {
+	font-family: 'GeneralSans-Light';
+	src: url('../fonts/GeneralSans-Light.woff2') format('woff2'),
+		url('../fonts/GeneralSans-Light.woff') format('woff'),
+		url('../fonts/GeneralSans-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-display: swap;
+	font-style: normal;
+}
+
+.font-general-light {
+	font-family: 'GeneralSans-Light';
+}
+
+@font-face {
+	font-family: 'GeneralSans-LightItalic';
+	src: url('../fonts/GeneralSans-LightItalic.woff2') format('woff2'),
+		url('../fonts/GeneralSans-LightItalic.woff') format('woff'),
+		url('../fonts/GeneralSans-LightItalic.ttf') format('truetype');
+	font-weight: 300;
+	font-display: swap;
+	font-style: italic;
+}
+
+.font-general-light-italic {
+	font-family: 'GeneralSans-LightItalic';
+}
+
+@font-face {
+	font-family: 'GeneralSans-Regular';
+	src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'),
+		url('../fonts/GeneralSans-Regular.woff') format('woff'),
+		url('../fonts/GeneralSans-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-display: swap;
+	font-style: normal;
+}
+
+.font-general-regular {
+	font-family: 'GeneralSans-Regular';
+}
+
+@font-face {
+	font-family: 'GeneralSans-Italic';
+	src: url('../fonts/GeneralSans-Italic.woff2') format('woff2'),
+		url('../fonts/GeneralSans-Italic.woff') format('woff'),
+		url('../fonts/GeneralSans-Italic.ttf') format('truetype');
+	font-weight: 400;
+	font-display: swap;
+	font-style: italic;
+}
+
+.font-general-italic {
+	font-family: 'GeneralSans-Italic';
+}
+
+@font-face {
+	font-family: 'GeneralSans-Medium';
+	src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'),
+		url('../fonts/GeneralSans-Medium.woff') format('woff'),
+		url('../fonts/GeneralSans-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-display: swap;
+	font-style: normal;
+}
+
+.font-general-medium {
+	font-family: 'GeneralSans-Medium';
+}
+
+@font-face {
+	font-family: 'GeneralSans-MediumItalic';
+	src: url('../fonts/GeneralSans-MediumItalic.woff2') format('woff2'),
+		url('../fonts/GeneralSans-MediumItalic.woff') format('woff'),
+		url('../fonts/GeneralSans-MediumItalic.ttf') format('truetype');
+	font-weight: 500;
+	font-display: swap;
+	font-style: italic;
+}
+
+.font-general-medium-italic {
+	font-family: 'GeneralSans-MediumItalic';
+}
+
+@font-face {
+	font-family: 'GeneralSans-Semibold';
+	src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
+		url('../fonts/GeneralSans-Semibold.woff') format('woff'),
+		url('../fonts/GeneralSans-Semibold.ttf') format('truetype');
+	font-weight: 600;
+	font-display: swap;
+	font-style: normal;
+}
+
+.font-general-semibold {
+	font-family: 'GeneralSans-Semibold';
+}
+
+@font-face {
+	font-family: 'GeneralSans-SemiboldItalic';
+	src: url('../fonts/GeneralSans-SemiboldItalic.woff2') format('woff2'),
+		url('../fonts/GeneralSans-SemiboldItalic.woff') format('woff'),
+		url('../fonts/GeneralSans-SemiboldItalic.ttf') format('truetype');
+	font-weight: 600;
+	font-display: swap;
+	font-style: italic;
+}
+
+.font-general-semibold-italic {
+	font-family: 'GeneralSans-SemiboldItalic';
+}
+
+@font-face {
+	font-family: 'GeneralSans-Bold';
+	src: url('../fonts/GeneralSans-Bold.woff2') format('woff2'),
+		url('../fonts/GeneralSans-Bold.woff') format('woff'),
+		url('../fonts/GeneralSans-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-display: swap;
+	font-style: normal;
+}
+
+.font-general-bold {
+	font-family: 'GeneralSans-Bold';
+}
+
+@font-face {
+	font-family: 'GeneralSans-BoldItalic';
+	src: url('../fonts/GeneralSans-BoldItalic.woff2') format('woff2'),
+		url('../fonts/GeneralSans-BoldItalic.woff') format('woff'),
+		url('../fonts/GeneralSans-BoldItalic.ttf') format('truetype');
+	font-weight: 700;
+	font-display: swap;
+	font-style: italic;
+}
+
+.font-general-bold-italic {
+	font-family: 'GeneralSans-BoldItalic';
+}
+
+/* Active class for navigation menu */
+.router-link-active,
+.router-link-exact-active {
+	@apply text-indigo-800;
+	@apply text-indigo-600 dark:text-indigo-300;
+}

src/assets/css/app.css

@@ -1,7 +1,7 @@
 <template>
 	<!-- Hire me modal -->
 	<transition name="fade">
-		<div v-show="modal" class="fixed inset-0 z-30">
+		<div v-show="modal" class="font-general-medium fixed inset-0 z-30">
 			<!-- Modal body background as backdrop -->
 			<div
 				v-show="modal"
@@ -24,7 +24,7 @@
 								class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
 							>
 								<h5
-									class=" text-primary-dark dark:text-primary-light text-2xl"
+									class=" text-primary-dark dark:text-primary-light text-xl"
 								>
 									What project are you looking for?
 								</h5>
@@ -90,7 +90,8 @@
 									</div>
 
 									<div class="mt-6 pb-4 sm:pb-1">
-										<button
+										<Button
+											title="Send Request"
 											class="px-4
 											sm:px-6
 											py-2
@@ -104,16 +105,15 @@
 											focus:ring-1 focus:ring-indigo-900"
 											type="submit"
 											aria-label="Submit Request"
-										>
-											Send Request
-										</button>
+										/>
 									</div>
 								</form>
 							</div>
 							<div
 								class="modal-footer mt-2 sm:mt-0 py-5 px-8 border0-t text-right"
 							>
-								<button
+								<Button
+									title="Close"
 									class=" px-4
 									sm:px-6
 									py-2 bg-gray-600 text-primary-light hover:bg-ternary-dark dark:bg-gray-200 dark:text-secondary-dark dark:hover:bg-primary-light
@@ -123,9 +123,7 @@
 									focus:ring-1 focus:ring-indigo-900"
 									@click="showModal()"
 									aria-label="Close Modal"
-								>
-									Close
-								</button>
+								/>
 							</div>
 						</div>
 					</div>
@@ -137,8 +135,10 @@
 
 <script>
 import feather from 'feather-icons';
+import Button from './reusable/Button.vue';
 export default {
 	props: ['showModal', 'modal', 'categories'],
+	components: { Button },
 	data() {
 		return {};
 	},