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 11, 2023
1 parent b568134 commit a846ef1
Show file tree
Hide file tree
Showing 21 changed files with 132 additions and 150 deletions.
30 changes: 7 additions & 23 deletions assets/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,22 +50,6 @@
src: url(./../fonts/Source-codePro.woff2);
}

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

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

@font-face {
font-family: "Poppins Light";
font-style: normal;
Expand Down Expand Up @@ -150,7 +134,7 @@ body {
}

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

.comment input[type="text"],
Expand All @@ -176,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 @@ -221,7 +205,7 @@ h1 strong {
}

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

/* HighlightJS */
Expand Down Expand Up @@ -308,15 +292,15 @@ code::after {

.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;
@apply not-italic text-[1.4rem] lg:text-[1.755rem] leading-[2.3rem] text-[#757575] font-normal tracking-wide font-inter-light;
}

.prose
Expand All @@ -332,7 +316,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 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.
8 changes: 4 additions & 4 deletions components/authorDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ 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.7rem] font-worksans-semibold tracking-normal text-[#000000d6]">
{postData.authorName}
</div>
{postData.authorBio ? (
<>
<div className="text-[1rem] leading-snug tracking-normal text-center">
<div className="text-base leading-snug tracking-normal text-center">
{postData.authorBio}
</div>
<div className="!mt-7 text-[0.9rem] capitalize tracking-normal">
Expand Down Expand Up @@ -54,11 +54,11 @@ 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.7rem] font-worksans-semibold tracking-normal text-[#000000d6]">
{postData.authorName}
</div>
{postData.authorBio ? (
<div className="text-[1rem] leading-snug tracking-normal">
<div className="text-base leading-snug tracking-normal">
{postData.authorBio}
</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 @@ -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
18 changes: 9 additions & 9 deletions components/cta/CTA1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,29 +42,29 @@ export default function CTA() {
src={ctabg400w}
loading="lazy"
alt="cta-bg-image"
className="absolute top-[-6.5rem] sm:left-[4.5rem] md:left-[6.5rem] w-[100%] sm:w-[80%] object-content"
className="absolute top-[-6.5rem] sm:left-[4.5rem] md:left-[6.5rem] w-full sm:w-4/5 object-content"
/>
</div>
<div className="xl:container xl:flex xl:flex-row">
<div className="flex flex-col items-center xl:items-start xl:mb-20 xl:w-[60%] 2xl:w-[50%]">
<p className="text-center xl:text-left text-[1.875rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[2.5rem] md:leading-[3.75rem] lg:leading-[5.156rem] font-inter-bold text-black-core/[0.87]">
<div className="flex flex-col items-center xl:items-start xl:mb-20 xl:w-3/5 2xl:w-2/4">
<p className="text-center xl:text-left text-3xl md:text-[2.813rem] lg:text-[3.438rem] leading-10 md:leading-[3.75rem] lg:leading-[5.156rem] font-inter-bold text-black-core/[0.87]">
Want to build a new version of your existing app or add new
features?
</p>
<p className="mt-4 text-[1rem] md:text-[1.25rem] leading-[1.5rem] md:leading-[1.875rem] font-inter-medium text-center xl:text-left text-black-core/[0.87] lg:text-black-core/[0.60]">
<p className="mt-4 text-base md:text-xl md:leading-[1.875rem] font-inter-medium text-center xl:text-left text-black-core/[0.87] lg:text-black-core/[0.60]">
Not sure where to start? We also offer code and architecture
reviews, strategic planning, and more.
</p>
<Link
href={`${config.WEBSITE_URL}/contact`}
className="relative justify-self-center mt-6 rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-inter-semibold text-white"
className="relative justify-self-center mt-6 rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-inter-semibold text-white"
>
<div className="py-[0.8rem] px-[1.5rem] text-[1.188rem] leading-[1.425rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] tracking-normal hoverable-text inline-block">
<div className="py-[0.8rem] px-6 text-[1.188rem] leading-[1.425rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] tracking-normal hoverable-text inline-block">
Talk to our experts
</div>
</Link>
</div>
<div className="hidden xl:block relative w-[53%] xl:w-[40%] 2xl:w-[50%]">
<div className="hidden xl:block relative w-[53%] xl:w-2/5 2xl:w-1/2">
<Image
src={cta800w}
loading="lazy"
Expand Down Expand Up @@ -100,11 +100,11 @@ export default function CTA() {
className="cursor-pointer"
>
<div
className={`flex flex-col items-center rounded-[16px] bg-gradient-to-r from-[#FF835B]/[0.3] to-[#F2709C]/[0.3] w-[50%] p-[20px] h-[140px] ${
className={`flex flex-col items-center rounded-2xl bg-gradient-to-r from-[#FF835B]/[0.3] to-[#F2709C]/[0.3] w-1/2 p-5 h-[140px] ${
slide.hasStar ? "justify-between" : "justify-center"
}`}
>
<span className="font-inter-bold text-[1.5rem] leading-[2.25rem]">
<span className="font-inter-bold text-[1.5rem] leading-9">
{slide.title}
</span>
<span className="font-inter-medium text-[1.1875rem] leading-[1.78125rem] text-black-core/[0.6]">
Expand Down
16 changes: 8 additions & 8 deletions components/cta/CTA2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export default function CTA() {
/>
)}

<div className="mt-20 sm:mt-14 text-center gradient-text text-3xl md:text-[3rem] md:leading-[3.625rem] lg:text-[4.0625rem] lg:leading-[4.9375rem] font-inter-bold">
<div className="mt-20 sm:mt-14 text-center gradient-text text-3xl md:text-5xl md:leading-[3.625rem] lg:text-[4.0625rem] lg:leading-[4.9375rem] font-inter-bold">
Say Hello!
</div>
<div className="container text-center">
Expand All @@ -137,7 +137,7 @@ export default function CTA() {
/>
<label
htmlFor="username"
className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-[1rem] leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-base leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
>
Your name
</label>
Expand Down Expand Up @@ -167,7 +167,7 @@ export default function CTA() {
/>
<label
htmlFor="email"
className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-[1rem] leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-base leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
>
Your email
</label>
Expand Down Expand Up @@ -205,7 +205,7 @@ export default function CTA() {
/>
<label
htmlFor="phonenumber"
className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-[1rem] leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-base leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
>
Phone number
</label>
Expand Down Expand Up @@ -239,7 +239,7 @@ export default function CTA() {
></textarea>
<label
htmlFor="project"
className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-[1rem] leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-base leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
>
Project detail
</label>
Expand All @@ -257,13 +257,13 @@ export default function CTA() {
{showLoader ? (
<Image
src={loaderImage}
className="w-[64px] h-[64px]"
className="w-16 h-16"
alt="loader-image"
/>
) : (
<div className="relative">
{showErrorMessage ? (
<div className="absolute -top-[2rem] sm:-top-[1.875rem] md:-top-[2.875rem] text-center -right-[4rem] sm:-right-[11rem] md:-right-[15rem] lg:-right-[18rem] xl:-right-[18rem] 2xl:-right-[20.5rem] w-[190%] sm:w-max">
<div className="absolute -top-8 sm:-top-[1.875rem] md:-top-[2.875rem] text-center -right-16 sm:-right-44 md:-right-60 lg:-right-72 xl:-right-72 2xl:-right-[20.5rem] w-[190%] sm:w-max">
<span
className={`flex text-center gradient-text ${
errorMessage === "Invalid Recaptcha score"
Expand All @@ -279,7 +279,7 @@ export default function CTA() {
)}
<button
id="submit"
className="relative justify-self-center rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-white font-inter-bold"
className="relative justify-self-center rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-white font-inter-bold"
>
<span className="py-[0.6rem] px-[1.8rem] md:py-[0.8rem] text-md lg:text-xl hoverable-text inline-block">
Get Free Consultation
Expand Down
Loading

0 comments on commit a846ef1

Please sign in to comment.