add simple cammie page

This commit is contained in:
Lorin Werthen 2016-07-18 09:24:24 +02:00
parent 7dfc506a87
commit f534646149
9 changed files with 122 additions and 47 deletions

View file

@ -7,6 +7,8 @@ ruby '2.3.1'
gem 'nanoc'
gem 'kramdown'
gem 'coffee-script'
# Needed for relativize_urls
gem 'nokogiri'
gem 'sass'
group :development do

View file

@ -35,12 +35,17 @@ GEM
ruby_dep (~> 1.2)
lumberjack (1.0.10)
method_source (0.8.2)
mini_portile2 (2.1.0)
nanoc (4.2.0)
cri (~> 2.3)
nenv (0.3.0)
nokogiri (1.6.8)
mini_portile2 (~> 2.1.0)
pkg-config (~> 1.1.7)
notiffany (0.1.0)
nenv (~> 0.1)
shellany (~> 0.0)
pkg-config (1.1.7)
pry (0.10.3)
coderay (~> 1.1.0)
method_source (~> 0.8.1)
@ -64,6 +69,7 @@ DEPENDENCIES
guard-nanoc
kramdown
nanoc
nokogiri
sass
RUBY VERSION

18
Rules
View file

@ -1,14 +1,10 @@
#!/usr/bin/env ruby
# HTML
# compile '/**/*.html' do
# layout '/default.*'
# end
compile '/**/*.erb' do
filter :erb
layout '/index.erb'
write "#{@item.identifier.without_ext}.html"
layout '/default.erb'
filter :relativize_paths, type: :html
end
compile '/**/*.coffee' do
@ -24,13 +20,17 @@ end
# Markdown
compile '/**/*.md' do
filter :kramdown
layout '/eventpost.erb'
filter :erb
layout '/index.erb'
layout '/default.erb'
filter :erb
filter :relativize_paths, type: :html
end
route '/**/*.{html,md}' do
route '/**/*.{erb, html,md}' do
"#{item.identifier.without_ext}/index.html"
end

6
content/cammie.coffee Normal file
View file

@ -0,0 +1,6 @@
$('.ctrl').click ->
$.ajax "//kelder.zeus.ugent.be/webcam/cgi/ptdc.cgi",
data:
command: $(this).attr("command")
posX: $(this).attr("posX")
posY: $(this).attr("posY")

21
content/cammie.erb Normal file
View file

@ -0,0 +1,21 @@
<div class="fullpage">
<img
id="cammie"
src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2"
alt=""
/>
<div id="left" class="ctrl" command="set_relative_pos" posX="-10" posY="0">
<i class="fa fa-chevron-left fa-2x"></i>
</div>
<div id="right" class="ctrl" command="set_relative_pos" posX="10" posY="0">
<i class="fa fa-chevron-right fa-2x"></i>
</div>
<div id="up" class="ctrl" command="set_relative_pos" posX="0" posY="10">
<i class="fa fa-chevron-up fa-2x"></i>
</div>
<div id="down" class="ctrl" command="set_relative_pos" posX="0" posY="-10">
<i class="fa fa-chevron-down fa-2x"></i>
</div>
</div>
<script src="/cammie.js"></script>

View file

@ -19,7 +19,7 @@
<nav id="navbar">
<span class="navlink">About</span>
<span class="navlink">All posts</span>
<span class="navlink"><a href="/blogposts/testpost">All posts</a></span>
<span class="navlink">Contact</span>
<span class="navlink">Cammie</span>
</nav>

View file

@ -2,6 +2,8 @@ $zeus_orange: #FF7F00;
$event-padding: 10px;
$navbar-border-color: #CCC;
$cammie-controls-color: rgba(0, 0, 0, 0.60);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html, button, input, select, textarea,
@ -9,6 +11,11 @@ html, button, input, select, textarea,
font-family: 'Open Sans', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#container {
height: 700px;
margin-top: 35px;
@ -145,3 +152,58 @@ html, button, input, select, textarea,
width: 100%;
background-color: white;
}
#cammie {
width: 100%;
}
.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;
}
}
#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;
}

View file

@ -2,21 +2,23 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Brand New Nanoc Site - <%= @item[:title] %></title>
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="/stylesheet.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
<!-- you don't need to keep this, but it's cool for stats! -->
<meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
<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 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="/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>
<meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
</head>
<body>
<%= yield %>
</body>
</html>

View file

@ -1,24 +0,0 @@
<!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 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="/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>
<meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
</head>
<body>
<%= yield %>
</body>
</html>