Skip to content

Commit

Permalink
refactor : change font in blog website
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-mansi-d
cp-mansi-d committed Aug 10, 2023
1 parent 932bc06 commit b568134
Show file tree
Hide file tree
Showing 14 changed files with 86 additions and 56 deletions.
30 changes: 27 additions & 3 deletions assets/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,30 @@
src: url(./../fonts/Poppins-Medium.woff2);
}

@font-face {
font-family: "WorkSans Regular";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./../fonts/WorkSans-Regular.woff2);
}

@font-face {
font-family: "WorkSans Medium";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./../fonts/WorkSans-Medium.woff2);
}

@font-face {
font-family: "WorkSans SemiBold";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(./../fonts/WorkSans-SemiBold.woff2);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
Expand Down Expand Up @@ -118,7 +142,7 @@ input:-webkit-autofill:active {
}

body {
@apply font-product-regular break-words text-[#000000d6];
@apply font-worksans-regular break-words text-[#000000d6];
}

.content > p {
Expand Down Expand Up @@ -189,15 +213,15 @@ ul {
}

strong {
@apply font-product-black tracking-wide;
@apply font-worksans-medium tracking-normal !text-black-core/[0.87] !font-medium;
}

h1 strong {
@apply text-[1.8rem] lg:text-[2rem];
}

h2 strong {
@apply text-[1.5rem] lg:text-[1.7rem];
@apply text-[1.5rem] lg:text-[1.7rem] font-worksans-semibold;
}

/* HighlightJS */
Expand Down
Binary file added assets/fonts/WorkSans-Medium.woff2
View file
Binary file not shown.
Binary file added assets/fonts/WorkSans-Regular.woff2
View file
Binary file not shown.
Binary file added assets/fonts/WorkSans-SemiBold.woff2
View file
Binary file not shown.
8 changes: 4 additions & 4 deletions components/authorDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ export default function AuthorDetails({ postData }) {
</div>
{postData.authorBio ? (
<>
<div className="text-[1rem] leading-snug tracking-wide text-center">
<div className="text-[1rem] leading-snug tracking-normal text-center">
{postData.authorBio}
</div>
<div className="!mt-7 text-[0.9rem] capitalize">
<div className="!mt-7 text-[0.9rem] capitalize tracking-normal">
{postData.authorRole}
</div>
</>
Expand Down Expand Up @@ -58,13 +58,13 @@ export default function AuthorDetails({ postData }) {
{postData.authorName}
</div>
{postData.authorBio ? (
<div className="text-[1rem] leading-snug tracking-wide">
<div className="text-[1rem] leading-snug tracking-normal">
{postData.authorBio}
</div>
) : (
""
)}
<div className="text-[0.9rem] capitalize">
<div className="text-[0.9rem] capitalize tracking-normal">
{postData.authorRole}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/comments/commentForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export default function CommentForm({ post, onNewComment, recaptchaRef }) {
}, [formRef]);

return (
<div className="container py-20 tracking-wide">
<div className="flex items-center pb-5 font-semibold text-xl">
<div className="container py-20 tracking-normal">
<div className="flex items-center pb-5 font-worksans-semibold text-xl">
<FontAwesomeIcon
icon={faMessage}
className="w-7 h-7 pr-2 text-pink-300"
Expand Down
8 changes: 4 additions & 4 deletions components/posts/postsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function PostsList({ postData, mixpanel }) {
key={i}
>
<Link href={"/" + post.slug}>
<div className="flex flex-row space-x-2 items-center text-[1rem] md:text-[1.03rem] leading-5 tracking-wide capitalize">
<div className="flex flex-row space-x-2 items-center text-[1rem] md:text-[1.03rem] leading-5 tracking-normal capitalize">
<div className="relative w-[30px] md:w-[31px] h-[30px] max-w-full max-h-full overflow-hidden">
<Image
width={30}
Expand All @@ -42,14 +42,14 @@ export default function PostsList({ postData, mixpanel }) {
alt={post.authorAltText}
/>
</div>
<span className="font-medium">{post.authorName}</span>
<span className="font-worksans-medium">{post.authorName}</span>
<span className="after:content-['\00B7']"></span>
<span className="text-gray-600">{post.published_on}</span>
</div>
<div className="grid grid-cols-3 gap-10 md:gap-12 xl:gap-16 mt-4">
<div className="col-span-2">
<div
className="mb-2 lg:mb-3.5 text-[1.2rem] md:text-[1.4rem] xl:text-[1.7rem] font-semibold leading-7 md:leading-tight tracking-wide line-clamp-2 lg:line-clamp-4"
className="mb-2 lg:mb-3.5 text-[1.2rem] md:text-[1.4rem] xl:text-[1.7rem] leading-7 md:leading-tight tracking-tight line-clamp-2 lg:line-clamp-4 font-worksans-semibold"
onClick={() => {
mixpanel.track("tap_blog_title", {
Title: post.title,
Expand All @@ -58,7 +58,7 @@ export default function PostsList({ postData, mixpanel }) {
>
{post.title}
</div>
<div className="mb-3 text-gray-600 text-[1rem] md:text-[1.06rem] xl:text-[1.12rem] leading-6 md:leading-7 tracking-wide line-clamp-1 md:line-clamp-2 xl:line-clamp-3">
<div className="mb-3 text-gray-600 text-[1rem] md:text-[1.06rem] xl:text-[1.12rem] leading-6 md:leading-7 tracking-normal line-clamp-1 md:line-clamp-2 xl:line-clamp-3">
{post.summary}
</div>
</div>
Expand Down
14 changes: 8 additions & 6 deletions components/posts/recommandedPosts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function RecommandedPosts({ postData }) {

return (
<>
<span className="text-[1.7rem] lg:text-[2rem] xl:text-[1.6rem] font-semibold tracking-wide capitalize">
<span className="text-[1.7rem] lg:text-[2rem] xl:text-[1.6rem] capitalize font-worksans-semibold">
Recommended for you
</span>
<div className="mt-8">
Expand All @@ -28,7 +28,7 @@ export default function RecommandedPosts({ postData }) {
<Link href={"/" + post.slug} key={i}>
<div className="grid grid-cols-3 xl:grid-cols-2 gap-5 xl:gap-2 2xl:gap-5 items-end mb-10 xl:mb-6 2xl:mb-8">
<div className="flex flex-col col-span-2 space-y-2">
<div className="flex flex-row space-x-2 items-center text-[0.8rem] md:text-[0.9rem] xl:text-[0.8rem] tracking-wider capitalize">
<div className="flex flex-row space-x-2 items-center text-[0.8rem] md:text-[0.9rem] xl:text-[0.8rem] capitalize">
<div className="relative w-[24px] h-[24px] md:w-[30px] md:h-[30px] xl:w-[24px] xl:h-[24px] max-w-full max-h-full overflow-hidden">
<Image
width={30}
Expand All @@ -38,11 +38,13 @@ export default function RecommandedPosts({ postData }) {
alt={post.authorAltText}
/>
</div>
<span className="font-medium">{post.authorName}</span>
<span className="font-worksans-medium tracking-wide">
{post.authorName}
</span>
</div>

<div
className="text-[1rem] sm:text-[1.1rem] md:text-[1.25rem] xl:text-[1rem] font-bold leading-[1.27rem] md:leading-[1.7rem] xl:leading-5 tracking-[0.06rem] xl:line-clamp-3"
className="text-[1rem] sm:text-[1.1rem] md:text-[1.25rem] xl:text-[1.01rem] leading-[1.27rem] md:leading-[1.7rem] xl:leading-5 tracking-[0.01rem] xl:line-clamp-3 text-[#000000] font-medium font-worksans-medium"
onClick={() => {
mixpanel.track("tap_blog_title", {
Title: post.title,
Expand All @@ -51,12 +53,12 @@ export default function RecommandedPosts({ postData }) {
>
{post.title}
</div>
<div className="xl:hidden text-gray-600 text-[1rem] md:text-[1.06rem] leading-6 md:leading-7 tracking-wide">
<div className="xl:hidden text-gray-600 text-[1rem] md:text-[1.06rem] leading-6 md:leading-7">
<span className="line-clamp-1 lg:line-clamp-2">
{post.summary}
</span>
</div>
<div className="hidden xl:block text-gray-600 text-[0.9rem] tracking-wider">
<div className="hidden xl:block text-gray-600 text-[0.9rem]">
<span>{post.readingTime} min read | </span>
<span>Published on {post.published_on}</span>
</div>
Expand Down
15 changes: 8 additions & 7 deletions pages/[slug].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,10 +291,10 @@ export default function Post({ postData, status, posts, mixpanel }) {
</div>

<div className="flex flex-col space-y-5 md:text-white ">
<h1 className="text-[2.20rem] lg:text-[2.50rem] xl:text-[2.80rem] font-normal leading-10 lg:leading-tight tracking-wide">
<h1 className="text-[2.20rem] lg:text-[2.50rem] xl:text-[2.80rem] font-normal leading-10 lg:leading-tight tracking-tight">
{post.title}
</h1>
<div className="flex flex-row items-center space-x-4 text-[1rem] leading-6 tracking-wide">
<div className="flex flex-row items-center space-x-4 text-[1rem] leading-6 tracking-normal">
<div className="w-5 h-5">
<FontAwesomeIcon
icon={faClock}
Expand All @@ -317,7 +317,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
</div>
</div>
{tagsString ? (
<div className="flex flex-row 3xl:items-center space-x-3 text-[1rem] leading-6 tracking-wide">
<div className="flex flex-row 3xl:items-center space-x-3 text-[1rem] leading-6 tracking-normal">
<div className="sm:basis-6 w-5 h-5 mt-1.5 sm:mt-0.5 xl:mt-1.5 3xl:mt-0">
<FontAwesomeIcon
icon={faTags}
Expand All @@ -331,7 +331,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
) : (
""
)}
<div className="text-[1rem] md:text-[1.09rem] xl:text-[1.13rem] leading-6 md:leading-7 tracking-wide">
<div className="text-[1rem] md:text-[1.09rem] xl:text-[1.13rem] leading-6 md:leading-7 tracking-normal">
{post.summary}
</div>
<div className="grid grid-cols-2 items-center text-sm">
Expand Down Expand Up @@ -445,14 +445,14 @@ export default function Post({ postData, status, posts, mixpanel }) {
: "xl:space-x-10 2xl:space-x-20 xl:mx-8 2xl:mx-20 3xl:mx-32"
} mx-2 lg:mx-24 rounded-3xl text-[1.125rem]`}
>
<div className="relative w-full xl:w-[45%]">
<div className="relative w-full xl:w-[45%] tracking-tight">
<div className="xl:sticky top-[7.5rem] flex flex-col">
{indexContent != null ? (
<div className="w-full h-fit border border-1 border-black-900 rounded-[12px]">
<div className="rounded-t-[12px] bg-gray-100 py-5 pl-4">
Table of contents
</div>
<div className="pl-5 pr-6 lg:pl-4 lg:pr-4 2xl:pl-5 2xl:pr-6 tracking-[0.02em] leading-relaxed">
<div className="pl-5 pr-6 lg:pl-4 lg:pr-4 2xl:pl-5 2xl:pr-6 leading-relaxed">
<div className="mt-4 text-[1.125rem] text-[#374151] list-none ">
<div
className="my-3"
Expand All @@ -477,6 +477,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
dangerouslySetInnerHTML={{
__html: blogContent,
}}
className="!tracking-tight"
></div>
<div className="flex flex-row flex-wrap mt-16">
{post.tags
Expand All @@ -485,7 +486,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
<div className="my-4 mr-4" key={tag.id}>
<Link
href={"/tag/" + tag.slug}
className="rounded-full bg-[#f2f2f2] shadow-[4px_4px_4px_rgba(0,0,0,0.19)] px-6 py-2 no-underline capitalize"
className="rounded-full bg-[#f2f2f2] shadow-[4px_4px_4px_rgba(0,0,0,0.19)] px-6 py-2 no-underline capitalize tracking-tight"
onClick={() => {
mixpanel.track(
"tap_tag_" + tag.slug.replace("-", "_"),
Expand Down
2 changes: 1 addition & 1 deletion pages/featured/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function Post({ featurePosts, status, mixpanel }) {
<></>
) : (
<div className="md:mx-8 xl:mx-20 3xl:px-24">
<h1 className="my-6 md:my-10 text-[1.5rem] md:text-[1.8rem] xl:text-[2.2rem] font-semibold leading-7 tracking-wide capitalize">
<h1 className="my-6 md:my-10 text-[1.6rem] md:text-[1.9rem] xl:text-[2.3rem] leading-7 tracking-tight capitalize font-worksans-semibold">
Featured Blogs
</h1>

Expand Down
Loading

0 comments on commit b568134

Please sign in to comment.