From 69b8f187a09495aca24ae24a70accc83f4df7a9e Mon Sep 17 00:00:00 2001 From: Lauren Davidson Date: Wed, 17 Jun 2020 20:41:06 -0700 Subject: [PATCH 1/2] Add babel for development and some other tests --- .DS_Store | Bin 6148 -> 6148 bytes .babelrc | 4 + docs/notes/add-babel.md | 18 + package-lock.json | 1589 ++++++++++++++++++++ package.json | 7 +- public/.DS_Store | Bin 0 -> 6148 bytes public/people/.DS_Store | Bin 0 -> 6148 bytes public/people/ld/.DS_Store | Bin 0 -> 6148 bytes public/people/ld/chaining.js | 10 + public/people/ld/index.html | 26 + public/people/ld/module.js | 4 + public/people/ld/observable-test.html | 22 + public/people/ld/observable.css | 10 + public/people/ld/really-simple-scroll.css | 39 + public/people/ld/really-simple-scroll.html | 15 + public/people/ld/test.js | 4 + 16 files changed, 1747 insertions(+), 1 deletion(-) create mode 100644 .babelrc create mode 100644 docs/notes/add-babel.md create mode 100644 public/.DS_Store create mode 100644 public/people/.DS_Store create mode 100644 public/people/ld/.DS_Store create mode 100644 public/people/ld/chaining.js create mode 100644 public/people/ld/index.html create mode 100644 public/people/ld/module.js create mode 100644 public/people/ld/observable-test.html create mode 100644 public/people/ld/observable.css create mode 100644 public/people/ld/really-simple-scroll.css create mode 100644 public/people/ld/really-simple-scroll.html create mode 100644 public/people/ld/test.js diff --git a/.DS_Store b/.DS_Store index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..04b89056536211225cff7dc1b85faf11a754c882 100644 GIT binary patch delta 138 zcmZoMXfc=|&e%3FQEZ}~q9_vs0|O%ig8&0VCPQ*cadJ*letyoxM0Ep@1RFyELn%WN zLk_YeP&ET9Lm5ygm7$!W7^Y`qq7VCI0}+3p3{6x-u(7n9D|mxJ^aNf&{B#Q|i2YWc%cJ@7DU{Vt3*`lpH# z|38zsqXJamuN2VHYO`A6m9n??Ue0=Lfp6hfbAy{jQLA4vtM02QDDRDcT1M}a)b z*PHn~5}$+$P=T2!VBd!VH`Zhe`lkcIM*whzvK!VuOMt}+U`@6lDlm;!Fk02e5UYDT zSaM%YwqUf2=J26;XSFE?rqM21kifJ$7^nahm?*G}ytDKF1phYwPgH1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 + + + + + + +
+

ld testing things

+ +

if this says hello, we're importing script modules

+
+

if this says green, optional chaining works

+
+
+ + + + diff --git a/public/people/ld/module.js b/public/people/ld/module.js new file mode 100644 index 0000000..356689f --- /dev/null +++ b/public/people/ld/module.js @@ -0,0 +1,4 @@ +import sayHello from './test.js' + +const element = document.getElementById('module-test') +sayHello(element) diff --git a/public/people/ld/observable-test.html b/public/people/ld/observable-test.html new file mode 100644 index 0000000..78b0d71 --- /dev/null +++ b/public/people/ld/observable-test.html @@ -0,0 +1,22 @@ + + + + + + +
+ +
+ + + diff --git a/public/people/ld/observable.css b/public/people/ld/observable.css new file mode 100644 index 0000000..f3d9023 --- /dev/null +++ b/public/people/ld/observable.css @@ -0,0 +1,10 @@ +#observablehq-5dbc9487 { + width: 70vw; + position: relative; + top: 10vh; + margin-bottom: 20vh; +} + +#observablehq-fc71ba22 { + width: 80vw; +} diff --git a/public/people/ld/really-simple-scroll.css b/public/people/ld/really-simple-scroll.css new file mode 100644 index 0000000..88e0a9b --- /dev/null +++ b/public/people/ld/really-simple-scroll.css @@ -0,0 +1,39 @@ +#background { + background-image: linear-gradient(black, white); + min-height: 100vh; + min-width: 100vw; + position: absolute; + top: 0; + left: 0; +} + +#box-1 { + background: white; + height: 40vh; + width: 40vw; + left: 30vw; + top: 20vh; + position: relative; + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; +} + +#box-1 h1 { + font-family: sans-serif; + text-align: center; +} + +#box-2 { + background: blue; + height: 40vh; + width: 40vw; + left: 30vw; + top: 80vh; + position: relative; + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; +} diff --git a/public/people/ld/really-simple-scroll.html b/public/people/ld/really-simple-scroll.html new file mode 100644 index 0000000..de95274 --- /dev/null +++ b/public/people/ld/really-simple-scroll.html @@ -0,0 +1,15 @@ + + + + + + +
+
+

try scrolling!

+
+
+
+
+ + diff --git a/public/people/ld/test.js b/public/people/ld/test.js new file mode 100644 index 0000000..b616417 --- /dev/null +++ b/public/people/ld/test.js @@ -0,0 +1,4 @@ +export default function test(element) { + element.textContent = 'hello' + console.log('here') +} From 719689448fd8694d268f5c58a4f97d4c172cc989 Mon Sep 17 00:00:00 2001 From: Lauren Davidson Date: Mon, 22 Jun 2020 13:02:39 -0700 Subject: [PATCH 2/2] Add sticky-overlay demo remake --- public/people/ld/index.html | 9 ++- public/people/ld/really-simple-scroll.css | 39 --------- public/people/ld/really-simple-scroll.html | 15 ---- .../ld/scrollytelling/sticky-overlay.css | 79 +++++++++++++++++++ .../ld/scrollytelling/sticky-overlay.html | 43 ++++++++++ 5 files changed, 129 insertions(+), 56 deletions(-) delete mode 100644 public/people/ld/really-simple-scroll.css delete mode 100644 public/people/ld/really-simple-scroll.html create mode 100644 public/people/ld/scrollytelling/sticky-overlay.css create mode 100644 public/people/ld/scrollytelling/sticky-overlay.html diff --git a/public/people/ld/index.html b/public/people/ld/index.html index 7248833..d450191 100644 --- a/public/people/ld/index.html +++ b/public/people/ld/index.html @@ -2,14 +2,19 @@ - +

ld testing things

  • - really simple scroll + remake of Scrollama's sticky overlay demo +
  • import observables diff --git a/public/people/ld/really-simple-scroll.css b/public/people/ld/really-simple-scroll.css deleted file mode 100644 index 88e0a9b..0000000 --- a/public/people/ld/really-simple-scroll.css +++ /dev/null @@ -1,39 +0,0 @@ -#background { - background-image: linear-gradient(black, white); - min-height: 100vh; - min-width: 100vw; - position: absolute; - top: 0; - left: 0; -} - -#box-1 { - background: white; - height: 40vh; - width: 40vw; - left: 30vw; - top: 20vh; - position: relative; - display: flex; - justify-content: center; - flex-direction: row; - align-items: center; -} - -#box-1 h1 { - font-family: sans-serif; - text-align: center; -} - -#box-2 { - background: blue; - height: 40vh; - width: 40vw; - left: 30vw; - top: 80vh; - position: relative; - display: flex; - justify-content: center; - flex-direction: row; - align-items: center; -} diff --git a/public/people/ld/really-simple-scroll.html b/public/people/ld/really-simple-scroll.html deleted file mode 100644 index de95274..0000000 --- a/public/people/ld/really-simple-scroll.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - -
    -
    -

    try scrolling!

    -
    -
    -
    -
    - - diff --git a/public/people/ld/scrollytelling/sticky-overlay.css b/public/people/ld/scrollytelling/sticky-overlay.css new file mode 100644 index 0000000..7f89bef --- /dev/null +++ b/public/people/ld/scrollytelling/sticky-overlay.css @@ -0,0 +1,79 @@ +#background { + background: white; + min-width: 100vw; + min-height: 270vh; +} + +#target { + border-top: 5px dashed black; + position: fixed; + top: 25%; + width: 100vw; + z-index: 4; +} + +#top-padding { + position: relative; + top: 0; + height: 60vh; +} + +#bottom-padding { + position: relative; + bottom: 0; + height: 80vh; +} + +#sticky { + position: sticky; + position: -webkit-sticky; + top: 20%; + height: 50vh; + width: 90vw; + margin-left: 5vw; + margin-right: 5vw; + background: #3D4849; + z-index: 0; + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; +} + + h1 { + font-family: sans-serif; + text-align: center; + font-size: 10em; + color: white; +} + +.box { + height: 30vh; + width: 40vw; + left: 30vw; + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; + transition: left .5s ease-in; + z-index: 1; + position: absolute; + opacity: .5; +} + +#one { + top: 120vh; + background: gray; +} + +#two { + top: 155vh; + background: gray; + height: 50vh; +} + +#three { + top: 210vh; + background: gray; + height: 60vh; +} diff --git a/public/people/ld/scrollytelling/sticky-overlay.html b/public/people/ld/scrollytelling/sticky-overlay.html new file mode 100644 index 0000000..4d5ef95 --- /dev/null +++ b/public/people/ld/scrollytelling/sticky-overlay.html @@ -0,0 +1,43 @@ + + + + + + + +
    +
    +
    +

    0

    +
    +
    +

    target line

    +
    +
    +
    +
    +
    +
    + + +