2018 march

slides/index.html

@@ -34,6 +34,9 @@ <h2>Slides</h2>
 
       <h3>2018</h3>
       <ul>
+        <li>March &mdash; <a href="2018/03-mar">Bleeding Edge Web</a> / 
+          <a href="https://www.vicesoftware.com/bleeding-edge-react-testing-talk/">Practical 
+            Patterns for Maintainable React Redux Architecture</a></li>
         <li>March (special SXSW edition) &mdash; <a href="2018/03-mar-sxsw">Open Source Innovation in Government</a></li>
         <li>February &mdash; <a href="2018/02-feb">Bleeding Edge Web</a> / <a href="2018/02-feb/webrtc.pdf">A Brief Introduction to Web RTC</a></li>
         <li>January &mdash; <a href="2018/01-jan">Bleeding Edge Web</a> / Noding a Blockchain (no slides)</li>

slides/shared/themes/build/skew-dark.css

@@ -0,0 +1,125 @@
+.deck-container { font-family: 'Helvetica Neue', sans-serif; font-size: 3em; font-weight: 600; background: #000000; color: #ffffff; }
+
+.deck-container .slide { background: #000000; }
+
+.deck-container .slide h1 { color: #888888; letter-spacing: -.05em; }
+
+.deck-container .slide h2 { color: #E91E63; border-bottom: 0; padding: 20px 0 10px 0; letter-spacing: -.05em; font-size: 2.4em; margin-bottom: 20px; }
+
+.deck-container .slide h3 { margin-bottom: .7em; }
+
+.deck-container .slide pre code { overflow: hidden; font-size: .9em; letter-spacing: 1.5px; }
+
+.deck-container .slide blockquote { font-size: .9em; font-style: italic; padding: .8em 3em .8em 1.5em; color: #cccccc; background: #1f1f1f; border-left: 5px solid #666666; }
+
+.deck-container .slide blockquote p { margin: 0; }
+
+.deck-container .slide blockquote cite { font-size: .5em; font-style: normal; font-weight: bold; color: #cccccc; }
+
+.deck-container .slide blockquote strong { font-weight: bold; }
+
+.deck-container .slide table.table td { border: 1px solid #ccc; padding: 5px; }
+
+.deck-container .slide thead td { font-weight: 800; }
+
+.deck-container .slide span.code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-weight: 400; margin: 0; color: #cccccc; border: 1px solid #777777; background-color: #222222; border-radius: 3px; padding: 1px 8px 2px; white-space: nowrap; }
+
+.deck-container .slide ::-moz-selection { background: #c00; color: #fff; }
+
+.deck-container .slide ::selection { background: #c00; color: #fff; }
+
+.deck-container .slide a { color: #75B1F5 !important; border-bottom: 2px dotted #333B46; }
+
+.deck-container .slide a, .deck-container .slide a:hover, .deck-container .slide a:focus, .deck-container .slide a:active, .deck-container .slide a:visited { color: #E91E63; text-decoration: none; }
+
+.deck-container .slide a:hover, .deck-container .slide a:focus { border-bottom: 1px solid #E91E63; }
+
+.deck-container .slide a span.code { color: #75B1F5 !important; border-bottom: 2px dotted #333B46; }
+
+.deck-container .slide ul { margin-left: .5em; }
+
+.deck-container .slide li { line-height: 1.5em; list-style: none; padding: .15em 0; }
+
+.deck-container .slide li:before { content: '\029BF'; /* ⦿ */ color: #E91E63; padding-right: 20px; }
+
+.deck-container .slide small { font-size: 75%; }
+
+.deck-container .slide .strike { text-decoration: line-through; }
+
+.deck-container .slide .dim { opacity: .4; }
+
+.deck-container .slide .indent { margin-left: 2em; }
+
+.deck-container > .slide .deck-before, .deck-container > .slide .deck-previous { opacity: 0.4; }
+
+.deck-container > .slide .deck-before:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-before:not(.deck-child-current) .deck-previous, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-previous { opacity: 1; }
+
+.deck-container > .slide .deck-child-current { opacity: 1; }
+
+.deck-container .deck-prev-link, .deck-container .deck-next-link { background: #222222 !important; color: #999999 !important; font-family: serif; }
+
+.deck-container .deck-status { font-size: 0.6666em; right: 15px; color: #555555; }
+
+.deck-container.deck-menu .slide { background: #eee; }
+
+.deck-container.deck-menu .deck-current, .no-touch .deck-container.deck-menu .slide:hover { background: #ddf; }
+
+.deck-container .cover, .deck-container .cover-light { background-repeat: no-repeat; background-attachment: fixed; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; }
+
+.deck-container .cover h1, .deck-container .cover-light h1 { color: #fff; text-shadow: compact(0 5px 10px rgba(0, 0, 0, 0.7), false, false, false, false, false, false, false, false, false); line-height: 1em; }
+
+.deck-container .cover h2, .deck-container .cover-light h2 { color: #fff; border-bottom: none; }
+
+.deck-container .cover a, .deck-container .cover-light a, .deck-container .cover a:visited, .deck-container .cover-light a:visited { color: #fff !important; }
+
+.deck-container .cover .content, .deck-container .cover-light .content { z-index: 99; }
+
+.deck-container .cover .shim, .deck-container .cover-light .shim { z-index: -99; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: .6; }
+
+.deck-container .cover-light .shim { background: #fff; opacity: .7; }
+
+.deck-container .cover-light h1 { color: #000; }
+
+.deck-container .cover-light h2 { color: #1f4c7f; }
+
+.deck-container .cover-light h3 { color: #444; }
+
+.deck-container .cover-light h1, .deck-container .cover-light h2, .deck-container .cover-light h3 { text-shadow: compact(0 2px 0 rgba(255, 255, 255, 0.7), false, false, false, false, false, false, false, false, false); }
+
+.deck-container .cover-light a, .deck-container .cover-light a:visited, .deck-container .cover-light p, .deck-container .cover-light li { color: #333; text-shadow: compact(0 1px 0 rgba(255, 255, 255, 0.7), false, false, false, false, false, false, false, false, false); }
+
+.deck-container .title { background-color: #0F91DA; }
+
+.deck-container .title h1, .deck-container .title h2, .deck-container .title h3 { color: #fff; }
+
+.deck-container .title h1 { line-height: 1em; }
+
+.deck-container .home { background-image: url(../../resources/images/bleeding-edge.jpg); }
+
+.deck-container .browser-table td { text-align: center; width: 20%; }
+
+.deck-container .browser-table td img { height: 7em; margin-bottom: 0; }
+
+.deck-container .browser-table td p { margin-top: 15px; font-size: 2em; }
+
+.deck-container .corner-image { position: absolute; top: 20px; right: 20px; z-index: 9999; }
+
+.deck-container .cols-2 { column-count: 2; column-gap: 30px; }
+
+.deck-container .cols-3 { column-count: 3; column-gap: 30px; }
+
+:not(pre) > code[class*="language-"] { background: #222222; padding: .1em .3em; border-radius: .2em; border: 2px solid #444444; }
+
+pre[class*="language-"] { background: #1F1F1F; border: 2px solid #333333; border-radius: .2em; padding: .3em .6em; }
+
+.browsers td { text-align: center; }
+
+.browsers .ver { font-size: 2.5em; }
+
+.browsers .build { font-size: 50%; }
+
+.browsers .pct { font-size: .8em; padding-left: 15px; }
+
+.star:before { content: '\2606'; /* ☆ */ color: #E91E63; padding-right: 20px; }
+
+img[alt=""], img:not([alt]) { border: 10px dashed #c00; }

slides/shared/themes/build/skew.css

@@ -0,0 +1,95 @@
+.deck-container { font-family: 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 2em; font-weight: 600; background: #fff; }
+
+.deck-container .slide { background: #fff; }
+
+.deck-container .slide h1 { color: #000; letter-spacing: -.05em; }
+
+.deck-container .slide h2 { color: #1f4c7f; border-bottom-color: #ccc; letter-spacing: -.05em; }
+
+.deck-container .slide h3 { color: #444; margin-bottom: .7em; }
+
+.deck-container .slide pre code { overflow: hidden; }
+
+.deck-container .slide blockquote { font-size: 1em; font-style: italic; padding: .8em 3em .8em 1.5em; color: #333; background: #f6f6f6; border-left: 5px solid #ccc; }
+
+.deck-container .slide blockquote p { margin: 0; }
+
+.deck-container .slide blockquote cite { font-size: .5em; font-style: normal; font-weight: bold; color: #888; }
+
+.deck-container .slide table.table td { border: 1px solid #ccc; padding: 5px; }
+
+.deck-container .slide thead td { font-weight: 800; }
+
+.deck-container .slide span.code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-weight: 400; margin: 0; border: 1px solid #ccc; background-color: #f8f8f8; border-radius: 3px; padding: 1px 8px; }
+
+.deck-container .slide ::-moz-selection { background: #c00; color: #fff; }
+
+.deck-container .slide ::selection { background: #c00; color: #fff; }
+
+.deck-container .slide a { color: #1c68be !important; border-bottom: 1px dashed #8FB2DA; }
+
+.deck-container .slide a, .deck-container .slide a:hover, .deck-container .slide a:focus, .deck-container .slide a:active, .deck-container .slide a:visited { color: #c00; text-decoration: none; }
+
+.deck-container .slide a:hover, .deck-container .slide a:focus { border-bottom: 2px solid #1c68be; }
+
+.deck-container .slide li { line-height: 1.5em; }
+
+.deck-container .slide .strike { text-decoration: line-through; }
+
+.deck-container .slide .dim { opacity: .4; }
+
+.deck-container > .slide .deck-before, .deck-container > .slide .deck-previous { opacity: 0.4; }
+
+.deck-container > .slide .deck-before:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-before:not(.deck-child-current) .deck-previous, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-previous { opacity: 1; }
+
+.deck-container > .slide .deck-child-current { opacity: 1; }
+
+.deck-container .deck-prev-link, .deck-container .deck-next-link { background: #ccc; font-family: serif; }
+
+.deck-container .deck-prev-link, .deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-prev-link:active, .deck-container .deck-prev-link:visited, .deck-container .deck-next-link, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus, .deck-container .deck-next-link:active, .deck-container .deck-next-link:visited { color: #fff; }
+
+.deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus { background: #1f4c7f; text-decoration: none; }
+
+.deck-container .deck-status { font-size: 0.6666em; right: 15px; }
+
+.deck-container.deck-menu .slide { background: #eee; }
+
+.deck-container.deck-menu .deck-current, .no-touch .deck-container.deck-menu .slide:hover { background: #ddf; }
+
+.deck-container .cover, .deck-container .cover-light { background-repeat: no-repeat; background-attachment: fixed; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
+
+.deck-container .cover h1, .deck-container .cover-light h1 { color: #fff; text-shadow: compact(0 5px 10px rgba(0, 0, 0, 0.7), false, false, false, false, false, false, false, false, false); }
+
+.deck-container .cover h2, .deck-container .cover-light h2 { color: #fff; border-bottom: none; }
+
+.deck-container .cover a, .deck-container .cover-light a, .deck-container .cover a:visited, .deck-container .cover-light a:visited { color: #fff !important; }
+
+.deck-container .cover p, .deck-container .cover-light p, .deck-container .cover li, .deck-container .cover-light li { color: #eee; }
+
+.deck-container .cover .content, .deck-container .cover-light .content { z-index: 99; }
+
+.deck-container .cover .shim, .deck-container .cover-light .shim { z-index: -99; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: .6; }
+
+.deck-container .cover-light .shim { background: #fff; opacity: .7; }
+
+.deck-container .cover-light h1 { color: #000; }
+
+.deck-container .cover-light h2 { color: #1f4c7f; }
+
+.deck-container .cover-light h3 { color: #444; }
+
+.deck-container .cover-light h1, .deck-container .cover-light h2, .deck-container .cover-light h3 { text-shadow: compact(0 2px 0 rgba(255, 255, 255, 0.7), false, false, false, false, false, false, false, false, false); }
+
+.deck-container .cover-light a, .deck-container .cover-light a:visited, .deck-container .cover-light p, .deck-container .cover-light li { color: #333; text-shadow: compact(0 1px 0 rgba(255, 255, 255, 0.7), false, false, false, false, false, false, false, false, false); }
+
+.deck-container .title { background-color: #0F91DA; }
+
+.deck-container .title h1, .deck-container .title h2, .deck-container .title h3 { color: #fff; }
+
+.deck-container .home { background-image: url(../../resources/images/bleeding-edge.jpg); }
+
+.deck-container .browser-table td { text-align: center; width: 20%; }
+
+.deck-container .browser-table td img { height: 7em; margin-bottom: 0; }
+
+.deck-container .browser-table td p { margin-top: 15px; font-size: 2em; }

slides/shared/themes/style/skew-dark.scss

@@ -85,12 +85,12 @@
       border-bottom: 2px dotted #333B46;
 
       &, &:hover, &:focus, &:active, &:visited {
-        color: #c00;
+        color: #E91E63;
         text-decoration: none;
       }
 
       &:hover, &:focus {
-        border-bottom: 1px solid #1c68be;
+        border-bottom: 1px solid #E91E63;
       }
 
       span.code {
@@ -260,7 +260,7 @@
     position: absolute;
     top: 20px;
     right: 20px;
-    z-index: -999;
+    z-index: 9999;
   }
 
   .cols-2 {
@@ -308,3 +308,8 @@ pre[class*="language-"] {
   color: #E91E63;
   padding-right: 20px;
 }
+
+img[alt=""],
+img:not([alt]) {
+  border: 10px dashed #c00;
+}