D3Public/daux.io
8
0
Fork 0
Code Pull Requests Releases Activity

Use crafty to build css, convert less to scss

Browse Source
This commit is contained in:
Stéphane Goetz 2018-02-25 20:12:18 +01:00
parent d0b2850434
commit 3346dec1d6
41 changed files with 4135 additions and 1481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
crafty.config.js Normal file
View File

@ -0,0 +1,30 @@
module.exports = {
presets: [
"@swissquote/crafty-preset-postcss",
"@swissquote/crafty-runner-gulp"
],
destination_css: "themes",
css: {
"theme_blue": {
source: "themes/daux/scss/theme-blue.scss",
destination: "daux/css/theme-blue.min.css"
},
"theme_green": {
source: "themes/daux/scss/theme-green.scss",
destination: "daux/css/theme-green.min.css"
},
"theme_navy": {
source: "themes/daux/scss/theme-navy.scss",
destination: "daux/css/theme-navy.min.css"
},
"theme_red": {
source: "themes/daux/scss/theme-red.scss",
destination: "daux/css/theme-red.min.css"
},
"daux_singlepage": {
source: "themes/daux_singlepage/scss/main.scss",
destination: "daux_singlepage/css/main.min.css"
}
}
};

86
gulpfile.js
View File

@ -1,86 +0,0 @@
var cssnano = require('cssnano'),
gulp = require('gulp'),
less = require('gulp-less'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
postcss = require('gulp-postcss'),
stylelint = require('gulp-stylelint');
var resources = {
daux_blue:{source: "themes/daux/less/theme-blue.less", dest: "themes/daux/css/"},
daux_green:{source: "themes/daux/less/theme-green.less", dest: "themes/daux/css/"},
daux_navy:{source: "themes/daux/less/theme-navy.less", dest: "themes/daux/css/"},
daux_red:{source: "themes/daux/less/theme-red.less", dest: "themes/daux/css/"},
daux_singlepage:{source: "themes/daux_singlepage/less/main.less", dest: "themes/daux_singlepage/css/"}
};
var stylelintRules = {
"indentation": 4,
"selector-list-comma-newline-after": "always-multi-line",
"selector-max-id": 0,
// Autoprefixer
"at-rule-no-vendor-prefix": true,
"media-feature-name-no-vendor-prefix": true,
"property-no-vendor-prefix": true,
"selector-no-vendor-prefix": true,
"value-no-vendor-prefix": true
};
var cssnanoOptions = {
safe: true, // Disable dangerous optimisations
filterPlugins: false, // This does very weird stuff
autoprefixer: {
add: true, // Add needed prefixes
remove: true // Remove unnecessary prefixes
}
};
function createCSSTask(source, dest) {
return function () {
return gulp.src(source)
.pipe(plumber())
.pipe(less())
.pipe(postcss([cssnano(cssnanoOptions)]))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(dest));
}
}
gulp.task('lint-css', function () {
return gulp
.src(['themes/**/less/**/*.less', '!themes/**/vendor/**/*.less'])
.pipe(stylelint({
failAfterError: true,
config: {
extends: 'stylelint-config-standard',
rules: stylelintRules
},
syntax: 'less',
reporters: [{
formatter: 'string',
console: true
}],
debug: true
}));
});
var style_tasks = [];
for (var style in resources) {
if (resources.hasOwnProperty(style)) {
gulp.task('style_' + style, createCSSTask(resources[style].source, resources[style].dest));
style_tasks.push('style_' + style);
}
}
style_tasks.push('lint-css');
gulp.task("styles", style_tasks);
gulp.task('watch', ['default'], function () {
// Watch .less files
gulp.watch('themes/**/less/**/*.less', ['styles']);
});
gulp.task('default', ['styles']);

15
package.json
View File

@ -3,17 +3,12 @@
"version": "0.3.0",
"private": true,
"devDependencies": {
"cssnano": "^3.7.3",
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2",
"gulp-stylelint": "^5.0.0",
"stylelint-config-standard": "^17.0.0"
"@swissquote/crafty": "^1.0.1",
"@swissquote/crafty-preset-postcss": "^1.0.1",
"@swissquote/crafty-runner-gulp": "^1.0.1"
},
"scripts": {
"build": "gulp",
"watch": "gulp watch"
"build": "crafty run",
"watch": "crafty watch"
}
}

6
templates/layout/00_layout.php
View File

@ -3,15 +3,15 @@
<head>
<title><?= $page['title']; ?> <?= ($page['title'] != $params['title'])? '- ' . $params['title'] : "" ?></title>
<?php //SEO meta tags...
if (array_key_exists('description', $page['attributes'])) {
if (array_key_exists('attributes', $page) && array_key_exists('description', $page['attributes'])) {
echo " <meta name=\"description\" content=\"{$page['attributes']['description']}\">\n";
} elseif (array_key_exists('tagline', $params)) {
echo " <meta name=\"description\" content=\"{$params['tagline']}\">\n";
}
if (array_key_exists('keywords', $page['attributes'])) {
if (array_key_exists('attributes', $page) && array_key_exists('keywords', $page['attributes'])) {
echo " <meta name=\"keywords\" content=\"{$page['attributes']['keywords']}\">\n";
}
if (array_key_exists('author', $page['attributes'])) {
if (array_key_exists('attributes', $page) && array_key_exists('author', $page['attributes'])) {
echo " <meta name=\"author\" content=\"{$page['attributes']['author']}\">\n";
} elseif (array_key_exists('author', $params)) {
echo " <meta name=\"author\" content=\"{$params['author']}\">\n";

9
themes/common/less/_fonts.less → themes/common/scss/_fonts.scss
View File

@ -1,7 +1,10 @@
@font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-heading: "Roboto Slab", @font-family-text;
:root {
--font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
--font-family-heading: "Roboto Slab", var(--font-family-text);
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 13, 2017 */

0
themes/common/less/_print.less → themes/common/scss/_print.scss
View File

2
themes/common/less/_typography.less → themes/common/scss/_typography.scss
View File

@ -157,7 +157,7 @@ img {
}
code {
font-family: @font-family-monospace;
font-family: var(--font-family-monospace);
}
code, tt {

0
themes/common/less/vendor/highlight.less → themes/common/scss/vendor/highlight.scss vendored
View File

0
themes/common/less/vendor/normalize.less → themes/common/scss/vendor/normalize.scss vendored
View File

7
themes/daux/css/theme-blue.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
themes/daux/css/theme-blue.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

7
themes/daux/css/theme-green.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
themes/daux/css/theme-green.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

7
themes/daux/css/theme-navy.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
themes/daux/css/theme-navy.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

7
themes/daux/css/theme-red.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
themes/daux/css/theme-red.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

11
themes/daux/less/theme-blue.less
View File

@ -1,11 +0,0 @@
//Daux.io Blue
@sidebar-background: #f7f7f7;
@sidebar-hover: #c5c5cb;
@lines: #e7e7e9;
@dark: #3f4657;
@light: #82becd;
@text: #2d2d2d;
// Daux.io Base
@import "theme.less";

11
themes/daux/less/theme-green.less
View File

@ -1,11 +0,0 @@
//Daux.io Green
@sidebar-background: #f5f5f6;
@sidebar-hover: #a0d55d;
@lines: #e7e7e9;
@dark: #000;
@light: #8acc37;
@text: #2d2d2d;
// Daux.io Base
@import "theme.less";

11
themes/daux/less/theme-navy.less
View File

@ -1,11 +0,0 @@
//Daux.io Navy
@sidebar-hover: #c5c5cb;
@lines: #e7e7e9;
@sidebar-background: #f5f5f6;
@dark: #13132a;
@light: #7795b4;
@text: #2d2d2d;
// Daux.io Base
@import "theme.less";

11
themes/daux/less/theme-red.less
View File

@ -1,11 +0,0 @@
// Daux.io Red
@sidebar-hover: #eee;
@lines: #eee;
@sidebar-background: #f7f7f7;
@dark: #c64641; //#df4f49;
@light: #ecb5a1;
@text: #2d2d2d;
// Daux.io Base
@import "theme.less";

24
themes/daux/less/theme.less
View File

@ -1,24 +0,0 @@
/*!
* DAUX.IO
* https://dauxio.github.io/
* MIT License
*/
// Daux Style
@import "../../common/less/vendor/normalize.less";
@import "../../common/less/_fonts.less";
@import "_mixins.less";
@import "_utilities.less";
// Layout
@import "_structure.less";
// Content presentation
@import "_typography.less";
@import "_components.less";
@import "_homepage.less";
@import "../../common/less/vendor/highlight.less";
@media print {
@import "_print.less";
}

52
themes/daux/less/_components.less → themes/daux/scss/_components.scss
View File

@ -4,7 +4,7 @@ Base tags
a {
text-decoration: none;
color: @light;
color: var(--light);
&.external::after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
@ -27,7 +27,7 @@ hr {
}
code {
color: @dark;
color: var(--dark);
}
/* ===========================================================================================
@ -97,32 +97,32 @@ Components
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
&:last-child:not(:first-child) {
.border-left-radius(0);
@include border-left-radius(0);
}
}
}
.Brand {
display: block;
background-color: @dark;
background-color: var(--dark);
padding: 15px 20px;
font-size: 18px;
text-shadow: none;
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 700;
color: @light;
color: var(--light);
}
.Navbar {
height: 50px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
background-color: @dark;
background-color: var(--dark);
margin-bottom: 0;
.Brand {
@ -162,8 +162,8 @@ Components
top: 50%;
width: 0.5em;
height: 0.5em;
border-right: 0.15em solid @dark;
border-top: 0.15em solid @dark;
border-right: 0.15em solid var(--dark);
border-top: 0.15em solid var(--dark);
transform: rotate(45deg);
transition-duration: 0.3s;
}
@ -176,17 +176,17 @@ Components
display: block;
margin: 0;
padding: 6px 15px 6px 20px;
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 400;
color: @dark;
color: var(--dark);
font-size: 15px;
text-shadow: none;
border-color: @lines;
border-color: var(--lines);
&:hover {
color: @dark;
color: var(--dark);
text-shadow: none;
background-color: @sidebar-hover;
background-color: var(--sidebar-hover);
}
}
}
@ -200,8 +200,8 @@ Components
margin: 0;
margin-left: -15px;
padding: 3px 30px;
font-family: @font-family-text;
color: @text;
font-family: var(--font-family-text);
color: var(--text);
opacity: 0.7;
&:hover {
@ -210,7 +210,7 @@ Components
}
&--active a {
color: @dark;
color: var(--dark);
}
}
}
@ -219,7 +219,7 @@ Components
&--open,
&--active {
> a {
background-color: @sidebar-hover;
background-color: var(--sidebar-hover);
}
}
@ -241,7 +241,7 @@ Components
padding: 0;
border-bottom: 1px solid #eee;
.clearfix();
@include clearfix();
h1 {
margin: 0;
@ -274,9 +274,9 @@ Components
padding: 0 20px;
a {
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 400;
color: @light;
color:var(--light);
line-height: 2em;
}
}
@ -296,7 +296,7 @@ Components
transition: border-color ease-in-out 0.15s;
&:focus {
border-color: @light;
border-color: var(--light);
outline: 0;
}
}
@ -395,7 +395,7 @@ ul.TableOfContents {
text-align: center;
clear: both;
.clearfix();
@include clearfix();
li {
display: inline;
@ -460,7 +460,7 @@ ul.TableOfContents {
/* Checked state */
.Checkbox input:checked ~ & {
background: @dark;
background: var(--dark);
/* Show check mark */
&::after {
@ -470,7 +470,7 @@ ul.TableOfContents {
/* Hover state whilst checked */
.Checkbox:hover input:not([disabled]):checked ~ &, .Checkbox input:checked:focus ~ & {
background: @light;
background: var(--light);
}
/* Disabled state */

38
themes/daux/less/_homepage.less → themes/daux/scss/_homepage.scss
View File

@ -38,15 +38,15 @@ Homepage
.Homepage {
padding-top: 60px !important;
background-color: @light;
background-color: var(--light);
border-radius: 0;
border: none;
color: @dark;
color: var(--dark);
overflow: hidden;
padding-bottom: 0;
margin-bottom: 0;
.kill-box-shadow;
@include kill-box-shadow;
}
.HomepageTitle {
@ -69,7 +69,7 @@ Homepage
.HomepageButtons {
padding: 20px 0;
background-color: @sidebar-hover;
background-color: var(--sidebar-hover);
text-align: center;
.Button--hero {
@ -79,12 +79,12 @@ Homepage
opacity: 0.8;
margin: 0 10px;
text-transform: uppercase;
border: 5px solid @dark;
font-family: @font-family-heading;
border: 5px solid var(--dark);
font-family: var(--font-family-heading);
font-weight: 700;
.kill-background-image;
.kill-box-shadow;
@include kill-background-image;
@include kill-box-shadow;
@media (max-width: 768px) {
display: block;
@ -96,13 +96,13 @@ Homepage
}
&.Button--secondary {
background-color: @sidebar-hover;
color: @dark;
background-color: var(--sidebar-hover);
color: var(--dark);
}
&.Button--primary {
background-color: @dark;
color: @sidebar-background;
background-color: var(--dark);
color: var(--sidebar-background);
}
}
}
@ -136,7 +136,7 @@ Homepage
width: 0;
height: 0;
border: 3px solid transparent;
border-left: 3px solid @light;
border-left: 3px solid var(--light);
float: left;
display: block;
margin: 6px 6px 6px -12px;
@ -145,7 +145,7 @@ Homepage
}
.lead {
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 300;
font-size: 16px;
margin-bottom: 20px;
@ -162,12 +162,12 @@ Homepage
}
.HomepageFooter {
background-color: @dark;
background-color: var(--dark);
border-radius: 0;
color: @light;
color: var(--light);
border: none;
.kill-box-shadow;
@include kill-box-shadow;
@media (max-width: 768px) {
padding: 0 20px;
@ -196,11 +196,11 @@ Homepage
a {
line-height: 32px;
font-size: 16px;
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 700;
&:hover {
color: @light;
color: var(--light);
text-decoration: underline;
}
}

43
themes/daux/less/_mixins.less → themes/daux/scss/_mixins.scss
View File

@ -2,39 +2,42 @@
Mixins
============================================================================================== */
.kill-background-image() {
@mixin kill-background-image {
background-image: none;
filter: none;
}
.kill-box-shadow() {
@mixin kill-box-shadow {
box-shadow: none;
}
.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
font-weight: @weight;
font-size: @size;
font-family: @font-family-text;
line-height: @lineheight;
@mixin sans-serif($weight: normal, $size: 14px, $lineheight: 20px) {
font-weight: $weight;
font-size: $size;
font-family: $font-family-text;
line-height: $lineheight;
}
// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
// Clearfix
@ -49,7 +52,7 @@ Mixins
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
@mixin clearfix {
&::before,
&::after {
content: " "; // 1

2
themes/daux/less/_print.less → themes/daux/scss/_print.scss
View File

@ -1,4 +1,4 @@
@import "../../common/less/_print.less";
@import "../../common/scss/_print.scss";
.Pager { display: none; }

24
themes/daux/less/_structure.less → themes/daux/scss/_structure.scss
View File

@ -15,12 +15,12 @@ Docs Body & Page Structure
html, body {
height: 100%;
background-color: #fff;
color: @text;
color: var(--text);
}
.Columns {
&__left {
background-color: @sidebar-background;
background-color: var(--sidebar-background);
}
&__right {
@ -44,8 +44,8 @@ html, body {
border: none;
float: right;
.kill-background-image;
.kill-box-shadow;
@include kill-background-image;
@include kill-box-shadow;
&--bar {
display: block;
@ -53,17 +53,17 @@ html, body {
height: 2px;
margin-top: 2px;
margin-bottom: 3px;
background-color: @light;
.kill-box-shadow;
background-color: var(--light);
@include kill-box-shadow;
}
&:hover {
background-color: @sidebar-hover;
.kill-box-shadow;
background-color: var(--sidebar-hover);
@include kill-box-shadow;
.Collapsible__trigger--bar {
background-color: @dark;
.kill-box-shadow;
background-color: var(--dark);
@include kill-box-shadow;
}
}
}
@ -72,7 +72,7 @@ html, body {
@media screen and (min-width: 768px) {
body {
//Needed only for floating code blocks
background-color: @light;
background-color: var(--light);
}
.Navbar {
@ -114,7 +114,7 @@ html, body {
&__left {
width: 25%;
border-right: 1px solid @lines;
border-right: 1px solid var(--lines);
overflow-x: hidden;
}

6
themes/daux/less/_typography.less → themes/daux/scss/_typography.scss
View File

@ -3,7 +3,7 @@ Base CSS
============================================================================================== */
body {
font-family: @font-family-text;
font-family: var(--font-family-text);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -12,12 +12,12 @@ body {
}
h1, h2, h3, h4, h5, h6 {
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 300;
}
.s-content {
@import "../../common/less/_typography.less";
@import "../../common/scss/_typography.scss";
pre {
border: none;

2
themes/daux/less/_utilities.less → themes/daux/scss/_utilities.scss
View File

@ -6,7 +6,7 @@
// -------------------------
.clearfix {
.clearfix();
@include clearfix();
}
.pull-right {

11
themes/daux/scss/theme-blue.scss Normal file
View File

@ -0,0 +1,11 @@
@import "theme.scss";
//Daux.io Blue
:root {
--sidebar-background: #f7f7f7;
--sidebar-hover: #c5c5cb;
--lines: #e7e7e9;
--dark: #3f4657;
--light: #82becd;
--text: #2d2d2d;
}

11
themes/daux/scss/theme-green.scss Normal file
View File

@ -0,0 +1,11 @@
@import "theme.scss";
//Daux.io Green
:root {
--sidebar-background: #f5f5f6;
--sidebar-hover: #a0d55d;
--lines: #e7e7e9;
--dark: #000;
--light: #8acc37;
--text: #2d2d2d;
}

11
themes/daux/scss/theme-navy.scss Normal file
View File

@ -0,0 +1,11 @@
@import "theme.scss";
//Daux.io Navy
:root {
--sidebar-hover: #c5c5cb;
--lines: #e7e7e9;
--sidebar-background: #f5f5f6;
--dark: #13132a;
--light: #7795b4;
--text: #2d2d2d;
}

11
themes/daux/scss/theme-red.scss Normal file
View File

@ -0,0 +1,11 @@
@import "theme.scss";
// Daux.io Red
:root {
--sidebar-hover: #eee;
--lines: #eee;
--sidebar-background: #f7f7f7;
--dark: #c64641; //#df4f49;
--light: #ecb5a1;
--text: #2d2d2d;
}

24
themes/daux/scss/theme.scss Normal file
View File

@ -0,0 +1,24 @@
/*!
* DAUX.IO
* https://dauxio.github.io/
* MIT License
*/
// Daux Style
@import "../../common/scss/vendor/normalize.scss";
@import "../../common/scss/_fonts.scss";
@import "_mixins.scss";
@import "_utilities.scss";
// Layout
@import "_structure.scss";
// Content presentation
@import "_typography.scss";
@import "_components.scss";
@import "_homepage.scss";
@import "../../common/scss/vendor/highlight.scss";
@media print {
@import "_print.scss";
}

4
themes/daux_singlepage/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
themes/daux_singlepage/css/main.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2
themes/daux_singlepage/less/_print.less → themes/daux_singlepage/scss/_print.scss
View File

@ -1,5 +1,5 @@
@import "../../common/less/_print.less";
@import "../../common/scss/_print.scss";
a[href]::after {
content: " (" attr(href) ")";

4
themes/daux_singlepage/less/_typography.less → themes/daux_singlepage/scss/_typography.scss
View File

@ -1,6 +1,6 @@
h1, h2, h3, h4, h5, h6 {
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 300;
}
@ -8,5 +8,5 @@ section.content {
padding: 15px 25px 25px;
background-color: white;
@import "../../common/less/_typography.less";
@import "../../common/scss/_typography.scss";
}

10
themes/daux_singlepage/less/main.less → themes/daux_singlepage/scss/main.scss
View File

@ -1,7 +1,7 @@
// Core variables and mixins
@import "../../common/less/_fonts.less";
@import "vendor/highlight.less";
@import "_typography.less";
@import "../../common/scss/_fonts.scss";
@import "vendor/highlight.scss";
@import "_typography.scss";
* {
-webkit-overflow-scrolling: touch;
@ -17,7 +17,7 @@ body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: @font-family-text;
font-family: var(--font-family-text);
}
a {
@ -54,5 +54,5 @@ img {
}
@media print {
@import "_print.less";
@import "_print.scss";
}

0
themes/daux_singlepage/less/vendor/highlight.less → themes/daux_singlepage/scss/vendor/highlight.scss vendored
View File

5112
yarn.lock
View File

File diff suppressed because it is too large Load Diff