style: fixed padding issue on certain handbook pages

Signed-off-by: Karthik Ayangar <[email protected]>

src/sections/Community/Handbook/Handbook.style.js

@@ -35,7 +35,11 @@ export const HandbookWrapper = styled.div`
       color: ${(props) => props.theme.tertiaryColor};
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
-
+    #less-padding {
+      padding-top: 0rem;
+        margin-top: -6rem;
+    }
+    
     .page-section{
       h2{
         padding-top: 7rem;
@@ -49,6 +53,9 @@ export const HandbookWrapper = styled.div`
       margin-left: 20rem;
       display: flex;
     }
+    #conduct-section{
+      margin-top: -43rem;
+    }
 
     .sidebar {
         margin: 0;
@@ -193,11 +200,11 @@ export const HandbookWrapper = styled.div`
       transform: scale(0);
     }
     rect {
-      fill:  ${props => props.theme.grey313131ToGreenC9FCF6};
+      fill:  ${(props) => props.theme.grey313131ToGreenC9FCF6};
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);  
     }
     path {
-      stroke: ${props => props.theme.green00D3A9ToGreen00B39F};
+      stroke: ${(props) => props.theme.green00D3A9ToGreen00B39F};
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
     svg {
@@ -439,7 +446,7 @@ width: 90%;
    }
   .text{
     p{
-      color: ${props => props.theme.tertiaryColor};
+      color: ${(props) => props.theme.tertiaryColor};
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
   }
@@ -452,7 +459,7 @@ width: 90%;
               vertical-align: top;
           }
           .skill{
-              color: ${props => props.theme.tertiaryColor};
+              color: ${(props) => props.theme.tertiaryColor};
               font-size: 16px;
               padding: 0 0 1.25rem 1.8rem;
               transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -473,11 +480,12 @@ width: 90%;
 .content_type { 
   display: flex;
   flex-direction: column;
-  background: ${props => props.theme.grey212121ToWhite};
-  box-shadow: 0px 0px ${props => props.theme.projectShadowsize} ${props => props.theme.green00D3A9ToGreyE6E6E6};
+  background: ${(props) => props.theme.grey212121ToWhite};
+  box-shadow: 0px 0px ${(props) => props.theme.projectShadowsize} ${(props) =>
+  props.theme.green00D3A9ToGreyE6E6E6};
   transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   &:hover{
-      box-shadow: 0px 0px 5px ${props => props.theme.primaryColor};
+      box-shadow: 0px 0px 5px ${(props) => props.theme.primaryColor};
   }
   padding: 12% 6% 12% 6%;
   height: 220px;
@@ -488,11 +496,11 @@ width: 90%;
       margin-bottom: auto; 
       margin-top: 0.5rem;
       font-weight: 700;
-      color: ${props => props.theme.secondaryColor}
+      color: ${(props) => props.theme.secondaryColor}
   }
   p{
       font-weight: 300;
-      color: ${props => props.theme.text};
+      color: ${(props) => props.theme.text};
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
   img{

src/sections/Community/Handbook/conduct.js

@@ -13,7 +13,7 @@ const CodeofConduct = () => {
         <h1>Code of Conduct</h1>
       </div>
       <TOC />
-      <div className="page-section">
+      <div className="page-section" id="conduct-section">
         <Container>
           <div className="content">
             <p>Layer5 follows the <a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">CNCF Code of Conduct</a> which states that:</p>

src/sections/Community/Handbook/contributing.js

@@ -27,9 +27,9 @@ const contributingGuide = () => {
         <h1>Contribution</h1>
       </div>
       <TOC />
-      <div className="page-section">
+      <div className="page-section" >
         <Container>
-          <h2>General contribution flow</h2>
+          <h2 id="less-padding">General contribution flow</h2>
           <p>
             Pull requests (PRs) are the best ways to propose changes to a
             project repository. At Layer5 org, we use the Github Flow:

src/sections/Community/Handbook/designer.js

@@ -19,7 +19,7 @@ const Designers = () => {
       <div className="page-section">
         <Container>
           <div className="content writing_program">
-            <h2>UI/UX</h2>
+            <h2 id="less-padding">UI/UX</h2>
             <p>
             The UI/UX badge is given to community members who contribute towards creating or improving the visual design or user flow of various aspects such as websites, flyers, promotions, Meshery UI, and more. This recognition is awarded as an appreciation of their efforts in enhancing the user experience. The badge serves as a symbol of their expertise in UI/UX design and acknowledges their valuable contribution to the community.
             We are always looking for ways to improve the user experience of our projects. If you have ideas for how to improve the user experience of any of our projects, please share them with us.

src/sections/Community/Handbook/faq.js

@@ -16,7 +16,7 @@ const Faq = () => {
       <div className="page-section">
         <Container>
           <div className="content">
-            <h2>General FAQs:</h2><br />
+            <h2 id="less-padding">General FAQs:</h2><br />
             <h4>Q: Are Layer5’s solutions open source?</h4>
             <p>A: Yes, all Layer5 projects are licensed under Apache V2. Layer5 also offers extensions to the Meshery project in which Enterprise-centric functionality is commercially offered and supported.</p>
 

src/sections/Community/Handbook/mentorships.js

@@ -10,7 +10,7 @@ import TocPagination from "../../../components/handbook-navigation/TocPagination
 const ConductWrapper = styled.div`
 
     padding: 0 5rem 3rem 20rem;
-    margin-top: -36rem; 
+    margin-top: -46rem; 
     .explain-2{
       padding: 25px 0px;
       .text{

src/sections/Community/Handbook/projects.js

@@ -47,7 +47,7 @@ const Maintainer = () => {
 
               <a id="Layer5">
                 {" "}
-                <h3>
+                <h3 id="less-padding">
                   <a href="https://layer5.io/">
                     <img className="project-title-icon" src={layer5icon} alt="Layer5" />
                     &nbsp; Layer5{" "}

src/sections/Community/Handbook/security-vulnerabilities.js

@@ -22,7 +22,7 @@ const SecurityVulnerabilitiesPage = () => {
       <div className="page-section">
         <Container>
           <div className="content">
-            <h2>Reporting a vulnerability</h2><br />
+            <h2 id="less-padding">Reporting a vulnerability</h2><br />
             <p>We are very grateful to the security researchers and users that report security vulnerabilities. We investigate each report thoroughly.</p>
             <p>To make a report, send an email to the private <a href="mailto: [email protected]">[email protected]</a>  mailing list with the vulnerability details. For normal product bugs unrelated to latent security vulnerabilities, please head to the appropriate repository and submit a <a href="https://github.com/layer5io/layer5/issues/new/choose">new issue</a> .</p>
             <p>Note that the Layer5 community spans five GitHub organizations:</p>

src/sections/Community/Handbook/writing-program.js

@@ -33,7 +33,7 @@ const Writers = () => {
       <div className="page-section">
         <Container>
           <div className="content writing_program">
-            <h2>What is Layer5 Writing Program?</h2>
+            <h2 id="less-padding">What is Layer5 Writing Program?</h2>
             <p>
             The Layer5 Writing Program is a way to demonstrate your expertise, give back to the community, and help us produce great content. We collaborate with authors and technologists from around the world to produce high quality articles, blog posts, tutorials and other cloud native resources on Meshery, Kubernetes, service meshes, Docker and related technologies.
             </p>