@iris.interactive/handcook 1.0.9 → 1.0.13

package/package.json

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

package/public/styles/scss/_layout.scss

@@ -123,39 +123,28 @@ body.fullscreen {
 
 .alignwide {
     max-width: $container;
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: 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)
+    // TODO then : supprimer les padding 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);
-}
-
-/* Container
-/ ================================================== */
 .container {
     max-width: $container;
     margin-left: auto;
     margin-right: auto;
 
     @include breakpoint(large) {
-        width: calc(100% - #{$margin-xlarge} * 2);
+        width: calc(100% - #{$margin-large} * 2);
     }
 
     @include breakpoint(medium) {
-        width: calc(100% - #{$margin-large} * 2);
+        width: calc(100% - #{$margin-medium} * 2);
     }
 
     @include breakpoint(small) {
@@ -167,6 +156,16 @@ body.fullscreen {
     }
 }
 
+.alignheight {
+    height: 100vh;
+}
+
+// Full width inside containers
+.full-width {
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+}
+
 /* Margin element
 / ================================================== */
 .hentry {

package/public/styles/scss/_variables.scss

@@ -54,7 +54,7 @@ $margin-xsmall: 20px;
 
 /* Breakpoint
 / ================================================== */
-$breakpoint-desktop: $container; // min-width
+$breakpoint-desktop: 1000.1px; // min-width
 $breakpoint-xlarge: math.div($container, 1 - math.div($margin-xlarge, 100%) * 2)+1; // min-width
 $breakpoint-large: math.div($container, 1 - math.div($margin-xlarge, 100%) * 2); // max-width
 $breakpoint-medium: 1000px; // max-width
@@ -110,7 +110,7 @@ $link-color: var(--iris--link--color);
 $link-color-hover: var(--iris--link--color-hover);
 $link-text-decoration: var(--iris--link--text-decoration, none);
 $link-box-shadow: var(--iris--link--box-shadow, none);
-$link-underline-offset: var(--iris--link--underline-offset, 0);
+$link-underline-offset: var(--iris--link--underline-offset, 2px);
 $link-font-weight: var(--iris--link--font-weight);
 
 
@@ -214,7 +214,7 @@ $blockquote-font-size: var(--iris--blockquote--font-size);
 $blockquote-font-size--rem: var(--iris--blockquote--font-size--rem);
 $blockquote-font-size-small: var(--iris--blockquote--font-size--small);
 $blockquote-font-size-small--rem: var(--iris--blockquote--font-size--small--rem);
-$blockquote-padding-left: calc(#{$blockquote-font-size} * 1px + 10px);
+$blockquote-padding-left: calc(#{$blockquote-font-size} * 1px + 20px);
 $blockquote-text-align: var(--iris--blockquote--text-align);
 
 

package/public/styles/style.css

@@ -220,7 +220,34 @@ body.fullscreen .prefooter {
 
 .alignwide {
   max-width: 1220px;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container {
+  max-width: 1220px;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media screen and (max-width: 1452.380952381px) {
+  .container {
+    width: calc(100% - 60px * 2);
+  }
+}
+@media screen and (max-width: 1000px) {
+  .container {
+    width: calc(100% - 40px * 2);
+  }
+}
+@media screen and (max-width: 650px) {
+  .container {
+    width: calc(100% - 20px * 2);
+  }
+}
+@media screen and (max-width: 370px) {
+  .container {
+    width: calc(100% - 20px * 2);
+  }
 }
 
 .alignheight {