mirror of
https://github.com/ConjureETS/site-2015.git
synced 2026-03-24 04:21:23 +00:00
Blog Page d acceuil et autre modif mineur
This commit is contained in:
unknown
parent
7192952a48
commit
824aed84f8
Binary file not shown.
Binary file not shown.
@ -1,7 +1,22 @@
|
||||
{% extends 'template.html' %}
|
||||
|
||||
{% load staticfiles %}
|
||||
{% block content %}
|
||||
<section>
|
||||
<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>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
from django.shortcuts import render
|
||||
|
||||
from blog.models import *
|
||||
|
||||
def index(request):
|
||||
return render(request, 'blog/index.html', {})
|
||||
articles = Article.objects.all
|
||||
return render(request, 'blog/index.html', {'articles':articles})
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,7 +1,7 @@
|
||||
{% extends 'template.html' %}
|
||||
{% load staticfiles %}
|
||||
{% block content %}
|
||||
<section id="membre">
|
||||
<section id = "membre">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@ -16,14 +16,14 @@ p.small {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/*a,
|
||||
a,
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
a.active {
|
||||
outline: 0;
|
||||
color: #18bc9c;
|
||||
}*/
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
@ -163,7 +163,7 @@ section.success a.active {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
#projet .list-item .list-link {
|
||||
.list-item .list-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
# {
|
||||
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
|
||||
color:#888;
|
||||
}
|
||||
@ -24,9 +24,4 @@ body {
|
||||
|
||||
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
0
static/css/reset.css
Normal file
@ -5,11 +5,58 @@ html {
|
||||
body {
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
color: #fff;
|
||||
color: #696969 ;
|
||||
background-color:#1A7AC5;
|
||||
/*background: rgba(24,188,156,.9);*/
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6,h7,h8,h9,h1
|
||||
{
|
||||
color:fff;
|
||||
text-transform: uppercase;
|
||||
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
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 {
|
||||
height:52px;
|
||||
}
|
||||
@ -71,14 +118,14 @@ footer {
|
||||
border: 5px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
#membre .list-item .list-link {
|
||||
.list-item .list-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
#membre .list-item .list-link .caption {
|
||||
.list-item .list-link .caption {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -89,7 +136,7 @@ footer {
|
||||
transition: all ease .5s;
|
||||
|
||||
}
|
||||
#membre .list-item .list-link .caption .caption-content {
|
||||
.list-item .list-link .caption .caption-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
@ -99,24 +146,108 @@ footer {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
#membre .list-item .list-link .caption .caption-content h3 {
|
||||
.list-item .list-link .caption .caption-content h3 {
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
#membre .list-item .list-link .caption{
|
||||
#membre .list-item .list-link .caption{
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
#membre .list-item .list-link .caption:hover {
|
||||
|
||||
#projet .list-item .list-link .caption:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#projet .list-item .list-link .caption .caption-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin-top: -12px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.list-item .list-link .caption:hover {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
#projet * {
|
||||
z-index: 2;
|
||||
}
|
||||
.infobox
|
||||
{
|
||||
padding:15px;
|
||||
height:350px;
|
||||
-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);
|
||||
}
|
||||
.infobox p
|
||||
{
|
||||
text-align:middle;
|
||||
padding-left:25%;
|
||||
padding-right:25%;
|
||||
}
|
||||
#mtlgamejam
|
||||
{
|
||||
background-color:#f8f8f8;
|
||||
}
|
||||
|
||||
#jams
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
#contact
|
||||
{
|
||||
background-color:#f8f8f8;
|
||||
height:100px;
|
||||
}
|
||||
#conjure
|
||||
{
|
||||
display:block;
|
||||
}
|
||||
#jams img
|
||||
{
|
||||
float:right;
|
||||
height:300px;
|
||||
width:300px;
|
||||
-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);
|
||||
}
|
||||
#conjure img
|
||||
{
|
||||
float:right;
|
||||
height:300px;
|
||||
width:300px;
|
||||
-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);
|
||||
}
|
||||
#mtlgamejam img
|
||||
{
|
||||
float:left;
|
||||
height:300px;
|
||||
width:300px;
|
||||
-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);
|
||||
}
|
||||
@media(min-width:767px) {
|
||||
#projet .list-item {
|
||||
margin: 0 0 30px;
|
||||
|
||||
218
static/css/timeline.css
Normal file
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
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
BIN
static/img/MTLGJ_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
26
static/js/timeline.js
Normal file
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
1406
static/js/timelinemod.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,30 @@
|
||||
{% extends 'template.html' %}
|
||||
{% load staticfiles %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="infobox" id="conjure">
|
||||
<img src={% static 'img/MTLGJ_logo.png' %}><p>
|
||||
The Montreal Game Jam is the Montreal chapter for the Global Game Jam. This event encourages participants from all over the world to create a video game
|
||||
prototype based on a theme over the course of a weekend. It’s more than 10 684 participants in 47 countries giving body and soul to complete their objectives.
|
||||
2209 games were created last year. The organization of the Montreal Game Jam is the union of multiple universities and professionals from Montreal whose mandate
|
||||
is to promote Montreal video game industry.</p>
|
||||
</div>
|
||||
<div class="infobox" id="mtlgamejam">
|
||||
<img src={% static 'img/MTLGJ_logo.png' %}><p>
|
||||
The Montreal Game Jam is the Montreal chapter for the Global Game Jam. This event encourages participants from all over the world to create a video game
|
||||
prototype based on a theme over the course of a weekend. It’s more than 10 684 participants in 47 countries giving body and soul to complete their objectives.
|
||||
2209 games were created last year. The organization of the Montreal Game Jam is the union of multiple universities and professionals from Montreal whose mandate
|
||||
is to promote Montreal video game industry.</p>
|
||||
</div>
|
||||
<div class="infobox" id="jams">
|
||||
<img src={% static 'img/MTLGJ_logo.png' %}><p>
|
||||
The Montreal Game Jam is the Montreal chapter for the Global Game Jam. This event encourages participants from all over the world to create a video game
|
||||
prototype based on a theme over the course of a weekend. It’s more than 10 684 participants in 47 countries giving body and soul to complete their objectives.
|
||||
2209 games were created last year. The organization of the Montreal Game Jam is the union of multiple universities and professionals from Montreal whose mandate
|
||||
is to promote Montreal video game industry.</p>
|
||||
</div>
|
||||
<div class="infobox" id="contact">
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -14,14 +14,13 @@
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
|
||||
<!-- Custom CSS -->
|
||||
<link href="{% static 'css/freelancer.css' %}" rel="stylesheet">
|
||||
<!-- Custom CSS -->
|
||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'css/timeline2.css' %}" rel="stylesheet">
|
||||
<!-- Custom Fonts -->
|
||||
<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=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -70,5 +69,7 @@
|
||||
<script src="{% static 'js/jqBootstrapValidation.js' %}"></script>
|
||||
<script src="{% static 'js/contact_me.js' %}"></script>
|
||||
<script src="{% static 'js/freelancer.js' %}"></script>
|
||||
<script src="{% static 'js/timeline.js' %}"></script>
|
||||
<script src="{% static 'js/timelinemod.js' %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user