toc and article page layout

src/scss/_article-pages.scss

@@ -1,14 +1,24 @@
+//@format
 .page-node-type-journal-article .main-content__section {
     padding-top: 0;
 }
+//hero bg-image
 .article-title-banner {
     //display:none;
     //border: 1px solid #ccc;
-    .bg-image {
+    height: 500px;
-
+    background-position: center;
-    height: 400px;
+    background-repeat: no-repeat;
-    overflow:hidden;
+    background-size: cover;
-    }
+    position: relative;
+}
+//hero text
+.article-info--wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
 }
 .field--name-field-journal-article-abstract .field__label {
     font-size: 2rem;
@@ -28,15 +38,15 @@
         }
     }
     //footnotes
-    a[id^="footnote"] {
+    a[id^='footnote'] {
         border: 1px solid #5d5d5d;
         background: #5d5d5d;
         color: #fff;
         border-radius: 4px;
         text-decoration: none;
         padding: 2px 3px;
-        font-size:1.1rem;
+        font-size: 1.1rem;
-        vertical-align:super;
+        vertical-align: super;
     }
 }
 
@@ -46,38 +56,33 @@ header.article-header {
     //padding: 1rem;
 }
 .article-header--metadata {
-    display:flex;
+    display: flex;
-    justify-content:space-between;
+    justify-content: space-between;
-    .left,.right {
+    .left,
+    .right {
         flex-direction: column;
-        align-items:flex-end;
+        align-items: flex-end;
     }
     .right {
-        justify-content:flex-end;
+        justify-content: flex-end;
         text-align: right;
     }
 }
 .article-title-banner {
-    position:relative;
 }
 //.article-info--wrapper {
-    //position: absolute;
+//position: absolute;
-    //top: 0;
+//top: 0;
-    //margin: 8rem;
+//margin: 8rem;
 //}
 .article-info--wrapper {
-    position: absolute;
-    margin: 0;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
 }
 .article {
     &--contributor {
         font-size: 27px;
         //line-height:36px;
         font-family: 'Libre Baskerville', Georgia, Times New Roman, Serif;
-        font-weight:bold;
+        font-weight: bold;
         font-style: italic;
     }
     &--contributor__affiliation {
@@ -87,39 +92,37 @@ header.article-header {
         //font-style: italic;
     }
     &--type {
-
         font-size: 18px;
         //line-height:18px;
         text-transform: uppercase;
     }
     &--date-published {
-
         font-size: 18px;
         text-transform: uppercase;
         //line-height:18px;
-       margin-top:6px; 
+        margin-top: 6px;
     }
 }
 
-
 //layout
 
+.article-title-banner {
+    padding: 0;
+}
 .node__main-content {
     grid-area: main;
 }
 .toc-sticky-wrapper {
-        
+    height: 100%;
-    height:100%;
     grid-area: toc;
 }
 
 .node__container {
     @include breakpoint($desktop-up) {
-    display: grid;
+        display: grid;
-    column-gap: 2rem;
+        column-gap: 2rem;
-    grid-template-columns: 70% 30%;
+        grid-template-columns: 70% 30%;
-    grid-template-rows: auto;
+        grid-template-rows: auto;
-    grid-template-areas:
+        grid-template-areas: 'main toc';
-    'main toc'
     }
 }

src/scss/_lp-hero.scss

@@ -1,17 +1,17 @@
-
+//@format
 /*==========Landing Page Hero Image===========*/
 
-
 .hero {
-  background: blue;
+    //background: blue;
-  background: url(../img/DS2_2648.jpg);
+    //background: url(../img/DS2_2648.jpg);
-  background-size: cover;
+    //background-size: cover;
-  background-repeat: no-repeat;
+    //background-repeat: no-repeat;
-  background-position: center;
+    //background-position: center;
-  position: relative;
+    //position: relative;
-  height: 250px;
+    //height: 250px;
-  display: flex;
+    display: flex;
-  align-items: center;
+    .header-top__container {
+        padding: 3rem 0 2rem 0;
+    }
+    align-items: center;
 }
-
-

src/scss/_toc.scss

@@ -13,6 +13,10 @@ $toc_breakpoint: 768px;
 }
 
 .toc-block--wide {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 100px;
+    margin-top: 2rem;
     .toc--title {
         &[aria-expanded='true'] h2::after {
             //content: "\f146";//square