feat: 📱 complete responsive design on mobile / tablet

content/index.mdx

@@ -33,17 +33,18 @@ you treat your documentation in the same way as your code.
 - GitBook-like style theme, inspired by https://docs.gitbook.com/
 - light / dark mode themes
 - rich-content and rich-text features like text formatting, graphs and diagrams, 
-  quotes, columnar layout, emojis, highlights, live code editor, syntax highlighting,
+  quotes, columnar layout, cards, emojis, highlights, live code editor, syntax highlighting,
   external code snippets and many many more!
-
+- Progressive Web App which can work offline
 
 - search integration with [Algolia](https://www.algolia.com/) (local search capabilities
   are planned)
-- Progressive Web App which can work offline
+- responsive, optimized for mobile devices
 - integration with Google Analytics
 - Search Engine Optimization (_SEO_) friendliness
 - RSS feed
 - easy way to edit content on Gitlab, Github or Bitbucket
+- custom CLI helping to initialize and develop BooGi apps
 - easy deployment on platform of your choice
 
 </Layout>
@@ -52,14 +53,11 @@ you treat your documentation in the same way as your code.
 
 <Info>Features listed here will arrive in Q2/Q3 2020!</Info>
 
-- CLI to easily start, write, build, preview and deploy documentation
 - local search capabilities without need to integrate with an external system
 - full screen mode
 - sharing on social media
 - syntax highlighting improvements (more languages, copy code snippets, show language used)
-- new components: tabs, math formulas, inline page links, foldable sections
-- improved styling and theming
-- properly working mobile styling
+- new components: tabs, math formulas
 - Kubernetes Helm Chart
 
 --- 

gatsby-config.js

@@ -3,7 +3,6 @@ require('dotenv').config();
 const queries = require('./src/utils/algolia');
 const configManager = require('./src/utils/config');
 const path = require('path');
-const globImporter = require('node-sass-glob-importer');
 const emoji = require('./src/utils/emoji');
 const _ = require('lodash');
 
@@ -16,12 +15,7 @@ const plugins = [
   'gatsby-plugin-pinterest',
   'gatsby-plugin-twitter',
   'gatsby-plugin-sharp',
-  {
-    resolve: 'gatsby-plugin-sass',
-    options: {
-      importer: globImporter(),
-    },
-  },
+  'gatsby-plugin-sass',
   {
     resolve: `gatsby-plugin-layout`,
     options: {

package.json

@@ -57,7 +57,6 @@
     "gatsby-remark-images": "3.3.10",
     "gatsby-remark-jargon": "2.7.1",
     "gatsby-remark-mermaid": "2.0.0",
-    "gatsby-remark-sectionize": "1.0.0",
     "gatsby-source-filesystem": "2.3.11",
     "gatsby-source-local-git": "1.0.0",
     "gatsby-transformer-gitinfo": "1.1.0",
@@ -68,7 +67,6 @@
     "lodash.flatten": "4.4.0",
     "lodash.startcase": "4.4.0",
     "node-sass": "4.14.1",
-    "node-sass-glob-importer": "5.3.2",
     "puppeteer": "5.2.1",
     "react": "16.13.1",
     "react-collapsible": "^2.8.0",
@@ -83,8 +81,8 @@
     "react-scrollspy": "3.4.3",
     "react-visibility-sensor": "5.1.1",
     "remark-abbr": "1.4.0",
-    "remark-autolink-headings": "6.0.1",
-    "remark-emoji": "2.1.0"
+    "remark-emoji": "2.1.0",
+    "unist-util-find-after": "3.0.0"
   },
   "license": "MIT",
   "main": "n/a",

plugins/gatsby-remark-sectionize-toc/package.json

@@ -4,7 +4,8 @@
   "author": "Mateusz Filipowicz <matfilipowicz@gmail.com>",
   "version": "0.1.0",
   "dependencies": {
-    "remark": "^12.0.0"
+    "remark": "12.0.0",
+    "unist-util-find-after": "^3.0.0"
   },
   "license": "MIT",
   "main": "index.js"

src/components/Buttons/ButtonIcon.js

@@ -6,6 +6,7 @@ const ButtonIconWrapper = styled('div')`
   display: flex;
   justify-content: flex-end;
   padding: 4px;
+  outline: none;
 
   background-color: ${(props) => props.background};
   border-radius: 50%;

src/components/EditOnRepo/EditOnRepo.js

@@ -4,11 +4,24 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { Link } from '../';
 import { shadowAround } from '../../styles';
+import { onTablet, onMobile } from '../../styles/responsive';
 
 const Edit = styled('div')`
-  padding: 0 16px;
   text-align: right;
+  ${onMobile} {
+    padding-left: 0;
+  }
   a {
+    ${onTablet} {
+      padding: 5px 12px;
+      min-width: auto;
+      font-size: 14px;
+      font-weight: 400;
+    }
+    ${onMobile} {
+      padding: 4px 8px;
+      font-size: 13px;
+    }
     font-weight: 500;
     line-height: 1em;
     cursor: pointer;
@@ -31,9 +44,10 @@ const Edit = styled('div')`
 
 const EditButton = styled(({ className, icon, link, text }) => {
   return (
-    <Edit className={'mobileView'}>
+    <Edit>
       <Link className={className} to={link} css={shadowAround} target={'_blank'}>
-        <img src={icon} alt={'Git Repository'} loading={'lazy'} /> {text}
+        <img src={icon} alt={'Git Repository'} loading={'lazy'} /> 
+        <span>{text}</span>
       </Link>
     </Edit>
   );
@@ -42,8 +56,13 @@ const EditButton = styled(({ className, icon, link, text }) => {
   min-height: 40px;
   display: flex;
   align-items: center;
-  @media (max-width: ${(props) => props.theme.breakpoints.small}) {
-    width: fit-content;
+  ${onTablet} {
+    height: 37px;
+    min-height: 37px;
+  }
+  ${onMobile} {
+    height: 32px;
+    min-height: 32px;
   }
   img {
     width: 20px;