Template finishing touches

gatsby-browser.js

@@ -5,4 +5,25 @@
  */
 
 // You can delete this file if you're not using it
+
+let locationScrollTops = [];
+
+const onPreRouteUpdate = ({ location, prevLocation }) => {
+  try {
+    let scrollTop = document.querySelector('.content').scrollTop;
+    locationScrollTops[prevLocation.pathname] = scrollTop;
+  }
+  catch (e) { }
+};
+
+const onRouteUpdate = ({ location, prevLocation }) => {
+  try {
+    if (locationScrollTops[location.pathname]) {
+      document.querySelector('.content').scrollTop = locationScrollTops[location.pathname];
+    }
+  }
+  catch (e) { }
+}
+
 export { default as wrapRootElement } from './src/docs/state/ReduxWrapper';
+export { onPreRouteUpdate, onRouteUpdate };

src/docs/pages/about.js

@@ -21,10 +21,15 @@ const AboutPage = ({ isDarkMode }) => (
           The core goal of <strong>30 seconds</strong> is to provide a quality resource for beginner and advanced developers alike. We want to help improve the software development ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones.
         </p>
         <p style={{ textAlign: 'justify' }}>
-          In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. 
+          We believe that coding has to be easily accesible and this is why we provide all of our resources for free. Meanwhile, we try to constantly engage the open source community both as a means to understand the needs of our fellow developers and as an opportunity for people to actively participate in open source software.
+        </p>
+      </SimpleCard>
+      <SimpleCard title='Our work'>
+        <p style={{ textAlign: 'justify' }}>
+          In order to help grow the open source community, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds.
         </p>
         <p style={{ textAlign: 'justify' }}>
-          The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.
+          The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready. We strive, however, to keep our collections up to date and add content as often as possible to ensure we cover a wide variety of topics and techniques.
         </p>
       </SimpleCard>
       <SimpleCard title='Our story'>

src/docs/pages/list.js

@@ -105,17 +105,14 @@ const ListPage = props => {
           ))}
         <br/>
         {staticPages.map(page => (
-          <SimpleCard 
-            title={(
           <Link
             to={`/${page.url}`}
+            className='clickable-card-wrapper'
           >
-                {page.title}
-              </Link>
-            )}
-          >
+            <SimpleCard title={page.title}>
               <p>{page.description}</p>
             </SimpleCard>
+          </Link>
         ))}
       </Shell>
     </>

src/docs/styles/_layout.scss

@@ -19,10 +19,10 @@
     grid-template-rows: 100%;
   }
   // Large screen size (desktop, laptop)
-  @media screen and (min-width: $layout-large-breakpoint) {
-    grid-template-areas: "menu . content .";
-    grid-template-columns: 62px calc((100vw - 830px) / 2) 768px calc((100vw - 830px) / 2);
-  }
+  // @media screen and (min-width: $layout-large-breakpoint) {
+  //   grid-template-areas: "menu . content .";
+  //   grid-template-columns: 62px calc((100vw - 830px) / 2) 768px calc((100vw - 830px) / 2);
+  // }
 }
 // Menu container
 header.menu {
@@ -32,21 +32,26 @@ header.menu {
 .content {
   transition: 0.3s ease all;
   grid-area: content;
+  overflow-x: hidden;
   overflow: auto;
   background: var(--back-color);
   &::-webkit-scrollbar-track {
     background-color: var(--scrollbar-back-color);
-    margin: 0.5rem 0;
-    border-radius: 0.125rem;
+    margin: 0.25rem 0;
+    border-radius: 0.1875rem;
   }
   &::-webkit-scrollbar {
-    width: 4px;
+    width: 6px;
     background: transparent;
   }
   &::-webkit-scrollbar-thumb {
     background-color: var(--scrollbar-fore-color);
     border: 1px solid var(--scrollbar-fore-color-lighter);
-    border-radius: 0.125rem;
+    border-radius: 0.1875rem;
+  }
+  @media screen and (min-width: calc(768px + 62px)) {
+    padding-left: calc((100% - 768px - 62px) / 2);
+    padding-right: calc((100% - 768px - 62px) / 2);
   }
 }
 
@@ -167,7 +172,8 @@ p.light-sub {
 // Category/tag title
 .tag-title {
   transition: 0.3s ease all;
-  font-size: 1.125rem;
+  font-size: 1.5rem;
+  text-align: center;
   color: var(-fore-color-dark);
   line-height: 1.375;
   a {