Merge pull request #712 from ethereum-push-notification-service/rever…

…t-711-691-remove-horizontal-issue Revert "Remove static horizontal padding from all sections of homepage to globals page"
push-protocol · Mar 20, 2024 · 5c464f3 · 5c464f3
2 parents a907050 + 2badc5c
commit 5c464f3
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 107 deletions.
diff --git a/src/components/DocsHub/index.tsx b/src/components/DocsHub/index.tsx
@@ -29,7 +29,7 @@ import { FiArrowUpRight } from 'react-icons/fi';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import Spinner, { SPINNER_TYPE } from '@site/src/components/reusables/spinners/SpinnerUnit';
 import { ITechDocItem, QuickstartItems, SdkItemsList, TechDocItems } from "@site/src/config/DocsHubList";
-import GLOBALS, { device, globalsMargin } from '@site/src/config/globals';
+import GLOBALS, { device } from '@site/src/config/globals';
 import { PageMeta } from "@site/src/config/pageMeta";
 
 
@@ -349,16 +349,16 @@ export default function HomepageFeatures(): JSX.Element {
 const DocsHeroSection = styled(Section)`
   background: ${GLOBALS.COLORS.BG_DARK};
 
-  padding: ${`120px ${globalsMargin.DEFAULT.DESKTOP.RIGHT} 120px ${globalsMargin.DEFAULT.DESKTOP.LEFT}`};
+  padding: ${`${GLOBALS.ADJUSTMENTS.MARGIN.DEFAULT.DESKTOP}`};
   padding-bottom: 0px;
 
   @media ${device.laptop} {
-    padding: ${`60px ${globalsMargin.DEFAULT.DESKTOP.RIGHT} 60px ${globalsMargin.DEFAULT.DESKTOP.LEFT}`};
+    padding: ${`${GLOBALS.ADJUSTMENTS.MARGIN.DEFAULT.TABLET}`};
     padding-bottom: 0px;
   }
 
   @media ${device.mobileM} {
-    padding: ${`40px ${globalsMargin.DEFAULT.DESKTOP.RIGHT} 40px ${globalsMargin.DEFAULT.DESKTOP.LEFT}`};
+    padding: ${`${GLOBALS.ADJUSTMENTS.MARGIN.DEFAULT.MOBILE}`};
     padding-bottom: 0px;
   }
 `;

diff --git a/src/components/DocsHub/styles.css b/src/components/DocsHub/styles.css
@@ -70,8 +70,8 @@
 }
 
 .mainWrapper_eExm {
-  max-width: 100%;
-  min-width: 100%;
+  max-width: 100vw;
+  min-width: 100vw;
 }
 
 .PushDocs .docRoot_node_modules-\@docusaurus-theme-classic-lib-theme-DocRoot-Layout-styles-module, .PushDocs .docRoot_UBD9  {

diff --git a/src/components/NewMarqueeAnimation.tsx b/src/components/NewMarqueeAnimation.tsx
@@ -48,7 +48,7 @@ function NewMarqueeAnimation(props: Props) {
     <Splide 
         ref={splideRef}
         options={{
-          width: isMobile ? '90vw' : isTablet ? '95vw' : '1200px',
+          width: isMobile ? '90vw' : isTablet ? '95vw' : '1213px',
           type: 'loop',
           direction: direction,
           arrows: false,

diff --git a/src/config/globals.js b/src/config/globals.js
@@ -29,22 +29,22 @@ export const globalsPadding = {};
 export const globalsMargin = {
   DEFAULT: {
     DESKTOP: {
-      TOP: "200px",
+      TOP: "120px",
       RIGHT: "40px",
-      BOTTOM: "0px",
+      BOTTOM: "120px",
       LEFT: "40px",
     },
     TABLET: {
-      TOP: "180px",
-      RIGHT: "32px",
-      BOTTOM: "0px",
-      LEFT: "32px",
+      TOP: "60px",
+      RIGHT: "25px",
+      BOTTOM: "60px",
+      LEFT: "25px",
     },
     MOBILE: {
-      TOP: "180px",
-      RIGHT: "16px",
-      BOTTOM: "0px",
-      LEFT: "16px",
+      TOP: "40px",
+      RIGHT: "20px",
+      BOTTOM: "40px",
+      LEFT: "20px",
     },
   },
 };

diff --git a/src/css/SharedStyling.js b/src/css/SharedStyling.js
@@ -62,10 +62,11 @@ export const Content = styled.div`
   display: ${(props) => props.display || "flex"};
   flex-direction: ${(props) => props.flexDirection || "column"};
   position: ${(props) => props.position || "relative"};
+
   flex: ${(props) => props.flex || "1"};
   align-self: ${(props) => props.alignSelf || "stretch"};
   width: ${(props) => props.width || "auto"};
-  max-width: ${(props) => props.maxWidth || "1200px"};
+  max-width: ${(props) => props.maxWidth || "1213px"};
   // max-width: 1140px;
   display: flex;
   justify-content: ${(props) => props.justifyContent || "center"};
@@ -77,10 +78,10 @@ export const Content = styled.div`
   @media ${device.laptop} {
     padding: ${(props) =>
       props.padding || GLOBALS.ADJUSTMENTS.MARGIN.DEFAULT.TABLET};
-    // max-width: ${(props) => props.maxWidth || "1200px"};
+    // max-width: ${(props) => props.maxWidth || "1213px"};
   }
 
-  @media ${device.mobileL} {
+  @media ${device.mobileM} {
     padding: ${(props) =>
       props.padding || GLOBALS.ADJUSTMENTS.MARGIN.DEFAULT.MOBILE};
     max-width: ${(props) => props.maxWidth || "100%"};

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -201,41 +201,12 @@ article ol ul {
 /* ----- */
 /* OVERRIDES */
 /* ----- */
-
-
-html,
 body {
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-::-webkit-scrollbar {
-  width: 4px !important;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #cb3faa;
-  border-radius: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: black;
-}
-
-::-webkit-scrollbar-button {
-  display: none !important;
-}
-
-/* body {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   box-sizing: border-box;
-} */
+}
 
 .home-wrapper {
   font-style: var(--ifm-font-family-homepage) !important;
@@ -763,24 +734,6 @@ li {
     width: 100%;
     gap: 32px;
   }
-
-  ::-webkit-scrollbar {
-  width: 4px !important;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #cb3faa;
-  border-radius: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: black;
-}
-
-::-webkit-scrollbar-button {
-  display: none !important;
-}
-
 }
 
 /* ------------------ */