Website: Add article subtitle styles, update mobile article styles (#6110)

* Website: update mobile styles, article subtitle styles, fix issues in two markdown articles

* add comment

articles/work-may-be-watching-but-it-might-not-be-as-bad-as-you-think.md

@@ -1,4 +1,4 @@
-## Work may be watching, but it might not be as bad as you think.
+# Work may be watching, but it might not be as bad as you think.
 
 ![A friendly eye of Sauron watching someone work](../website/assets/images/articles/work-may-be-watching-but-it-might-not-be-as-bad-as-you-think-cover-800x502@2x.png)
 *Transparency and collaboration are becoming the norm for company device monitoring.*

website/assets/js/pages/articles/basic-article.page.js

@@ -3,7 +3,8 @@ parasails.registerPage('basic-article', {
   //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
-    //…
+    articleHasSubtitle: false,
+    articleSubtitle: undefined,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -14,6 +15,11 @@ parasails.registerPage('basic-article', {
   },
   mounted: async function() {
     //…
+    // If the article has a subtitle (an H2 immediatly after an H1), we'll set articleSubtitle to be the text of that heading
+    this.articleHasSubtitle = $('[purpose="article-content"]').find('h1 + h2');
+    if(this.articleHasSubtitle.length > 0 && this.articleHasSubtitle[0].innerText) {
+      this.articleSubtitle = this.articleHasSubtitle[0].innerText;
+    }
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

website/assets/styles/pages/articles/basic-article.less

@@ -12,10 +12,16 @@
 
   [purpose='article-title'] {
     padding-top: 80px;
+    margin-bottom: 28px;
     h1 {
-      margin-bottom: 16px;
+      margin-bottom: 4px;
       line-height: 38px;
     }
+    h2 {
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 32px;
+    }
   }
 
   [purpose='article-details'] {
@@ -37,6 +43,9 @@
     h1:first-of-type {
       display: none;
     }
+    h1:first-of-type + h2:first-of-type {
+      display: none;
+    }
     img {
       max-width: 100%;
       width: auto;
@@ -44,7 +53,7 @@
       max-height: 100%;
       margin-left: auto;
       margin-right: auto;
-      padding: 24px 0px 40px 0px;
+      padding: 24px 0px 16px 0px;
     }
     a {
       color: @core-vibrant-blue;
@@ -72,10 +81,11 @@
     }
     img + em { // Image captions
       position: relative;
-      top: -24px;
+      top: -12px;
       display: flex;
       align-items: center;
       flex-direction: column;
+      margin-bottom: 16px;
     }
     ul, ol {
       padding-left: 16px;
@@ -142,6 +152,10 @@
       }
     }
   }
+  [purpose='large-button-text'] {
+    display: block;
+  }
+
   @media (max-width: 991px) {
     [purpose='article-title'] {
       padding-top: 60px;
@@ -151,6 +165,30 @@
     }
   }
 
+  @media (max-width: 769px) {
+    [purpose='article-title'] {
+      padding-top: 40px;
+      margin-bottom: 8px;
+      h1 {
+        font-size: 28px;
+        line-height: 38px;
+      }
+    }
+    [purpose='article-content'] {
+      img {
+        padding-bottom: 0px;
+      }
+      img + em { // Image captions
+        top: 4px;
+        margin-bottom: 16px;
+      }
+    }
+  }
 
+  @media (max-width: 375px) {
+    [purpose='large-button-text'] { // Changes the Slack call to action (Join the Fleet community on Slack -> Join Fleet on Slack)
+      display: none;
+    }
+  }
 
 }

website/views/pages/articles/basic-article.ejs

@@ -2,6 +2,7 @@
   <div style="max-width: 800px;" class="container-fluid px-0">
     <div purpose="article-title">
       <h1>{{thisPage.meta.articleTitle}}</h1>
+      <h2 v-if="articleHasSubtitle && articleSubtitle !== undefined">{{articleSubtitle}}</h2>
     </div>
     <div purpose="article-details" class="d-flex flex-row align-items-center">
     <span><js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
@@ -22,7 +23,7 @@
         </a>
         <a href="/slack" target="_blank" class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0" purpose="next-steps-button">
           <img class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
-          Join the Fleet community on Slack
+          Join <span purpose="large-button-text">&nbsp;the&nbsp;</span> Fleet <span purpose="large-button-text">&nbsp;community&nbsp;</span>on Slack
         </a>
       </div>
     </div>