CCS-3781: Adding styles for related/additional content (#424)

Also added example in ascii-doc-styleguide.html for testing

pantheon-bundle/frontend/src/web-assets/dev-preview/ascii-doc-styleguide.adoc

@@ -36,9 +36,10 @@ v1.0.3, 2014-12-28
 
 * link:/dev-preview/assembly_access-control-list.html[Short Assembly Demo]
 
-// Stolen and modified from: 
+// Stolen and modified from:
 // https://gist.github.com/mojavelinux/8198e5a5ac2570a0cf30
 
+
 AsciiDoc is a mature, lightweight markup language for authoring notes, articles, documentation, books, web pages, slide decks and man pages in plain text.
 {description}
 
@@ -50,6 +51,18 @@ AsciiDoc produces complementary output when generating DocBook.
 Most features labeled "`Asciidoctor only`" can be made available to the native AsciiDoc processor by using https://github.com/asciidoctor/asciidoctor/blob/master/compat/asciidoc.conf[this AsciiDoc configuration file] from the Asciidoctor project.
 ====
 
+== Pantheon Specific Elements
+
+[.additional-resources]
+.Additional resources
+
+* link:https://access.redhat.com/articles/3131341[Support Policies for RHEL High Availability Clusters - Microsoft Azure Virtual Machines as Cluster Members]
+* link:https://access.redhat.com/articles/3071021[Support Policies for RHEL High Availability clusters - Transport Protocols]
+* link:https://cloud.google.com/vpc/docs/vpc[VPC network overview]
+* link:https://access.redhat.com/articles/2679211[Exploring RHEL High Availability's Components, Concepts, and Features - Overview of Transport Protocols]
+* link:https://access.redhat.com/articles/2679251[Design Guidance for RHEL High Availability Clusters - Selecting the Transport Protocol]
+
+
 == Paragraphs
 
 Paragraphs don't require any special markup in AsciiDoc.

pantheon-bundle/frontend/src/web-assets/dev-preview/ascii-doc-styleguide.html

@@ -56,6 +56,31 @@ <h1>AsciiDoc Syntax Quick Reference</h1>
 </section>
 </div>
 <section class="sect1">
+<h2 id="pantheon-specific-elements">Pantheon Specific Elements</h2>
+<div class="sectionbody">
+<div class="ulist additional-resources">
+<strong class="heading" id="ulist_heading_0">Additional resources</strong>
+<ul aria-labelledby="ulist_heading_0">
+<li>
+<p><a href="https://access.redhat.com/articles/3131341">Support Policies for RHEL High Availability Clusters - Microsoft Azure Virtual Machines as Cluster Members</a></p>
+</li>
+<li>
+<p><a href="https://access.redhat.com/articles/3071021">Support Policies for RHEL High Availability clusters - Transport Protocols</a></p>
+</li>
+<li>
+<p><a href="https://cloud.google.com/vpc/docs/vpc">VPC network overview</a></p>
+</li>
+<li>
+<p><a href="https://access.redhat.com/articles/2679211">Exploring RHEL High Availability&#8217;s Components, Concepts, and Features - Overview of Transport Protocols</a></p>
+</li>
+<li>
+<p><a href="https://access.redhat.com/articles/2679251">Design Guidance for RHEL High Availability Clusters - Selecting the Transport Protocol</a></p>
+</li>
+</ul>
+</div>
+</div>
+</section>
+<section class="sect1">
 <h2 id="paragraphs">Paragraphs</h2>
 <div class="sectionbody">
 <p>Paragraphs don&#8217;t require any special markup in AsciiDoc.
@@ -2281,7 +2306,7 @@ <h6 class="float" id="section-level-5">Section Level 5</h6>
 <footer class="rhdocs-footer" id="rhdocs-footer">
 <div class="rhdocs-footer-text" id="rhdocs-footer-text">
 Version 1.0.3<br>
-Last updated 2020-09-14 15:14:38 EDT
+Last updated 2020-09-22 15:54:00 EDT
 </div>
 </footer>
 </cp-documentation>

pantheon-bundle/frontend/src/web-assets/dev-preview/assembly_access-control-list.html

@@ -150,7 +150,7 @@ <h2 id="setting-the-acl_access-control-list">Setting the ACL</h2>
 </article>
 <footer class="rhdocs-footer" id="rhdocs-footer">
 <div class="rhdocs-footer-text" id="rhdocs-footer-text">
-Last updated 2020-09-14 15:14:38 EDT
+Last updated 2020-09-22 15:54:00 EDT
 </div>
 </footer>
 </cp-documentation>

pantheon-bundle/frontend/src/web-assets/gulpfile.js

@@ -21,7 +21,7 @@ const
   sourceMaps = require('gulp-sourcemaps'),
   sass = require('gulp-sass'),
   // sassGlobbing = require('gulp-sass-globbing'),
-  sassLint = require('gulp-sass-lint'),
+  sassLint = require('gulp-sass-lint'), // @todo move to Stylelint since sass lint is deprected. Good example config in ux.redhat.com's code
   postCss = require('gulp-postcss'),
   autoprefixer = require('autoprefixer'),
   cssNano = require('cssnano'),

pantheon-bundle/frontend/src/web-assets/scss/components/_additional-resources.scss

@@ -0,0 +1,58 @@
+.system\:additional-resources[class] { // Extra specificity to beat out rhdocs styles
+  padding: 24px;
+  border: 1px solid #d2d2d2;
+
+  .heading,
+  .additional-resources__heading {
+    font-size: 20px;
+    line-height: 24px;
+    margin: 0 0 24px;
+    padding: 0;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    @media (min-width: 992px) {
+      column-count: 2;
+      column-gap: 2em;
+      @supports (display: grid) {
+        column-count: 1;
+        column-gap: 0;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 0 2em;
+      }
+    }
+  }
+
+  li {
+    box-sizing: content-box;
+    margin: 0 0 ;
+    padding: 16px 24px 16px 0;
+    border-bottom: 1px solid #d2d2d2;
+    break-inside: avoid;
+
+    &:last-child {
+      border: 0;
+      @media (min-width: 992px) {
+        border-bottom: 1px solid #d2d2d2;
+      }
+    }
+
+    p:only-child {
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+}

pantheon-bundle/frontend/src/web-assets/scss/rhdocs.scss

@@ -6,6 +6,7 @@
 @import 'components/styles';
 @import 'components/prismjs';
 @import 'components/fa-icons';
+@import 'components/additional-resources';
 
 @import 'components/print';