let's try bulma, it's neat

This commit is contained in:
Lorin Werthen 2016-07-27 20:27:28 +02:00
parent 35e493f187
commit a50665d09f
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
12 changed files with 416 additions and 397 deletions

2
.gitignore vendored
View file

@ -13,3 +13,5 @@ crash.log
.idea/
.sass-cache/
node_modules/

View file

@ -1,3 +1,4 @@
<div class="content">
<h1>Over Zeus WPI</h1>
<p>
@ -71,3 +72,4 @@ Zeus bereik je zo:
word fan op <a href="https://www.facebook.com/zeus.wpi">Facebook</a>
</li>
</ul>
</div>

View file

@ -1,252 +1,9 @@
$zeus_orange: #FF7F00;
$event-padding: 10px;
$navbar-border-color: #CCC;
$event-border-color: #DDD;
$cammie-controls-color: rgba(0, 0, 0, 0.60);
$zeus-orange: #FF7F00;
$orange: $zeus-orange;
$primary: $orange;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
$family-sans-serif: 'Open Sans', sans-serif;
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
font-family: 'Open Sans', sans-serif;
}
html, body {
width: 100%;
height: 100%;
color: #444;
}
h1, h2, strong {
color: #222;
}
#container {
height: 700px;
margin-top: 35px;
}
#logo {
height: 150px;
}
a, a:hover, a:visited, a:link, a:active {
color: $zeus_orange;
}
#logos {
display: inline-block;
color: black;
a, a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: currentColor;
}
.logo-link {
margin-left: 10px;
transition: 0.2s;
&:hover {
color: $zeus_orange;
transition: 0.2s;
}
}
}
.header-top {
display: flex;
justify-content: space-between;;
align-items: flex-end;
}
#navbar {
border-top: 1px solid $navbar-border-color;
border-bottom: 1px solid $navbar-border-color;
padding-top: 7px;
padding-bottom: 7px;
color: black;
display: flex;
justify-content: space-around;
margin-bottom: $event-padding * 2;
margin-top: $event-padding * 2;
a {
padding: 8px;
transition: 0.2s;
font-variant: small-caps;
font-size: 1.25em;
&, &:hover, &:visited, &:link, &:active {
text-decoration: none;
color: black;
}
&:hover {
background-color: $zeus_orange;
transition: 0.2s;
color: white;
}
}
}
#all-events {
margin-left: -10px;
margin-right: -10px;
.event {
border: 2px solid $event-border-color;
position: relative;
overflow: hidden;
height: 200px;
margin: $event-padding;
&:after {
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
&:hover:after {
opacity: 1;
}
}
}
#event-banner {
position: fixed;
min-width: 100%;
}
#event-description {
padding: 20px;
}
#event-info {
padding-top: 20px;
}
#event-content {
position: absolute;
top: 500px;
background-color: white;
height: 100vh;
border-top: 2px solid $navbar-border-color;
}
#event-title {
text-align: center;
font-size: 50px;
line-height: 50px;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
background-color: white;
}
#cammie {
object-fit: contain;
max-width: 100%;
height: auto;
}
.fullpage {
min-width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: black;
}
.ctrl {
background-color: $cammie-controls-color;
color: white;
position: absolute;
z-index: 100;
// Chevron centering
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: $zeus_orange;
z-index: 200;
cursor: pointer;
}
}
#left {
height: 100%;
width: 100px;
top: 0;
left: 0;
}
#right {
height: 100%;
width: 100px;
top: 0;
right: 0;
}
#up {
height: 100px;
width: 100%;
top: 0;
}
#down {
height: 100px;
width: 100%;
bottom: 0;
}
.project-card {
background-color: #2D5CB4;
color: white;
height: 300px;
margin-top: 5px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
.project-title {
background: #1e3c72; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #1e3c72 , #2a5298); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #1e3c72 , #2a5298); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-size: 4em;
padding: 20px;
flex-grow: 1;
}
.project-description {
background-color: #1e3c72;
text-align: right;
padding: 20px;
width: 700px;
}
}
@import "old";
@import "../../../node_modules/bulma/bulma";

View file

@ -0,0 +1,218 @@
$zeus_orange: #FF7F00;
$event-padding: 10px;
$navbar-border-color: #CCC;
$event-border-color: #DDD;
$cammie-controls-color: rgba(0, 0, 0, 0.60);
img {
max-width: 200px;
}
.fa-ul {
list-style: none !important;
.fa {
font-size: inherit;
}
}
#logos {
display: inline-block;
color: black;
a, a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: currentColor;
}
.logo-link {
margin-left: 10px;
transition: 0.2s;
&:hover {
color: $zeus_orange;
transition: 0.2s;
}
}
}
.header-top {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#navbar {
a {
padding: 8px;
transition: 0.2s;
font-variant: small-caps;
font-size: 1.25em;
&, &:hover, &:visited, &:link, &:active {
text-decoration: none;
}
&:hover {
background-color: $zeus_orange;
transition: 0.2s;
color: white;
}
}
}
/*#all-events {
margin-left: -10px;
margin-right: -10px;
.event {
border: 2px solid $event-border-color;
position: relative;
overflow: hidden;
height: 200px;
margin: $event-padding;
&:after {
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
&:hover:after {
opacity: 1;
}
}
}*/
#event-banner {
position: fixed;
min-width: 100%;
}
#event-description {
padding: 20px;
}
#event-info {
padding-top: 20px;
}
#event-content {
position: absolute;
top: 400px;
background-color: white;
height: 100vh;
border-top: 2px solid $navbar-border-color;
}
#event-title {
text-align: center;
font-size: 50px;
line-height: 50px;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
background-color: white;
}
#cammie {
object-fit: contain;
max-width: 100%;
height: auto;
}
.fullpage {
min-width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: black;
}
.ctrl {
background-color: $cammie-controls-color;
color: white;
position: absolute;
z-index: 100;
// Chevron centering
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: $zeus_orange;
z-index: 200;
cursor: pointer;
}
}
#left {
height: 100%;
width: 100px;
top: 0;
left: 0;
}
#right {
height: 100%;
width: 100px;
top: 0;
right: 0;
}
#up {
height: 100px;
width: 100%;
top: 0;
}
#down {
height: 100px;
width: 100%;
bottom: 0;
}
.project-card {
background-color: #2D5CB4;
color: white;
height: 300px;
margin-top: 5px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
.project-title {
background: #1e3c72; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #1e3c72 , #2a5298); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #1e3c72 , #2a5298); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-size: 4em;
padding: 20px;
flex-grow: 1;
}
.project-description {
background-color: #1e3c72;
text-align: right;
padding: 20px;
width: 700px;
}
}

View file

@ -1,10 +1,16 @@
<div id="all-events">
<div class="tile is-vertical is-ancestor">
<div class="tile is-parent is-12">
<div class="tile is-child box">
<%= render '/partials/_tile.*', article: sorted_articles[0] %>
<div class="pure-g">
</div>
</div>
<div class="tile">
<% sorted_articles[1..-1].each do |article| %>
<div class="pure-u-1-3">
<div class="tile is-parent is-4">
<div class="tile is-child box">
<%= render '/partials/_tile.*', article: article %>
</div>
</div>
<% end %>
</div>
</div>

View file

@ -1,15 +1,14 @@
<% 5.times do %>
<div class="project-card">
<div class="project-title">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Hydra
</div>
<div class="project-description">
<p>
Dit is een heel cool project enal
</p>
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus facere, ut in magnam harum at, aliquam nostrum totam tempore distinctio explicabo natus quis pariatur quos maiores dignissimos inventore! Ad amet harum ipsum laudantium modi ipsa dolores, omnis impedit nostrum expedita sed molestias similique veritatis, quo explicabo odit minus cum quibusdam accusamus beatae quam vitae cumque ipsam eius. Alias ipsam blanditiis deleniti nam magni veritatis, quas quae. Quam quia at tempora repellat optio aliquam, quasi deserunt esse distinctio voluptate harum hic sed vel blanditiis nam modi fuga, totam neque vero! Sunt, ipsum sit! Libero quam temporibus deserunt, quo itaque perspiciatis earum.
</p>
</div>
</div>
</section>
<% end %>

View file

@ -8,9 +8,6 @@
Zeus WPI | <%= item[:title] || 'Werkgroep Informatica van de Universiteit Gent' %>
</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<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="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<link rel="icon" href="/assets/images/favicon32.png" type="image/x-icon" />

View file

@ -5,33 +5,41 @@
<meta property="og:url" content="<%= url_for(item) %>" />
<% end %>
<!--
<img class="pure-img" id="event-banner" src="<%= item[:banner] %>" alt="" />
<div id="event-content">
<div id="sticky-anchor"></div>
<div id="sticky">
<h1 id="event-title">
<%= item[:title] %>
</h1>
-->
<section class="hero is-medium is-primary is-bold">
<div class="hero-head">
<%= render '/partials/_navbar.*' %>
</div>
<div class="pure-g">
<div class="hero-body">
<div class="container">
<h1 class="title">
<%= item[:title] %>
</h1>
<h2 class="subtitle">
<ul class="fa-ul">
<li><i class="fa-li fa fa-clock-o"></i><%= item[:time] %></li>
<li><i class="fa-li fa fa-globe"></i><%= item[:location] %></li>
</ul>
</h2>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<!-- Wrapper needed to add some padding to the grid class -->
<div id="event-description-wrapper" class="pure-u-3-4">
<div class="pure-u-1-6"></div>
<div class="pure-u-2-3">
<div id="event-description">
<div class="content container">
<%= yield %>
</div>
</div>
</div>
<div id="event-info" class="pure-u-1-4">
<div id="event-info" class="column is-one-quarter content">
<ul class="fa-ul">
<li><i class="fa-li fa fa-clock-o"></i><%= item[:time] %></li>
<li><i class="fa-li fa fa-globe"></i><%= item[:location] %></li>
</ul>
</div>
</div>
</div>
</section>
<script src="/assets/scripts/eventpost.js"></script>

View file

@ -1,31 +1,17 @@
<div class="pure-g">
<div class="pure-u-1-24"></div>
<div id="container" class="pure-u-11-12">
<header>
<div class="header-top">
<a href="/">
<img id="logo" src="https://zeus.ugent.be/wp-content/uploads/2009/05/logo-new.png" alt="" />
</a>
<div id="logos">
<a href="https://github.com/ZeusWPI" target="_blank">
<i class="logo-link fa fa-github fa-3x"></i>
</a>
<a href="https://www.facebook.com/zeus.wpi/" target="_blank">
<i class="logo-link fa fa-facebook fa-3x"></i>
</a>
<a href="/feed.xml" target="_blank">
<i class="logo-link fa fa-rss fa-3x"></i>
</a>
<a href="/ical.ics">
<i class="logo-link fa fa-calendar fa-3x"></i>
</a>
</div>
</div>
<div class="container">
<header class="section">
<%= render '/partials/_navbar.*' %>
</header>
<main>
<main class="section">
<%= yield %>
</main>
</div>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Made with <i class="fa fa-heart"></i> by Zeus WPI
</p>
</div>
</div>
</footer>

View file

@ -1,17 +1,47 @@
<nav id="navbar">
<a href="/about">
<nav id="navbar" class="nav">
<div class="nav-left">
<a class="nav-item" href="/">
<img id="logo" src="https://zeus.ugent.be/wp-content/uploads/2009/05/logo-new.png" alt="" />
</a>
<a class="nav-item" href="/about">
About
</a>
<a href="/archives">
<a class="nav-item" href="/archives">
Archief
</a>
<a href="/projects">
<a class="nav-item" href="/projects">
Projecten
</a>
<a href="/cammie">
<a class="nav-item" href="/cammie">
Cammie
</a>
<a href="/search">
<a class="nav-item" href="/search">
Zoeken
</a>
</div>
<div class="nav-right">
<a class="nav-item" href="https://github.com/ZeusWPI" target="_blank">
<span class="icon">
<i class="fa fa-github"></i>
</span>
</a>
<a class="nav-item" href="https://www.facebook.com/zeus.wpi/" target="_blank">
<span class="icon">
<i class="fa fa-facebook"></i>
</span>
</a>
<a class="nav-item" href="/feed.xml" target="_blank">
<span class="icon">
<i class="fa fa-rss"></i>
</span>
</a>
<a class="nav-item" href="/ical.ics">
<span class="icon">
<i class="fa fa-calendar"></i>
</span>
</a>
</div>
</nav>

View file

@ -1,5 +1,7 @@
<a href="<%= relative_path_to(@article) %>">
<div class="event">
<img class="pure-img" src='<%= @article[:banner] %>' alt="" />
<figure class="image">
<img src='<%= @article[:banner] %>' alt="" />
</figure>
</div>
</a>

12
package.json Normal file
View file

@ -0,0 +1,12 @@
{
"name": "zeus.ugent.be",
"preferGlobal": true,
"version": "0.0.1",
"author": "",
"description": "The Official Zeus WPI site",
"license": "MIT",
"repository": "https://github.com/ZeusWPI/zeus.ugent.be",
"dependencies": {
"bulma": "^0.1.0"
}
}