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

Fix | tablet breakpoint styles #172

Merged
merged 12 commits into from
Nov 9, 2023
Merged

Fix | tablet breakpoint styles #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
36d6ea3
menu was overlpaing the logo on low resolution
nir2002 Apr 16, 2023
12e933e
Merge branch 'main' of https://github.com/otterize/docs
nir2002 Apr 17, 2023
48f6b98
Merge branch 'main' of https://github.com/otterize/docs
nir2002 Nov 1, 2023
341b575
Merge branch 'main' of https://github.com/otterize/docs
nir2002 Nov 9, 2023
34b42c7
navbar items overlaped on laptop resolution
nir2002 Nov 9, 2023
8605d66
new favicon
nir2002 Nov 9, 2023
00cf068
tablet breakpoint overlap fix
nir2002 Nov 9, 2023
d895622
resources page is published
nir2002 Nov 9, 2023
c75f3a5
not in use
nir2002 Nov 9, 2023
f1f4b8c
couple of more adjustments
nir2002 Nov 9, 2023
3619e4e
Merge branch 'main' of https://github.com/otterize/docs into fix/tabl…
nir2002 Nov 9, 2023
e48e0bc
color fix
nir2002 Nov 9, 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
29 changes: 17 additions & 12 deletions docusaurus.config.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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