layout changes

revspace · Mar 1, 2020 · 37ba223 · 37ba223
1 parent 3cf84ec
commit 37ba223
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 70 deletions.
diff --git a/OCRAStd.woff b/OCRAStd.woff
diff --git a/README.md b/README.md
@@ -7,3 +7,10 @@ Patches welcome ;) (Zowel code als data)
 ## Contributing:
 
 https://github.com/revspace/hackeropuit/
+
+
+## Convert yaml to json
+```python3 -c 'import sys, yaml, json; json.dump(yaml.load(sys.stdin), sys.stdout, indent=4)' < events.yaml > events.json```
+
+## Start local server for testing
+```python3 -m http.server```
diff --git a/computer-2930704_1280.jpg b/computer-2930704_1280.jpg
diff --git a/computer-2930704_1280_half.jpg b/computer-2930704_1280_half.jpg
diff --git a/events.yaml b/events.yaml
@@ -54,7 +54,7 @@
   Comment:
   URL: https://www.froscon.de/en/
 - Name: BalcCon 2020
-  Location: Novi-Sad, ServiÃ
+  Location: Novi-Sad, Servië
   StartDate: 20200925
   EndDate: 20200927
   Comment:

diff --git a/favicon.ico b/favicon.ico
diff --git a/grid.css b/grid.css
@@ -7,18 +7,19 @@
 /* [CELLS] */
 div.cell {
   padding: 10px;
+  background: #111;
 }
 
 /* [HEADER] */
 div.head {
-  background: #005;
-  color: #fff;
+  background: #8CF;
+  color: #000;
   font-weight: bold;
 }
 
 /* [ALTERNATE ROWS] */
 div.alt {
-  background: #004;
+  background: #222;
 }
 
 /* [RESPONSIVE TRANSFORM] */

diff --git a/grid.js b/grid.js
@@ -1,21 +1,21 @@
 function getJSON(url) {
-        var resp ;
-        var xmlHttp ;
+  var resp;
+  var xmlHttp;
 
-        resp  = '' ;
-        xmlHttp = new XMLHttpRequest();
+  resp = '';
+  xmlHttp = new XMLHttpRequest();
 
-        if(xmlHttp != null)
-        {
-            xmlHttp.open( "GET", url, false );
-            xmlHttp.send( null );
-            resp = xmlHttp.responseText;
-        }
+  if (xmlHttp != null) {
+    xmlHttp.open("GET", url, false);
+    xmlHttp.send(null);
+    resp = xmlHttp.responseText;
+  }
 
-        return resp ;
+  return resp;
 }
 
-var jsondata = getJSON('https://hackeropuit.nl/events.json');
+//var jsondata = getJSON('https://hackeropuit.nl/events.json');
+var jsondata = getJSON('events.json');
 var columns = ["Name", "Location", "StartDate", "EndDate", "Comment", "URL"]
 
 // (B) PARSE JSON INTO OBJECT
@@ -25,7 +25,7 @@ console.table(parsed);
 // (C) TABLE HEADER
 var theWrap = document.getElementById("tableWrap");
 var theCell = null;
-for (let key in columns ) {
+for (let key in columns) {
   theCell = document.createElement("div");
   theCell.innerHTML = columns[key];
   theCell.classList.add("cell");
@@ -40,16 +40,19 @@ for (let key in parsed) {
   theEvent = parsed[key];
   for (let i in theEvent) {
     theCell = document.createElement("div");
-    if ( i == "URL" ) {
-	if ( theEvent[i] != null ) {
-    theCell.innerHTML = "<A HREF='" + theEvent[i] + "'>" + theEvent[i] + "</A>";
-	}
+    if (i == "URL") {
+      if (theEvent[i] != null) {
+        theCell.innerHTML = "<A HREF='" + theEvent[i] + "'>" + theEvent[i] + "</A>";
+      }
+    } else if ( i == "StartDate" || i == "EndDate") {
+      let d = theEvent[i].toString();
+      theCell.innerHTML = d.substring(0,4) + "-" + d.substring(4,6) + "-" + d.substring(6,8);
     } else {
-    theCell.innerHTML = theEvent[i];
+      theCell.innerHTML = theEvent[i];
     }
     theCell.classList.add("cell");
-    if (altRow) { 
-      theCell.classList.add("alt"); 
+    if (altRow) {
+      theCell.classList.add("alt");
     }
     theWrap.appendChild(theCell);
   }

diff --git a/hackeropuit-placeholder.jpg b/hackeropuit-placeholder.jpg
diff --git a/index.html b/index.html
@@ -1,54 +1,54 @@
 <!DOCTYPE html>
 <html>
 <head>
-<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">  
-<script defer src="grid.js"></script>
-<link rel="stylesheet" type="text/css" href="grid.css">
-<style>
-body {
-  background-color: black;
-  font-family: 'Open Sans', Sans-Serif;
-  color: white;
-}
-a {
-  color: #9DF;
-}
-a:visited {
-  color: #9DB;
-}
-a:hover {
-  color: #AFA;
-}
-body {
-  background-color: black;
-  color: white;
-}
-.animatedBox {
-  width: 100%;
-  height: 243px;
-  text-align: center;
-  font: 24px sans-serif;
-  color: white;
-  text-shadow: 0px 0px 12px black;
-  background-image: url('/hackeropuit-header.png');
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 0%;
-  animation: myAnimation 2s ease 1s 1 forwards;
-}
-@keyframes myAnimation {
-	100% {
-	  background-size: 100%;
-	}
-}
-</style>
-<title>HackErOpUit</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">  
+  <script defer src="grid.js"></script>
+  <link rel="stylesheet" type="text/css" href="grid.css">
+  <style>
+    @font-face {
+      font-family: 'OCR A Std';
+      font-style: normal;
+      font-weight: normal;
+      src: local('OCR A Std'), url('OCRAStd.woff') format('woff');
+    }
+    body {
+      background-color: black;
+      font-family: 'Open Sans', Sans-Serif;
+      color: white;
+    }
+    a {
+      color: #8CF;
+    }
+    a:visited {
+      color: #8D5;
+    }
+    a:hover {
+      color: #8D5;
+    }
+    #wrapper {
+      margin: auto;
+      min-width: 1000px;
+      max-width: 1600px;
+    }
+    #header {
+      width: 100%;
+      min-width: 1000px;
+      padding: 25px 0px 20px 0px;
+      text-align: center;
+      font: 128px 'OCR A Std';
+      text-shadow: 5px  5px 10px #000, -5px  5px 10px #000, 5px -5px 10px #000, -5px -5px 10px #000;
+      background-image: url('computer-2930704_1280_half.jpg');
+      background-position: bottom;
+      background-size: cover;
+    }
+  </style>
+  <title>HackErOpUit</title>
 </head>
 <body>
-<div class="animatedBox"></div>
-
-Een evenement of uitje toevoegen ? Maak een pull-request via <A HREF="https://github.com/revspace/hackeropuit">github/revspace/hackeropuit</A>
-
+  <div id="wrapper">
+    <div id="header">HackErOpUit</div>
+    <p>Een evenement of uitje toevoegen ? Maak een pull-request via <A HREF="https://github.com/revspace/hackeropuit">github/revspace/hackeropuit</A></p>
     <div id="tableWrap"></div>
+  </div>
 </body>
 </html>