added blockquote styling

README.md

@@ -5,7 +5,6 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 ## Todo
 
 - "time to read" (https://www.gatsbyjs.com/plugins/gatsby-remark-reading-time/)
-- quote needs a visual indicator (like a line or quote mark) in front to show it's a quote
 
 <!-- migrations -->
 
@@ -17,4 +16,3 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 
 - release to sftp or gh-pages
 - lighthouse doesn't like the blue... :)
-- url, id, title disqus

src/assets/scss/base/_generic.scss

@@ -78,15 +78,13 @@ img {
 }
 
 hr {
-  background-image: linear-gradient(
+  background-image: linear-gradient(to bottom,
-    to bottom,
+      transparent 1px,
-    transparent 1px,
+      transparent 11px,
-    transparent 11px,
+      $color-base 11px,
-    $color-base 11px,
+      $color-base 15px,
-    $color-base 15px,
+      transparent 15px,
-    transparent 15px,
+      transparent 26px);
-    transparent 26px
-  );
   background-size: 100% 26px;
   border: 0;
   color: $color-base;
@@ -128,11 +126,32 @@ p {
 }
 
 blockquote {
+  border-color: #d9d9d9;
+  border-style: solid;
+  border-width: 2px 0;
+  display: block;
+  // border-color: #eee;
   font-style: italic;
-  padding: 0;
+  margin: 1.5em 0;
+  padding: 1.5em 0 0.5em;
+  position: relative;
   text-align: center;
 }
 
+blockquote:before {
+  background: $color-bg;
+  color: $color-gray;
+  content: "\201C";
+  font: 4em/1.08em ubuntu;
+  height: 2rem;
+  left: 50%;
+  position: absolute;
+  text-align: center;
+  top: 0em;
+  transform: translate(-50%, -75%);
+  width: 3rem;
+}
+
 figure {
   display: block;
   height: auto;
@@ -150,6 +169,7 @@ figcaption {
 }
 
 @include breakpoint-sm {
+
   figure.float-left,
   figure.float-right {
     max-width: 310px;