Merge branch 'branchAntoine'
@ -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 %}
|
||||||
|
|||||||
@ -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
@ -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
|
||||||
@ -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">×</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 %}
|
||||||
|
|||||||
@ -1,7 +1,31 @@
|
|||||||
{% extends 'template.html' %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
{% load staticfiles %}
|
||||||
<h1>{{ member.first_name }} {{ member.last_name }}</h1>
|
<div id="modalWindow">
|
||||||
|
|
||||||
|
|
||||||
|
<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 %}
|
||||||
|
|||||||
@ -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 %}
|
||||||
|
|||||||
@ -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 %}
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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
@ -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
|
||||||
#membre .list-item .list-link {
|
{
|
||||||
|
min-width:400px;
|
||||||
|
max-width:400px;
|
||||||
|
min-height:300px;
|
||||||
|
max-height:300px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.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
@ -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
@ -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
|
After Width: | Height: | Size: 31 KiB |
BIN
static/img/conjureMiniLogo.png
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
static/img/fblogo.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/img/jams/GameJamBattle.png
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
static/img/jams/OjamLogo.png
Normal file
|
After Width: | Height: | Size: 136 KiB |
BIN
static/img/jams/ggjlogo.PNG
Normal file
|
After Width: | Height: | Size: 144 KiB |
BIN
static/img/jams/ggjlogo.jpg
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
static/img/jams/ludumDare.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
static/img/jams/pixelChalenge.png
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
static/img/ytlogo.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
6
static/js/modalWindow.js
Normal 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
@ -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
@ -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 d’un 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 à l’industrie du jeu vidéo telle que des compétitions et des conférences.
|
||||||
|
Conjure est d’ailleurs le fondateur de l’un 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.
|
||||||
|
L’organisation du Montreal Game Jam est constitué de l’union de multiples universités et professionnels de Montréal
|
||||||
|
dont le mandat commun est de promouvoir l’industrie 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 %}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||