Merge pull request #32 from khaykingleb/use-different-font

feat(font): use gill-sans

Author: khaykingleb

app/components/atoms/Copyright.tsx

@@ -1,6 +1,6 @@
 export const Copyright = () => {
   return (
-    <div className="mb-2 text-center">
+    <div className="font-gill-sans-regular mb-2 text-center">
       <p>&copy; 2024 Gleb Khaykin</p>
     </div>
   );

app/components/molecules/MenuItems.tsx

@@ -2,12 +2,9 @@ import { Link } from "@remix-run/react";
 
 export const MenuItems = () => {
   return (
-    <ul className="menu menu-horizontal menu-md text-white">
+    <ul className="menu menu-horizontal menu-md">
       <li>
-        <Link
-          to="/blog"
-          className="font-eb-garamond-black btn btn-ghost text-base sm:text-xl"
-        >
+        <Link to="/blog" className="btn btn-ghost text-xl sm:text-2xl">
           Blog
         </Link>
       </li>
@@ -16,16 +13,13 @@ export const MenuItems = () => {
           to="/Gleb_Khaykin.pdf"
           prefetch="intent"
           target="_blank"
-          className="font-eb-garamond-black btn btn-ghost text-base sm:text-xl"
+          className="btn btn-ghost text-xl sm:text-2xl"
         >
           CV
         </Link>
       </li>
       <li>
-        <Link
-          to="/"
-          className="font-eb-garamond-black btn btn-ghost text-base sm:text-xl"
-        >
+        <Link to="/" className="btn btn-ghost text-xl sm:text-2xl">
           About
         </Link>
       </li>

app/components/molecules/MobileMenuItems.tsx

@@ -4,14 +4,11 @@ import { IoMdMenu } from "react-icons/io";
 export const MobileMenuItems = () => (
   <details className="dropdown dropdown-end">
     <summary className="btn btn-circle btn-ghost">
-      <IoMdMenu className="h-6 w-6 text-white" />
+      <IoMdMenu className="h-6 w-6" />
     </summary>
-    <ul className="menu dropdown-content absolute right-0 z-[1] mt-2 w-28 rounded-lg bg-white shadow-lg">
+    <ul className="menu dropdown-content absolute right-0 z-[1] mt-2 w-28 rounded-lg bg-white text-black shadow-lg">
       <li>
-        <Link
-          to="/blog"
-          className="font-eb-garamond-bold btn btn-ghost text-base hover:bg-gray-100"
-        >
+        <Link to="/blog" className="btn btn-ghost text-base hover:bg-gray-100">
           Blog
         </Link>
       </li>
@@ -21,17 +18,14 @@ export const MobileMenuItems = () => (
           to="/Gleb_Khaykin.pdf"
           prefetch="intent"
           target="_blank"
-          className="font-eb-garamond-bold btn btn-ghost text-base hover:bg-gray-100"
+          className="btn btn-ghost text-base hover:bg-gray-100"
         >
           CV
         </Link>
       </li>
       <hr className="my-1 border-t border-gray-200" />
       <li>
-        <Link
-          to="/"
-          className="font-eb-garamond-bold btn btn-ghost text-base hover:bg-gray-100"
-        >
+        <Link to="/" className="btn btn-ghost text-base hover:bg-gray-100">
           About
         </Link>
       </li>

app/components/molecules/TagSearchBar.tsx

@@ -24,14 +24,14 @@ const TextInput = ({
 }: TextInputProps) => {
   return (
     <div className="relative">
-      <FaSearch className="absolute left-1 top-1/2 -translate-y-1/2 text-gray-400" />
+      <FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
       <input
         type="text"
         value={value}
         onChange={onChange}
         placeholder={placeholder}
         onFocus={onFocus}
-        className="input input-bordered h-8 w-full pl-6 pr-6 text-sm"
+        className="input input-bordered left-3 h-8 w-full pl-8 pr-6 text-sm"
       />
       {value && (
         <button
@@ -70,7 +70,7 @@ const TagItem = ({ name, onClick, checked, isFocused }: TagItemProps) => {
       >
         {checked && <FaCheck className="text-xs text-white" />}
       </span>
-      <span className="text-sm font-medium">{name}</span>
+      <span className="font-gill-sans-regular text-sm">{name}</span>
     </div>
   );
 };
@@ -191,7 +191,7 @@ export const TagSearchBar = ({
 
   return (
     <div
-      className="font-eb-garamond-light relative mx-auto mt-6 w-full max-w-xs"
+      className="font-gill-sans-light relative mx-auto mt-6 w-full max-w-xs"
       ref={TagSearchBarRef}
       onKeyDown={handleKeyDown}
       role="combobox"

app/components/organisms/Carousel.tsx

@@ -4,7 +4,7 @@ import { Post } from "~/data/posts";
 
 export const Carousel = ({ items }: { items: Post[] }) => {
   return (
-    <div className="mb-2 mt-2 w-full max-w-2xl">
+    <div className="mb-2 mt-2">
       {items.length > 0 ? (
         <div className="carousel carousel-vertical h-full w-full">
           {items.map((item) => (
@@ -14,13 +14,13 @@ export const Carousel = ({ items }: { items: Post[] }) => {
               className="carousel-item block w-full cursor-pointer transition-all duration-300 hover:bg-gray-100"
             >
               <div className="w-full p-3">
-                <h2 className="font-eb-garamond-black mb-1 text-lg font-bold">
+                <h2 className="font-gill-sans-semibold mb-1 text-lg">
                   {item.title}
                 </h2>
-                <p className="font-eb-garamond-light mb-2 text-sm">
+                <p className="font-gill-sans-light mb-2 text-sm">
                   Created at {item.publishDate.replace(/-/g, "/")}
                 </p>
-                <div className="font-eb-garamond-light">
+                <div className="font-gill-sans-regular">
                   {item.tags.map((tag) => (
                     <span
                       key={tag}
@@ -36,7 +36,7 @@ export const Carousel = ({ items }: { items: Post[] }) => {
         </div>
       ) : (
         <div className="pt-52 text-center">
-          <p className="font-eb-garamond-bold text-xl">No posts found</p>
+          <p className="font-gill-sans-bold text-xl">No posts found</p>
         </div>
       )}
     </div>

app/components/organisms/Header.tsx

@@ -7,18 +7,16 @@ interface HeaderProps {
 
 export const Header = ({ backgroundImage }: HeaderProps) => {
   return (
-    <header className="relative flex h-16 items-center px-4 sm:px-6 lg:px-8">
+    <header className="h-18 relative flex items-center px-4 sm:px-6 lg:px-8">
       <div
         className="absolute inset-0 bg-cover bg-center"
         style={{
           backgroundImage: `url(${backgroundImage})`,
         }}
       ></div>
       <div className="absolute inset-0 bg-gradient-to-b from-black/20 to-black/20"></div>
-      <div className="relative z-10 mx-auto flex w-full max-w-[700px] items-center justify-between">
-        <span className="font-eb-garamond-black text-xl text-white sm:text-2xl">
-          ~/khaykingleb
-        </span>
+      <div className="font-gill-sans-bold relative z-10 mx-auto flex w-full max-w-[800px] items-center justify-between text-white">
+        <span className="text-xl sm:text-2xl">~/khaykingleb</span>
         <nav className="hidden sm:block">
           <MenuItems />
         </nav>

app/routes/_index.tsx

@@ -35,7 +35,7 @@ export default function IndexRoute() {
         <Avatar />
       </div>
       <div className="flex-grow">
-        <div className="font-eb-garamond-light mx-auto max-w-[500px] px-4 text-center text-sm sm:text-base">
+        <div className="font-gill-sans-regular mx-auto max-w-[550px] px-4 text-center text-sm sm:text-base">
           <p className="mb-3">
             Hi there! I&apos;m Gleb, a full-stack developer specializing in
             DevOps and MLOps engineering. My background includes distributed

app/routes/blog.$slug.tsx

@@ -153,7 +153,7 @@ export default function BlogPostRoute() {
     <div className="flex min-h-screen flex-col">
       <Header backgroundImage="/img/van_gogh_wheatfield_with_crows.jpg" />
       <main className="flex-grow px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto flex min-h-[calc(100vh-4rem-6rem)] max-w-[700px] flex-col">
+        <div className="mx-auto flex min-h-[calc(100vh-4rem-6rem)] max-w-[800px] flex-col">
           <Suspense fallback={<LoadingSpinner />}>
             <Await resolve={recordMap}>
               {(resolvedRecordMap: ExtendedRecordMap) => {

app/routes/blog._index.tsx

@@ -89,7 +89,7 @@ export default function BlogRoute() {
     <div className="flex min-h-screen flex-col">
       <Header backgroundImage="/img/van_gogh_wheatfield_with_crows.jpg" />
       <main className="flex flex-grow flex-col px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto flex h-full w-full max-w-[700px] flex-grow flex-col">
+        <div className="mx-auto flex h-full w-full max-w-[800px] flex-grow flex-col">
           <TagSearchBar tagOptions={tagOptions} setTagOptions={setTagOptions} />
           <div className="flex-grow">
             <Carousel

app/styles/notion.css

@@ -13,8 +13,8 @@
 @tailwind utilities;
 
 @layer utilities {
-  .font-eb-garamond-regular {
-    font-family: "EB Garamond", serif;
+  .font-gill-sans {
+    font-family: "Gill Sans", serif;
   }
 }
 
@@ -24,7 +24,7 @@
 
 .notion-title,
 .notion-asset-caption {
-  @apply font-eb-garamond-regular text-center;
+  @apply font-gill-sans text-center;
 }
 
 .notion-table-of-contents,
@@ -33,9 +33,7 @@
 .notion-h3,
 .notion-list,
 .notion-text {
-  @apply font-eb-garamond-regular;
-
-  max-width: 100%;
+  @apply font-gill-sans;
 }
 
 .notion-title {

app/styles/tailwind.css

@@ -1,43 +1,47 @@
-@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer utilities {
-  .font-eb-garamond-thin {
-    font-family: "EB Garamond", serif;
+  .font-gill-sans-thin {
+    font-family: "Gill Sans", sans-serif;
     font-weight: 100;
     font-style: normal;
   }
 
-  .font-eb-garamond-light {
-    font-family: "EB Garamond", serif;
+  .font-gill-sans-light {
+    font-family: "Gill Sans", sans-serif;
     font-weight: 300;
     font-style: normal;
   }
 
-  .font-eb-garamond-regular {
-    font-family: "EB Garamond", serif;
+  .font-gill-sans-regular {
+    font-family: "Gill Sans", sans-serif;
     font-weight: 400;
     font-style: normal;
   }
 
-  .font-eb-garamond-medium {
-    font-family: "EB Garamond", serif;
+  .font-gill-sans-medium {
+    font-family: "Gill Sans", sans-serif;
     font-weight: 500;
     font-style: normal;
   }
 
-  .font-eb-garamond-bold {
-    font-family: "EB Garamond", serif;
+  .font-gill-sans-semibold {
+    font-family: "Gill Sans", sans-serif;
+    font-weight: 600;
+    font-style: normal;
+  }
+
+  .font-gill-sans-bold {
+    font-family: "Gill Sans", sans-serif;
     font-weight: 700;
     font-style: normal;
   }
 
-  .font-eb-garamond-black {
-    font-family: "EB Garamond", serif;
-    font-weight: 900;
+  .font-gill-sans-extrabold {
+    font-family: "Gill Sans", sans-serif;
+    font-weight: 800;
     font-style: normal;
   }
 }