Projects grid and single project fonts upfated

Author: realstoman

src/components/projects/ProjectHeader.vue

@@ -2,7 +2,7 @@
 	<div>
 		<!-- Project heading and meta info -->
 		<p
-			class="text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-14 sm:mt-20 mb-7"
+			class="font-general-medium text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-14 sm:mt-20 mb-7"
 		>
 			{{ singleProjectHeader.singleProjectTitle }}
 		</p>
@@ -13,7 +13,7 @@
 					class="w-4 h-4 text-ternary-dark dark:text-ternary-light"
 				></i>
 				<span
-					class="ml-2 leading-none text-primary-dark dark:text-primary-light"
+					class="font-general-medium ml-2 leading-none text-primary-dark dark:text-primary-light"
 					>{{ singleProjectHeader.singleProjectDate }}</span
 				>
 			</div>
@@ -23,7 +23,7 @@
 					class="w-4 h-4 text-ternary-dark dark:text-ternary-light"
 				></i>
 				<span
-					class="ml-2 leading-none text-primary-dark dark:text-primary-light"
+					class="font-general-medium ml-2 leading-none text-primary-dark dark:text-primary-light"
 					>{{ singleProjectHeader.singleProjectTag }}</span
 				>
 			</div>

src/components/projects/ProjectInfo.vue

@@ -6,15 +6,15 @@
 			<!-- Single project client details -->
 			<div class="mb-7">
 				<p
-					class="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2"
+					class="font-general-regular text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2"
 				>
 					{{ projectInfo.clientHeading }}
 				</p>
 				<ul class="leading-loose">
 					<li
 						v-for="info in projectInfo.companyInfos"
 						:key="info"
-						class="text-ternary-dark dark:text-ternary-light"
+						class="font-general-medium text-ternary-dark dark:text-ternary-light"
 					>
 						<span>{{ info.title }}: </span>
 						<a
@@ -34,31 +34,35 @@
 			<!-- Single project objectives -->
 			<div class="mb-7">
 				<p
-					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
+					class="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
 				>
 					{{ projectInfo.objectivesHeading }}
 				</p>
-				<p class="text-primary-dark dark:text-ternary-light">
+				<p
+					class="font-general-medium text-primary-dark dark:text-ternary-light"
+				>
 					{{ projectInfo.objectivesDetails }}
 				</p>
 			</div>
 
 			<!-- Single project technologies -->
 			<div class="mb-7">
 				<p
-					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
+					class="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
 				>
 					{{ projectInfo.technologies[0].title }}
 				</p>
-				<p class="text-primary-dark dark:text-ternary-light">
+				<p
+					class="font-general-medium text-primary-dark dark:text-ternary-light"
+				>
 					{{ projectInfo.technologies[0].techs.join(', ') }}
 				</p>
 			</div>
 
 			<!-- Single project social sharing -->
 			<div>
 				<p
-					class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
+					class="font-general-regular text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
 				>
 					{{ projectInfo.socialSharingsHeading }}
 				</p>
@@ -82,14 +86,14 @@
 		<!-- Single project right section details -->
 		<div class="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
 			<p
-				class="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7"
+				class="font-general-regular text-primary-dark dark:text-primary-light text-2xl font-bold mb-7"
 			>
 				{{ projectInfo.projectDetailsHeading }}
 			</p>
 			<p
 				v-for="projectDetail in projectInfo.projectDetails"
 				:key="projectDetail.id"
-				class="mb-5 text-lg text-ternary-dark dark:text-ternary-light"
+				class="font-general-medium mb-5 text-lg text-ternary-dark dark:text-ternary-light"
 			>
 				{{ projectDetail.details }}
 			</p>

src/components/projects/ProjectRelatedProjects.vue

@@ -4,7 +4,7 @@
 		class="mt-10 pt-10 sm:pt-14 sm:mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
 	>
 		<p
-			class="text-primary-dark dark:text-primary-light text-3xl font-bold mb-10 sm:mb-14 text-left"
+			class="font-general-regular text-primary-dark dark:text-primary-light text-3xl font-bold mb-10 sm:mb-14 text-left"
 		>
 			{{ relatedProject.relatedProjectsHeading }}
 		</p>

src/components/projects/ProjectSingle.vue

@@ -14,13 +14,14 @@
 		</div>
 		<div class="text-center px-4 py-6">
 			<p
-				class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
+				class="font-general-medium text-xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
 			>
 				{{ project.title }}
 			</p>
-			<span class="text-lg text-ternary-dark dark:text-ternary-light">{{
-				project.category
-			}}</span>
+			<span
+				class="font-general-medium text-lg text-ternary-dark dark:text-ternary-light"
+				>{{ project.category }}</span
+			>
 		</div>
 	</router-link>
 </template>

src/components/projects/ProjectsFilter.vue

@@ -5,7 +5,7 @@
 			@change="$emit('change', $event.target.value)"
 			:name="select"
 			:id="select"
-			class="
+			class="font-general-medium
 				px-4
 				sm:px-6
 				py-2

src/components/projects/ProjectsGrid.vue

@@ -4,7 +4,7 @@
 		<!-- Projects grid title -->
 		<div class="text-center">
 			<p
-				class="text-2xl sm:text-5xl font-semibold mb-2 text-ternary-dark dark:text-ternary-light"
+				class="font-general-semibold text-2xl sm:text-5xl font-semibold mb-2 text-ternary-dark dark:text-ternary-light"
 			>
 				{{ projectsHeading }}
 			</p>
@@ -13,13 +13,13 @@
 		<!-- Filter and search projects -->
 		<div class="mt-10 sm:mt-10">
 			<h3
-				class="
+				class="font-general-regular
 					text-center text-secondary-dark
 					dark:text-ternary-light
 					text-md
 					sm:text-xl
 					font-normal
-					mb-3
+					mb-4
 				"
 			>
 				Search projects by title or filter by category
@@ -54,7 +54,7 @@
 					</span>
 					<input
 						v-model="searchProject"
-						class="
+						class="font-general-medium
 						pl-3
 						pr-1
 						sm:px-4

src/views/Home.vue

@@ -10,7 +10,7 @@
 		<div class="mt-10 sm:mt-20 flex justify-center">
 			<router-link
 				to="/projects"
-				class="flex items-center px-6 py-3 rounded-xl shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 text-white text-lg sm:text-xl font-medium"
+				class="font-general-medium flex items-center px-6 py-3 rounded-xl shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 text-white text-lg sm:text-xl"
 				aria-label="More Projects"
 				>More Projects</router-link
 			>