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.

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

Fix | tablet breakpoint styles #172

Merged
merged 12 commits into from
Nov 9, 2023
29 changes: 17 additions & 12 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,9 @@ const footerSocialLinks = `
const getNavDropdownItem = ({label, icon, description}) => `
<div class="tw-flex tw-px-3 tw-items-start tw-gap-4 tw-self-stretch tw-rounded-xl">
<img class="tw-h-6" src="/img/menu/${icon}.svg"/>
<div class="tw-flex tw-flex-col tw-items-start tw-gap-2 tw-max-w-[270px] tw-pr-3">
<div class="tw-flex tw-flex-col tw-items-start tw-gap-2 lg:tw-max-w-[270px] tw-pr-3">
<div class="tw-text-gray-900 tw-font-semibold tw-text-base">${label}</div>
<p class="tw-text-gray-600 tw-whitespace-pre-wrap tw-w-[225px] tw-mb-0">${description}</p>
<p class="tw-text-gray-600 tw-whitespace-pre-wrap tw-min-w-[225px] tw-mb-0">${description}</p>
</div>
</div>
`
Expand Down Expand Up @@ -242,7 +242,7 @@ const config = {
{
type: "dropdown",
position: "left",
html: "<div class='tw-inline tw-font-normal'>Platform</div>",
html: "<div class='tw-inline tw-font-normal tw-text-base'>Platform</div>",
items: [
{
href: "https://otterize.com/open-source",
Expand All @@ -260,24 +260,29 @@ const config = {
position: "left",
target: "_self",
href:'https://docs.otterize.com/',
html: "<div class='tw-inline tw-font-normal'>Documentation</div>",
html: "<div class='tw-inline tw-font-normal tw-text-base'>Documentation</div>",
},
{
position: "left",
target: "_self",
href:'https://docs.otterize.com/pricing',
html: "<div class='tw-inline tw-font-normal'>Pricing</div>",
html: "<div class='tw-inline tw-font-normal tw-text-base'>Pricing</div>",
},
{
type: "dropdown",
position: "left",
html: "<div class='tw-inline tw-font-normal'>Learn</div>",
html: "<div class='tw-inline tw-font-normal tw-text-base'>Learn</div>",
items: [
{
href: "https://otterize.com/blog",
html: getNavDropdownItem({label: 'Blog', icon: "blog-menu", description: ""}),
target: "_self",
},
{
href: "https://otterize.com/resources",
html: getNavDropdownItem({label: "The Otter's Den", icon: "resources-menu", description: "Your go-to resource hub for Kubernetes security and tech know-how."}),
target: "_self",
},
{
href: "https://otterize.com/team",
html: getNavDropdownItem({label: 'Our Story', icon: "resources-menu", description: "Dive into our company’s mission, our philosophy, and the team that makes it all possible."}),
Expand All @@ -287,17 +292,17 @@ const config = {
},
{
href: "https://app.otterize.com/",
html: "<div className='tw-inline-flex tw-h-11 tw-w-24 tw-items-center tw-justify-center tw-gap-2 tw-rounded-lg tw-px-4 tw-py-2.5 tw-text-base tw-font-semibold tw-leading-normal tw-text-gray-600 tw-no-underline -tw-mr-10'>Log in</div>",
html: "<div id='login-link' className='tw-inline-flex tw-h-11 tw-w-24 tw-items-center tw-justify-center tw-gap-2 tw-rounded-lg tw-px-4 tw-py-2.5 tw-text-sm lg:tw-text-base tw-font-semibold tw-leading-normal tw-text-gray-600 tw-no-underline -tw-mr-10'>Log in</div>",
position: "right",
},
{
href: "https://app.otterize.com",
html: "<button class='tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-rounded-xl tw-bg-gradient-to-b tw-px-3 tw-py-2.5 tw-text-base tw-font-semibold tw-leading-normal tw-no-underline tw-shadow tw-font-sans -tw-mr-2 tw-from-indigo-500 tw-bg-indigo-500 tw-to-indigo-600 tw-h-11 tw-border-none tw-text-white tw-max-w-[190px] tw-w-fit'><img src='img/menu/cloud.svg' />Signup for free</button>",
html: "<button class='tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-rounded-xl tw-bg-gradient-to-b tw-px-3 tw-py-2.5 tw-text-sm lg:tw-text-base tw-font-semibold tw-leading-normal tw-no-underline tw-shadow tw-font-sans -tw-mr-2 tw-from-indigo-500 tw-bg-indigo-500 tw-to-indigo-600 tw-h-11 tw-border-none tw-text-white tw-w-full'><img src='img/menu/cloud.svg' />Signup <span id='sign-extended-text'>for free<span></button>",
position: "right",
},
{
href: "https://calendly.com/otterize-team/kubecon-na",
html: "<div class='tw-cursor-pointer tw-font-sans tw-flex tw-items-center tw-rounded-xl tw-h-11 tw-border tw-border-solid tw-border-gray-300 tw-bg-white tw-px-3 tw-text-gray-900 tw-shadow tw-font-medium tw-text-base'>Request a demo <img class='tw-ml-2' src='img/menu/right-arrow.svg' /></div>",
html: "<div class='tw-cursor-pointer tw-font-sans tw-flex tw-items-center tw-rounded-xl tw-h-11 tw-border tw-border-solid tw-border-gray-300 tw-bg-white tw-px-3 tw-text-gray-900 tw-shadow tw-font-medium tw-text-sm lg:tw-text-base tw-w-full tw-justify-center'><span id='request-demo-full-text'>Request a demo</span><span id='request-demo-partial-text'>Demo</span><img class='tw-ml-2' src='img/menu/right-arrow.svg' /></div>",
position: "right",
},
],
Expand All @@ -314,8 +319,8 @@ const config = {
<div id="mailchimp_title" class="tw-w-96 tw-text-gray-700 tw-text-xl tw-font-normal tw-font-sans tw-text-left">Join our newsletter to stay up to date on features and releases.</div>
<div class="tw-h-28 tw-flex-col tw-justify-start tw-items-start tw-gap-1.5 tw-flex">
<div class="tw-self-stretch tw-h-14 tw-flex-col tw-justify-start tw-items-start tw-gap-1.5 tw-flex">
<form name="embedded-subscribe-form" id="mailchimp_form" class="tw-self-stretch tw-pl-3 tw-pr-1.5 tw-py-1.5 tw-bg-gray-200 tw-rounded-2xl tw-shadow tw-justify-start tw-items-center tw-gap-2 tw-inline-flex">
<input id="mailchimp_email_input" type="email" name="EMAIL" placeholder="Enter your email" required="" class="tw-w-full tw-text-gray-600 tw-text-base tw-font-normal tw-leading-normal tw-bg-gray-200 tw-border-none tw-h-12 tw-justify-start tw-items-center tw-gap-2 tw-flex tw-focus:outline-none tw-rounded-none tw-shadow-none tw-px-0 focus:tw-outline-none"/>
<form name="embedded-subscribe-form" id="mailchimp_form" class="tw-self-stretch tw-pl-3 tw-pr-1.5 tw-py-1.5 tw-bg-gray-50 tw-rounded-2xl tw-shadow tw-justify-start tw-items-center tw-gap-2 tw-inline-flex">
<input id="mailchimp_email_input" type="email" name="EMAIL" placeholder="Enter your email" required="" class="tw-w-full tw-text-gray-600 tw-text-base tw-font-normal tw-leading-normal tw-bg-gray-50 tw-border-none tw-h-12 tw-justify-start tw-items-center tw-gap-2 tw-flex tw-focus:outline-none tw-rounded-none tw-shadow-none tw-px-0 focus:tw-outline-none"/>
<button id="mailchimp_cta" type="submit" class="tw-w-auto tw-text-base tw-font-medium tw-leading-normal tw-px-6 tw-py-3 tw-rounded-xl tw-border tw-justify-center tw-items-center tw-gap-2 tw-flex tw:max-h-12 tw-text-white tw-cursor-pointer" style="background: linear-gradient(180deg, #635DFF 0%, #4D3DF7 100%), #7069FB;">Subscribe</button>
</form>
</div>
Expand All @@ -338,7 +343,7 @@ const config = {
</div>
<div class="tw-grow tw-shrink tw-basis-0 tw-flex-col tw-justify-start tw-items-start tw-gap-4 tw-inline-flex tw-w-[120px] tw-max-w-[240px]">
<div class="tw-self-stretch tw-text-gray-500 tw-text-sm tw-font-semibold tw-font-sans tw-uppercase tw-leading-none tw-tracking-widest tw-text-left">Follow Us</div>
<ul class='tw-h-48 tw-flex-col tw-justify-between tw-items-start tw-flex tw-gap-4 tw-w-full tw-mt-2 tw-text-left'>
<ul class='tw-relative tw-z-10 tw-flex-col tw-justify-between tw-items-start tw-flex tw-gap-4 tw-w-full tw-mt-2 tw-text-left'>
${footerSocialLinks}
</ul>
</div>
Expand Down
51 changes: 47 additions & 4 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,25 @@

.navbar__item {
margin-left: 10px;
white-space: nowrap;
}

@media screen and (max-width: 1400px) {
.navbar__item {
margin-left: 0px;
}
.navbar__items--right {
flex: 0 0 auto !important;
}

.navbar__logo {
height: fit-content;
}

.navbar__logo img {
height: 20px;
}

}
@media screen and (max-width: 1280px) {
.navbar__item {
Expand Down Expand Up @@ -313,7 +332,7 @@ pre.prism-code {
display: none !important;
}

.container-fluid {
footer .container-fluid {
max-width: 100%;
}

Expand All @@ -325,7 +344,31 @@ pre.prism-code {
border-radius: 10px;
}

/* Removes the dropdown arrow (uncomment in case we want to use svg) */
/* .dropdown > .navbar__link:after {
#request-demo-partial-text {
display: none;
} */
}


@media screen and (min-width: 996px) and (max-width: 1080px) {
#request-demo-partial-text {
display: inline;
}

#request-demo-full-text {
display: none;
}

}
@media screen and (min-width: 996px) and (max-width: 1140px) {
#sign-extended-text {
display: none;
}
}

@media screen and (max-width: 996px) {
a:has(> #login-link) {
justify-content: center;
margin-top: 60px;
}

}
3 changes: 1 addition & 2 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './docusaurus.config.js'],
prefix: 'tw-', // This is important to avoid conflicts with Docusaurus styles.
theme: {
theme: {
screens: {
xs: '375px',
md: '834px',
Expand Down Expand Up @@ -114,6 +113,6 @@ module.exports = {
},
},
},
},

plugins: [],
}
Loading