Sidebar mobile on top (#66)

* style: add padding top and descrease padding bottom

* chore: increase the size of commit header

* style: move the navigation to the bottom

* style(sidebar): move position to the top

* style: increase the padding of pages wrap

* chore: update versionn to 1.2.5

commitlint.config.js

@@ -2,7 +2,7 @@ module.exports = {
   rules: {
     'body-leading-blank': [1, 'always'],
     'footer-leading-blank': [1, 'always'],
-    'header-max-length': [2, 'always', 72],
+    'header-max-length': [2, 'always', 100],
     'scope-case': [2, 'always', 'lower-case'],
     'subject-case': [
       2,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bruno-dulcetti-site",
   "description": "Bruno Dulcetti - web standards, css, xhtml e tecnologia em geral.",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "author": "Bruno Dulcetti <brunodulcetti@gmail.com>",
   "scripts": {
     "build": "yarn clean && gatsby build",

src/components/layout/styles.js

@@ -19,7 +19,8 @@ export const LayoutMain = styled.main`
 
   ${media.lessThan('large')`
     flex-direction: column;
-    padding-bottom: 5rem;
+    padding-bottom: 1rem;
+    padding-top: 3.55rem;
   `}
 
   ${media.greaterThan('large')`

src/components/navigation/styles.js

@@ -7,7 +7,8 @@ import { themes } from '../../styles/themes';
 export const Navigation = styled.section`
   ${media.lessThan('large')`
     background-color: ${themes.palette.sidebar.bg};
-    border-bottom: 1px solid ${themes.palette.general.boxShadows};
+    border-top: 1px solid ${themes.palette.general.boxShadows};
+    bottom: 0;
     display: flex;
     flex-direction: column;
     height: calc(100vh - 55px);
@@ -17,7 +18,6 @@ export const Navigation = styled.section`
     position: fixed;
     transform: translateX(-100%);
     transition: all 0.5s ease 0s;
-    top: 0;
     width: 100%;
     z-index: 1;
 

src/components/sidebar/styles.js

@@ -22,12 +22,12 @@ export const Sidebar = styled.aside`
 
   ${media.lessThan('large')`
     align-items: center;
-    bottom: 0;
-    box-shadow: 0px 3px 6px 2px ${themes.palette.general.boxShadows};
+    box-shadow: 0px 1px 1px 1px ${themes.palette.general.boxShadows};
     display: flex;
     height: 55px;
     justify-content: space-between;
     padding-left: 15px;
+    top: 0;
     width: 100%;
   `}
 `;

src/styles/pages/general.js

@@ -11,7 +11,7 @@ export const PagesWrap = styled.div`
   max-width: ${themes.grid.maxWidth};
 
   ${media.lessThan('large')`
-    padding: 5px 20px;
+    padding: 1rem 1.3rem;
   `}
 
   img {