Skip to content

Fixed Break point issue of home, from 551px to 695px screen size. #657

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

Open
im-chandraprakash wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixed Break point issue of home, from 551px to 695px screen size. #657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d38dab0
Fixed Break point issue of home, from 551px to 695px screen size.
im-chandraprakash Oct 13, 2023
d664a21
code formation removed
im-chandraprakash Oct 17, 2023
c19d3e9
code style changed
im-chandraprakash Oct 18, 2023
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
2 changes: 1 addition & 1 deletion src/components/Sections/HeaderLearnMore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function HeaderLearnMore() {
items-center
justify-center
mobile:flex-wrap sm:flex-wrap
mobile:w-[342px] sm:w-[696px]
mobile:w-[342px] sm:w-full
mx-auto
w-[100%]
"
Expand Down
334 changes: 167 additions & 167 deletions src/components/Sections/HomepageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,177 +15,177 @@ import ScarfIcon from "@site/static/img/Homepage/brand/Scarf.svg";
import IBMIcon from "@site/static/img/Homepage/brand/IBM.svg";

export function HomepageHeader() {
return (
<div>
<img
src={HeaderBG}
alt=""
className="
absolute top-[0px] left-[0px] max-h-[580px]
xl:w-screen sm:hidden"
/>
<img
src={HeaderBGMB}
alt=""
className="
absolute top-[0px] left-[0px] w-screen z-0
sm:h-[496px] mobile:h-[526px]
hidden sm:block"
/>
<header
className="
flex justify-center
items-center
w-[840px] mobile:w-[90%] sm:w-[600px] 2xl:w-[1000px]
mobile:mt-[32px] sm:mt-[65px] mt-[71px]
z-10
mx-auto
"
>
<div
className="z-10
flex flex-col
flex-wrap
"
>
<div
className="text-primary
font-bold font-inter
text-label40 sm:text-heading2 mobile:text-label20
sm:font-semibold"
>
Debug engineering processes and discover opportunities with DORA, Community Growth, Engineering Throughput and more DevLake dashboards...
</div>
<div
return (
<div className="w-full">
<img
Copy link
Member

@mintsweet mintsweet Oct 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, @07-Chandra, I understand you only modified w-full, but there are still many additional changes in this file, can you remove these? Thank you.

src={HeaderBG}
alt=""
className="
absolute top-[0px] left-[0px] max-h-[580px]
xl:w-screen sm:hidden"
/>
<img
src={HeaderBGMB}
alt=""
className="
absolute top-[0px] left-[0px] w-screen z-0
sm:h-[496px] mobile:h-[526px]
hidden sm:block"
/>
<header
className="
mt-5 mobile:mt-3 sm:mt-3
text-primary-800
text-label24
sm:text-label16Lake mobile:text-label16Lake
font-inter
"
flex justify-center
items-center
w-[840px] mobile:w-[90%] sm:w-full 2xl:w-[1000px] custom-padding
mobile:mt-[32px] sm:mt-[65px] mt-[71px]
z-10
mx-auto
"
>
Apache DevLake&trade; (Incubating) ingests, analyzes, and visualizes the
fragmented data from DevOps tools to distill insights for
engineering excellence.
</div>
<div
className="z-10
flex flex-col
flex-wrap
"
>
<div
className="text-primary
font-bold font-inter
text-label40 sm:text-heading2 mobile:text-label20
sm:font-semibold"
>
Debug engineering processes and discover opportunities with DORA, Community Growth, Engineering Throughput and more DevLake dashboards...
</div>
<div
className="
mt-5 mobile:mt-3 sm:mt-3
text-primary-800
text-label24
sm:text-label16Lake mobile:text-label16Lake
font-inter
"
>
Apache DevLake&trade; (Incubating) ingests, analyzes, and visualizes the
fragmented data from DevOps tools to distill insights for
engineering excellence.
</div>
<div className="
flex
mobile:flex-col
mt-[48px] sm:mt-3
items-center
justify-between
mb-[129px] 2xl:mb-[148px] sm:mb-[101px] mobile:mb-[44.9px]
">
<Link
className="primary-button
flex
whitespace-nowrap
mobile:mt-3
rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
w-[200px] sm:w-[140px] mobile:w-[140px]
h-[48px] sm:h-[32px] mobile:h-[32px]"
to="https://devlake.apache.org/livedemo/EngineeringLeads/DORA"
>
See it Live
</Link>
<Link
className="primary-button
flex
whitespace-nowrap
rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
bg-neutral-invert
text-primary-500
border-2 border-primary-500 border-solid
hover:text-primary-500
hover:bg-neutral-invert
hover:opacity-80
mobile:mt-3
w-[200px] sm:w-[140px] mobile:w-[140px]
h-[48px] sm:h-[32px] mobile:h-[32px]"
to="https://devlake.apache.org/docs/GettingStarted"
>
Install DevLake
</Link>
<Link
className="primary-button
flex
whitespace-nowrap
rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
bg-neutral-invert
text-primary-500
border-2 border-primary-500 border-solid
hover:text-primary-500
hover:bg-neutral-invert
hover:opacity-80
mobile:mt-3
w-[200px] sm:w-[140px] mobile:w-[140px]
h-[48px] sm:h-[32px] mobile:h-[32px]"
to="https://join.slack.com/t/devlake-io/shared_invite/zt-20envwfbk-JUTZ4z9jSeRnrvNhBFLg9w"
>
Join Slack
</Link>
</div>
</div>
</header>
<div className="
flex
mobile:flex-col
mt-[48px] sm:mt-3
items-center
justify-between
mb-[129px] 2xl:mb-[148px] sm:mb-[101px] mobile:mb-[44.9px]
flex
text-heading4
text-neutral-300
font-inter
text-center
mx-[auto]
w-[86%]
h-[20px]
mb-[40px]
items-center
">
<div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%] relative"></div>
<span className="
flex-1
w-[81px]
">
<Link
className="primary-button
flex
whitespace-nowrap
mobile:mt-3
rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
w-[200px] sm:w-[140px] mobile:w-[140px]
h-[48px] sm:h-[32px] mobile:h-[32px]"
to="https://devlake.apache.org/livedemo/EngineeringLeads/DORA"
>
See it Live
</Link>
<Link
className="primary-button
flex
whitespace-nowrap
rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
bg-neutral-invert
text-primary-500
border-2 border-primary-500 border-solid
hover:text-primary-500
hover:bg-neutral-invert
hover:opacity-80
mobile:mt-3
w-[200px] sm:w-[140px] mobile:w-[140px]
h-[48px] sm:h-[32px] mobile:h-[32px]"
to="https://devlake.apache.org/docs/GettingStarted"
>
Install DevLake
</Link>
<Link
className="primary-button
flex
whitespace-nowrap
rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
bg-neutral-invert
text-primary-500
border-2 border-primary-500 border-solid
hover:text-primary-500
hover:bg-neutral-invert
hover:opacity-80
mobile:mt-3
w-[200px] sm:w-[140px] mobile:w-[140px]
h-[48px] sm:h-[32px] mobile:h-[32px]"
to="https://join.slack.com/t/devlake-io/shared_invite/zt-20envwfbk-JUTZ4z9jSeRnrvNhBFLg9w"
>
Join Slack
</Link>
Trusted by
</span>
<div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%]"></div>
</div>
<div
className="
pl-[30px] pr-[30px]
flex
justify-between
sm:flex-wrap
xl:justify-between
sm:justify-around
items-center
m-auto
max-w-[90%]"
>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://www.redhat.com/en"><RedHatIcon className="mobile:w-[72px]" /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://stripe.com/gb"><StripeIcon className="mobile:w-[36px]" /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://orkes.io/"><img className="w-[88px] mobile:w-[48px]" src={OrkesIcon} /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://clickhouse.com/"><img className="w-[140px] mobile:w-[71px]" src={ClickHouseIcon} /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://croz.net/"><img className="w-[80px] mobile:w-[36px]" src={CrozIcon} /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://coder.com/"><img className="w-[120px] mobile:w-[60px]" src={CoderIcon} /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://about.scarf.sh/"><ScarfIcon className="mobile:w-[48px]" /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://www.ibm.com/"><IBMIcon className="mobile:w-[30px]" /></a>
</div>
</div>
</div>
</header>
<div className="
flex
text-heading4
text-neutral-300
font-inter
text-center
mx-[auto]
w-[86%]
h-[20px]
mb-[40px]
items-center
">
<div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%] relative"></div>
<span className="
flex-1
w-[81px]
">
Trusted by
</span>
<div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%]"></div>
</div>
<div
className="
pl-[30px] pr-[30px]
flex
justify-between
sm:flex-wrap
xl:justify-between
sm:justify-around
items-center
m-auto
max-w-[90%]"
>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://www.redhat.com/en"><RedHatIcon className="mobile:w-[72px]" /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://stripe.com/gb"><StripeIcon className="mobile:w-[36px]" /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://orkes.io/"><img className="w-[88px] mobile:w-[48px]" src={OrkesIcon} /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://clickhouse.com/"><img className="w-[140px] mobile:w-[71px]" src={ClickHouseIcon} /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://croz.net/"><img className="w-[80px] mobile:w-[36px]" src={CrozIcon} /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://coder.com/"><img className="w-[120px] mobile:w-[60px]" src={CoderIcon} /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://about.scarf.sh/"><ScarfIcon className="mobile:w-[48px]" /></a>
</div>
<div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<a href="https://www.ibm.com/"><IBMIcon className="mobile:w-[30px]" /></a>
</div>
</div>
</div>
);
);
}
5 changes: 5 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
display: none;
}
}
@media (min-width: 550px) and (max-width: 1024px) {
.custom-padding {
padding-inline: 35px;
}
}

@layer components {
.primary-button {
Expand Down