Browse Source

article layout

dependabot/npm_and_yarn/acorn-5.7.4
rdrew 6 years ago
parent
commit
49455b6425
  1. 104
      css/style.css
  2. 3
      gulpfile.js
  3. 10
      js/js.js
  4. 6
      package-lock.json
  5. 1
      package.json
  6. 10
      src/js/js.js
  7. 45
      src/scss/_article-pages.scss
  8. 61
      src/scss/_toc.scss
  9. 7
      src/scss/_variables.scss
  10. 3
      src/scss/style.scss

104
css/style.css

File diff suppressed because one or more lines are too long

3
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())

10
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' />");
}
};

6
package-lock.json generated

@ -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",

1
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",

10
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' />");
}
};

45
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;
}
}

61
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;
}
}

7
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;

3
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 {

Loading…
Cancel
Save