Merge pull request #145 from prabhavpokharel/fix/font-issue

fix: font family issue
computerclubkec · Oct 31, 2024 · d342197 · d342197
2 parents 7497a8b + 2ca14e5
commit d342197
Show file tree

Hide file tree

Showing 22 changed files with 135 additions and 120 deletions.
diff --git a/404.html b/404.html
@@ -10,9 +10,9 @@
       <path d="M30 30L70 70M70 30L30 70" stroke="#EF4444" stroke-width="4" stroke-linecap="round"/>
     </svg>
 
-    <h1 class="text-3xl text-[{{site.text-colors.darkblue}}] font-bold mb-3">404 - Page Not Found</h1>
-    <p class="text-[{{site.text-colors.gray}}] mb-6">Oops! You've ventured off the beaten path.</p>
+    <h1 class="text-3xl text-[{{site.text-colors.darkblue}}] font-montserrat font-bold mb-3">404 - Page Not Found</h1>
+    <p class="text-[{{site.text-colors.gray}}] font-inter mb-6">Oops! You've ventured off the beaten path.</p>
 
-    <a href="/" class="bg-[{{site.bg-colors.orange-button}}] text-white px-4 py-2 rounded hover:bg-[{{site.bg-colors.orange-button}}]/80 transition duration-300">Go to Home</a>
+    <a href="/" class="bg-[{{site.bg-colors.orange-button}}] font-inter text-white px-4 py-3 rounded hover:bg-[{{site.bg-colors.orange-button}}]/80 transition duration-300">Go to Home</a>
   </div>
 </div>
diff --git a/_events/kec-lite.markdown b/_events/kec-lite.markdown
@@ -24,22 +24,22 @@ custom_layout: true
 
 <!-- Content -->
 <div class="container py-10 px-2 mx-auto items-center">
-  <h2 class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8">
+  <h2 class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8">
     KEC LITE: A Premier Technical Exhibition
   </h2>
 
   <!-- Image Needs to be changed later-->
-  <div class="w-full h-[518.54px] bg-cover bg-center rounded-[24px] mx-auto" style="background-image: url('../assets/images/events/kec-lite-2024.png'); background-size: contain; background-repeat: no-repeat;">
+  <div class="w-full h-[518.54px] bg-cover bg-center rounded-[24px] mx-auto" style="background-image: url('../assets/images/events/kec-lite-2024/banner.jpg'); background-size: contain; background-repeat: no-repeat;">
   </div>
 
 
   <!-- Description -->
-  <p class="text-[16px] leading-[120%] font-normal text-black mx-auto mt-4">
+  <p class="text-[16px] leading-[120%] font-inter font-normal text-black mx-auto mt-4">
     KEC LITE (Learning and Innovating Technology for Enhancement) is an annual two-day inter-college technical exhibition organized by Kantipur Engineering College. The event is a platform for showcasing the talents and abilities of engineering and science students from different colleges and universities.
   </p>
 
   <!-- Overview -->
-  <div class="mx-auto mt-4">
+  <div class="font-inter mx-auto mt-4">
     <h3 class="text-[24px] font-bold text-black">Overview of KEC LITE</h3>
     <p class="text-[16px] leading-[120%] font-normal text-black">
       <b>Date:</b> Annually in February<br>
@@ -51,7 +51,7 @@ custom_layout: true
   </div>
 
   <!-- Events -->
-  <div class="mx-auto mt-4">
+  <div class="font-inter mx-auto mt-4">
     <h3 class="text-[24px] font-bold text-black">Major Events under KEC Computer Club</h3>
     <p class="text-[16px] leading-[120%] font-normal text-black">
       The Computer Club at KEC plays a crucial role in KEC LITE by hosting events that focus on software and programming-related activities. Major events include:
@@ -66,7 +66,7 @@ custom_layout: true
   </div>
 
   <!-- Objectives-->
-  <div class="mx-auto mt-4">
+  <div class="font-inter mx-auto mt-4">
     <h3 class="text-[24px] font-bold text-black">Objectives of KEC LITE</h3>
     <ol class="list-decimal list-inside">
         <li>To provide students with a platform to develop practical knowledge and sharpen their technical skills.</li>
@@ -77,7 +77,7 @@ custom_layout: true
   </div>
 
   <!-- Contributing -->
-  <div class="mx-auto mt-4">
+  <div class="font-inter mx-auto mt-4">
     <h3 class="text-[24px] font-bold text-black">Contribution Opportunities</h3>
     <p class="text-[16px] leading-[120%] font-normal text-black">
       KEC LITE thrives on student participation and collaboration. If you're a student or tech enthusiast, join the Computer Club to get involved in organizing or competing in KEC LITE. Whether you're interested in hackathons, software development, or simply learning from industry experts, this is the place to build your skills and network.<br>Stay connected with the Computer Club for updates on upcoming events and opportunities to participate in KEC LITE and other exciting activities!

diff --git a/_includes/brands_colab.html b/_includes/brands_colab.html
@@ -1,9 +1,9 @@
 <section id="Brands-Collaboration" data-aos="fade-right">
   <div
-    class=" bg-[{{site.bg-colors.gray}}] flex flex-col justify-center gap-3 py-12 mt-4"
+    class=" bg-[{{site.bg-colors.gray}}] flex flex-col justify-center gap-3 pb-12 pt-8 mt-4"
   >
     <div
-      class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+      class="font-montserrat text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
     >
       Brands We Have Collaborated With
     </div>

diff --git a/_includes/executive-members-list.html b/_includes/executive-members-list.html
@@ -1,12 +1,12 @@
 <div class="py-8 px-10 2xl:px-72 xl:px-44 lg:px-16 md:px-28 sm:px-6" data-aos="fade-up">
     <h2
-      class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+      class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
     >
       Executive Members
     </h2>
 
     <!-- Toggle for Years -->
-    <div class="flex justify-center" data-aos="fade-up">
+    <div class="font-inter flex justify-center" data-aos="fade-up">
       <button
         id="btn-2024"
         class="toggle-btn font-bold border-4 border-[{{site.bg-colors.orange-button}}] bg-[{{site.bg-colors.orange-button}}] hover:bg-[{{site.bg-colors.orange-button}}]/90 text-white py-2 px-4 rounded-full mr-2"
@@ -40,7 +40,7 @@
             class="w-[300px] h-[300px] object-cover mb-4 2xl:mt-2 rounded-md"
           />
         </div>
-        <span class="text-start">
+        <span class="font-inter text-start">
           <h3 class="text-xl font-semibold text-center text-white">
             {{ member.name }}
           </h3>
@@ -50,7 +50,7 @@ <h3 class="text-xl font-semibold text-center text-white">
         <div
           class="description absolute inset-0 bg-[{{site.bg-colors.orange-button}}] cursor-pointer flex flex-col justify-between items-center text-white p-4 text-center rounded-lg opacity-0 transition-opacity duration-300 ease-in-out"
         >
-          <div class="flex-grow flex items-center justify-center">
+          <div class="font-inter flex-grow flex items-center justify-center">
             <p>{{ member.description }}</p>
           </div>
           <div class="social-icons flex justify-end w-full space-x-4 px-4 pb-4">
@@ -85,7 +85,7 @@ <h3 class="text-xl font-semibold text-center text-white">
             class="w-[300px] h-[300px] object-cover 2xl:mt-2 mb-4 rounded-md"
           />
         </div>
-        <span class="text-start">
+        <span class="font-inter text-start">
           <h3 class="text-xl font-semibold text-center text-white">
             {{ member.name }}
           </h3>
@@ -94,7 +94,7 @@ <h3 class="text-xl font-semibold text-center text-white">
         <div
           class="description absolute inset-0 bg-[{{site.bg-colors.orange-button}}] cursor-pointer flex flex-col justify-between items-center text-white p-4 text-center rounded-lg opacity-0 transition-opacity duration-300 ease-in-out"
         >
-          <div class="flex-grow flex items-center justify-center">
+          <div class="font-inter flex-grow flex items-center justify-center">
             <p>{{ member.description }}</p>
           </div>
           <div class="social-icons flex justify-end w-full space-x-4 px-4 pb-4">

diff --git a/_includes/executive-members.html b/_includes/executive-members.html
@@ -1,6 +1,6 @@
 <div class="py-8 px-10 2xl:px-72 xl:px-44 lg:px-16 md:px-28 sm:px-6" data-aos="fade-up">
   <h2
-    class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+    class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
   >
     Executive Members
   </h2>
@@ -22,7 +22,7 @@
           class="w-[300px] h-[300px] object-cover mb-4 2xl:mt-2 rounded-md"
         />
       </div>
-      <span class="text-start">
+      <span class="font-inter text-start">
         <h3 class="text-xl font-semibold text-center text-white">
           {{ member.name }}
         </h3>
@@ -32,7 +32,7 @@ <h3 class="text-xl font-semibold text-center text-white">
       <div
         class="description absolute inset-0 bg-[{{site.bg-colors.orange-button}}] cursor-pointer flex flex-col justify-between items-center text-white p-4 text-center rounded-lg opacity-0 transition-opacity duration-300 ease-in-out"
       >
-        <div class="flex-grow flex items-center justify-center">
+        <div class="font-inter flex-grow flex items-center justify-center">
           <p>{{ member.description }}</p>
         </div>
         <div class="social-icons flex justify-end w-full space-x-4 px-4 pb-4">

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -4,13 +4,13 @@
   >
     <!-- Left Section: Contact Info -->
     <div class="text-center md:text-left">
-      <h2 class="md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
-      <p class="mb-2 gap-4 flex md:text-base text-sm items-center">
+      <h2 class="font-montserrat md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
+      <p class="font-inter mb-2 gap-4 flex md:text-base text-sm items-center">
         <i class="fas fa-location-dot"></i>
         Ground Floor, Teachers Block, KEC Marg Mathillo, Dhapakhel 23, Lalitpur,
         44700 NP
       </p>
-      <p class="mb-2 gap-3 md:text-base text-sm flex items-center">
+      <p class="font-inter mb-2 gap-3 md:text-base text-sm flex items-center">
         <i class="fa-solid fa-phone"></i>
         <span>
           <a href="tel:+977-1-5229204" class="hover:text-gray-400"
@@ -21,7 +21,7 @@ <h2 class="md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
           ></span
         >
       </p>
-      <p class="mb-4 gap-4 md:text-base text-sm flex items-center">
+      <p class="font-inter mb-4 gap-4 md:text-base text-sm flex items-center">
         <i class="fa-solid fa-envelope"></i>
         <a href="mailto:computerclub@kec.edu.np" class="hover:text-gray-400">
           {{site.email}}
@@ -32,52 +32,52 @@ <h2 class="md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
         <a
           href="https://www.facebook.com/{{ site.facebook_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-facebook"></i
         ></a>
         <a
           href="https://www.instagram.com/{{ site.instagram_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-instagram"></i
         ></a>
         <a
           href="https://www.linkedin.com/{{ site.linkedin_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-linkedin"></i
         ></a>
         <a
           href="https://github.com/{{ site.github_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-github"></i
         ></a>
         <a
           href="https://twitter.com/{{ site.twitter_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-twitter"></i
         ></a>
       </div>
     </div>
 
     <!-- Right Section: Newsletter Subscription -->
     <div class="mt-6 md:mt-0 text-center">
-      <h2 class="md:text-2xl text-base font-bold mb-4 text-start">
-        Subscribe to our newsletter
+      <h2 class="font-montserrat md:text-2xl text-base font-bold mb-4 text-start">
+        Subscribe to our Newsletter
       </h2>
       <form class="flex justify-center items-center bg-gray-500 p-2 rounded-lg">
         <div class="bg-gray-300 p-1 rounded-l-lg flex items-center">
           <input
             type="email"
             placeholder="example@gmail.com"
-            class="p-2 rounded-lg focus:outline-none text-black bg-transparent"
+            class="font-inter p-2 rounded-lg focus:outline-none text-black bg-transparent"
           />
         </div>
         <button
           type="submit"
-          class="bg-[{{site.bg-colors.orange-button}}] text-white px-4 py-3 rounded-r-lg hover:bg-[{{site.bg-colors.orange-button}}]/80"
+          class="bg-[{{site.bg-colors.orange-button}}] font-inter text-white px-4 py-3 rounded-r-lg hover:bg-[{{site.bg-colors.orange-button}}]/80"
         >
           Subscribe
         </button>
@@ -87,12 +87,13 @@ <h2 class="md:text-2xl text-base font-bold mb-4 text-start">
 
   <!-- Footer Bottom -->
 </footer>
-<div class="p-3 text-white border-gray-600 bg-[{{site.bg-colors.baseBlack}}]">
+<div class="font-inter p-3 text-white border-gray-600 bg-[{{site.bg-colors.baseBlack}}]">
   <div
     class="container mx-auto flex flex-col md:flex-row justify-between items-center"
   >
     <p class="text-sm text-center">
-      &copy; 2024 KEC Computer Club | All Rights Reserved
+      &copy; 2024  <a href="https://linktr.ee/computerclubkec"
+      target="_blank" class="font-bold hover:text-gray-400">KEC Computer Club</a> | All Rights Reserved
     </p>
     <p class="text-sm text-center">
       Designed & Developed by

diff --git a/_includes/header.html b/_includes/header.html
@@ -6,9 +6,12 @@
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"
+  rel="stylesheet">
 
 <link rel="icon" type="image/png" href="{{ '/assets/images/favicon.png' | relative_url }}" />
-<link
-  rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+
+<!-- Tailwind config -->
+<script src="/assets/js/tailwind.config.js"></script>
diff --git a/_includes/hero-section.html b/_includes/hero-section.html
@@ -65,27 +65,27 @@
     </div>
 
     <!-- Main Content -->
-    <div class="mx-auto px-4 py-2 md:py-8 flex flex-col justify-center items-center">
+    <div class="mx-auto px-4 py-2 md:py-8 sm:py-8 flex flex-col justify-center items-center">
 
         <!-- Title Section -->
-        <div class="text-center mb-8 max-w-5xl">
-            <h1 class="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight leading-tight">
+        <div class="text-center mb-8 max-w-6xl">
+            <h1 class="font-montserrat text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight leading-tight">
                 {{page.banner-title-1}}
             </h1>
             <h1
-                class="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4 tracking-tight leading-tight">
+                class="font-montserrat text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4 tracking-tight leading-tight">
                 {{page.banner-title-2}}
             </h1>
-            <p class="text-lg sm:text-xl md:text-3xl text-blue-300 font-semibold mb-4">
+            <p class="font-inter text-lg sm:text-xl md:text-3xl text-blue-300 font-semibold mb-4">
                 {{page.banner-tagline}}
             </p>
-            <p class="text-sm md:text-lg text-gray-300 mb-2 max-w-4xl mx-auto">
+            <p class="font-inter text-sm md:text-lg text-gray-300 mb-2 max-w-4xl mx-auto">
                 {{page.banner-description}}
             </p>
         </div>
 
         <!-- Call to Action Buttons -->
-        <div class="flex flex-col sm:flex-row gap-4 mb-8">
+        <div class="font-inter flex flex-col sm:flex-row gap-4 mb-8">
             <a href="https://forms.gle/ySK2ux6zbZ5dC7qX8" target="_blank"
                 class="px-6 sm:px-8 py-3 text-base sm:text-lg font-semibold rounded-lg bg-[{{site.bg-colors.orange-button}}] text-white hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300 flex items-center justify-center gap-2 group">
                 <i class="fas fa-user-plus text-lg group-hover:scale-110 transition-transform"></i>

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -19,7 +19,7 @@
 
     <div class="hidden md:flex items-center relative">
         <ul
-            class="flex text-base sm:text-sm md:text-base lg:text-lg text-[{{ site.text-colors.gray }}]/80"
+            class="flex font-inter text-base sm:text-sm md:text-base lg:text-lg text-[{{ site.text-colors.gray }}]/80"
         >
             <li>
                 <a
@@ -162,7 +162,8 @@
         <div>
             <a
                 href="{{ '/contact' }}"
-                class="bg-[{{site.bg-colors.darkBlue}}] ml-8 text-white px-3 py-2 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-4 lg:py-3 rounded-lg hover:bg-gray-800 text-sm sm:text-sm md:text-base lg:text-lg whitespace-nowrap transition-all duration-300"
+                class="bg-[{{site.bg-colors.darkBlue}}] ml-8 font-inter text-white px-3 py-2 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-4 lg:py-3 rounded-lg hover:bg-gray-800 text-sm sm:text-sm md:text-base lg:text-lg whitespace-nowrap transition-all duration-300"
+
                 id="contact-page"
                 >Contact us</a
             >
@@ -193,7 +194,7 @@
 <!-- responsive navbar for smaller screens -->
 <div id="mobileMenu" class="hidden fixed top-16 w-full md:hidden z-20">
     <ul
-        class="flex flex-col font-semibold text-base sm:text-base border border-[{{site.bg-colors.gray}}] text-[{{ site.text-colors.gray }}] bg-[{{ site.bg-colors.gray }}]"
+        class="flex flex-col font-inter font-semibold text-base sm:text-base border border-[{{site.bg-colors.gray}}] text-[{{ site.text-colors.gray }}] bg-[{{ site.bg-colors.gray }}]"
     >
         <li>
             <a

diff --git a/_includes/open-source-contributors.html b/_includes/open-source-contributors.html
@@ -1,6 +1,6 @@
 <div class="py-8 px-10 2xl:px-72 xl:px-44 lg:px-16 md:px-28 sm:px-6" data-aos="fade-up">
   <h2
-    class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+    class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
   >
     Open-Source Contributors
   </h2>
@@ -22,7 +22,7 @@
           class="w-[300px] h-[300px] object-cover mb-4 2xl:mt-2 rounded-md"
         />
       </div>
-      <span class="text-start">
+      <span class="font-inter text-start">
         <h3 class="text-xl font-semibold text-center text-white">
           {{ contributors.name }}
         </h3>
@@ -32,7 +32,7 @@ <h3 class="text-xl font-semibold text-center text-white">
       <div
         class="description absolute inset-0 bg-[{{site.bg-colors.orange-button}}] cursor-pointer flex flex-col justify-between items-center text-white p-4 text-center rounded-lg opacity-0 transition-opacity duration-300 ease-in-out"
       >
-        <div class="flex-grow flex items-center justify-center">
+        <div class="font-inter flex-grow flex items-center justify-center">
           <p>{{ contributors.description }}</p>
         </div>
         <div class="social-icons flex justify-end w-full space-x-4 px-4 pb-4">