Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: update styling of homepage on small devices #1946

Merged
merged 1 commit into from
Aug 3, 2023
Merged

chore: update styling of homepage on small devices #1946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function Footer() {
name: "Linkedin",
link: "https://linkedin.com/in/priyankarpal",
icon: <SiLinkedin aria-label="Follow us on LinkedIn" title="LinkedIn(External Link)" />,
hover: " text-xl text-gray-200 cursor-pointer hover:text-purple-500 ",
hover: " text-xl text-gray-200 cursor-pointer hover:text-purple-700 ",
}
]

Expand Down Expand Up @@ -73,7 +73,7 @@ function Footer() {
<div className="mx-auto max-w-screen-xl pt-16 sm:px-4 sm:pb-[5.65rem] lg:px-8 lg:pb-8">
<div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-32">
<div className="mx-auto max-w-sm lg:max-w-none">
<div className="inline-flex h-10 items-center text-white rounded-lg font-extrabold text-[2rem]"> Ph <span className="text-primary">.</span></div>
<div className="flex h-10 items-center justify-center lg:justify-start text-white rounded-lg font-extrabold text-[2rem] text-center"> Ph <span className="text-primary">.</span></div>
<p
className="mt-4 text-center text-gray-200 dark:text-gray-400 lg:text-left lg:text-lg"
>
Expand Down Expand Up @@ -103,10 +103,10 @@ function Footer() {
className="grid grid-cols-1 gap-8 text-center lg:grid-cols-2 lg:text-left"
>
{/* for footer docs links */}
<ul className="font-medium text-gray-200">
<ul className="font-medium text-gray-200 pt-5">
{footerdocsLinks.map((section, index) => (
<div key={index}>
<h3 className="text-xl font-extrabold mb-8 text-gray-200">{section.title}</h3>
<h3 className="text-xl font-extrabold mb-4 text-gray-200">{section.title}</h3>
<ul>
{section.child.map((link, linkIndex) => (
<li key={linkIndex} className="pt-2">
Expand All @@ -124,7 +124,7 @@ function Footer() {
<ul className="font-medium text-gray-200">
{footerServiceLinks.map((section, index) => (
<div key={index}>
<h3 className="text-xl font-extrabold mb-8 text-gray-200">{section.title}</h3>
<h3 className="text-xl font-extrabold mt-10 mb-4 text-gray-200">{section.title}</h3>
<ul>
{section.child.map((link, linkIndex) => (
<li key={linkIndex} className="pt-2">
Expand All @@ -150,4 +150,4 @@ function Footer() {
);
}

export default Footer;
export default Footer;
4 changes: 2 additions & 2 deletions components/landing/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function Banner() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, type: "spring", stiffness: 110 }}
className="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">
className="mt-2 sm:mt-0 text-3xl font-bold tracking-tight text-white sm:text-4xl">
Why should you use this?
</motion.p>
<motion.h2
Expand All @@ -49,7 +49,7 @@ export default function Banner() {
Showcase your projects
</motion.h2>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<div className="mx-auto mt-16 max-w-2xl sm:mt-15 lg:mt-24 lg:max-w-4xl">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
{features.map((feature, i) => (
<motion.div
Expand Down
4 changes: 2 additions & 2 deletions components/landing/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import Image from "next/image";

export default function Landing() {
return (
<div className="relative sm:pb-4 select-none overflow-hidden">
<div className="pt-16 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
<div className="relative sm:pb-0 select-none overflow-hidden">
<div className="pt-16 sm:pt-10 sm:pb-0 lg:pt-40 lg:pb-48">
<div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
<section className="sm:max-w-[19.5rem] md:max-w-[24.5rem] tab:max-w-[28rem] lg:max-w-[30rem]">
<motion.div
Expand Down