diff --git a/demo-index.html b/demo-index.html index 6b90f26..165e351 100644 --- a/demo-index.html +++ b/demo-index.html @@ -394,6 +394,8 @@

Struktur

+
+
@@ -631,36 +633,45 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4
-

404

-

Hier ist nichts.

-
-

Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.

-

Wikipedia

-
+
+

404

+

Hier ist nichts.

+
+

Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.

+

Wikipedia

+
+

domain.tld * admin@domain.tld

+
Server Application/ver.s.ion (System Name) serving domain.tld : port
-

403

-

Nicht erlaubt! Forbidden

-
-

Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.

-

Wikipedia

-
+
+

403

+

Nicht erlaubt! Forbidden

+
+

Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.

+

Wikipedia

+
+

domain.tld * admin@domain.tld

+
Server Application/ver.s.ion (System Name) serving domain.tld : port
-

400

-

Fehlerhafte Anfrage! Bad Request

-
-

Die Anfrage-Nachricht war fehlerhaft aufgebaut.

-

Wikipedia

-
+
+

400

+

Fehlerhafte Anfrage! Bad Request

+
+

Die Anfrage-Nachricht war fehlerhaft aufgebaut.

+

Wikipedia

+
+

domain.tld * admin@domain.tld

+
Server Application/ver.s.ion (System Name) serving domain.tld : port
diff --git a/gulpfile.js b/gulpfile.js index 1594c90..907086b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -23,7 +23,8 @@ const gulp = require('gulp'), sass = require('gulp-ruby-sass'), cssnano = require('gulp-cssnano'), jshint = require('gulp-jshint'), - uglify = require('gulp-uglify'), + uglifyjs = require('uglify-es'), + composer = require('gulp-uglify/composer'), // imagemin = require('gulp-imagemin'), cache = require('gulp-cached'), remember = require('gulp-remember'), @@ -31,6 +32,7 @@ const gulp = require('gulp'), notify = require('gulp-notify'), browsersync = require('browser-sync').create(); +var minify = composer(uglifyjs, console); // Task - Clean build directory gulp.task('clean', function() { @@ -62,7 +64,7 @@ gulp.task('scripts', function(cb) { jshint('.jshintrc'), jshint.reporter('default'), sourcemap.init(), - uglify(), + minify(), remember('scripts'), concat('all.min.js'), sourcemap.write(), diff --git a/package-lock.json b/package-lock.json index a84b39c..174e89c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5686,15 +5686,6 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, - "string_decoder": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", - "dev": true, - "requires": { - "safe-buffer": "5.1.1" - } - }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -5706,6 +5697,15 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", @@ -5862,6 +5862,16 @@ "integrity": "sha1-BMgamb3V3FImPqKdJMa/jUgYpLs=", "dev": true }, + "uglify-es": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.1.2.tgz", + "integrity": "sha512-ULYW1xj/yW0IAkLW1XzIXB3O888275E2/r4tFy83D9wPRKGlUjKWeQAZoyHXujr/fsHeh6QMlc1ayCE8kqnoaw==", + "dev": true, + "requires": { + "commander": "2.11.0", + "source-map": "0.5.7" + } + }, "uglify-js": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.1.2.tgz", diff --git a/package.json b/package.json index 7db5e98..7c022f5 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,8 @@ "gulp-sourcemaps": "^2.6.1", "gulp-uglify": "^3.0.0", "jshint": "^2.9.5", - "pump": "^1.0.2" + "pump": "^1.0.2", + "uglify-es": "^3.1.2" }, "dependencies": {} } diff --git a/source/code/functions.js b/source/code/functions.js index 2140f4c..b1c0a3d 100644 --- a/source/code/functions.js +++ b/source/code/functions.js @@ -6,14 +6,14 @@ function setup() { } // get document coordinates of the element -// function getCoords(elem) { -// let box = elem.getBoundingClientRect(); -// -// return { -// top: box.top + pageYOffset, -// left: box.left + pageXOffset -// }; -// } +function getCoords(elem) { + let box = elem.getBoundingClientRect(); + + return { + top: box.top + pageYOffset, + left: box.left + pageXOffset + }; +} // https://stackoverflow.com/a/488073/1444149 function Utils() { diff --git a/source/code/global.js b/source/code/global.js index d0a6e5c..440d4a0 100644 --- a/source/code/global.js +++ b/source/code/global.js @@ -33,7 +33,10 @@ $( document ).ready(function() { $(this).next(".exp_pop").css({ "top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4, "left": ev.pageX + 8 + // "left": ev.pageX - $(this).offset().left + 8 }); + // TODO - needs more love + console.log(ev.pageX); } ); diff --git a/source/style/_hippie.scss b/source/style/_hippie.scss index dfff2ac..578d2bb 100644 --- a/source/style/_hippie.scss +++ b/source/style/_hippie.scss @@ -57,7 +57,7 @@ // Additional modules can be defined here // ----------------------------------------------------------------------------- @import "modules/vendor"; -//@import modules/all deprecated because of the new vendor mixin +// @import modules/all deprecated because of the new vendor mixin // @import "modules/YOUR-MODULE/YOUR-FILES"; // Basic styles - this is the core of definitions diff --git a/source/style/elements/_grouping.scss b/source/style/elements/_grouping.scss index 46cfe54..d1fb902 100644 --- a/source/style/elements/_grouping.scss +++ b/source/style/elements/_grouping.scss @@ -55,7 +55,9 @@ pre { // Quote blockquote { - margin: $basic_space $basic_indent; + margin: $basic_space 0; + padding-right: $basic_indent; + padding-left: $basic_indent; } .quote__mark { @@ -225,24 +227,20 @@ div { .box__placeholder { width: 100%; height: $space_4; - border: $border_width_4 solid rgba($darkest_color,.1); + border: $border_width_4 solid rgba($alpha_color,.1); border-radius: $basic_corner; - padding: $basic_space; - background-color: rgba($darkest_color,.1); - svg { - vertical-align: top; - } + background-color: rgba($alpha_color,.2); } .box__placeholder_bkg { width: 100%; - height: $space_4; - border: $border_width_4 solid rgba($darkest_color,.1); + height: $space_4 * 2; + border: $border_width_4 solid rgba($brightest_color,.1); border-radius: $basic_corner; padding: $basic_space; /*data:[][;charset=][;base64],*/ - background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: rgba($darkest_color,.1); + background: url("data:image/svg+xml;utf8,") no-repeat; + background-color: rgba($brightest_color,.1); } diff --git a/source/style/elements/_sections.scss b/source/style/elements/_sections.scss index 7c1da92..8bd7b53 100644 --- a/source/style/elements/_sections.scss +++ b/source/style/elements/_sections.scss @@ -59,8 +59,6 @@ section { } .sec__main_status { - @extend .sec__main_center; - position: relative; border-top-width: $border_width_8; border-top-style: solid; border-color: $basic_border_color; diff --git a/source/style/elements/_textlevel.scss b/source/style/elements/_textlevel.scss index 1713243..7ef618b 100644 --- a/source/style/elements/_textlevel.scss +++ b/source/style/elements/_textlevel.scss @@ -80,6 +80,10 @@ dfn { } +address { + +} + abbr { } diff --git a/source/style/global/_common.scss b/source/style/global/_common.scss index b8dac75..4af7f6f 100644 --- a/source/style/global/_common.scss +++ b/source/style/global/_common.scss @@ -59,6 +59,26 @@ margin-right: $space_3; } +.main_center { + & > * { + margin-right: (100% - $basic_width) / 2; + margin-left: (100% - $basic_width) / 2; + + @include forTabletPortraitUp { + margin-right: (100% - $width_small) / 2; + margin-left: (100% - $width_small) / 2; + } + @include forTabletLandscapeUp { + margin-right: 1(00% - $width_medium) / 2; + margin-left: 1(00% - $width_medium) / 2; + } + @include forBigDesktopUp { + margin-right: (100% - $width_large) / 2; + margin-left: (100% - $width_large) / 2; + } + } +} + // Clearing and floating diff --git a/source/style/maintenance.scss b/source/style/maintenance.scss new file mode 100644 index 0000000..b5afad0 --- /dev/null +++ b/source/style/maintenance.scss @@ -0,0 +1,101 @@ +/* + * # TABLE OF CONTENTS + * + * - Reset + * - Global functions and mixins + * - Configuration + * - Special modules + * - Basic styles + * - Common + * - Typography + * + * - Sections + * - Grouping + * - Textlevel + * - Embedded + * - Tables + * - Interactive + * - Modules + * + */ + + +// Reset +// Use a file outside of hippie i.e. vendor/normalize.css +// ----------------------------------------------------------------------------- +@import "../../vendor/normalizecss/normalize.css"; +// @import "vendor/YOUR-FILES.css"; + + + +// Functions and Mixins +// Important code constructions +// ----------------------------------------------------------------------------- +@import "functions/all"; +@import "mixins/all"; + + + +// Fonts +// Use a central file outside of hippie for font definitions with @font-face +// ----------------------------------------------------------------------------- +// @import "vendor/fonts.css"; + + + +// Global configuration with default values +// Adjustments can be made by copying values from _config.scss to _override.scss +// Be careful though changes will get lost if hippie gets updated +// ----------------------------------------------------------------------------- +// @import "global/default"; // DO NOT EDIT +@import "settings"; // EDIT +@import "global/config"; // DO NOT EDIT + + + +// Modules and variables +// Additional modules can be defined here +// ----------------------------------------------------------------------------- +// @import "modules/vendor"; +// @import modules/all deprecated because of the new vendor mixin +// @import "modules/YOUR-MODULE/YOUR-FILES"; + +// Basic styles - this is the core of definitions +// Individual styles can be added her +// ----------------------------------------------------------------------------- +@import "global/common"; +@import "elements/typography"; +// Following the w3c document element structure +// https://w3c.github.io/html/index.html#contents +@import "elements/sections"; +@import "elements/grouping"; +@import "elements/textlevel"; +@import "elements/embedded"; +@import "elements/tables"; +@import "elements/interactive"; +// @import "YOU-NAME-IT"; + +// Individual Modules and variables +// in dependency to other styles +// Additional modules can be defined here +// ----------------------------------------------------------------------------- +@import "modules/breakpoint/breakpoint_module"; +// @import "modules/navigation/nav_module"; +@import "modules/tables/tables_module"; +// @import "modules/card/card_module"; +// @import "modules/editor/editor_module"; +// @import "modules/explanation/explanation_module"; +// @import "modules/print/print_module"; +// @import "modules/YOUR-MODULE/YOUR-FILES"; + + + +// Demonstration +@import "modules/demo/demo_module"; + + + +// Not yet sorted +// @import "elements/new"; + +// NOTE // No css rules allowed in here diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss index 2e90fd6..8ec25c1 100644 --- a/source/style/modules/demo/_demo_module.scss +++ b/source/style/modules/demo/_demo_module.scss @@ -1,9 +1,11 @@ .demo__intro { + @extend .sec__main_center; @extend .sec__main_status; } .demo__status { @extend .sec__main_status; + position: relative; min-height: 50vh; border-color: $foxtrot_color;