@iris.interactive/handcook 1.0.10 → 1.0.14

package/package.json

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

package/public/styles/scss/_layout.scss

@@ -123,16 +123,39 @@ 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;
     //}
 }
 
+.container {
+    max-width: $container;
+    margin-left: auto;
+    margin-right: auto;
+
+    @include breakpoint(large) {
+        width: calc(100% - #{$margin-large} * 2);
+    }
+
+    @include breakpoint(medium) {
+        width: calc(100% - #{$margin-medium} * 2);
+    }
+
+    @include breakpoint(small) {
+        width: calc(100% - #{$margin-small} * 2);
+    }
+
+    @include breakpoint(xsmall) {
+        width: calc(100% - #{$margin-xsmall} * 2);
+    }
+}
+
 .alignheight {
     height: 100vh;
 }

package/public/styles/scss/_variables.scss

@@ -30,15 +30,15 @@ $section-margin-top-small: 40px;
 $section-margin-bottom-small: 40px;
 $text-margin-bottom: 20px;
 
-$title-margin-top: 80px;
-$title-margin-bottom: 20px;
-$title-margin-top-small: 60px;
+$title-margin-top: 60px;
+$title-margin-bottom: 40px;
+$title-margin-top-small: 40px;
 $title-margin-bottom-small: 20px;
 
-$block-margin-top: 80px;
+$block-margin-top: 60px;
 $block-margin-top-medium: 60px;
 $block-margin-top-small: 30px;
-$block-margin-bottom: 80px;
+$block-margin-bottom: 60px;
 $block-margin-bottom-medium: 60px;
 $block-margin-bottom-small: 30px;
 
@@ -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);
 
 
@@ -408,5 +408,5 @@ $c-warning: #ff890e;
 /* Difficulty
 / ================================================== */
 $c-easy: #9ccc65;
-$c-medium: #29b6f6;
+$c-medium: #ff890e;
 $c-hard: #ef5350;

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 {
@@ -240,8 +267,8 @@ body.fullscreen .prefooter {
 .hentry > h4,
 .hentry > h5,
 .hentry > h6 {
-  margin-top: 80px;
-  margin-bottom: 20px;
+  margin-top: 60px;
+  margin-bottom: 40px;
 }
 @media screen and (max-width: 650px) {
   .hentry > h1,
@@ -250,7 +277,7 @@ body.fullscreen .prefooter {
 .hentry > h4,
 .hentry > h5,
 .hentry > h6 {
-    margin-top: 60px;
+    margin-top: 40px;
     margin-bottom: 20px;
   }
 }
@@ -260,8 +287,8 @@ body.fullscreen .prefooter {
   margin-bottom: 20px;
 }
 .hentry > *[class] {
-  margin-top: 80px;
-  margin-bottom: 80px;
+  margin-top: 60px;
+  margin-bottom: 60px;
 }
 @media screen and (max-width: 650px) {
   .hentry > *[class] {