Fix | tablet breakpoint styles (#172)

otterize · Nov 9, 2023 · 2a8451d · 2a8451d
1 parent aacb9ea
commit 2a8451d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 18 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -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>
 `
@@ -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",
@@ -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."}),
@@ -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",
           },
         ],
@@ -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>
@@ -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>

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -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 {
@@ -313,7 +332,7 @@ pre.prism-code {
   display: none !important;
 }
 
-.container-fluid {
+footer .container-fluid {
   max-width: 100%;
 }
 
@@ -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;
+  }
+
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -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',
@@ -114,6 +113,6 @@ module.exports = {
         },
       },
     },
-  },
+
   plugins: [],
 }