From 1ef8e92c3f0833304b923d2e71454c42399365e6 Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Tue, 24 Apr 2018 10:22:06 -0400 Subject: [PATCH] Fixed for Safari --- README.md | 0 css/index.css | 31 ++- favicon.png | Bin 0 -> 1646 bytes index.html | 405 +++++++++++++++++++--------------- js/chapters/B_Introduction.js | 4 +- js/chapters/H_Conclusion.js | 2 +- js/lib/helpers.js | 7 + js/sim/Simulations.js | 6 +- js/slideshow/Navigation.js | 2 +- 9 files changed, 257 insertions(+), 200 deletions(-) create mode 100644 README.md create mode 100644 favicon.png diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/css/index.css b/css/index.css index b3397d5..b51e163 100644 --- a/css/index.css +++ b/css/index.css @@ -233,12 +233,18 @@ b, strong{ color: #fff; } +#modal #modal_content > div:first-child > h3{ + border-top: none; +} +#modal #modal_content > h3{ + border-top: none; +} #modal h3{ font-size: 1.3em; margin-bottom: 0.7em; padding-top: 0.7em; margin-top: 1em; - border-top: 2px solid #333; + border-top: 5px solid #282828; } #modal[size=small]{ width: 700px; @@ -356,6 +362,7 @@ b, strong{ text-align: center; overflow: hidden; line-height: 34px; + position: relative; } #navigation > div[highlight]{ background: #fff; @@ -363,6 +370,8 @@ b, strong{ } #navigation > div > span:nth-child(1){ display: block; + position: absolute; + width: 100%; } #navigation > div > span:nth-child(2){ display: none; @@ -508,16 +517,16 @@ ref:hover:before{ border-radius: 100%; } .circle::before { - content: ''; - height: 100%; - width: 50%; - float: left; - shape-outside: polygon(0 0, 100% 0, 60% 4%, 40% 10%, 20% 20%, 10% 28.2%, 5% 34.4%, 0 50%, 5% 65.6%, 10% 71.8%, 20% 80%, 40% 90%, 60% 96%, 100% 100%, 0% 100%); + content: ''; + height: 100%; + width: 50%; + float: left; + shape-outside: polygon(0 0, 100% 0, 60% 4%, 40% 10%, 20% 20%, 10% 28.2%, 5% 34.4%, 0 50%, 5% 65.6%, 10% 71.8%, 20% 80%, 40% 90%, 60% 96%, 100% 100%, 0% 100%); } .circle > span::before { - content: ''; - height: 100%; - width: 50%; - float: right; - shape-outside: polygon(100% 0, 0 0, 40% 4%, 60% 10%, 80% 20%, 90% 28.2%, 95% 34.4%, 100% 50%, 95% 65.6%, 90% 71.8%, 80% 80%, 60% 90%, 40% 96%, 0 100%, 100% 100%); + content: ''; + height: 100%; + width: 50%; + float: right; + shape-outside: polygon(100% 0, 0 0, 40% 4%, 60% 10%, 80% 20%, 90% 28.2%, 95% 34.4%, 100% 50%, 95% 65.6%, 90% 71.8%, 80% 80%, 60% 90%, 40% 96%, 0 100%, 100% 100%); } \ No newline at end of file diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..b9b7ee09e49c7a993d1e8cf9595ab074458e3da1 GIT binary patch literal 1646 zcmV-!29f!RP)tu>^S$g&J| zT>}8hvP1|0ZQDXh38fUY)^N^2DFtH;y!Xhm3`!}?&dwf)B@Y14&YnFxiZMcKjj5?A zoI7_8T5Ig=>;TwHMP1iu+ZIYGc<&Kogb)ICT_dH0rfCpkL`n&R!2qkPtNyDLSXo&~ zlxHa=thGofp)5<(b&U`L@;rx>5<&=s5MYdf5Q0-;jA3xCHL9vY2m#)ET)TE{3{!pr zzUloQ(HJ9>AnEfwhf<2uV6BDs9&OvAu4{PjA;jMKL^P#@wr%0P$7nRd^XJch{vrYA z+>sa~15k974(A*biZLR~GE`NCPN#!B&ruWwgb;j>2vQL%rO>wR4+{$m@-qSt9y}P8 zWr;k``4A#OY6u~a=Q*-0V-Il7!8!L!L?3~qlw2<#fsyAqLI}8g`Lg|tKuW3Oy@zv- zWu(^AT623*m3!~8ySvM>Q_B(ArfHDpIoAROmghMDs4)U7D=UB0TC;Qjkmorw-rr87 z4*ixQjWP25loF?jl%wFRwFn{L(W6IyVgla#zmU|_Mkys&YuRL^lw3?Cc?bbnmN94u zfz=|HEX$I~0DJ!N@%ujmfc{u~9HCMQAq0dF@aokoY;SL)*XuE`)*2xMbh}-SzHM7% zS;qAurG)n$i;Iic+}uRlwwRfj!L3`jxK>h1zodW;r6{bmxPSjXUc7jLwY4?$`+XQ= zIM3wyRN>T$6txfnQcApi`xc|o2zj1kb8{1GYipdkrfK#F+`D)0SM(6&a%pJ^J3Bit z#$a-Cl7Y$N>$+wms;UY?2o8dj^4=rQb8KyGF?r`44jnp#bPfs3qdTXZ@d7-NvSYKb~ zfOWUqbuq@VcAA=+!tCrU*4NjOWf|t?<~Ta(?DyDmoH!9&6_tkdh{p&psFg=b&aAZV68>B+l93j z#u&`a&9PBYHyu8F7*$nadwUyA)1cSu2}xa`lwz-U&XHlTiAX7N>eMMrPEMj}8XP%t z1cSi<@87@2*47rBbJ*VAhI0hay(U7iU_DU3!Vlw}F6HHO0>MxzmmqF^tP0Pyl5T|bU0n42(?d2 zi3^k}o7#>drs(N;B03lhczx@3yB)3p0O7-M9w{xpgZ!k8iyNtR`B&W#xmk)Up%K}HK}(==0rJGPxX zeE2X?8_~ogccZ~V(UU?nfG9F5U~BEzoX}cBYYp%Hzi!;Pae^?%7LtvPjo*;fQdDG_ z&N&!kxW7q(5CZQ6Qp&NhON*;9hKcS6|4ab@c>46|?}x+TUrA1yj1&p2-$Z~U-~T(R z7a;_kbEv8cQc7I8a^*9;16Sqc<>d+I+y|1;7=yNLS%FU%5E?EtQE4C4TC+;muU|h9 z>%YF3EG{m-u-5)mRTZa%YJ`f9Jb>PsXo;cP0pRB6=d&+ieAT<*lP6Es+P3|zwU%>9 zpa8fXV~o6pbvhkfx^(G(p8wS^rvUKy@#7`uTyOt70ez;3t+miv|8stR{?}h~<~I@e s^jckAE#AF*mjS@-+qZWBq;EarKVyk>?CcAq*Z=?k07*qoM6N<$f=6}>`2YX_ literal 0 HcmV?d00001 diff --git a/index.html b/index.html index d5d7cf6..005614b 100644 --- a/index.html +++ b/index.html @@ -12,134 +12,164 @@ MY "WHY" FOR MAKING THIS: - - The Wisdom and/or Madness of Crowds - - - + - -
+ + The Wisdom and/or Madness of Crowds + + + + + - -
-
-
+ + + + - -
-
-
+ + + + + + + - -
+ + + + + + - - + + - - + + -
- - -
-
+ +
+ + From Newton to NASA to
- From Newton to NASA to network science, we've covered a lot here today. - Long story short, the madness of crowds is not necessarily due to the - individual people, but due to how we're trapped in a network's sticky web. + network science, we've covered a lot here +
+ today. Long story short, the madness of crowds +
+ is not necessarily due to the individual people, but due +
+ to how we're trapped in a network's sticky web. -

+
- That does NOT mean abandoning personal responsibility, - for we're also the weavers of that web. - So, improve your contagions: - be skeptical of ideas that flatter you, - spend time understanding complex ideas. - And, improve your connections: bond with similar folk, - but also build bridges across cultural/political divides. + That does NOT mean abandoning personal responsibility, for +
+ we're also the weavers of that web. So, improve your contagions: +
+ be skeptical of ideas that flatter you, spend time understanding +
+ complex ideas. And, improve your connections: bond with similar +
+ folk, but also build bridges across cultural/political divides. -

+
+ + We can weave a wise web. Sure, it's harder than doodling +
+ lines on a screen... - We can weave a wise web. - Sure, it's harder than doodling lines on a screen... ...but so, so worth it. -
+ @@ -1016,11 +1069,9 @@ MY "WHY" FOR MAKING THIS:

- - Book: + Book: Connected - by Nicholas Christakis and James Fowler (2009). A layperson-friendly yet rigorous tour of how networks affect our lives, for good and ill. They summarize the science, and also present some of their original findings, @@ -1034,11 +1085,9 @@ MY "WHY" FOR MAKING THIS:
- - Interactive: + Interactive: - Collective Dynamics of Small World Networks - , + Collective Dynamics of Small World Networks, original paper by Watts & Strogatz (1998), turned into interactive visuals by Bret Victor in 2011. Slightly technical, but it's a lot easier to understand when @@ -1054,11 +1103,8 @@ MY "WHY" FOR MAKING THIS:

- - The Evolution of Trust - - by Nicky Case (2017). + The Evolution of Trust by Nicky Case (2017). This is a game about the game theory of how cooperation arises (or not). You first play a game of trust, then play a meta-game of that, then a meta-meta-game of that... @@ -1068,11 +1114,8 @@ MY "WHY" FOR MAKING THIS:
- - Parable of the Polygons - - by Vi Hart and Nicky Case (2014). + Parable of the Polygons by Vi Hart and Nicky Case (2014). A story about how harmless choices can create a harmful world. Based off a Nobel Prize-winning game theorist's work, this interactive shows how discrimination and diversity can arise from the bottom up. @@ -1085,8 +1128,6 @@ MY "WHY" FOR MAKING THIS: - -

diff --git a/js/chapters/B_Introduction.js b/js/chapters/B_Introduction.js index 87f450a..aeb3cec 100644 --- a/js/chapters/B_Introduction.js +++ b/js/chapters/B_Introduction.js @@ -27,7 +27,7 @@ SLIDES.push( { type:"box", id:"intro", - text:"intro", x:210, y:0, w:540, h:540, align:"center" + text:"intro", x:180, y:0, w:600, h:540, align:"center" }, ] @@ -41,7 +41,7 @@ SLIDES.push( { type:"box", id:"intro_2", - text:"intro_2", x:210, y:0, w:540, h:540, align:"center" + text:"intro_2", x:180, y:0, w:600, h:540, align:"center" } ] } diff --git a/js/chapters/H_Conclusion.js b/js/chapters/H_Conclusion.js index f362bf0..e513cf5 100644 --- a/js/chapters/H_Conclusion.js +++ b/js/chapters/H_Conclusion.js @@ -61,7 +61,7 @@ SLIDES.push( { type:"box", id:"conclusion_2", - text:"conclusion_2", x:210, y:0, w:540, h:540, align:"center" + text:"conclusion_2", x:180, y:0, w:600, h:540, align:"center" }, ] diff --git a/js/lib/helpers.js b/js/lib/helpers.js index 42769f0..85d5b2c 100644 --- a/js/lib/helpers.js +++ b/js/lib/helpers.js @@ -178,3 +178,10 @@ function rotateVector(v, a){ } } +// Cross Browser Crap +function _getBoundingClientRect(dom){ + var bounds = dom.getBoundingClientRect(); + if(!bounds.x) bounds.x = bounds.left; // crossbrowser crap + if(!bounds.y) bounds.y = bounds.top; // crossbrowser crap + return bounds; +} \ No newline at end of file diff --git a/js/sim/Simulations.js b/js/sim/Simulations.js index 90f329c..440da5c 100644 --- a/js/sim/Simulations.js +++ b/js/sim/Simulations.js @@ -131,7 +131,7 @@ function Sim(config){ // Canvas if(config.fullscreen){ var container = $("#simulations_container"); - var simOffset = self.container.dom.getBoundingClientRect(); + var simOffset = _getBoundingClientRect(self.container.dom); self.canvas = createCanvas(container.clientWidth, container.clientHeight); self.canvas.style.left = -simOffset.x; self.canvas.style.top = -simOffset.y; @@ -186,7 +186,7 @@ function Sim(config){ self.update = function(){ // "Mouse", offset! - var canvasBounds = self.canvas.getBoundingClientRect(); + var canvasBounds = _getBoundingClientRect(self.canvas); self.mouse = cloneObject(Mouse); self.mouse.x -= canvasBounds.x; self.mouse.y -= canvasBounds.y; @@ -440,7 +440,7 @@ function Sim(config){ }else if(self._canPlayBonkSound && !isEveryoneInfected){ self._canPlayBonkSound = false; - if(!config.options.NO_BONK){ + if(!self.options.NO_BONK){ SOUNDS.bonk.play(); } diff --git a/js/slideshow/Navigation.js b/js/slideshow/Navigation.js index 85f9940..01e0678 100644 --- a/js/slideshow/Navigation.js +++ b/js/slideshow/Navigation.js @@ -63,7 +63,7 @@ function Navigation(){ var isShowingBubble = false; var _showBubble = function(nav){ - var offset = nav.getBoundingClientRect().x - $("#navigation").getBoundingClientRect().x; + var offset = _getBoundingClientRect(nav).x - _getBoundingClientRect($("#navigation")).x; var label = nav.children[1].innerHTML; bubble.style.left = offset - (220/2) + (36/2); bubble.innerHTML = label;