@iris.interactive/handcook 1.0.3 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {

package/public/scripts/index.js

@@ -1,5 +1,4 @@
 /******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
 /***/ "./resources/assets/scripts/SmoothScroll.js":
@@ -8,6 +7,7 @@
   \**************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
+"use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
@@ -60,6 +60,7 @@ var SmoothScroll = function SmoothScroll(triggerAttribute) {
   \****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
+"use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _package_script_SmoothScroll__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @package_script/SmoothScroll */ "./resources/assets/scripts/SmoothScroll.js");
 
@@ -71,11 +72,9 @@ exports.SmoothScroll = _package_script_SmoothScroll__WEBPACK_IMPORTED_MODULE_0__
 /*!******************************!*\
   !*** ./resources/style.scss ***!
   \******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
+/***/ (() => {
 
+throw new Error("Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n2 │ @use \"@package_style/_mixin-font\" as *;\n  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  ╵\n  resources/style.scss 2:1  root stylesheet\n    at processResult (/Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/webpack/lib/NormalModule.js:721:19)\n    at /Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/webpack/lib/NormalModule.js:827:5\n    at /Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/loader-runner/lib/LoaderRunner.js:399:11\n    at /Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/loader-runner/lib/LoaderRunner.js:251:18\n    at context.callback (/Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/loader-runner/lib/LoaderRunner.js:124:13)\n    at /Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/sass-loader/dist/index.js:54:7\n    at Function.call$2 (/Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/sass/sass.dart.js:95825:16)\n    at _render_closure1.call$2 (/Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/sass/sass.dart.js:83882:12)\n    at _RootZone.runBinary$3$3 (/Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/sass/sass.dart.js:28060:18)\n    at _FutureListener.handleError$1 (/Users/camille.charel/Documents/IRIS/Projects/handcook/node_modules/sass/sass.dart.js:26590:21)");
 
 /***/ })
 
@@ -105,42 +104,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 		return module.exports;
 /******/ 	}
 /******/ 	
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = __webpack_modules__;
-/******/ 	
 /************************************************************************/
-/******/ 	/* webpack/runtime/chunk loaded */
-/******/ 	(() => {
-/******/ 		var deferred = [];
-/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) => {
-/******/ 			if(chunkIds) {
-/******/ 				priority = priority || 0;
-/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
-/******/ 				deferred[i] = [chunkIds, fn, priority];
-/******/ 				return;
-/******/ 			}
-/******/ 			var notFulfilled = Infinity;
-/******/ 			for (var i = 0; i < deferred.length; i++) {
-/******/ 				var [chunkIds, fn, priority] = deferred[i];
-/******/ 				var fulfilled = true;
-/******/ 				for (var j = 0; j < chunkIds.length; j++) {
-/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
-/******/ 						chunkIds.splice(j--, 1);
-/******/ 					} else {
-/******/ 						fulfilled = false;
-/******/ 						if(priority < notFulfilled) notFulfilled = priority;
-/******/ 					}
-/******/ 				}
-/******/ 				if(fulfilled) {
-/******/ 					deferred.splice(i--, 1)
-/******/ 					var r = fn();
-/******/ 					if (r !== undefined) result = r;
-/******/ 				}
-/******/ 			}
-/******/ 			return result;
-/******/ 		};
-/******/ 	})();
-/******/ 	
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
@@ -169,68 +133,13 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 		};
 /******/ 	})();
 /******/ 	
-/******/ 	/* webpack/runtime/jsonp chunk loading */
-/******/ 	(() => {
-/******/ 		// no baseURI
-/******/ 		
-/******/ 		// object to store loaded and loading chunks
-/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
-/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
-/******/ 		var installedChunks = {
-/******/ 			"/scripts/index": 0,
-/******/ 			"styles/style": 0
-/******/ 		};
-/******/ 		
-/******/ 		// no chunk on demand loading
-/******/ 		
-/******/ 		// no prefetching
-/******/ 		
-/******/ 		// no preloaded
-/******/ 		
-/******/ 		// no HMR
-/******/ 		
-/******/ 		// no HMR manifest
-/******/ 		
-/******/ 		__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
-/******/ 		
-/******/ 		// install a JSONP callback for chunk loading
-/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
-/******/ 			var [chunkIds, moreModules, runtime] = data;
-/******/ 			// add "moreModules" to the modules object,
-/******/ 			// then flag all "chunkIds" as loaded and fire callback
-/******/ 			var moduleId, chunkId, i = 0;
-/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
-/******/ 				for(moduleId in moreModules) {
-/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
-/******/ 					}
-/******/ 				}
-/******/ 				if(runtime) var result = runtime(__webpack_require__);
-/******/ 			}
-/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
-/******/ 			for(;i < chunkIds.length; i++) {
-/******/ 				chunkId = chunkIds[i];
-/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
-/******/ 					installedChunks[chunkId][0]();
-/******/ 				}
-/******/ 				installedChunks[chunkIds[i]] = 0;
-/******/ 			}
-/******/ 			return __webpack_require__.O(result);
-/******/ 		}
-/******/ 		
-/******/ 		var chunkLoadingGlobal = self["webpackChunk_iris_interactive_handcook"] = self["webpackChunk_iris_interactive_handcook"] || [];
-/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
-/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
-/******/ 	})();
-/******/ 	
 /************************************************************************/
 /******/ 	
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
-/******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, ["styles/style"], () => (__webpack_require__("./resources/index.js")))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["styles/style"], () => (__webpack_require__("./resources/style.scss")))
-/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
+/******/ 	__webpack_require__("./resources/index.js");
+/******/ 	// This entry module doesn't tell about it's top-level declarations so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./resources/style.scss");
 /******/ 	
 /******/ })()
 ;

package/public/styles/scss/_init.scss

@@ -0,0 +1,24 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+
+*,
+*:after,
+*:before {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: $background-color;
+    color: $color;
+    font-family: $font-family;
+    line-height: $line-height;
+    font-weight: $font-weight;
+    font-size: $font-size--rem;
+}

package/public/styles/scss/_layout.scss

@@ -0,0 +1,190 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+
+// Body layout
+body.fullscreen {
+    .header {
+        height: $header;
+
+        @include breakpoint(medium) {
+            height: $header-small;
+        }
+    }
+
+    .alignheight {
+        height: calc(100vh - #{$header});
+
+        @include breakpoint(medium) {
+            height: calc(100vh - #{$header-small});
+        }
+    }
+
+    .header .banner,
+    .footer,
+    .prefooter {
+        display: none;
+    }
+}
+
+/* Margin section
+/ ================================================== */
+.section {
+    position: relative;
+    margin-top: $section-margin-top;
+    margin-bottom: $section-margin-bottom;
+
+    @include breakpoint(medium) {
+        margin-top: $section-margin-top-small;
+        margin-bottom: $section-margin-bottom-small;
+    }
+
+    .fullscreen & {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+}
+
+.section-tools {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    margin-left: 30px;
+
+    @include breakpoint(large) {
+        display: none;
+    }
+}
+
+.section-tools__item {
+    @include d-flex(center, center, column);
+    margin-bottom: 20px;
+
+    @include breakpoint(large) {
+        font-size: $font-size-small;
+    }
+
+    @include breakpoint(medium) {
+        @include d-flex(center, center, row);
+
+        > * {
+            margin: 0 3px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+
+    @include breakpoint(small) {
+        margin: 0 $margin-small;
+        @include d-flex(flex-start, center, row);
+        width: calc(100% - #{$margin-small} * 2);
+    }
+
+    @include breakpoint(xsmall) {
+        margin: 0 $margin-xsmall;
+        width: calc(100% - #{$margin-xsmall} * 2);
+    }
+}
+
+
+/* Width element
+/ ================================================== */
+.article > * {
+
+    &:not(.alignwide):not(.alignfull) {
+        max-width: $article;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    &:not(.alignfull) {
+
+        @include breakpoint(large) {
+            width: calc(100% - #{$margin-xlarge} * 2);
+        }
+
+        @include breakpoint(medium) {
+            width: calc(100% - #{$margin-large} * 2);
+        }
+
+        @include breakpoint(small) {
+            width: calc(100% - #{$margin-small} * 2);
+        }
+
+        @include breakpoint(xsmall) {
+            width: calc(100% - #{$margin-xsmall} * 2);
+        }
+    }
+}
+
+.alignwide {
+    max-width: $container;
+    margin: 0 auto;
+
+    // TODO : gestion des marges dans le cas des strates full (ex. Blog > post-video, carousels)
+    // TODO then : supprimer les paddinf left&right des strates carousel + vérifs des sliders sur les différentes réso (marges, visibilité des items etc)
+    //.alignfull > & {
+    //    margin-left: 40px;
+    //    margin-right: 40px;
+    //}
+}
+
+.alignheight {
+    height: 100vh;
+}
+
+// Full width inside containers
+.full-width {
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+}
+
+/* Margin element
+/ ================================================== */
+.hentry {
+
+    // On définie les marges sur les titres uniquement sur ceux de 1er niveau
+    // Pour les titres dans les blocs (colonne, mise en avant...) les marges sont définies dans le bloc
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+        margin-top: $title-margin-top;
+        margin-bottom: $title-margin-bottom;
+
+        @include breakpoint(small) {
+            margin-top: $title-margin-top-small;
+            margin-bottom: $title-margin-bottom-small;
+        }
+    }
+
+    // TODO no style liste
+    ul:not(.not-list-style),
+    ol:not(.not-list-style),
+    p {
+        margin-bottom: $text-margin-bottom;
+    }
+
+    > *[class] {
+        margin-top: $block-margin-top;
+        margin-bottom: $block-margin-bottom;
+
+        @include breakpoint(small) {
+            margin-top: $block-margin-top-small;
+            margin-bottom: $block-margin-bottom-small;
+        }
+    }
+}
+
+
+/* TODO
+/ ================================================== */
+//.wp-block {
+//    position: relative;
+//}

package/public/styles/scss/_utils.scss

@@ -0,0 +1,102 @@
+/*
+  * Created by IRIS Interactive
+  * User : IRIS Interactive
+*/
+
+/* Utils classes
+/* ============================================= */
+.stretched-link {
+    @include stretched-link;
+}
+
+
+/* ============================================= */
+.list-flex {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 0;
+
+    > * {
+        list-style-type: none;
+        margin: 0 10px 10px 0;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+
+/* Animations
+/* ============================================= */
+@keyframes loader {
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Sr-only
+/* ============================================= */
+.sr-only {
+    clip: rect(0, 0, 0, 0);
+    border-width: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+/* Text with icon before
+/* ============================================= */
+.text-icon {
+    display: inline-flex;
+    align-items: center;
+
+    &:before {
+        margin-right: 5px;
+    }
+
+    // If icon after
+    &:after {
+        margin-left: 5px;
+    }
+}
+
+/* Block with img animated on hover
+/* ============================================= */
+.hover-item {
+
+    img {
+        @include transition;
+        will-change: transform;
+    }
+
+    &:hover {
+        img {
+            @include animate;
+        }
+    }
+}
+
+/* Masquer un element
+/* ============================================= */
+.hide {
+    display: none;
+}
+
+/* Opening
+/* ============================================= */
+.is-opened {
+    color: $c-success;
+}
+
+.soon-closed {
+    color: $c-warning;
+}
+
+.is-closed {
+    color: $c-error;
+}