feat: Styling implemented for the pullquotes closes #15

ajfisher · Feb 1, 2020 · 636e5d9 · 636e5d9
1 parent 05e4c0a
commit 636e5d9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 39 deletions.
diff --git a/site/src/components/article.js b/site/src/components/article.js
@@ -103,15 +103,29 @@ const StyledPostArticle = styled(Article)`
     }
   }
 
-  & blockquote {
+  & blockquote, & p.has-pullquote::before {
+    font-style: italic;
     margin: auto var(--margin-indent);
     margin-right: 0;
     padding: 0 calc(var(--gutter) - var(--margin-indent) - 2px);
     padding-right: var(--gutter);
+    border-left: 2px solid var(--base);
+  }
 
-    & p {
-      padding: 0;
-    }
+  & blockquote > p {
+    padding: 0 !important;
+  }
+
+  & p.has-pullquote::before {
+    content: attr(data-pullquote);
+    display: block;
+    font-family: var(--heading-font-family);
+    font-weight: var(--heading-font-weight);
+
+    font-size: 4rem;
+    color: var(--base);
+    margin: inherit !important;
+    margin-left: calc(-1 * var(--gutter) + var(--margin-indent)) !important;
   }
 `;
 

diff --git a/site/src/components/layout.js b/site/src/components/layout.js
@@ -61,6 +61,10 @@ export const Article = styled.article`
 
     & p, & pre {
       padding: 0 var(--gutter);
+
+      & b {
+        font-weight: inherit;
+      }
     }
 
     /** use this for inline code snippets **/

diff --git a/site/src/styles/global.css b/site/src/styles/global.css
@@ -172,32 +172,6 @@ article figure figcaption a {
     padding: 0;
 }**/
 
-// This is used for the pullquotes
-
-article p b {
-    font-weight: inherit;
-}
-
-p.has-pullquote::before {
-    content: attr(data-pullquote);
-    display: block;
-	@include heading-font();
-
-    font-size: 4rem;
-    margin: inherit;
-    color: var(--base);
-    margin-left: -3rem;
-    padding-left: 3rem;
-    border-left: 2px solid var(--base);
-}
-
-article blockquote {
-    font-style: italic;
-    border-left: 2px solid var(--base);
-    /** margin-left: -2rem;
-    padding-left: 2rem; **/
-}
-
 /* MEDIA QUERIES FOR Medium Size display */
 
 @media only screen and (min-width: 480px) {
@@ -213,13 +187,4 @@ article blockquote {
 
 @media only screen and (min-width: 1140px) {
 
-/* ===============
-    Maximal Width
-   =============== */
-
-    .wrapper {
-        /** width: 1026px; /* 1140px less 33% for right padding and 10% either side margin */
-        /** margin: 0 auto !important; **/
-    }
-
 }