merging PR #276: Updated the website to look better

#276: Updated the website to look better Description: Website was _meh_, now website is **wow**! :ok_woman: PR passed with a vote of 18 for and 0 against, with a weighted total of 18.0 and a threshold of 6.1. Vote record: @G4Zz0L1: 1 @J0hn-: 1 @Jezza: 1 @MUCHZER: 1 @Reuh: 1 @amoffat: 1 @bengjerstad: 1 @GuoArthur: 1 @hongaar: 1 @laqie: 1 @max-wittig: 1 @mbeaumann: 1 @phil-r: 1 @rhengles: 1 @robmorgan: 1 @rudehn: 1 @viktorsec: 1 @vivekzhere: 1
Chaosthebot · May 26, 2017 · c80f23f · c80f23f
2 parents ef69d70 + d0d3a1b
commit c80f23f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 15 deletions.
diff --git a/server/index.html b/server/index.html
@@ -41,18 +41,31 @@
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css" />
     <link rel="stylesheet" href="static/css/main.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
     <a href="https://github.com/chaosbot/chaos">
         <img id="github-ribbon" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
     </a>
     <div class="container">
-        <div class="content">
-            <div class="content-title">
-                <h1><strong>Hello, Chaos!</strong></h1>
+        <div class="columns">
+            <div class="column is-one-third"></div>
+            <div class="column">
+                <div class="content has-text-centered">
+                    <div class="content-title header">
+                        <h1 class="title"><strong>Hello, Chaos!</strong></h1>
+                    </div>
+                    <canvas id="canvas"></canvas>
+                    <p class="subtitle">Hi, this is <strong>ChaosBot</strong>.</p>
+                    <p class="content">ChaosBot is a social coding experiment to see what happens when the absolute direction of a software project is turned over to the open source community.</p>
+                    <p class="content">For more information see <a href="https://github.com/chaosbot/chaos">Github</a>!</p>
+
+                    <span class="icon">
+                        <a href="https://github.com/chaosbot/chaos"><i class="fa fa-github"></i></a>
+                    </span>
+                </div>
             </div>
-            <p>Hi, this is <strong>ChaosBot</strong>.</p>
-            <p>For more information see <a href="https://github.com/chaosbot/chaos">Github</a>!</p>
+            <div class="column"></div>
         </div>
     </div>
     <script src="static/js/chaos.js"></script>

diff --git a/server/static/css/main.css b/server/static/css/main.css
@@ -8,7 +8,6 @@
 html {
     font-family: 'Roboto', sans-serif;
     text-rendering: optimizeLegibility;
-    font-size: 18px;
     background-color: #2c2c2c;
     text-align: justify;
 }
@@ -18,31 +17,45 @@ h1 {
     letter-spacing: .10em;
 }
 
-body {}
+body {
+    margin-top: 1em;    
+}
 
 .container {
-    padding: 0 5% 0 5%;
-    margin: 0 auto;
-    text-align: center;
     background-color: #FFFFFF;
-    min-width: 600px;
-    max-width: 100%;
 }
 
-.content {
+#header {
     text-align: center;
     min-width: 2em;
     padding: 0 25%;
+    padding-top: 1em;
 }
 
 #github-ribbon {
     position: absolute;
     top: 0;
     right: 0;
     border: 0;
+    z-index: 100;    
 }
 
 .content-title {
     border: 5px;
     border-style: solid;
 }
+
+.content-title h1 {
+    padding: 0.5em;
+    margin-bottom: 0;
+}
+
+#canvas {
+    margin: 5px 0;
+}
+
+body.transform {
+  transform:rotate(180deg);
+  -ms-transform:rotate(180deg);
+  -webkit-transform:rotate(180deg);
+}
diff --git a/server/static/js/chaos.js b/server/static/js/chaos.js
@@ -1,5 +1,4 @@
-var canvas = document.createElement("canvas");
-document.getElementsByClassName("content")[0].appendChild(canvas);
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 canvas.width = 400;
@@ -52,3 +51,18 @@ setInterval(function() {
     lastX = -1;
     lastY = -1;
 }, 100);
+
+var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
+n = 0;
+document.addEventListener("keydown", function(e) {
+  if (e.keyCode === k[n++]) {
+    if (n === k.length) {
+      document.body.className = 'transform';
+      setTimeout(function(){ document.body.className = ''; },15000);
+      n = 0;
+      return false;
+    }
+  } else {
+        n = 0;
+  }
+});