Merge branch 'master' into adds-scim-provisioning

src/components/AuthorCardTop.jsx

@@ -12,7 +12,7 @@ export default function AuthorCard({ author }) {
         style={{
           fontSize: "16px",
           fontWeight: "normal",
-          margin: "-16px 0px 32px",
+          margin: "16px 0px 32px",
           color: "#222",
         }}
       >

src/pages/blog/{MarkdownRemark.fields__slug}.js

@@ -21,6 +21,7 @@ export const pageQuery = graphql`
         title
         cover
         author
+        description
       }
       fields {
         slug

src/styles/blog.css

@@ -269,9 +269,7 @@
   gap: 8px;
 
   padding-bottom: 36px;
-  margin-bottom: 32px;
-  margin-top: 42px;
-  border-bottom: 1px solid #ddd;
+  margin: 32px 0px 16px;
 }
 
 .author-card-top-container img{

src/styles/style.css

@@ -15,7 +15,7 @@
   --gatsbyMaxWidth-3xl: 48rem;
   --gatsbyMaxWidth-4xl: 56rem;
   --gatsbyMaxWidth-full: "100%";
-  --gatsbyMaxWidth-wrapper: 680px;
+  --gatsbyMaxWidth-wrapper: 900px;
   --gatsbySpacing-px: "1px";
   --gatsbySpacing-0: 0;
   --gatsbySpacing-1: 0.25rem;
@@ -271,19 +271,6 @@ a:focus {
   padding: 3.75rem 0rem;
 }
 
-@media screen and (max-width: 768px) {
-  .global-wrapper {
-    width: 540px;
-  }
-}
-
-@media screen and (max-width: 572px) {
-  .global-wrapper {
-    width: 100%;
-    padding: 60px 24px 10px;
-  }
-}
-
 .global-wrapper[data-is-root-path="true"] .bio {
   margin-bottom: var(--gatsbySpacing-20);
 }
@@ -340,10 +327,36 @@ a:focus {
   border-radius: 100%;
 }
 
+.blog-post header{
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+
+  border-bottom: 1px solid #ddd;
+
+  margin-bottom: 32px;
+  gap: 42px;
+}
+
+.blog-post header .blog-description{
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: 0em;
+  text-align: left;
+  margin: 0;
+}
+
+.blog-post img{
+  width: 50%;
+  border-radius: 14px;
+}
+
 .blog-post header h1 {
   margin: var(--gatsbySpacing-0) var(--gatsbySpacing-0) var(--gatsbySpacing-8) var(--gatsbySpacing-0);
-  font-size: 39px;
-  line-height: 3.4375rem;
+  font-size: 36px;
+  line-height: 50px;
   margin: 20px 0px 20px;
 }
 
@@ -498,4 +511,28 @@ section[itemprop="articleBody"] img[src$=".gif"] {
 
 .primary-button:hover{
   box-shadow: 2px 2px 20px 0 rgba(0,0,0,.16);
+}
+
+
+@media screen and (max-width: 968px) {
+  .global-wrapper {
+    width: 540px;
+  }
+
+  .blog-post header{
+    flex-direction: column;
+    gap: 0px;
+  }
+
+  .blog-post img{
+    width: 100%;
+    border-radius: 6px;
+  }
+}
+
+@media screen and (max-width: 572px) {
+  .global-wrapper {
+    width: 100%;
+    padding: 60px 24px 10px;
+  }
 }

src/templates/blog-post.js

@@ -47,19 +47,22 @@ const BlogPostTemplate = ({ data, location }) => {
         itemScope
         itemType="http://schema.org/Article"
       >
-        <header>
+         <header>
           {post.frontmatter.cover && (
             <img
               style={{ maxWidth: "100%", marginBottom: "16px" }}
               src={withPrefix("/covers/" + post.frontmatter.cover)}
               alt="Cover"
             />
           )}
-          <p className="blog-date">{post.frontmatter.date}</p>
-          <h1 itemProp="headline">{post.frontmatter.title}</h1>
-          {post.frontmatter.author && (
-           <AuthorCard author={post.frontmatter.author}/>
-          )}
+          <div className="blog-header-content-container">
+            <p className="blog-date">{post.frontmatter.date}</p>
+            <h1 itemProp="headline">{post.frontmatter.title}</h1>
+            <p className="blog-description">{post.frontmatter.description}</p>
+            {post.frontmatter.author && (
+              <AuthorCard author={post.frontmatter.author} />
+            )}
+          </div>
         </header>
         <section
           dangerouslySetInnerHTML={{ __html: getUpdatedHtml(post.html) }}