style i guess

This commit is contained in:
Lorin Werthen 2016-06-18 01:43:41 +02:00
parent 6859fdee5e
commit 338efd67ff
4 changed files with 141 additions and 52 deletions

6
Rules
View file

@ -5,11 +5,9 @@
# layout '/default.*' # layout '/default.*'
# end # end
compile '/**/*.html' do compile '/index.erb' do
end
compile '/**/*.erb' do
filter :erb filter :erb
layout '/index.erb'
end end
compile '/**/*.coffee' do compile '/**/*.coffee' do

View file

@ -1,52 +1,26 @@
<!DOCTYPE HTML> <header class="pure-g">
<html lang="en"> <img id="logo" src="http://i.imgur.com/W5d4B8E.png" alt="" />
<head> <div class="pure-u-3-4">
<meta charset="utf-8"> </div>
<meta http-equiv="x-ua-compatible" content="ie=edge"> <div class="pure-u-1-4">
<meta name="viewport" content="width=device-width, initial-scale=1"> #1 CODER ON GAMIFICATION
</div>
</header>
<title>Zeus WPI: Werkgroep Informatica van de Universiteit Gent</title> <main class="pure-g">
<div id="events" class="pure-u-3-4">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="stylesheet.css">
<link rel="icon" href="favicon32.png" type="image/x-icon" />
<script src="https://code.jquery.com/jquery-3.0.0.min.js" charset="utf-8"></script>
<script src="index.js" charset="utf-8"></script>
<meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
</head>
<body>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-1-6"> <div id="event-main" class="pure-u-1">
<img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2009/05/logo-new.png" alt="" /> <img class="event-bg" src="https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/10387247_891288404215534_5554674183923619970_n.jpg?oh=a13a417d22c931b2cbac1c3f17cc6a30&oe=57DD7FB4" />
</div> <span class="event-title">Geeks, Attack!</span>
<div class="pure-u-1-2">
</div>
<div class="pure-u-1-3">
#1 CODER ON GAMIFICATION
</div>
<div class="pure-g">
<div class="pure-u-2-3">
<div class="pure-g">
<div class="pure-u-1">MAIN EVENT</div>
<div class="pure-u-1-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic id a enim natus, doloribus explicabo quis. Nostrum, odit. Aperiam.</div>
<div class="pure-u-1-4">Similique molestiae, repudiandae sequi tempora modi beatae, doloremque est fugit totam veniam ad impedit dolore excepturi dolorum officia adipisci reprehenderit.</div>
<div class="pure-u-1-4">Quaerat a quos recusandae voluptates provident dolore tenetur possimus, mollitia sapiente accusamus veritatis natus deleniti quibusdam odit, explicabo! Non, earum.</div>
<div class="pure-u-1-4">Assumenda eos quae rerum qui sapiente omnis, consequuntur doloremque dolor, mollitia nisi voluptas impedit nemo id porro velit possimus blanditiis!</div>
<div class="pure-u-1-4">Cupiditate maiores ut consequuntur mollitia suscipit id, nulla deserunt aliquid quibusdam corporis non, error ea alias numquam provident maxime hic?</div>
<div class="pure-u-1-4">Nobis vero error eligendi libero mollitia modi minima, aperiam illum, exercitationem recusandae suscipit. Asperiores, ad reiciendis, exercitationem vero iure hic.</div>
<div class="pure-u-1-4">Obcaecati voluptates enim minus maiores laborum, ea. Beatae blanditiis, totam velit enim, eligendi similique asperiores! Exercitationem inventore, eveniet quas et.</div>
<div class="pure-u-1-4">Eos amet officia ab cumque. Mollitia unde cupiditate non, maxime animi praesentium, sit. Fugit et repellendus harum nostrum, atque voluptatem?</div>
</div>
</div>
<div id="github-feed" class="pure-u-1-3">
<ul></ul>
</div>
</div> </div>
<div class="event pure-u-1-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic id a enim natus, doloribus explicabo quis. Nostrum, odit. Aperiam.</div>
<div class="event pure-u-1-4">Similique molestiae, repudiandae sequi tempora modi beatae, doloremque est fugit totam veniam ad impedit dolore excepturi dolorum officia adipisci reprehenderit.</div>
<div class="event pure-u-1-4">Quaerat a quos recusandae voluptates provident dolore tenetur possimus, mollitia sapiente accusamus veritatis natus deleniti quibusdam odit, explicabo! Non, earum.</div>
</div> </div>
</body> </div>
</html> <div id="github-feed" class="pure-u-1-4 l-box">
<ul></ul>
</div>
</main>
<footer>hey</footer>

View file

@ -0,0 +1,93 @@
header {
position: absolute;
top: 0;
height: 75px;
line-height: 75px;
background-color: rgb(255, 109, 0);
color: white;
width: 100%;
}
header #logo {
position: absolute;
margin-top: 15px;
margin-left: 15px;
height: 45px;
}
main {
padding: 15px;
position: absolute;
top: 75px;
/* header-height, footer-height, padding-top, padding-bottom */
height: calc(100% - 75px - 30px - 15px - 15px);
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
background-color: red;
}
#events {
padding-right: 15px;
}
#event-main {
position: relative;
width: 100%;
background-color: black;
color: white;
padding: 20px;
height: 200px;
overflow: hidden;
border: 1px solid rgb(100, 100, 100);
}
.event {
background: black;
color: white;
padding: 20px;
}
.event-bg {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.event-title {
position: absolute;
top: 60px;
right: 20px;
font-size: 35px;
height: 40px;
line-height: 40px;
padding: 15px;
z-index: 1;
background-color: rgba(0, 0, 0, 0.7);
}
#github-feed ul {
height: 100%;
}
#github-feed {
overflow: auto;
}
/* Fixes adding borders and padding, but breaks IE7 */
.pure-g > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.l-box {
border: 2px solid black;
}

24
layouts/index.erb Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zeus WPI: Werkgroep Informatica van de Universiteit Gent</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="stylesheet.css">
<link rel="icon" href="favicon32.png" type="image/x-icon" />
<script src="https://code.jquery.com/jquery-3.0.0.min.js" charset="utf-8"></script>
<script src="index.js" charset="utf-8"></script>
<meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
</head>
<body>
<%= yield %>
</body>
</html>