From 37bab8ea6d344afa47da9a9640e4cf97c8445d13 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 30 Aug 2019 19:52:04 +0300 Subject: [PATCH] Template finishing touches --- gatsby-browser.js | 21 +++++++++++++++++++++ src/docs/pages/about.js | 17 +++++++++++------ src/docs/pages/list.js | 17 +++++++---------- src/docs/styles/_layout.scss | 24 +++++++++++++++--------- 4 files changed, 54 insertions(+), 25 deletions(-) diff --git a/gatsby-browser.js b/gatsby-browser.js index 09c615eb2..057dc2af6 100644 --- a/gatsby-browser.js +++ b/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 }; diff --git a/src/docs/pages/about.js b/src/docs/pages/about.js index e7fed6886..445eb4fc2 100644 --- a/src/docs/pages/about.js +++ b/src/docs/pages/about.js @@ -17,14 +17,19 @@ const AboutPage = ({ isDarkMode }) => ( A few word about us, our goals and our projects.

-

- The core goal of 30 seconds 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. +

+ The core goal of 30 seconds 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.

-

- 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.

-

- 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. + + +

+ 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. +

+

+ 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.

diff --git a/src/docs/pages/list.js b/src/docs/pages/list.js index 4f2428107..18e0dfd43 100644 --- a/src/docs/pages/list.js +++ b/src/docs/pages/list.js @@ -105,17 +105,14 @@ const ListPage = props => { ))}
{staticPages.map(page => ( - - {page.title} - - )} + -

{page.description}

- + +

{page.description}

+ + ))} diff --git a/src/docs/styles/_layout.scss b/src/docs/styles/_layout.scss index a2a146ead..2bf88c2ed 100644 --- a/src/docs/styles/_layout.scss +++ b/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 {