Merge branch 'branchAntoine'

This commit is contained in:
antoine.mcnabb 2015-11-03 17:33:54 -05:00
commit b91dc9d915
28 changed files with 2573 additions and 104 deletions

View File

@ -1,7 +1,24 @@
{% extends 'template.html' %} {% extends 'template.html' %}
{% load staticfiles %}
{% block content %} {% block content %}
<section> <div class="boxContent">
<h1>blog</h1> <section id="cd-timeline" class="cd-container">
{%for article in articles%}
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>{{article.title}}</h2>
{% if article.photo %}
<img src="{{ article.photo.url }}" alt="">
{% else %}
<img src="{% static 'img/profile.png' %}" alt="">
{% endif %}
<p>{{ article.text|safe|truncatewords:50 }}</p>
<a href="#0" class="cd-read-more">En savoir plus</a>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
{%endfor%}
</section> </section>
</div>
{% endblock %} {% endblock %}

View File

@ -2,7 +2,6 @@ from django.shortcuts import render
from django.http import Http404 from django.http import Http404
from blog.models import Article from blog.models import Article
def index(request): def index(request):
articles = Article.objects.order_by('-created_at') articles = Article.objects.order_by('-created_at')
return render(request, 'blog/index.html', {'articles': articles}) return render(request, 'blog/index.html', {'articles': articles})

24
blog/views.py.orig Normal file
View File

@ -0,0 +1,24 @@
from django.shortcuts import render
<<<<<<< HEAD
from blog.models import *
def index(request):
articles = Article.objects.all
return render(request, 'blog/index.html', {'articles':articles})
=======
from django.http import Http404
from blog.models import Article
def index(request):
articles = Article.objects.order_by('-created_at')
return render(request, 'blog/index.html', {'articles': articles})
def show(request, article_id):
try:
article = Article.objects.get(id=article_id)
return render(request, 'blog/show.html', {'article': article})
except Article.DoesNotExist:
raise Http404("Article does not exist")
>>>>>>> master

View File

@ -1,7 +1,8 @@
{% extends 'template.html' %} {% extends 'template.html' %}
{% load staticfiles %} {% load staticfiles %}
{% block content %} {% block content %}
<section id="membre"> <div class="boxContent">
<section id = "membre">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center">
@ -11,10 +12,10 @@
</div> </div>
<div class="row"> <div class="row">
{% for admin in admins %} {% for admin in admins %}
<div class="col-sm-4 list-item"> <div class="col-sm-4 list-item membre">
<h3 class="text-center">{{ admin.position }}</h3> <h3 class="text-center">{{ admin.position }}</h3>
<a href="{% url 'member:show' admin.id %}" class="list-link"> <a data-toggle="modal" href="{% url 'member:show' admin.id %}" data-target="#myModal" class="list-link membre">
<div class="caption"> <div class="caption membre bordered">
<div class="caption-content"> <div class="caption-content">
<i class="fa fa-search-plus fa-3x"><h3>{{ admin.first_name }} {{ admin.last_name }}</h3></i> <i class="fa fa-search-plus fa-3x"><h3>{{ admin.first_name }} {{ admin.last_name }}</h3></i>
</div> </div>
@ -26,6 +27,7 @@
{% endif %} {% endif %}
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@ -42,21 +44,38 @@
<div class="row"> <div class="row">
{% for member in members %} {% for member in members %}
<div class="col-sm-4 list-item"> <div class="col-sm-4 list-item">
<a href="{% url 'member:show' member.id %}" class="list-link" > <a data-toggle="modal" href="{% url 'member:show' member.id %}" data-target="#myModal" class="list-link membre">
<div class="caption">
<div class="caption membre bordered">
<div class="caption-content"> <div class="caption-content">
<i class="fa fa-search-plus fa-3x"><h3>{{ member.first_name }} {{ member.last_name }}</h3></i> <i class="fa fa-search-plus fa-3x"><h3>{{ member.first_name }} {{ member.last_name }}</h3></i>
</div> </div>
</div> </div>
{% if member.photo %} {% if member.photo %}
<img src="{{ member.photo.url }}" class="avatar" alt=""> <img src="{{ admin.photo.url }}" class="avatar" alt="">
{% else %} {% else %}
<img src="{% static 'img/profile.png' %}" class="avatar" alt=""> <img src="{% static 'img/profile.png' %}" class="avatar" alt="">
{% endif %} {% endif %}
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</section> </section>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body"><div class="te"></div></div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{% endblock %} {% endblock %}

View File

@ -1,7 +1,31 @@
{% extends 'template.html' %}
{% block content %} {% block content %}
{% load staticfiles %}
<div id="modalWindow">
<h1>{{ member.first_name }} {{ member.last_name }}</h1>
<h3 class="modal-title">{{ member.first_name }} {{ member.last_name }}</h3>
<table class="table table-user-information">
<tr>
<td rowspan=3>
{% if member.photo %}
<img src="{{ admin.photo.url }}" class="avatar" alt="">
{% else %}
<img src="{% static 'img/profile.png' %}" class="avatar" alt="">
{% endif %}
</td>
</tr>
{% if member.is_admin %}
<tr>
<td><p>Position :</p></td>
<td><p>{{ member.position}}</p></td>
</tr>
{% endif %}
<tr>
<td><p>Email :</p></td>
<td><a href="mailto:info@support.com">{{ member.email}}</a></td>
</tr>
</table>
<div>
{% endblock %} {% endblock %}

View File

@ -13,21 +13,22 @@
<div class="row"> <div class="row">
{% for project in projects %} {% for project in projects %}
<div class="col-sm-4 list-item"> <div class="col-sm-4 list-item">
<a href="{% url 'project:show' project.id %}" class="list-link"> <a href="{% url 'project:show' project.id %}" class="list-link projet bordered">
<div class="caption"> <div class="caption">
<div class="caption-content"> <div class="caption-content">
<i class="fa fa-search-plus fa-3x"><h3>{{ project.name }}</h3></i> <i class="fa fa-search-plus fa-3x"><h3>{{ project.name }}</h3></i>
</div> </div>
</div> </div>
{% if project.screenshot %} {% if project.screenshot %}
<img src="{{ project.screenshot.url }}" class="img-responsive" alt=""> <img src="{{ project.screenshot.url }}" alt=""/>
{% else %} {% else %}
<img src="{% static 'img/projet/cabin.png' %}" class="img-responsive" alt=""> <img src="{% static 'img/projet/cabin.png' %}" alt=""/>
{% endif %} {% endif %}
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div>
</section> </section>
{% endblock %} {% endblock %}

View File

@ -1,26 +1,26 @@
{% extends 'template.html' %} {% extends 'template.html' %}
{% load staticfiles %} {% load staticfiles %}
{% block content %} {% block content %}
<div class="projet"> <section id="projet">
<div class="col-lg-12"> <div class="boxContent">
<h1>{{ project.name }}</h1> <h1>{{ project.name }}</h1>
{% if project.screenshot %} {% if project.screenshot %}
<img class="img-responsive" src="{{ project.screenshot.url }}" alt=""> <img class="img-responsive projectImage" src="{{ project.screenshot.url }}" alt="">
{% else %} {% else %}
<img class="img-responsive" src="http://placehold.it/1100x400" alt=""> <img class="img-responsive projectImage" src="http://placehold.it/1100x400" alt="">
{% endif %} {% endif %}
<div class="caption-full">
<h4>Descripiton du projet:</h4> <h4>Descripiton du projet:</h4>
<p>{{ project.description }}</p> <p id = "descriptionProjet">{{ project.description }}</p>
<a class="btn btn-large" href="{{ project.download }}">Download</a>
<a class="btn btn-large right" href="{{ project.download }}" download="{{ project.download }}" >Download</a>
</div> </div>
</div> </section>
</div>
<section id="membre"> <section id="membre">
<div class="container"> <div class="boxContent">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center">
<h2 class="">Équipe</h2> <h2 class="">Équipe</h2>
@ -29,22 +29,24 @@
</div> </div>
<div class="row"> <div class="row">
{% for member in project.members.all %} {% for member in project.members.all %}
<div class="col-sm-4 list-item"> <div class="col-sm-4 list-item">
<a href="{% url 'member:show' member.id %}" class="list-link" > <a class="list-link membre">
<div class="caption">
<div class="caption-content"> <div class="caption membre bordered">
<i class="fa fa-search-plus fa-3x"><h3>{{ member.first_name }} {{ member.last_name }}</h3></i> <div class="caption-content">
<i class="fa fa-search-plus fa-3x"><h3>{{ member.first_name }} {{ member.last_name }}</h3></i>
</div>
</div> </div>
</div> {% if member.photo %}
{% if member.photo %} <img src="{{ admin.photo.url }}" class="avatar" alt="">
<img src="{{ member.photo.url }}" class="avatar" alt=""> {% else %}
{% else %} <img src="{% static 'img/profile.png' %}" class="avatar" alt="">
<img src="{% static 'img/profile.png' %}" class="avatar" alt=""> {% endif %}
{% endif %} </a>
</a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div>
</section> </section>
{% endblock %} {% endblock %}

View File

@ -16,14 +16,14 @@ p.small {
font-size: 16px; font-size: 16px;
} }
/*a, a,
a:hover, a:hover,
a:focus, a:focus,
a:active, a:active,
a.active { a.active {
outline: 0; outline: 0;
color: #18bc9c; color: #18bc9c;
}*/ }
h1, h1,
h2, h2,
@ -163,7 +163,7 @@ section.success a.active {
margin: 0 0 15px; margin: 0 0 15px;
} }
#projet .list-item .list-link { .list-item .list-link {
display: block; display: block;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;

View File

@ -1,32 +0,0 @@
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
color:#888;
}
/
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
}
.projet
{
margin-top:100px;
/*width:90%;*/
}
.projet h1,h2,h3,h4
{
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

0
static/css/reset.css Normal file
View File

View File

@ -1,20 +1,76 @@
html { html {
position: relative; position: relative;
min-height: 100%; min-height: 1054px;
height: 100%;
}
p,a
{
font-family: 'Ubuntu', serif;
font-size:15px;
font-weight:bold;
} }
body { body {
/*min-height:1200px;
max-height:1200px;*/
margin-bottom: 0px; margin-bottom: 0px;
padding-bottom: 0px; padding-bottom: 0px;
color: #fff; color: #696969 ;
background-color:#1A7AC5; background-color:#1A7AC5;
/*background: rgba(24,188,156,.9);*/ /*background: rgba(24,188,156,.9);*/
} }
h1,h2,h3,h4,h5,h6,h7,h8,h9,h1
{
font-family: 'Ubuntu', serif;
color:white;
text-transform: uppercase;
font-weight: 700;
}
hr.star-light,
hr.star-primary {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 5px;
text-align: center;
}
hr.star-light:after,
hr.star-primary:after {
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
hr.star-light {
border-color: #fff;
}
hr.star-light:after {
color: #fff;
/*background-color:transparent;*/
background-color: #1A7AC5;
}
hr.star-primary {
/*background: rgba(24,188,156,.9);*/
border-color: #2c3e50;
}
hr.star-primary:after {
color: #2c3e50;
background-color:transparent;
/*background-color:#808080;*/
}
.navbar-wrapper { .navbar-wrapper {
height:52px; height:52px;
} }
.navbar-wrapper .container { .container {
width:100%; width:100%;
} }
@ -37,6 +93,7 @@ body {
*/ */
#projet #projet
{ {
margin-left:10px;
background-color:#1A7AC5; background-color:#1A7AC5;
} }
.nouvelle .nouvelle
@ -61,24 +118,49 @@ footer {
/* Not required for template or sticky footer method. */ /* Not required for template or sticky footer method. */
.avatar { .avatar {
width: 250px; width: 200px;
height: 250px; height: 200px;
min-width:200px;
max-width: 250px; max-width: 250px;
min-height:200px;
max-height: 250px; max-height: 250px;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
-moz-border-radius: 50%; -moz-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
border: 5px solid rgba(255,255,255,0.5);
} }
.projet
{
min-width:400px;
max-width:400px;
min-height:300px;
max-height:300px;
#membre .list-item .list-link { }
.projet img
{
height:100%;
width:100%;
}
.bordered
{
border: 5px solid rgba(255,255,255,0.5);
}
.projectImage
{
width:100%;
height:50%;
min-width:800px;
max-width:1000px;
max-height:400px;
}
.list-item .list-link {
display: block; display: block;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
max-width: 250px;
} }
#membre .list-item .list-link .caption { .list-item .list-link .caption {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -89,7 +171,7 @@ footer {
transition: all ease .5s; transition: all ease .5s;
} }
#membre .list-item .list-link .caption .caption-content { .list-item .list-link .caption .caption-content {
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 100%; width: 100%;
@ -99,27 +181,174 @@ footer {
font-size: 10px; font-size: 10px;
color: #fff; color: #fff;
} }
#membre .list-item .list-link .caption .caption-content h3 { .list-item .list-link .caption .caption-content h3 {
font-size: 15px; font-size: 15px;
color: #fff; color: #fff;
} }
#membre .list-item .list-link .caption{ .list-item .list-link a:active a:visited;
{
border-style:none;
}
.membre{
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
-moz-border-radius: 50%; -moz-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
width:200px;
min-width:200px;
max-width:250px;
} }
#membre .list-item .list-link .caption:hover { .list-item .list-link .caption:hover {
opacity: 1; opacity: 1;
} }
#projet * {
z-index: 2; .infobox
{
padding-top:10px;
min-height:400px;
height:30%;
max-height:400px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,1);
font-family: 'Ubuntu', serif;
font-size:20px;
font-weight:bold;
}
.boxContent
{
padding-left:25%;
padding-right:25%;
}
#descriptionProjet
{
color:white;
}
#jams li
{
display:inline;
padding:20px;
}
#mtlgamejam
{
background-color:#f8f8f8;
color:black;
}
#mtlgamejam h1
{
color:black;
}
#mtlgamejam button
{
float:right;
}
#jams
{
color:white;
} }
#contact
{
background-color:#f8f8f8;
height:10%;
max-height:150px;
min-height:150px;
color:black;
}
#contact .boxContent
{
margin:0px;
}
#contact ul
{
display:block;
}
#contact li
{
display:block;
padding:5px;
}
#conjure
{
color:white;
}
.sectionImage
{ min-height:350px;
max-height:350px;
min-width:300px;
max-width:350px;
height:35%;
width:35%;
padding:0px;
margin:1%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,1);
}
.sectionImage .left
{
margin-right:3%;
margin-left:3%;
}
.sectionImage.right
{
margin-right:3%;
margin-left:3%;
}
.imgJams
{
height:30%;
width:40%;
}
.imgJams
{
height:30%;
width:40%;
}
.logo
{
width:29px;
padding:5px;}
.left
{
float:left;
}
.right
{
float:right;
}
@media(min-width:767px) { @media(min-width:767px) {
#projet .list-item { #projet .list-item {
margin: 0 0 30px; margin: 0 0 30px;
} }
} }
#modalWindow h3,table,td
{
color:black;
}
#modalWindow h3
{
margin-left:10px;
}
.modal
{
padding-top:15%;
}
#pageAcceuil p,a
{
font-size:20px;
}
.modal-dialog
{
height:50%;
width:50%;
min-width:500px;
min-height:250px;
} }

218
static/css/timeline.css Normal file
View File

@ -0,0 +1,218 @@
img { border: 0; max-width: 100%; height:25% }
.page-header h1 {
font-size: 3.26em;
text-align: center;
color: #efefef;
text-shadow: 1px 1px 0 #000;
}
/** timeline box structure **/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
height:100%;
}
.tl-body p
{
text-overflow:ellipsis;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eee;
left: 50%;
margin-left: -1.5px;
}
.tldate {
display: block;
width: 200px;
background: #414141;
border: 3px solid #212121;
color: #ededed;
margin: 0 auto;
padding: 3px 0;
font-weight: bold;
text-align: center;
-webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);
}
.timeline li {
margin-bottom: 25px;
position: relative;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
.timeline li:after {
clear: both;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
/** timeline panels **/
.timeline li .timeline-panel {
width: 46%;
height:250px;
float: left;
background: #fff;
border: 1px solid #d4d4d4;
padding: 20px;
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}
/** panel arrows **/
.timeline li .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline li .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
top:0;
right:0;
display: none;
border: 0;
}
.timeline li.timeline-inverted .timeline-panel {
float: right;
}
.timeline li.timeline-inverted .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline li.timeline-inverted .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
/** timeline circle icons **/
.timeline li .tl-circ {
position: absolute;
top: 23px;
left: 50%;
text-align: center;
background: #6a8db3;
color: #fff;
width: 35px;
height: 35px;
line-height: 35px;
margin-left: -16px;
border: 3px solid #90acc7;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
z-index: 99999;
}
.tl-circ i{
width:100%;
height:100%;
}
/** timeline content **/
.tl-heading h4 {
margin: 0;
color: #c25b4e;
}
.tl-body p, .tl-body ul {
margin-bottom: 0;
}
.tl-body > p + p {
margin-top: 5px;
}
/** media queries **/
@media (max-width: 991px) {
.timeline li .timeline-panel {
width: 44%;
}
}
@media (max-width: 700px) {
.page-header h1 { font-size: 1.8em; }
ul.timeline:before {
left: 40px;
}
.tldate { width: 140px; }
ul.timeline li .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline li .tl-circ {
top: 22px;
left: 22px;
margin-left: 0;
}
ul.timeline > li > .tldate {
margin: 0;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}

473
static/css/timeline2.css Normal file
View File

@ -0,0 +1,473 @@
.cd-container {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-container *, .cd-container *:after, .cd-container *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cd-container {
width:100%;
margin-left:10px;
margin-right:10px;
font-size: 100%;
font-family: "Droid Serif", serif;
color: #7f8c97;
}
.cd-container a {
color: #acb7c0;
text-decoration: none;
font-family: "Open Sans", sans-serif;
}
.cd-container img {
text-align:middle;
max-width: 100%;
max-height:300px;
}
.cd-container h1, h2 {
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 100%;
margin: 0 auto;
max-width:100%;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
/* --------------------------------
Main components
-------------------------------- */
.cd-container header {
height: 200px;
line-height: 200px;
text-align: center;
background: #303e49;
}
.cd-container header h1 {
color: white;
font-size: 18px;
font-size: 1.125rem;
}
@media only screen and (min-width: 1170px) {
.cd-container header {
height: 300px;
line-height: 300px;
}
.cd-container header h1 {
font-size: 24px;
font-size: 1.5rem;
}
}
#cd-timeline {
position: relative;
padding: 2em 0;
width:100%;
/*margin-top: 2em;
margin-bottom: 2em;*/
}
#cd-timeline::before {
/* this is the vertical line */
content: '';
position: relative;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: #d7e4ed;
}
.cd-timeline-block {
position: relative;
margin: 2em 2em;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
/*@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 4em 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}*/
.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
.cd-timeline-img.cd-picture {
background: #75ce66;
}
.cd-timeline-img.cd-movie {
background: #c03b44;
}
.cd-timeline-img.cd-location {
background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
-moz-transform: scale(0.5);
}
60% {
opacity: 1;
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: auto;
background: white;
border-radius: 0.25em;
padding: 1em;
box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-content h2 {
color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: white;
border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
}
.cd-timeline-content p {
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 14px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
/*top: 24px;*/
left: 100%;
border-color: transparent;
border-left-color: white;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}
@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
-webkit-animation: cd-bounce-2-inverse 0.6s;
-moz-animation: cd-bounce-2-inverse 0.6s;
animation: cd-bounce-2-inverse 0.6s;
}
}
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2 {
0% {
opacity: 0;
-moz-transform: translateX(-100px);
}
60% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-moz-transform: translateX(100px);
}
60% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}

BIN
static/img/MTLGJ_logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
static/img/fblogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

BIN
static/img/jams/ggjlogo.PNG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

BIN
static/img/jams/ggjlogo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

BIN
static/img/ytlogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

6
static/js/modalWindow.js Normal file
View File

@ -0,0 +1,6 @@
$('#myModal').on('show.bs.modal', function (event) {
console.log("show !!")
})
$('#myModal').on('hide.bs.modal', function (event) {
console.log("show !!")
})

26
static/js/timeline.js Normal file
View File

@ -0,0 +1,26 @@
jQuery(document).ready(function($){
var timelineBlocks = $('.cd-timeline-block'),
offset = 0.8;
//hide timeline blocks which are outside the viewport
hideBlocks(timelineBlocks, offset);
//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function(){
(!window.requestAnimationFrame)
? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
: window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
});
function hideBlocks(blocks, offset) {
blocks.each(function(){
( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
});
}
function showBlocks(blocks, offset) {
blocks.each(function(){
( $(this).offset().top <= $(window).scrollTop()+$(window).height()*offset && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
});
}
});

1406
static/js/timelinemod.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,65 @@
{% extends 'template.html' %} {% extends 'template.html' %}
{% load staticfiles %}
{% block content %} {% block content %}
<div class="content" id="pageAcceuil">
<div class="infobox" id="conjure">
<img class="sectionImage left" src={% static 'img/conjureMiniLogo.png' %}>
<div class="boxContent">
<h1>Le Club</h1>
<p>
Conjure est le club de développement de jeux vidéo de lÉcole des Technologie Supérieure.
Nos membres ont comme projet le développement dun jeu de leur choix.Les outils utilisée sont les outils utilisée dans l'industrie du jeu.
Ils participent aussi à plusieurs évenements reliés à lindustrie du jeu vidéo telle que des compétitions et des conférences.
Conjure est dailleurs le fondateur de lun de ces évènements, le Montréal Game Jam, qui est une compétition de développement de jeux vidéo en 48h.
Venez rejoindre notre équipe de gens motivé et passioné pour vivre votre passion de création de jeux vidéo.
</p>
</div>
</div>
<div class="infobox" id="mtlgamejam">
<img class="sectionImage right" src={% static 'img/MTLGJ_logo.png' %}>
<div class="boxContent">
<h1>Le Montreal Game Jam</h1>
<p>
Le Montreal Game Jam est le chapitre Montréalais pour le Global Game Jam.
Cet événement international donne comme défi aux participants de réaliser un
prototype de jeu basé sur une thématique spécifique pendant une période de 48 heures.
Plus de 10 684 participants dans 47 pays ont accepté le défi en 2012 et plus de 2209 jeux ont étés réalisés lors de lévénement.
Lorganisation du Montreal Game Jam est constitué de lunion de multiples universités et professionnels de Montréal
dont le mandat commun est de promouvoir lindustrie du jeu vidéo.
</p>
<button><a href="http://mtlgamejam.org/">En savoir plus</a></button>
</div>
</div>
<div class="infobox" id="jams">
<div class="boxContent"><h1>Autre Jams</h1>
<p>
Voici quelque Game Jam auquel Conjure participe:
<ul>
<li>
<img src={% static 'img/jams/ggjlogo.png' %} class="imgJams">
</li>
<li>
<img src={% static 'img/jams/pixelChalenge.png' %} class="imgJams">
</li>
<li>
<img src={% static 'img/jams/gameJamBattle.png' %} class="imgJams">
</li>
<li>
<img src={% static 'img/jams/OJamLogo.png' %} class="imgJams">
</li>
</ul>
</p>
</div>
</div>
<div class="infobox" id="contact">
<ul class="left"><li><p>local A-1744</p></li>
<li><a href="mailto:Conjure@ens.etsmtl.ca">Conjure@ens.etsmtl.ca</a></li>
<li><p>(514) 396-8800 poste: #7713</p></li>
</ul>
<ul class="right">
<li><a href="https://www.facebook.com/ConjureETS"><img src={% static 'img/fblogo.png' %} class="logo"/>ConjureETS</a></li>
<li><a href="https://www.youtube.com/user/ConjureETS"><img src={% static 'img/ytlogo.png' %} class="logo"/>Youtube</a></li>
</ul>
</div>
</div>
{% endblock %} {% endblock %}

View File

@ -14,14 +14,13 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom CSS --> <!-- Custom CSS -->
<link href="{% static 'css/freelancer.css' %}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{% static 'css/style.css' %}" rel="stylesheet"> <link href="{% static 'css/style.css' %}" rel="stylesheet">
<!--link href="{% static 'css/timeline2.css' %}" rel="stylesheet"-->
<!-- Custom Fonts --> <!-- Custom Fonts -->
<link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
@ -37,12 +36,12 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#"><img src="{% static 'img/conjure_logo.png' %}" height="40px"></a> <a class="navbar-brand" href="{% url 'index' %}"><img src="{% static 'img/conjure_logo.png' %}" height="40px"></a>
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="{% url 'index' %}">Accueil</a></li> <li><a href="{% url 'index' %}">Accueil</a></li>
<li><a href="{% url 'blog:index' %}">Blog</a></li> <!--li><a href="{% url 'blog:index' %}">Blog</a></li-->
<li><a href="{% url 'project:index' %}">Projets</a></li> <li><a href="{% url 'project:index' %}">Projets</a></li>
<li><a href="{% url 'member:index' %}">Membres</a></li> <li><a href="{% url 'member:index' %}">Membres</a></li>
</ul> </ul>
@ -65,10 +64,8 @@
<script src="{% static 'js/bootstrap.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script> <script src="{% static 'js/jquery.js' %}"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="{% static 'js/classie.js' %}"></script>
<script src="{% static 'js/cbpAnimatedHeader.js' %}"></script>
<script src="{% static 'js/jqBootstrapValidation.js' %}"></script> <script src="{% static 'js/jqBootstrapValidation.js' %}"></script>
<script src="{% static 'js/contact_me.js' %}"></script> <script src="{% static 'js/contact_me.js' %}"></script>
<script src="{% static 'js/freelancer.js' %}"></script> <script src="{% static 'js/modalWindow.js' %}"></script>
</body> </body>
</html> </html>