WIP

Author: larsenwork

assets/css/_slideshow.css

@@ -1,3 +1,11 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .eg-slide {
   width: calc(100% - var(--spacer-small) * 2);
   height: calc(100% - var(--spacer-small) * 2);
@@ -15,8 +23,16 @@
   justify-content: center;
 
   & iframe {
-    background-color: hsla(0, 0%, 100%, 0.5);
+    animation: fadeIn 1s;
+    background-color: white;
     width: 100%;
     height: 100%;
+
+    &.c-iframe--scaled {
+      width: 175%;
+      height: 175%;
+      transform: scale(0.571428571);
+      transform-origin: top left;
+    }
   }
 }

assets/css/_utilities.css

@@ -50,10 +50,20 @@
 }
 
 .u-grid {
-  display: grid;
+  display: grid !important;
   grid-gap: var(--spacer-small);
 }
 
+.u-grid--3-2 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.u-grid--2-2 {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+
 .u-aspect--1-1,
 .u-aspect--2-3 {
   position: relative;

components/slides/color-spaces-demo.vue

@@ -12,24 +12,24 @@
     }"
     class="eg-slide"
   >
-    <div class="eg-slide-content eg-slide-colorSpacesDemo">
+    <div class="eg-slide-content eg-slide-colorSpacesDemo u-grid u-grid--3-2">
       <div class="u-position-relative">
         Default
       </div>
       <div class="u-position-relative">
         RGB
       </div>
       <div class="u-position-relative">
-        1
+        LRGB
       </div>
       <div class="u-position-relative">
-        1
+        HSL
       </div>
       <div class="u-position-relative">
-        1
+        LAB
       </div>
       <div class="u-position-relative">
-        1
+        LCH
       </div>
     </div>
   </div>
@@ -99,12 +99,6 @@ export default {
 
 <style lang="postcss">
 .eg-slide-colorSpacesDemo {
-  display: grid;
-  grid-gap: var(--spacer-small);
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  overflow: hidden;
-
   & > * {
     padding: var(--spacer-xsmall);
     width: 100%;

components/slides/linear-to-easing.vue

@@ -87,7 +87,7 @@ export default {
         const color2 = {
           h: 0,
           s: 0,
-          l: 80,
+          l: 100,
           a: 1,
           hsv: {
             s: 0,
@@ -176,7 +176,7 @@ export default {
   fill: none;
   stroke-width: var(--stroke-medium);
   stroke-linecap: round;
-  stroke: currentColor;
+  stroke: hsl(0, 0%, 50%);
   vector-effect: non-scaling-stroke;
 }
 </style>

components/tools/gradient/calculations/gradient-output.js

@@ -51,19 +51,29 @@ export default {
       const colors = [this.getStoreHsla1(), this.getStoreHsla2()]
 
       // Browsers don't really agree how to treat gradients that go from one hue to alpha 0 of another hue...
-      const correctTransparentColors = colors.map((color, i) => {
+      const [color1, color2] = colors.map((color, i) => {
         return chroma(color).alpha() === 0
           ? chroma(colors[Math.abs(i - 1)]).alpha(0)
           : chroma(color)
       })
 
       // Mix them colors and write it as sensible css
       const cssColorStops = colorStopsCoordinates.map(stop => {
-        let mixedColor = chroma.mix(
-          ...correctTransparentColors,
-          stop.y,
-          colorMode
-        )
+        let mixedColor
+        if (colorMode === 'squared') {
+          const color1rgba = color1.rgba(false)
+          const color2rgba = color2.rgba(false)
+          const colorMix = color1rgba.map((num, i) => {
+            const value = Math.sqrt(
+              num ** 2 * (1 - stop.y) + color2rgba[i] ** 2 * stop.y
+            )
+            return i < 3 ? rounded(value) : value
+          })
+          console.log(colorMix)
+          mixedColor = chroma(`rgba(${colorMix.join(',')})`)
+        } else {
+          mixedColor = chroma.mix(color1, color2, stop.y, colorMode)
+        }
         mixedColor = mixedColor.alpha(rounded(mixedColor.alpha(), 3))
         return `${mixedColor
           .css('hsl')
@@ -72,10 +82,9 @@ export default {
       })
       const direction = this.getStoreDirection()
       return preview
-        ? `linear-gradient(
-    ${direction},
-    ${cssColorStops.join(',\n    ')}
-  );`
+        ? `linear-gradient(\n    ${direction},\n    ${cssColorStops.join(
+            ',\n    '
+          )}\n  );`
         : `linear-gradient(${direction}, ${cssColorStops.join(', ')})`
     },
     getStoreDirection() {

components/tools/gradient/easing-preview.vue

@@ -50,5 +50,9 @@ export default {
   @nest .c-gradientEditor-editors & {
     stroke-width: var(--stroke-large);
   }
+
+  @nest .eg-slide-linearToEasing & {
+    stroke: hsl(0, 0%, 50%);
+  }
 }
 </style>

components/tools/gradient/editor.vue

@@ -52,6 +52,7 @@
             <option>lab</option>
             <option>lch</option>
             <option>lrgb</option>
+            <option>squared</option>
           </select>
         </div>
       </div>

pages/talks/piter.vue

@@ -23,6 +23,27 @@
       <p v-if="step >= 3">{{ step }}</p>
     </slide>
     <linear-to-easing />
+    <slide>
+      <div class="u-position-cover u-grid u-grid--2-2">
+        <iframe
+          class="c-iframe--scaled"
+          src="http://gka.github.io/chroma.js/"
+        />
+        <iframe
+          class="c-iframe--scaled"
+          src="http://pomax.github.io/bezierjs/"
+        />
+        <iframe
+          class="c-iframe--scaled"
+          src="https://zulko.github.io/eaglejs-demo/"
+        />
+        <iframe
+          class="c-iframe--scaled"
+          src="https://larsenwork.com/"
+          style="background-color:transparent;"
+        />
+      </div>
+    </slide>
     <slide>
       <h1>The End</h1>
       <p>@larsenwork</p>