article layout

gulpfile.js

@@ -41,6 +41,9 @@ gulp.task('browser-sync', function() {
 
 gulp.task('sass', function () {
   return gulp.src('./src/scss/**/*.scss')
+        .pipe(sass({
+            includePaths: ['./node_modules/breakpoint-sass/stylesheets']
+        }))
     .pipe(sourcemaps.init())
     .pipe(sass().on('error', sass.logError))
     .pipe(sourcemaps.write())

js/js.js

@@ -20,6 +20,16 @@
             });
         }
     };
+    Drupal.behaviors.stickyTOC = {
+        attach: function attach(context, settings) {
+
+       var height = $('.main-content__section .region').css("height");
+            console.log(height);
+
+        //$( ".toc-block--wide" ).wrap( "<div class='new' />");
+
+        }
+    };
 
 
 

package-lock.json

@@ -656,6 +656,12 @@
         "repeat-element": "^1.1.2"
       }
     },
+    "breakpoint-sass": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/breakpoint-sass/-/breakpoint-sass-2.7.1.tgz",
+      "integrity": "sha1-jvbEdE3MJbqD2Wm2yaF+XaopmAo=",
+      "dev": true
+    },
     "browser-sync": {
       "version": "2.24.7",
       "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-2.24.7.tgz",

package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "breakpoint-sass": "^2.7.1",
     "browser-sync": "^2.24.7",
     "bs-rewrite-rules": "^2.1.2",
     "gulp": "^3.9.1",

src/js/js.js

@@ -20,6 +20,16 @@
             });
         }
     };
+    Drupal.behaviors.stickyTOC = {
+        attach: function attach(context, settings) {
+
+       var height = $('.main-content__section .region').css("height");
+            console.log(height);
+
+        //$( ".toc-block--wide" ).wrap( "<div class='new' />");
+
+        }
+    };
 
 
 

src/scss/_article-pages.scss

@@ -31,3 +31,48 @@
         vertical-align:super;
     }
 }
+
+header.article-header {
+    background: #e6e6e6;
+    padding: 1rem;
+}
+.article-header--metadata {
+    display:flex;
+    justify-content:space-between;
+    .left,.right {
+        flex-direction: column;
+        align-items:flex-end;
+    }
+    .right {
+        justify-content:flex-end;
+        text-align: right;
+    }
+}
+.article {
+    &--contributor {
+        font-size: 27px;
+        //line-height:36px;
+        font-family: 'Libre Baskerville', Georgia, Times New Roman, Serif;
+        font-weight:bold;
+        font-style: italic;
+    }
+    &--contributor__affiliation {
+        font-size: 18px;
+        text-transform: uppercase;
+        //line-height:18px;
+        //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; 
+    }
+}

src/scss/_toc.scss

@@ -0,0 +1,61 @@
+//@format
+.toc {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+}
+.toc-block--mobile {
+    @include breakpoint($desktop-up) {
+        display: none;
+    }
+}
+
+.toc-block--wide {
+    .toc--title {
+        &[aria-expanded='true'] h2::after {
+            //content: "\f146";//square
+            content: '\f068';
+        }
+        &[aria-expanded='false'] h2::after {
+            //content: "\f0fe";
+            content: '\f067';
+        }
+        h2::after {
+            font-family: 'FontAwesome';
+            position: absolute;
+            //top: 6px;
+            right: 0;
+            font-weight: 400;
+            line-height: 20px;
+            font-size: 2rem;
+            background: #ccc;
+            padding: 10px;
+            //text-align: right;
+        }
+        h2 {
+            border: 1px dotted #ccc;
+            padding: 0px;
+            padding-left: 10px;
+            line-height: 40px;
+            margin-bottom: 0px;
+            background: #f5f3f3;
+        }
+    }
+    .toc--list {
+        border: 1px dotted #ccc;
+        border-top: 0px;
+    }
+}
+
+.region-sidebar-second {
+    height: 1000px;
+}
+.toc-block--wide {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 300px;
+    display: none;
+    @include breakpoint($desktop-up) {
+        display: block;
+    }
+}

src/scss/_variables.scss

@@ -0,0 +1,7 @@
+$mobile-only: 0px 767px;
+$tablet-only: 768px 991px;
+$tablet-up: 768px;
+$desktop-up: 992px;
+$desktop-only: 992px 1199px;
+$wide-up: 1200px;
+

src/scss/style.scss

@@ -1,9 +1,12 @@
+@import 'breakpoint';
 //imports
+@import 'variables';
 @import 'lp-preview-grid';
 @import 'lp-hero';
 @import 'article-pages';
 @import 'tooltips';
 @import 'menus';
+@import 'toc';
 
 /*on-scroll menu */
 .fixed-header-enabled.onscroll .header-container ul.menu {