Added YouTube icon. We can link directly to presentations in the futu…

…re or indicate when a video is unavailable, like the Jan '19 one where capital factory live streamed it but recorded the post-event video (3hrs of a blank podium and a sunrise)

slides/index.html

@@ -21,7 +21,7 @@ <h1>Bleeding Edge Web</h1>
       <p><a href="../">&larr; Home</a></p>
     </header>
 
-    <section>
+    <section class="resources">
       <h2>Videos</h2>
       <p style="font-size:16px;">Since early 2015 our meetups have been livestreamed and recorded. All of our past videos are available on the
         <a href="https://www.youtube.com/user/austintechlive/search?query=bleeding+edge+web">Austin Tech Live YouTube channel</a>.</p>
@@ -36,6 +36,7 @@ <h3>2019</h3>
         <li>January &mdash;
           <a href="2019/01-jan">Bleeding Edge Web</a> / <a href="https://github.com/tedpatrick/async-await-talk" target="_blank">Async/Await (Lightning Talk)</a> /
           <a href="https://docs.google.com/presentation/d/1dhrTz7NcRIkC08D-GdBYQ81C5_TFqE-3on0deQoa8zg/edit?usp=drivesdk" target="_blank">Progressive Web Applications</a>
+          <a href="" target="_blank" class="disabled youtube"><img src="../images/youtube.png"/></a>
         </li>
       </ul>
       <h3>2018</h3>

stylesheets/styles.css

@@ -144,6 +144,11 @@ strong {
   font-weight:600;
 }
 
+.resources ul li {
+  marign-bottom: 30px;
+  line-height: 35px;
+}
+
 header ul li + li {
   width:88px;
   border-left:1px solid #fff;
@@ -184,6 +189,28 @@ footer {
   bottom:50px;
 }
 
+.resources .youtube img {
+  max-width: 100px;
+  width: 2vw;
+  vertical-align: middle;
+}
+
+.disabled.youtube {
+  position: reltaive;
+  filter: grayscale(1);
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.disabled.youtube:after {
+  content: 'Video\00a0Unvailable';
+  font-size: 50%;
+  color: #000;
+  position: absolute;
+  left: -20px;
+  bottom: -27px;
+}
+
 @media print, screen and (max-width: 960px) {
 
   div.wrapper {