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 Sep 8, 2023
1 parent 4d224c4 commit 8623b48
Show file tree
Hide file tree
Showing 27 changed files with 266 additions and 276 deletions.
86 changes: 53 additions & 33 deletions assets/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
@tailwind utilities;

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

@font-face {
Expand All @@ -19,27 +19,27 @@
}

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

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

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

@font-face {
Expand All @@ -51,43 +51,51 @@
}

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

@font-face {
font-family: "Product Sans Black";
font-family: "Poppins Medium";
font-style: normal;
font-weight: 600;
font-weight: 500;
font-display: swap;
src: url(./../fonts/ProductSans-Black.woff2);
src: url(./../fonts/Poppins-Medium.woff2);
}

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

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

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

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

input:-webkit-autofill,
Expand Down Expand Up @@ -118,21 +126,21 @@ input:-webkit-autofill:active {
}

body {
@apply font-product-regular break-words text-[#000000d6];
@apply font-inter-regular break-words text-black-core/[0.87];
}

.content > p {
@apply pb-8;
}

.prose > * {
@apply text-[1.125rem] md:text-[1.27rem] md:leading-[2rem] tracking-[0.04em];
@apply text-lg md:text-[1.1875rem] md:leading-8;
}

.comment input[type="text"],
.comment input[type="email"],
.comment textarea {
@apply my-2 border border-solid border-gray-300 rounded bg-white bg-clip-padding px-3 py-1.5 font-normal text-base text-gray-700 transition ease-in-out focus:border-gray-300 focus:outline-none focus:bg-white focus:text-gray-700;
@apply my-2 border border-solid border-gray-300 rounded bg-white bg-clip-padding px-3 py-1.5 font-normal text-base text-black-core/[0.75] transition ease-in-out focus:border-gray-300 focus:outline-none focus:bg-white focus:text-black-core/[0.75];
}

.comment input[type="submit"] {
Expand All @@ -152,15 +160,15 @@ body {
}

.gradient-border-btn {
@apply border-[1px] border-solid border-transparent rounded-[0.6rem] bg-gradient-to-r from-[#f2709c] via-[#ff909c] to-[#ff9472] shadow-[inset_2px_1000px_1px_#fff] p-[1rem] text-center hover:border-[1px] hover:border-solid hover:border-transparent hover:from-[#f2709c] hover:to-[#ff9472] hover:shadow-none active:scale-[0.98];
@apply border border-solid border-transparent rounded-[0.6rem] bg-gradient-to-r from-[#f2709c] via-[#ff909c] to-[#ff9472] shadow-[inset_2px_1000px_1px_#fff] p-[1rem] text-center hover:border hover:border-solid hover:border-transparent hover:from-[#f2709c] hover:to-[#ff9472] hover:shadow-none active:scale-[0.98];
}

.gradient-border-btn > a > .fab {
@apply text-[#f2709c];
}

.gradient-border-btn > span {
@apply my-0 mx-[6px] text-[#3d3d3d];
@apply my-0 mx-1.5 text-[#3d3d3d];
}

.gradient-border-btn:hover > span,
Expand Down Expand Up @@ -189,15 +197,15 @@ ul {
}

strong {
@apply font-product-black tracking-wide;
@apply font-comme-medium tracking-[0.01em] !text-black-core/[1] !font-medium text-[1.0625rem] md:text-[1.15625rem];
}

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

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

/* HighlightJS */
Expand Down Expand Up @@ -282,17 +290,29 @@ code::after {
@apply content-none !important;
}

.prose h2 {
@apply font-comme-semibold text-[#000] xl:text-[2.0625rem] !mb-4 !tracking-tight;
}

.prose i,
.prose a span {
@apply font-comme-regular text-lg text-black-core/[0.87] tracking-[0.03rem];
}

.prose
:where(code, code strong):not(:where([class~="not-prose"], blockquote code)) {
@apply bg-gray-200 py-0.5 px-1 rounded-[4px] font-[550] tracking-wide font-source-codepro;
@apply bg-gray-200 py-0.5 px-1 rounded font-[550] tracking-wide font-source-codepro;
}

.prose :where(pre code):not(:where([class~="not-prose"] *)) {
@apply bg-transparent text-[#dbe0e0] leading-normal tracking-[-0.022em] !break-normal;
}

.prose :where(blockquote, blockquote i):not(:where([class~="not-prose"] *)) {
@apply not-italic text-[1.4rem] lg:text-[1.755rem] leading-[2.3rem] text-[#757575] font-normal font-inter-light;
.prose
:where(blockquote, blockquote i, blockquote i strong):not(
:where([class~="not-prose"] *)
) {
@apply not-italic !text-[1.4rem] lg:!text-[1.755rem] !leading-[2.3rem] !text-black-core/[0.75] !font-normal tracking-wide font-inter-extralight;
}

.prose
Expand All @@ -308,7 +328,7 @@ code::after {

.category-swiper .swiper-button-next:after,
.category-swiper .swiper-button-prev:after {
@apply px-7 pb-[1rem] pt-1 text-black-900 !text-[12px];
@apply px-7 pb-4 pt-1 text-black-900 !text-xs;
}

.category-swiper .swiper-button-prev:after {
Expand Down
Binary file added assets/fonts/Comme-Light.woff2
View file
Binary file not shown.
Binary file added assets/fonts/Comme-Medium.woff2
View file
Binary file not shown.
Binary file added assets/fonts/Comme-Regular.woff2
View file
Binary file not shown.
Binary file added assets/fonts/Comme-SemiBold.woff2
View file
Binary file not shown.
Binary file removed assets/fonts/Poppins-Light.woff2
View file
Binary file not shown.
Binary file removed assets/fonts/ProductSans-Black.woff2
View file
Binary file not shown.
Binary file removed assets/fonts/ProductSans-Regular.woff2
View file
Binary file not shown.
38 changes: 13 additions & 25 deletions components/authorDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Image from "next/image";

export default function AuthorDetails({ postData }) {
return (
<div className="w-full mt-16 bg-[#f7f7f7] py-0.5 text-[#374151]">
<div className="w-full mt-16 bg-[#f7f7f7] py-0.5 text-black-core/[0.75] font-inter-regular">
<div className="sm:hidden container mx-5">
<hr className="bg-gray-600 w-full py-[0.7px] !mt-2 mb-0" />
<div className="flex flex-col items-center my-5">
Expand All @@ -16,23 +16,15 @@ export default function AuthorDetails({ postData }) {
/>
</div>
<div className="flex flex-col space-y-3 items-center">
<div className="text-[1.7rem] font-product-black tracking-wide text-[#000000d6]">
<div className="text-[1.6875rem] font-inter-semibold tracking-normal text-black-core/[0.87]">
{postData.authorName}
</div>
{postData.authorBio ? (
<>
<div className="text-[1rem] leading-snug tracking-wide text-center">
{postData.authorBio}
</div>
<div className="!mt-7 text-[0.9rem] capitalize">
{postData.authorRole}
</div>
</>
) : (
<div className="text-[0.9rem] capitalize">
{postData.authorRole}
</div>
)}
<div className="text-base leading-normal tracking-normal text-center">
{postData.authorBio}
</div>
<div className="!mt-7 text-[0.8750rem] capitalize tracking-normal">
{postData.authorRole}
</div>
</div>
</div>
<hr className="bg-gray-600 w-full py-[0.5px] !mb-3 mt-0" />
Expand All @@ -54,17 +46,13 @@ export default function AuthorDetails({ postData }) {
postData.authorBio ? "space-y-4" : "space-y-1"
} md:-ml-16 xl:-ml-10 2xl:-ml-16`}
>
<div className="text-[1.7rem] font-product-black tracking-wide text-[#000000d6]">
<div className="text-[1.6875rem] font-inter-semibold tracking-normal text-black-core/[0.87]">
{postData.authorName}
</div>
{postData.authorBio ? (
<div className="text-[1rem] leading-snug tracking-wide">
{postData.authorBio}
</div>
) : (
""
)}
<div className="text-[0.9rem] capitalize">
<div className="text-base leading-normal tracking-normal">
{postData.authorBio}
</div>
<div className="text-[0.8750rem] capitalize tracking-normal">
{postData.authorRole}
</div>
</div>
Expand Down
12 changes: 6 additions & 6 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-inter-semibold text-xl">
<FontAwesomeIcon
icon={faMessage}
className="w-7 h-7 pr-2 text-pink-300"
Expand All @@ -76,7 +76,7 @@ export default function CommentForm({ post, onNewComment, recaptchaRef }) {
required
/>
<div className={`pt-4 ${showForm ? "block" : "hidden"}`} ref={formRef}>
<label className="mb-3 text-lg text-gray-700">Name</label>
<label className="mb-3 text-lg text-black-core/[0.75]">Name</label>
<span className="ml-1 text-red-600">*</span>
<input
id="name"
Expand All @@ -87,7 +87,7 @@ export default function CommentForm({ post, onNewComment, recaptchaRef }) {
placeholder="Your Name"
required
/>
<label className="mb-3 text-lg text-gray-700">Email</label>
<label className="mb-3 text-lg text-black-core/[0.75]">Email</label>
<span className="ml-1 text-red-600">*</span>
<input
id="email"
Expand All @@ -98,8 +98,8 @@ export default function CommentForm({ post, onNewComment, recaptchaRef }) {
placeholder="Your E-mail Address"
required
/>
<button className="relative mt-7 rounded-[12px] border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.8rem] font-bold text-white">
<span className="py-[1.25rem] px-3 hoverable-text text-lg">
<button className="relative mt-7 rounded-xl border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.8rem] font-bold text-white">
<span className="py-5 px-3 hoverable-text text-lg">
Post Comment
</span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions components/comments/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function Comment({ post }) {
>
<div className="flex justify-between items-center">
<div className="flex items-center">
<div className="relative w-[40px] h-[40px] mb-2 md:mb-0">
<div className="relative w-10 h-10 mb-2 md:mb-0">
<Image
className="rounded-full h-full w-full object-cover absolute inset-0"
layout="fill"
Expand Down Expand Up @@ -108,7 +108,7 @@ export default function Comment({ post }) {
<li className="px-5 py-5 bg-white border border-solid border-gray-300 rounded-[15px]">
<div className="flex justify-between items-center">
<div className="flex items-center">
<div className="relative w-[40px] h-[40px] mb-2 md:mb-0">
<div className="relative w-10 h-10 mb-2 md:mb-0">
<Image
className="rounded-full h-full w-full object-cover absolute inset-0"
layout="fill"
Expand Down
Loading

0 comments on commit 8623b48

Please sign in to comment.