projects / fp-lecture.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d826eb1)
Small aesthetic stuff
authorCameron Ball <cameron@cameron1729.xyz>
Thu, 12 Mar 2020 17:14:58 +0000 (01:14 +0800)
committerCameron Ball <cameron@cameron1729.xyz>
Thu, 12 Mar 2020 17:14:58 +0000 (01:14 +0800)
img/cloudguy.png [new file with mode: 0644] patch | blob
index.html patch | blob | history

diff --git a/img/cloudguy.png b/img/cloudguy.png
new file mode 100644 (file)
index 0000000..46b9d41
Binary files /dev/null and b/img/cloudguy.png differ
diff --git a/index.html b/index.html
index 3312a54..eddb754 100644 (file)
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
     <link rel="stylesheet" href="https://csshake.surge.sh/csshake.min.css">
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&amp;display=swap" rel="stylesheet">
     <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
+          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
     <title>Crazy Wide-Eyed Functional Programming</title>
@@ -26,10 +26,13 @@
      .hljs {
          font-family: 'Press Start 2P', cursive;
          text-shadow: 2px 2px 0 #000;
-         color: #bcbcbc;
          font-size: 30px;
      }
 
+     h1 {
+         text-shadow: 2px 2px 0 #000;
+     }
+
      .slide-title {
          font-size: 40px;
          margin: 20px;
@@ -46,13 +49,14 @@
          box-shadow: 10px 10px 0 #00000069;
          padding: 20px;
          height: 80%;
-         background: #6187a8;
-         background-image: url("img/tile-nopad-bottom.png");
-         background-blend-mode: multiply;
-         background-size: 50%;
-         background-repeat: repeat-x;
-         background-position-x: center;
-         background-position-y: center;
+         background: #6187a8e3;
+     }
+
+     #slide-0 #cloudguy {
+         height: 100%;
+         display: flex;
+         justify-content: center;
+         align-items: center;
      }
 
      #slide-1 .slide div {
@@ -89,6 +93,11 @@
          background-color: #3f6382;
      }
 
+     .hljs {
+         box-shadow: 10px 10px 0 #00000069;
+         border: 2px solid black;
+     }
+
      div[id^="slide-"] {
          display: none;
      }
@@ -99,6 +108,11 @@
     </style>
 </head>
 <body>
+    <div id="slide-0">
+        <div id="cloudguy">
+            <img class="shake-constant shake-slow" style="height: 20%; animation-duration: 15s" src="img/cloudguy.png" />
+        </div>
+    </div>
     <div id="slide-1">
         <div class="slide-title">=<< What's up with that Title? >>=</div>
         <div class="slide">
@@ -129,12 +143,14 @@
     <div id="slide-4">
         <div class="slide-title">=<< The Third Slide >>=</div>
         <div class="slide">
-            <pre><code class="javascript textbox">Promise.resolve("We start here")
+            <h1>JavaScript</h1>
+            <pre><code class="javascript">Promise.resolve("We start here")
     <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">.then</span>(x => Promise.resolve(x + " then get here"))
     .then(x => Promise.resolve(x + " and finally here!"))</code></pre>
-            <pre><code class="haskell textbox">Right("We start here")
-    <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">>>=</span> (\x -> Right (x ++ " then get here"))
-    >>= (\x -> Right (x ++ " and finally here!"))</code></pre>
+            <h1>Haskell</h1>
+            <pre><code class="haskell">Right("We start here")
+            <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">>>=</span> (\x -> Right (x ++ " then get here"))
+            >>= (\x -> Right (x ++ " and finally here!"))</code></pre>
         </div>
     </div>
 </body>
@@ -178,7 +194,10 @@
          b.style.backgroundPosition = x + 'px ' + y + 'px';
      }, 250);
 
-     var currentSlide = 0;
+     urlParts = document.URL.split('#');
+     window.console.log(urlParts);
+     var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
+     document.getElementById('slide-' + currentSlide).style.display = 'block';
      document.onkeydown = checkKey;
 
      function checkKey(e) {
Interactive functional programming lecture slides