Initial commit

author: Peter Wu <peter@lekensteyn.nl> 2015-03-04 17:02:38 +0100
committer: Peter Wu <peter@lekensteyn.nl> 2015-03-04 17:02:38 +0100
commit: a76caf717fd2c60f30bc62baa2522a16e4467268 (patch)
tree: 5f2d8bf0936231a40ca98e84bd6191a6e1a3eed6
download: site-a76caf717fd2c60f30bc62baa2522a16e4467268.tar.gz
11 files changed, 364 insertions, 0 deletions
diff --git a/images/filler.png b/images/filler.png
new file mode 100644
index 0000000..8002d64
--- /dev/null
+++ b/images/filler.png
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9a35913
--- /dev/null
+++ b/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>Data Science</title>
+<link rel="stylesheet" type="text/less" href="style/main.less">
+
+<!-- TODO: autoprefixer -->
+<script src="less.js"></script>
+<script>
+// fallback if a local less.js file cannot be loaded.
+window.less || document.write('<script src="' +
+'https://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"><\/script>');
+window.less || alert('compile style.less manually or find a less.js');
+</script>
+
+</head>
+<body>
+
+<header>
+    <p>
+    HIER KOMT DA SUPER MOOIE BANNER EN LOGO
+    </p>
+    <nav>
+    <ul>
+        <li><a href="#/home">Home</a></li>
+        <li><a href="#/studying">Studying</a></li>
+        <li><a href="#/curriculum">Curriculum</a></li>
+        <li><a href="#/campus">Campus</a></li>
+        <li><a href="#/career">Career</a></li>
+    </ul>
+    </nav>
+</header>
+
+<main id="content">
+</main>
+
+<footer>
+<p>
+Contact:<br>
+
+</p>
+</footer>
+<script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..5e6816e
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,39 @@
+/* jshint browser:true, devel:true */
+(function() {
+    'use strict';
+
+    /* loads a page into view and execute scripts */
+    function loadContent(name, text) {
+        var contentElement = document.getElementById('content');
+        contentElement.innerHTML = text;
+        document.body.dataset.page = name;
+    }
+
+    /* tries to navigate to a page */
+    function selectPage(page) {
+        var pages = 'home studying curriculum campus career'.split(' ');
+        if (pages.indexOf(page) == -1) {
+            // TODO: 404
+            console.log("404 " + page);
+            return false;
+        }
+        console.log("Loading " + page);
+        var http = new XMLHttpRequest();
+        http.onload = function() {
+            loadContent(page, http.responseText);
+        };
+        http.open('get', 'pages/' + page + '.html');
+        http.send(null);
+        return true;
+    }
+
+    addEventListener('hashchange', function(ev) {
+        var m = /#\/(.+)/.exec(ev.newURL);
+        if (!m)
+            return;
+        selectPage(m[1]);
+    });
+
+    // Tries to load the current page, falling back to "home" for unknown URLs.
+    selectPage(location.hash.replace(/^#\//, '')) || selectPage('home');
+})();
diff --git a/pages/campus.html b/pages/campus.html
new file mode 100644
index 0000000..59a64cd
--- /dev/null
+++ b/pages/campus.html
@@ -0,0 +1,30 @@
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mollis lacus.
+Fusce rhoncus magna vel euismod scelerisque. Ut faucibus turpis eu dui mollis
+accumsan. Sed id varius ipsum, a pharetra nisi. Donec porttitor sapien id
+volutpat rutrum. Curabitur tincidunt nisi ut imperdiet varius. Nulla dignissim
+nunc vel sem rhoncus malesuada. Proin in bibendum lectus. Donec porta velit eu
+vulputate faucibus. Donec volutpat tristique sagittis. Proin et facilisis arcu,
+ut viverra neque. Fusce vel aliquam nunc. Vestibulum faucibus eleifend
+consequat.
+</p>
+
+<p>
+In ipsum dolor, malesuada non interdum vitae, accumsan et risus. Aliquam
+eleifend augue in enim gravida rhoncus a vel mi. Sed non ex eros. Morbi dapibus
+condimentum lacus non tempus. Vestibulum eget molestie ex. Pellentesque nunc
+neque, pulvinar eget massa eu, malesuada lacinia purus. Nam a tempor metus.
+Curabitur ornare consectetur dui sed tincidunt. Morbi quis volutpat urna, sed
+hendrerit orci. Sed mauris nisl, laoreet eu ex eget, pellentesque elementum
+elit. Curabitur lobortis metus nec felis condimentum cursus.
+</p>
+
+<p>
+Aliquam dignissim ipsum ac metus hendrerit, a facilisis enim varius. Maecenas
+nisi erat, sodales non mauris et, varius varius justo. Lorem ipsum dolor sit
+amet, consectetur adipiscing elit. Curabitur mattis facilisis semper. Morbi
+feugiat sagittis sem a congue. Morbi maximus vehicula faucibus. Suspendisse
+lacinia mattis sagittis. Proin id feugiat ligula. Sed lorem augue, faucibus
+vitae tristique a, congue et nibh. Vestibulum justo erat, dictum in vehicula ac,
+venenatis sit amet ipsum.
+</p>
diff --git a/pages/career.html b/pages/career.html
new file mode 100644
index 0000000..59a64cd
--- /dev/null
+++ b/pages/career.html
@@ -0,0 +1,30 @@
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mollis lacus.
+Fusce rhoncus magna vel euismod scelerisque. Ut faucibus turpis eu dui mollis
+accumsan. Sed id varius ipsum, a pharetra nisi. Donec porttitor sapien id
+volutpat rutrum. Curabitur tincidunt nisi ut imperdiet varius. Nulla dignissim
+nunc vel sem rhoncus malesuada. Proin in bibendum lectus. Donec porta velit eu
+vulputate faucibus. Donec volutpat tristique sagittis. Proin et facilisis arcu,
+ut viverra neque. Fusce vel aliquam nunc. Vestibulum faucibus eleifend
+consequat.
+</p>
+
+<p>
+In ipsum dolor, malesuada non interdum vitae, accumsan et risus. Aliquam
+eleifend augue in enim gravida rhoncus a vel mi. Sed non ex eros. Morbi dapibus
+condimentum lacus non tempus. Vestibulum eget molestie ex. Pellentesque nunc
+neque, pulvinar eget massa eu, malesuada lacinia purus. Nam a tempor metus.
+Curabitur ornare consectetur dui sed tincidunt. Morbi quis volutpat urna, sed
+hendrerit orci. Sed mauris nisl, laoreet eu ex eget, pellentesque elementum
+elit. Curabitur lobortis metus nec felis condimentum cursus.
+</p>
+
+<p>
+Aliquam dignissim ipsum ac metus hendrerit, a facilisis enim varius. Maecenas
+nisi erat, sodales non mauris et, varius varius justo. Lorem ipsum dolor sit
+amet, consectetur adipiscing elit. Curabitur mattis facilisis semper. Morbi
+feugiat sagittis sem a congue. Morbi maximus vehicula faucibus. Suspendisse
+lacinia mattis sagittis. Proin id feugiat ligula. Sed lorem augue, faucibus
+vitae tristique a, congue et nibh. Vestibulum justo erat, dictum in vehicula ac,
+venenatis sit amet ipsum.
+</p>
diff --git a/pages/curriculum.html b/pages/curriculum.html
new file mode 100644
index 0000000..59a64cd
--- /dev/null
+++ b/pages/curriculum.html
@@ -0,0 +1,30 @@
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mollis lacus.
+Fusce rhoncus magna vel euismod scelerisque. Ut faucibus turpis eu dui mollis
+accumsan. Sed id varius ipsum, a pharetra nisi. Donec porttitor sapien id
+volutpat rutrum. Curabitur tincidunt nisi ut imperdiet varius. Nulla dignissim
+nunc vel sem rhoncus malesuada. Proin in bibendum lectus. Donec porta velit eu
+vulputate faucibus. Donec volutpat tristique sagittis. Proin et facilisis arcu,
+ut viverra neque. Fusce vel aliquam nunc. Vestibulum faucibus eleifend
+consequat.
+</p>
+
+<p>
+In ipsum dolor, malesuada non interdum vitae, accumsan et risus. Aliquam
+eleifend augue in enim gravida rhoncus a vel mi. Sed non ex eros. Morbi dapibus
+condimentum lacus non tempus. Vestibulum eget molestie ex. Pellentesque nunc
+neque, pulvinar eget massa eu, malesuada lacinia purus. Nam a tempor metus.
+Curabitur ornare consectetur dui sed tincidunt. Morbi quis volutpat urna, sed
+hendrerit orci. Sed mauris nisl, laoreet eu ex eget, pellentesque elementum
+elit. Curabitur lobortis metus nec felis condimentum cursus.
+</p>
+
+<p>
+Aliquam dignissim ipsum ac metus hendrerit, a facilisis enim varius. Maecenas
+nisi erat, sodales non mauris et, varius varius justo. Lorem ipsum dolor sit
+amet, consectetur adipiscing elit. Curabitur mattis facilisis semper. Morbi
+feugiat sagittis sem a congue. Morbi maximus vehicula faucibus. Suspendisse
+lacinia mattis sagittis. Proin id feugiat ligula. Sed lorem augue, faucibus
+vitae tristique a, congue et nibh. Vestibulum justo erat, dictum in vehicula ac,
+venenatis sit amet ipsum.
+</p>
diff --git a/pages/home.html b/pages/home.html
new file mode 100644
index 0000000..7f1a66a
--- /dev/null
+++ b/pages/home.html
@@ -0,0 +1,43 @@
+
+<div class="intro">
+<p>
+Data Science is blablabla, awesome blabla bla, Natasha Stash, blabla bla, Paul
+de Bra blablabla! Blablabla VLA!
+</p>
+</div>
+
+<div class="block">
+<h2>Studying</h2>
+<p>
+<a href="#/studying">
+jf hsunifrh gurdjhfg bd ghbhgb hb ghfbb
+</a>
+</p>
+</div>
+
+<div class="block">
+<h2>Curriculum</h2>
+<p>
+<a href="#/curriculum">
+kfr lgfjyntrkdfhg niukjdchg kdjgh dkjxhg jkdfjgi xlgk
+</a>
+</p>
+</div>
+
+<div class="block">
+<h2>Campus</h2>
+<p>
+<a href="#/campus">
+adfighjiuek rhtgbiutrkd hgiudjgh biukdfhxg niukd
+</a>
+</p>
+</div>
+
+<div class="block">
+<h2>Career</h2>
+<p>
+<a href="#/career">
+Acjd ikt ghnriutdfhg ueih gue
+</a>
+</p>
+</div>
diff --git a/pages/studying.html b/pages/studying.html
new file mode 100644
index 0000000..59a64cd
--- /dev/null
+++ b/pages/studying.html
@@ -0,0 +1,30 @@
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mollis lacus.
+Fusce rhoncus magna vel euismod scelerisque. Ut faucibus turpis eu dui mollis
+accumsan. Sed id varius ipsum, a pharetra nisi. Donec porttitor sapien id
+volutpat rutrum. Curabitur tincidunt nisi ut imperdiet varius. Nulla dignissim
+nunc vel sem rhoncus malesuada. Proin in bibendum lectus. Donec porta velit eu
+vulputate faucibus. Donec volutpat tristique sagittis. Proin et facilisis arcu,
+ut viverra neque. Fusce vel aliquam nunc. Vestibulum faucibus eleifend
+consequat.
+</p>
+
+<p>
+In ipsum dolor, malesuada non interdum vitae, accumsan et risus. Aliquam
+eleifend augue in enim gravida rhoncus a vel mi. Sed non ex eros. Morbi dapibus
+condimentum lacus non tempus. Vestibulum eget molestie ex. Pellentesque nunc
+neque, pulvinar eget massa eu, malesuada lacinia purus. Nam a tempor metus.
+Curabitur ornare consectetur dui sed tincidunt. Morbi quis volutpat urna, sed
+hendrerit orci. Sed mauris nisl, laoreet eu ex eget, pellentesque elementum
+elit. Curabitur lobortis metus nec felis condimentum cursus.
+</p>
+
+<p>
+Aliquam dignissim ipsum ac metus hendrerit, a facilisis enim varius. Maecenas
+nisi erat, sodales non mauris et, varius varius justo. Lorem ipsum dolor sit
+amet, consectetur adipiscing elit. Curabitur mattis facilisis semper. Morbi
+feugiat sagittis sem a congue. Morbi maximus vehicula faucibus. Suspendisse
+lacinia mattis sagittis. Proin id feugiat ligula. Sed lorem augue, faucibus
+vitae tristique a, congue et nibh. Vestibulum justo erat, dictum in vehicula ac,
+venenatis sit amet ipsum.
+</p>
diff --git a/style/colors.less b/style/colors.less
new file mode 100644
index 0000000..2518b5c
--- /dev/null
+++ b/style/colors.less
@@ -0,0 +1,25 @@
+/* Color scheme from http://paletton.com/#uid=53v0u0k7UUa3cZA5wXlaiQ5cFL3 */
+
+@color-primary-0: #B5D6EB;	/* Main Primary color */
+@color-primary-1: #E3F2FB;
+@color-primary-2: #CDE5F5;
+@color-primary-3: #9CC5E0;
+@color-primary-4: #83B3D1;
+
+@color-secondary-1-0: #BCBFEE;	/* Main Secondary color (1) */
+@color-secondary-1-1: #E6E7FC;
+@color-secondary-1-2: #D2D4F6;
+@color-secondary-1-3: #A6A9E5;
+@color-secondary-1-4: #8F93D8;
+
+@color-secondary-2-0: #FFEFC0;	/* Main Secondary color (2) */
+@color-secondary-2-1: #FFF8E6;
+@color-secondary-2-2: #FFF4D3;
+@color-secondary-2-3: #FFEAAD;
+@color-secondary-2-4: #FFE59A;
+
+@color-complement-0: #FFE3C0;	/* Main Complement color */
+@color-complement-1: #FFF4E6;
+@color-complement-2: #FFECD3;
+@color-complement-3: #FFDBAD;
+@color-complement-4: #FFD29A;
diff --git a/style/main.less b/style/main.less
new file mode 100644
index 0000000..0ad9c47
--- /dev/null
+++ b/style/main.less
@@ -0,0 +1,62 @@
+/* main.less */
+@import "../node_modules/normalize.css/normalize.css";
+@import "colors.less";
+
+/* page layout */
+body {
+    text-align: center;
+    line-height: 2em;
+}
+
+@import "menu.less";
+
+/* main content */
+main {
+    background: @color-secondary-1-3;
+    margin: auto;
+    padding: 1em;
+    border-radius: 2px;
+
+    max-width: 800px;
+    text-align: left;
+}
+
+body[data-page="home"] {
+    .intro {
+        height: 300px;
+        padding: 1em;
+        margin: 1em;
+        background-color: @color-secondary-2-1;
+    }
+    .block {
+        background: no-repeat url(../images/filler.png);
+        height: 200px;
+        background-color: @color-secondary-2-1;
+        padding: 1em;
+        margin: 1em;
+
+        transition: background 0.2s; /* TODO floats over text */
+        &:hover {
+            background-color: @color-secondary-2-0;
+        }
+
+        p {
+            margin: 1em;
+        }
+
+        &:nth-child(2n+1) {
+            padding-left: 200px;
+        }
+        &:nth-child(2n) {
+            background-position: right;
+            padding-right: 200px;
+        }
+    }
+}
+
+/* footer */
+footer {
+    background: @color-secondary-1-4;
+}
+
+/* vim: set sw=4 et ts=4: */
diff --git a/style/menu.less b/style/menu.less
new file mode 100644
index 0000000..60d87ec
--- /dev/null
+++ b/style/menu.less
@@ -0,0 +1,28 @@
+/* menu */
+@import "colors.less";
+
+nav {
+    margin: 3em 0;
+
+    ul {
+        background: @color-primary-0;
+    }
+
+    li {
+        display: inline-block;
+    }
+    /* links */
+    a:link {
+        margin: 3px;
+        padding: 0.5em 1em;
+        background: @color-secondary-1-1;
+        border-radius: 5px;
+        box-shadow: @color-secondary-1-2 0 0 0px 1px;
+        display: inline-block;
+    }
+    a:link:hover {
+        background: @color-secondary-1-2;
+    }
+}
+
+/* vim: set sw=4 et ts=4: */
author	Peter Wu <peter@lekensteyn.nl>	2015-03-04 17:02:38 +0100
committer	Peter Wu <peter@lekensteyn.nl>	2015-03-04 17:02:38 +0100
commit	a76caf717fd2c60f30bc62baa2522a16e4467268 (patch)
tree	5f2d8bf0936231a40ca98e84bd6191a6e1a3eed6
download	site-a76caf717fd2c60f30bc62baa2522a16e4467268.tar.gz