toc and article page layout

js/js.js

@@ -23,11 +23,10 @@
     Drupal.behaviors.stickyTOC = {
         attach: function attach(context, settings) {
 
-       var height = $('.main-content__section .region').css("height");
-            console.log(height);
-
+       var container_height = $('.node__main-content').css("height");
+            //console.log(height);
+            //$('.toc-container .toc-sticky-wrapper').css('height', container_height);
         //$( ".toc-block--wide" ).wrap( "<div class='new' />");
-
         }
     };
 

src/js/js.js

@@ -23,11 +23,10 @@
     Drupal.behaviors.stickyTOC = {
         attach: function attach(context, settings) {
 
-       var height = $('.main-content__section .region').css("height");
-            console.log(height);
-
+       var container_height = $('.node__main-content').css("height");
+            //console.log(height);
+            //$('.toc-container .toc-sticky-wrapper').css('height', container_height);
         //$( ".toc-block--wide" ).wrap( "<div class='new' />");
-
         }
     };
 

src/scss/_article-pages.scss

@@ -1,6 +1,14 @@
+.page-node-type-journal-article .main-content__section {
+    padding-top: 0;
+}
 .article-title-banner {
     //display:none;
-    border: 1px solid #ccc;
+    //border: 1px solid #ccc;
+    .bg-image {
+
+    height: 400px;
+    overflow:hidden;
+    }
 }
 .field--name-field-journal-article-abstract .field__label {
     font-size: 2rem;
@@ -35,7 +43,7 @@
 header.article-header {
     //background: #e6e6e6;
     //background: url(../img/DS2_2622.jpg);
-    padding: 1rem;
+    //padding: 1rem;
 }
 .article-header--metadata {
     display:flex;
@@ -49,10 +57,20 @@ header.article-header {
         text-align: right;
     }
 }
+.article-title-banner {
+    position:relative;
+}
+//.article-info--wrapper {
+    //position: absolute;
+    //top: 0;
+    //margin: 8rem;
+//}
 .article-info--wrapper {
     position: absolute;
-    top: 0;
-    margin: 8rem;
+    margin: 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 .article {
     &--contributor {
@@ -82,3 +100,26 @@ header.article-header {
        margin-top:6px; 
     }
 }
+
+
+//layout
+
+.node__main-content {
+    grid-area: main;
+}
+.toc-sticky-wrapper {
+        
+    height:100%;
+    grid-area: toc;
+}
+
+.node__container {
+    @include breakpoint($desktop-up) {
+    display: grid;
+    column-gap: 2rem;
+    grid-template-columns: 70% 30%;
+    grid-template-rows: auto;
+    grid-template-areas:
+    'main toc'
+    }
+}

src/scss/_toc.scss

@@ -1,12 +1,14 @@
 //@format
+$toc_breakpoint: 768px;
 .toc {
     position: -webkit-sticky; /* Safari */
     position: sticky;
-    top: 0;
+    top: 100px;
+    margin-top: 2rem;
 }
 .toc-block--mobile {
     @include breakpoint($desktop-up) {
-        display: none;
+        //display: none;
     }
 }
 
@@ -50,12 +52,44 @@
 .region-sidebar-second {
     height: 1000px;
 }
-.toc-block--wide {
-    position: -webkit-sticky; /* Safari */
-    position: sticky;
-    top: 300px;
-    display: none;
+.node__main-content .toc-block--wide {
+    @include breakpoint($desktop-up) {
+        //display: none;
+    }
+}
+.toc-container .toc-block--wide {
     @include breakpoint($desktop-up) {
-        display: block;
+        position: -webkit-sticky; /* Safari */
+        position: sticky;
+        top: 300px;
     }
 }
+.toc-desktop {
+    display: block !important;
+}
+.toc-mobile {
+    display: none !important;
+}
+//.article-title-banner {
+//grid-area: header;
+//}
+//.node__main-content {
+//grid-area: main;
+//}
+//.toc-container {
+//grid-area: toc;
+//}
+//.node__container {
+//display: grid;
+//grid-template-columns: 70% 30%;
+//grid-template-rows: auto;
+//grid-template-areas:
+//'header header'
+//'toc toc'
+//'main main';
+//@include breakpoint($desktop-up) {
+//grid-template-areas:
+//'header header'
+//'main toc';
+//}
+//}