Talk cleanup

Author: larsenwork

.gitignore

@@ -13,8 +13,5 @@ dist
 # Mac
 .DS_Store
 
-# Temp piter images
-static/images/piter
-
 # Env file
 .env

assets/css/_base.css

@@ -47,7 +47,7 @@ input:not([type='range']),
 select {
   display: flex;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: inherit;
   line-height: inherit;
   margin: 0;
   padding: var(--spacer-xsmall);

assets/css/_slideshow.css

@@ -19,8 +19,8 @@
 }
 
 .eg-slide {
-  width: calc(100% - var(--spacer-small) * 2);
-  height: calc(100% - var(--spacer-small) * 2);
+  width: calc(100% - var(--spacer-medium) * 2);
+  height: calc(100% - var(--spacer-medium) * 2);
   position: absolute;
   top: 50%;
   left: 50%;

components/piter/images.js

@@ -1,10 +1,24 @@
 export default {
-  nurse: 'https://imgur.com/bcwlq9n.jpg',
-  me: 'https://imgur.com/8G1iCY0.jpg',
-  corgi: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/256812/gorgi.gif',
-  grundtvig1: 'https://imgur.com/2RSVTps.jpg',
-  grundtvig2: 'https://imgur.com/TlbcBk5.jpg',
-  savanna: 'https://imgur.com/7UppqYg.jpg',
-  lucy: 'https://imgur.com/DCVO3RD.jpg',
-  tiles: 'https://imgur.com/a/q1EEy6P.jpg',
+  bob: 'https://imgur.com/QnIk5Fd.gif',
+  bricks: 'https://imgur.com/2Us2ywA.jpg',
+  corgi: 'https://imgur.com/dbF1iLj.gif',
+  corgi_big: 'https://i.imgur.com/q0tMNDP.gif',
+  csswg: 'https://imgur.com/oSgykm0.jpg',
+  eye_anatomy: 'https://imgur.com/DilAJAp.jpg',
+  eye_brightness: 'https://imgur.com/SB0yiYE.jpg',
+  eye_discharge: 'https://imgur.com/Crj3tuM.jpg',
+  eye_photosensors: 'https://imgur.com/dXb9gG0.jpg',
+  eye_receptive: 'https://imgur.com/TA3YrjN.jpg',
+  fodbold: 'https://imgur.com/hEP4l2G.jpg',
+  grundtvig_1: 'https://imgur.com/tyA9Weq.jpg',
+  grundtvig_2: 'https://imgur.com/bMazSSD.jpg',
+  habesha: 'https://imgur.com/b6CkPRO.jpg',
+  lucy: 'https://imgur.com/wPlWIHV.jpg',
+  momondo_ease: 'https://imgur.com/xxpRaBx.jpg',
+  momondo_linear: 'https://imgur.com/mZLK2ZY.jpg',
+  nurse: 'https://imgur.com/smQQ7fk.jpg',
+  savana: 'https://imgur.com/0I6Bs21.jpg',
+  tiles: 'https://imgur.com/klfRiBu.jpg',
+  twitter: 'https://imgur.com/Jqo3aYT.jpg',
+  wow: 'https://imgur.com/wFKEUJ2.gif',
 }

components/slides/blur.vue

@@ -12,28 +12,34 @@
     class="eg-slide"
   >
     <div class="eg-slide-content eg-slide-blur u-grid u-grid--3-2">
-      <div class="eg-slide-blur-demo">
+      <img :src="images.corgi" class="corgi" >
+
+      <div :key="`${blur}px`" class="eg-slide-blur-demo css-blur u-position-relative">
+        <small class="u-position-cover small-label">css filter blur</small>
         <div class="eg-slide-blur-left" />
         <div class="eg-slide-blur-right" />
       </div>
 
-      <div :key="blur" class="eg-slide-blur-demo">
+      <div :key="blur" class="eg-slide-blur-demo svg-blur u-position-relative">
+        <small class="u-position-cover small-label">feGaussianBlur</small>
         <div class="eg-slide-blur-left" />
         <div class="eg-slide-blur-right" />
       </div>
 
-      <div class="eg-slide-blur-demo">
+      <div class="eg-slide-blur-demo u-position-relative">
         <div class="eg-slide-blur-left" />
         <div class="eg-slide-blur-right" />
       </div>
 
       <div class="eg-slide-blur-demo u-position-relative">
+        <small class="u-position-cover small-label">RGB gradient</small>
         <div class="eg-slide-blur-left" />
         <div class="eg-slide-blur-right" />
         <div class="eg-slide-blur-gradient" />
       </div>
 
       <div class="eg-slide-blur-demo u-position-relative">
+        <small class="u-position-cover small-label">linearRGB gradient</small>
         <div class="eg-slide-blur-left" />
         <div class="eg-slide-blur-right" />
         <div class="eg-slide-blur-gradient eg-slide-blur-gradient--fancy" />
@@ -59,6 +65,7 @@
 import eagle from 'eagle.js'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
 import slideshowMethods from '~/components/mixins/slideshow'
+import images from '~/components/piter/images'
 
 export default {
   mixins: [eagle.slide, gradientOutput, slideshowMethods],
@@ -68,6 +75,7 @@ export default {
   data: function() {
     return {
       blur: 0,
+      images,
     }
   },
   watch: {
@@ -147,11 +155,11 @@ export default {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
 
-  &:nth-child(1) {
+  &.css-blur {
     filter: blur(var(--blurPx));
   }
 
-  &:nth-child(2) {
+  &.svg-blur {
     filter: url('#sharpBlur');
   }
 }

components/slides/helmholz.vue

@@ -4,6 +4,7 @@
     class="eg-slide"
   >
     <div class="eg-slide-content eg-slide-helmholz u-grid">
+      <img :src="images.corgi" class="corgi" >
       <input
         v-model="greyscale"
         type="range"
@@ -32,6 +33,7 @@
 import eagle from 'eagle.js'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
 import slideshowMethods from '~/components/mixins/slideshow'
+import images from '~/components/piter/images'
 
 export default {
   mixins: [eagle.slide, gradientOutput, slideshowMethods],
@@ -41,6 +43,7 @@ export default {
   data: function() {
     return {
       greyscale: 1,
+      images,
     }
   },
   watch: {

components/slides/linear-to-easing.vue

@@ -99,22 +99,24 @@ export default {
             v: 0,
           },
         }
-        const ease1 = {
-          x: 0,
-          y: 0,
+        if (this.step === 1) {
+          const ease1 = {
+            x: 0,
+            y: 0,
+          }
+          const ease2 = {
+            x: 1,
+            y: 1,
+          }
+          const direction = {
+            deg: 90,
+            x: 0.5,
+            y: 0.2,
+          }
+          this.$store.state.gradient.direction = direction
+          this.$store.state.gradient.ease1 = ease1
+          this.$store.state.gradient.ease2 = ease2
         }
-        const ease2 = {
-          x: 1,
-          y: 1,
-        }
-        const direction = {
-          deg: 90,
-          x: 0.5,
-          y: 0.2,
-        }
-        this.$store.state.gradient.direction = direction
-        this.$store.state.gradient.ease1 = ease1
-        this.$store.state.gradient.ease2 = ease2
         this.$store.state.gradient.color1 = color1
         this.$store.state.gradient.color2 = color2
         this.updateSlideId(this.id)

pages/talks.vue renamed to pages/talks/index.vue

@@ -9,7 +9,7 @@
       <ul>
         <li>
           <nuxt-link
-            to="/piter"
+            to="talks/piter"
             class="c-navigation-link"
           >
             Piter