Removed compiled paragraph in blockquote

Update scss folder struc
Renamed custom blockquote to quote
Fixed more theme issues

content/projects/__demo__/index.md

@@ -6,7 +6,7 @@ thumb: img-02.jpg
 published: true
 
 started: 2019-09-23
-ended: 2019-10-02
+ended: null
 
 status: wip
 website: https://marvin.digital/

gatsby/browser/mdxCustomComponents.js

@@ -53,7 +53,9 @@ const ThematicBreak = (props) => (
 )
 const Blockquote = (props) => (
   <ContainerSmall>
-    <blockquote {...props} />
+    <blockquote {...props}>
+      <p>{props.children.props.children}</p>
+    </blockquote>
   </ContainerSmall>
 )
 const UnorderedList = (props) => (

src/pages/credits.mdx

@@ -7,6 +7,77 @@ export default (props) => {
 
 Credits to authors goes here.
 
-- Packages
 - Resources
 - ...
+
+## Packages used
+
+> Last update on: 13.01.2020
+
+```json
+{
+  "dependencies": {
+    "@ibm/plex": "^4.0.2",
+    "@mdx-js/mdx": "^1.5.3",
+    "@mdx-js/react": "^1.5.3",
+    "dayjs": "^1.8.19",
+    "gatsby": "^2.18.21",
+    "gatsby-image": "^2.2.38",
+    "gatsby-plugin-breadcrumb": "^6.3.0",
+    "gatsby-plugin-canonical-urls": "^2.1.19",
+    "gatsby-plugin-catch-links": "^2.1.24",
+    "gatsby-plugin-humans-txt": "^1.1.4",
+    "gatsby-plugin-layout": "^1.1.21",
+    "gatsby-plugin-manifest": "^2.2.37",
+    "gatsby-plugin-mdx": "^1.0.67",
+    "gatsby-plugin-module-resolver": "^1.0.3",
+    "gatsby-plugin-postcss": "^2.1.19",
+    "gatsby-plugin-preact": "^3.1.25",
+    "gatsby-plugin-purgecss": "^4.0.1",
+    "gatsby-plugin-react-helmet": "^3.1.21",
+    "gatsby-plugin-react-svg": "^3.0.0",
+    "gatsby-plugin-remove-generator": "^1.0.4",
+    "gatsby-plugin-robots-txt": "^1.5.0",
+    "gatsby-plugin-sass": "^2.1.27",
+    "gatsby-plugin-sharp": "^2.3.13",
+    "gatsby-plugin-sitemap": "^2.2.25",
+    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
+    "gatsby-remark-check-links": "^2.1.0",
+    "gatsby-remark-emoji": "0.0.3",
+    "gatsby-remark-external-links": "0.0.4",
+    "gatsby-remark-images": "^3.1.42",
+    "gatsby-remark-prismjs": "^3.3.30",
+    "gatsby-source-filesystem": "^2.1.46",
+    "gatsby-transformer-json": "^2.2.25",
+    "gatsby-transformer-remark": "^2.6.48",
+    "gatsby-transformer-sharp": "^2.3.12",
+    "ionicons": "^4.6.3",
+    "kleur": "^3.0.3",
+    "lodash": "^4.17.15",
+    "node-sass": "^4.13.0",
+    "postcss-easing-gradients": "^3.0.1",
+    "preact": "^10.2.1",
+    "prismjs": "^1.18.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-helmet": "^5.2.1",
+    "react-helmet-async": "^1.0.4",
+    "unist-util-visit": "^2.0.1",
+    "vanilla-click-outside": "^2.0.0"
+  },
+  "devDependencies": {
+    "del-cli": "^3.0.0",
+    "eslint": "^6.8.0",
+    "eslint-config-react-app": "^5.1.0",
+    "gatsby-plugin-remove-trailing-slashes": "^2.1.20",
+    "lighthouse": "^5.6.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^1.19.1",
+    "prompts": "^2.3.0",
+    "semver": "^7.1.1",
+    "taskz": "^1.3.0",
+    "typescript": "^3.7.4"
+  }
+}
+```

src/shortcodes/Blockquote.jsx → src/shortcodes/Quote.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 // import Img from 'gatsby-image'
 
-const Blockquote = ({ children, user }) => {
+const Quote = ({ children, user }) => {
   return (
-    <blockquote>
+    <div className="quote">
       <p>{children}</p>
       <footer>{user.name}</footer>
-    </blockquote>
+    </div>
   )
 }
 
-export default Blockquote
+export default Quote

src/styles/_base.scss

@@ -78,15 +78,11 @@ article {
     margin-bottom: var(--content-margin);
   }
 
-  h2 {
-    &:not(:first-of-type) {
-      padding-top: var(--spacing-xs); // margin does not work here
-    }
-  }
-
-  p {
-    margin-top: -7px; // this fixes typo height
-  }
+  // h2 {
+  //   &:not(:first-of-type) {
+  //     padding-top: var(--spacing-xs); // margin does not work here
+  //   }
+  // }
 
   h1 {
     font-size: var(--text-xxl);

src/styles/app.scss

@@ -38,36 +38,32 @@
 // Components
 
 @import 'components/backdrop';
-@import 'components/button';
-@import 'components/code';
 @import 'components/dot';
 @import 'components/footnote';
-@import 'components/form';
 @import 'components/icon';
-@import 'components/image';
-@import 'components/input';
 @import 'components/language';
-@import 'components/link';
-@import 'components/list';
 @import 'components/logo';
 @import 'components/overlay';
-@import 'components/status';
 @import 'components/separator';
-@import 'components/table';
-@import 'components/text';
+@import 'components/status';
 @import 'components/theme-switch';
 @import 'components/tooltip';
 
 // ------------------------------
 // Elements
 
 @import 'elements/blockquote';
+@import 'elements/button';
+@import 'elements/code';
 @import 'elements/figure';
-
-// ------------------------------
-// Utils
-
-@import 'utils/text';
+@import 'elements/form';
+@import 'elements/image';
+@import 'elements/input';
+@import 'elements/link';
+@import 'elements/list';
+@import 'elements/quote';
+@import 'elements/table';
+@import 'elements/text';
 
 // ------------------------------
 // Modules

src/styles/components/_theme-switch.scss

@@ -10,7 +10,6 @@
   box-shadow: 0 1px 1px #{rgba($color-dark, 0.26)},
     0 3px 2px #{rgba($color-dark, 0.12)};
   border: none;
-  transform: translate3d(0, 0, 0);
 
   --switch-color-light: #fff;
   --switch-color-dark: #000;

src/styles/elements/_blockquote.scss

@@ -1,39 +1,12 @@
 article {
   blockquote {
-    position: relative;
     margin: 0 0 var(--content-margin) 0;
-    padding: var(--spacing-xxl) var(--spacing-xxl)
-      calc(var(--spacing-xxl) - 5px);
-    background: var(--color-10);
-    font-family: var(--font-serif);
-    z-index: 0;
-    text-align: center;
-
-    &::before {
-      content: '"';
-      position: absolute;
-      top: 0px;
-      left: 20px;
-      font-size: 200px;
-      font-weight: var(--font-black);
-      font-family: var(--font-serif);
-      line-height: 1;
-      z-index: -1;
-      opacity: 0.1;
-    }
+    padding: var(--spacing-md) var(--spacing-xl);
+    border-left: 2px solid var(--color-primary);
 
     p {
       margin-bottom: 0;
     }
-
-    footer {
-      margin-top: var(--spacing-lg);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      font-size: var(--text-sm);
-      font-weight: var(--font-semi-bold);
-      font-family: var(--font-sans);
-    }
   }
 }
 

src/styles/elements/_quote.scss

@@ -0,0 +1,41 @@
+.quote {
+  position: relative;
+  margin: 0 0 var(--content-margin) 0;
+  padding: var(--spacing-xxl) var(--spacing-xxl) calc(var(--spacing-xxl) - 5px);
+  background: var(--color-10);
+  font-family: var(--font-serif);
+  z-index: 0;
+  text-align: center;
+
+  &::before {
+    content: '"';
+    position: absolute;
+    top: 0px;
+    left: 20px;
+    font-size: 200px;
+    font-weight: var(--font-black);
+    font-family: var(--font-serif);
+    line-height: 1;
+    z-index: -1;
+    opacity: 0.1;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  footer {
+    margin-top: var(--spacing-lg);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: var(--text-sm);
+    font-weight: var(--font-semi-bold);
+    font-family: var(--font-sans);
+  }
+}
+
+[theme='light'] {
+  .quote {
+    background: var(--color-02);
+  }
+}

src/styles/components/_text.scss → src/styles/elements/_text.scss

@@ -27,3 +27,7 @@
 .cursor-help {
   cursor: help;
 }
+
+.text-center {
+  text-align: center;
+}

src/styles/layouts/_header.scss

@@ -45,6 +45,23 @@
 
 .header-fixed #header {
   position: fixed;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200%;
+    pointer-events: none;
+    user-select: none;
+    z-index: -1;
+    background-image: linear-gradient(
+      to bottom,
+      var(--color-dark-60),
+      transparent
+    );
+  }
 }
 
 .header-click-through #header {
@@ -59,6 +76,14 @@
 }
 
 [theme='light'] #header {
+  &::before {
+    background-image: linear-gradient(
+      to bottom,
+      var(--color-light-40),
+      transparent
+    );
+  }
+
   &.sticky {
     background: var(--color-light-80);
 

src/styles/layouts/_hero.scss

@@ -137,19 +137,19 @@
     &::after {
       background-image: linear-gradient(
         0deg,
-        rgb(255, 255, 255),
-        rgba(255, 255, 255, 0.9914) 14.71%,
-        rgba(255, 255, 255, 0.9662) 26.23%,
-        rgba(255, 255, 255, 0.92531) 35.17%,
-        rgba(255, 255, 255, 0.86963) 42.15%,
-        rgba(255, 255, 255, 0.80006) 47.76%,
-        rgba(255, 255, 255, 0.7175) 52.63%,
-        rgba(255, 255, 255, 0.62286) 57.34%,
-        rgba(255, 255, 255, 0.51704) 62.52%,
-        rgba(255, 255, 255, 0.40094) 68.77%,
-        rgba(255, 255, 255, 0.27546) 76.69%,
-        rgba(255, 255, 255, 0.14152) 86.9%,
-        rgba(255, 255, 255, 0)
+        rgb(250, 252, 255),
+        rgba(250, 252, 255, 0.9914) 14.71%,
+        rgba(250, 252, 255, 0.9662) 26.23%,
+        rgba(250, 252, 255, 0.92531) 35.17%,
+        rgba(250, 252, 255, 0.86963) 42.15%,
+        rgba(250, 252, 255, 0.80006) 47.76%,
+        rgba(250, 252, 255, 0.7175) 52.63%,
+        rgba(250, 252, 255, 0.62286) 57.34%,
+        rgba(250, 252, 255, 0.51704) 62.52%,
+        rgba(250, 252, 255, 0.40094) 68.77%,
+        rgba(250, 252, 255, 0.27546) 76.69%,
+        rgba(250, 252, 255, 0.14152) 86.9%,
+        rgba(250, 252, 255, 0)
       );
     }
   }

src/styles/pages/_writings.scss

@@ -29,7 +29,7 @@
       padding-bottom: var(--spacing-xs);
 
       &:not(:last-child) {
-        border-bottom: 1px solid var(--color-10);
+        border-bottom: 1px solid var(--divider-color);
       }
     }
 
@@ -46,11 +46,12 @@
     }
 
     time {
-      color: var(--color-02);
+      color: var(--text-color-dark);
     }
 
     p {
       font-size: var(--text-lg);
+      color: var(--text-color-dark);
     }
   }
 }

src/styles/themes/_dark.scss

@@ -6,4 +6,6 @@
   --text-color-richer: var(--color-05);
   --text-color-dark: var(--color-07);
   --text-color-highlight: var(--color-primary);
+
+  --divider-color: var(--color-09);
 }