Font changes to story page

Changed font family and added some small size/padding tweaks
cygnusb2b · Jul 16, 2018 · c8e5704 · c8e5704
1 parent 88caa08
commit c8e5704
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/components/Story/Body.jsx b/src/components/Story/Body.jsx
@@ -15,14 +15,23 @@ const Body = (props) => {
         #story-body .container *{
           max-width: 100%;
         }
+        
         #story-body {
-          font-family: 'News Cycle', sans-serif;
+          font-family: 'Raleway', sans-serif;
         }
 
         #story-body > .container {
           margin-top: -10vh;
+        }
+
+        #story-body h3 {
+          margin-top: 2rem;
+        }
 
+        #story-body h2.teaser {
+          font-size: 1.5rem;
         }
+
         @media screen and (max-width: 600px) {
           .fr-img-caption,
           iframe {
@@ -31,10 +40,11 @@ const Body = (props) => {
         }
       `}
       </style>
-      <Container className="shadow-lg p-3 mb-5 bg-white rounded">
-        <h2 className="mt-1 mb-4 font-italic">
+      <Container className="shadow-lg p-3 mb-4 p-lg-5 bg-white rounded">
+        <h2 className="mb-4 font-weight-light teaser">
           {teaser}
         </h2>
+        <hr className="mt-4 mb-4" />
         {/* eslint-disable-next-line react/no-danger */}
         <div className="fr-view" dangerouslySetInnerHTML={createMarkup(body)} />
       </Container>

diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
@@ -32,7 +32,7 @@ const Header = (props) => {
         }
 
         div.bg-imgIx:before {
-          backgound: transparent
+          backgound: transparent;
           transition: background 0.5s linear;
           margin-bottom: calc(20vh - 55px);
         }
@@ -44,7 +44,7 @@ const Header = (props) => {
           right: 0;
           bottom: 0;
           left: 0;
-          background:rgba(0,0,0,0.25);
+          background:rgba(0,0,0,0.45);
           -webkit-transition: background 1.5s ease-out;
           -moz-transition: background 1.5s ease-out;
           -o-transition: background 1.5s ease-out;
@@ -64,10 +64,10 @@ const Header = (props) => {
         }
 
         .post-heading h1 {
-          text-shadow: -3px -3px 3px rgba(0,0,0,.25), 3px 3px 3px #000;
+          // text-shadow: -3px -3px 3px rgba(0,0,0,.25), 3px 3px 3px #000;
           color: #fff;
-          font-size: 6vmax;
-          font-family: 'Roboto', sans-serif;
+          font-size: 5vmax;
+          font-family: 'Ubuntu', sans-serif;
         }
       `}
       </style>

diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
@@ -14,7 +14,7 @@ export default class MyDocument extends Document {
           <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
           <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossOrigin="anonymous" />
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_style.css" type="text/css" />
-          <link href="https://fonts.googleapis.com/css?family=News+Cycle:400,700|Open+Sans+Condensed:300,700|Roboto:400,700" rel="stylesheet" type="text/css" />
+          <link href="https://fonts.googleapis.com/css?family=News+Cycle:400,700|Open+Sans+Condensed:300,700|Roboto:400,700|Ubuntu:400,700|Raleway:300,400,500" rel="stylesheet" type="text/css" />
         </Head>
         <body>
           <Main />