Add more padding to the docs at <990px width (#1982)

* remove padding class from container * styles for >576px and 576px - 990px * mobile styles, rearranged stylesheet to go from larger sizes to smaller sizes * fix padding on breadcrumbs-and-search * Update homepage.ejs
fleetdm · Sep 10, 2021 · ca9cb48 · ca9cb48
1 parent 61579b3
commit ca9cb48
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 50 deletions.
diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less
@@ -334,8 +334,9 @@
 
       img {
         display: flex;
-        width: 100%;
+        max-width: 100%;
         height: auto;
+        margin: auto;
         padding-top: 24px;
         padding-bottom: 24px;
       }
@@ -376,36 +377,8 @@
 
     }
 
-    // for smaller screens
-    @media (max-width: 991px) {
-
-      [purpose='right-sidebar'] {
-        width: 100%;
-
-        [purpose='subtopics'] {
-          color: @core-fleet-black;
-
-          a {
-            color: @core-vibrant-blue;
-          }
-
-        }
-
-      }
-
-      [purpose='content'] {
-        width: 100%;
-
-        h1:first-of-type {
-          display: none;  // hides on mobile
-        }
-
-      }
-
-    }
-
     // for larger screens
-    @media (min-width: 992px) {
+    @media (min-width: 990px) {
 
       ul {
         .topic {
@@ -449,18 +422,6 @@
 
           }
 
-          // .active {
-          //   color: @core-vibrant-blue;
-          //   position: absolute;
-          //   height: 32px;
-          //   transform: translate(-2px, -4px);
-          //   border-left: 3px solid @core-vibrant-blue;
-          //   border-radius: 2px;
-          //   a {
-          //     color: @core-vibrant-blue;
-          //   }
-          // }
-
         }
 
       }
@@ -471,6 +432,42 @@
 
     }
 
+    // for smaller screens
+    @media (max-width: 990px) {
+
+      padding: 0px 40px;
+
+      [purpose='right-sidebar'] {
+        width: 100%;
+
+        [purpose='subtopics'] {
+          color: @core-fleet-black;
+
+          a {
+            color: @core-vibrant-blue;
+          }
+
+        }
+
+      }
+
+      [purpose='content'] {
+        width: 100%;
+
+        h1:first-of-type {
+          display: none;  // hides on mobile
+        }
+
+      }
+
+    }
+    // for mobile
+    @media (max-width: 576px) {
+
+      padding: 0px 24px;
+
+    }
+
   }
 
   @import 'code-blocks.less'; // styles for code blocks and hljs

diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs
@@ -68,7 +68,7 @@
   </div>
 
   <div v-else>
-    <div purpose="docs-template" style="max-width: 1200px;" class="container-fluid px-3 px-sm-4 mb-5">
+    <div purpose="docs-template" style="max-width: 1200px;" class="container-fluid px-lg-3  mb-5">
 
       <div purpose="breadcrumbs-and-search" class="conainer-fluid d-flex flex-column flex-lg-row justify-content-lg-between p-0 pt-4 pb-lg-2 m-0 breadcrumbs-search">
 
@@ -188,7 +188,7 @@
 
         </div>
 
-        <div purpose="content" id="body-content" class="d-flex flex-column p-0 px-lg-5 content" parasails-has-no-page-script>
+        <div purpose="content" id="body-content" class="d-flex flex-column px-lg-5 content" parasails-has-no-page-script>
           <%- partial(
             path.relative(
               path.dirname(__filename), 

diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
@@ -237,12 +237,6 @@
         <p class="px-4">
           Teams use osquery with Fleet every day to stay secure and compliant.
         </p>
-        <div class="logos container d-flex flex-wrap justify-content-center align-items-center pb-2 pb-md-5">
-          <img alt="The logo of a significant contributor, production user, and/or customer of Fleet" style="width: 160px; height: auto;" class="px-3 my-3" src="/images/logo-gusto-140x58@2x.png"/>
-          <img alt="The logo of a significant contributor, production user, and/or customer of Fleet" style="width: 160px; height: auto;" class="px-3 my-3" src="/images/logo-duo-93x47@2x.png"/>
-          <img alt="The logo of a significant contributor, production user, and/or customer of Fleet" style="width: 160px; height: auto;" class="px-3 my-3" src="/images/logo-cisco-117x70@2x.png"/>
-          <img alt="The logo of a significant contributor, production user, and/or customer of Fleet" style="width: 160px; height: auto;" class="px-3 my-3" src="/images/logo-adarga-112x32@2x.png"/>
-        </div>
         <div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5 mb-md-5">
           <a
             style="max-width: 220px"