Unverified Commit 7fbb7f5c authored by nyanloutre's avatar nyanloutre
Browse files

Nettoyage global

parent 48d7a081
body, html {
height: 100%;
}
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
header {
height: 75%;
min-height: 400px;
background-image: url(../img/bandeau.jpg);
background-position: center;
background-attachment: fixed;
background-size: cover;
}
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
......@@ -96,9 +112,7 @@ iframe{
}
.navbar {
font-family: Montserrat, sans-serif;
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 20px !important;
letter-spacing: 4px;
opacity: 0.9;
......@@ -113,18 +127,8 @@ iframe{
color: #fff !important;
background-color: #29292c !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.open .dropdown-toggle {
color: #fff;
background-color: #555 !important;
}
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu li a:hover {
background-color: red !important;
.navbar-toggler {
color: #ddd;
}
footer {
background-color: #2d2d30;
......@@ -208,17 +212,8 @@ article {
/*-- Timer --*/
.countdown {
background: url(../img/bandeau.jpg) no-repeat center fixed;
background-size: cover;
padding-top:20em;
min-height: 550px;
text-align: center;
}
.simply-section {
display: inline-block;
width: 25%;
float: left;
text-align: center;
width: 100%;
height: 100%;
}
.countdown-timer-w3laits h3 {
......@@ -242,13 +237,12 @@ article {
.countdown-timer-w3laits h3 span{
color: #ff8c00;
}
span.simply-amount {
font-size:7em;
line-height: 0;
span.countdown-amount {
font-size:4rem;
color: #fff;
}
span.simply-word {
font-size:15px;
span.countdown-word {
font-size:0.5rem;
letter-spacing: 3px;
font-weight: 500;
margin-left: 5px;
......@@ -256,4 +250,18 @@ span.simply-word {
color: #eee;
font-family: 'Open Sans', sans-serif;
}
span.countdown-amount, span.countdown-word {
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 40px #1d2951 , 0 0 70px #1d2951, 0 0 100px #1d2951;
}
@media (min-width: 576px) {
span.countdown-amount {
font-size:7rem;
}
span.countdown-word {
font-size:1rem;
}
}
/*-- //Timer --*/
blog/static/blog/img/bandeau.jpg

879 KB | W: | H:

blog/static/blog/img/bandeau.jpg

1.22 MB | W: | H:

blog/static/blog/img/bandeau.jpg
blog/static/blog/img/bandeau.jpg
blog/static/blog/img/bandeau.jpg
blog/static/blog/img/bandeau.jpg
  • 2-up
  • Swipe
  • Onion skin
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
days = parseInt(timer / (60 * 60 * 24), 10);
hours = parseInt(timer / (60 * 60) % 24, 10);
minutes = parseInt((timer / 60) % 60, 10);
seconds = parseInt(timer % 60, 10);
display.innerHTML = '<div class="col-lg-3 col-6 text-center">' + '<span class="countdown-amount">' + days + '</span><span class="countdown-word">' + 'Jours' + '</span></div>' +
'<div class="col-lg-3 col-6 text-center">' + '<span class="countdown-amount">' + hours + '</span><span class="countdown-word">' + "Heures" + '</span></div>' +
'<div class="col-lg-3 col-6 text-center">' + '<span class="countdown-amount">' + minutes + '</span><span class="countdown-word">' + "Minutes" + '</span></div>' +
'<div class="col-lg-3 col-6 text-center">' + '<span class="countdown-amount">' + seconds + '</span><span class="countdown-word">' + "Secondes" + '</span></div>';
if (--timer < 0) {
timer = 0;
}
}, 1000);
}
window.onload = function () {
var today = new Date();
//Attention les mois commencent à 0 en Js
var date_gala = new Date(2017, 10, 18, 19);
var seconds = Math.round((date_gala - today) / 1000),
display = document.querySelector('#gala-countdown');
startTimer(seconds, display);
};
This diff is collapsed.
/*!
* Project : simply-countdown
* File : simplyCountdown
* Date : 27/06/2015
* License : MIT
* Version : 1.3.1
* Author : Vincent Loy <vincent.loy1@gmail.com>
*/
/*global window, document*/
(function (exports) {
'use strict';
var // functions
extend,
createElements,
createCountdownElt,
simplyCountdown;
/**
* Function that merge user parameters with defaults one.
* @param out
* @returns {*|{}}
*/
extend = function (out) {
var i,
obj,
key;
out = out || {};
for (i = 1; i < arguments.length; i += 1) {
obj = arguments[i];
if (obj) {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object') {
extend(out[key], obj[key]);
} else {
out[key] = obj[key];
}
}
}
}
}
return out;
};
/**
* Function that create a countdown section
* @param countdown
* @param parameters
* @param typeClass
* @returns {{full: (*|Element), amount: (*|Element), word: (*|Element)}}
*/
createCountdownElt = function (countdown, parameters, typeClass) {
var innerSectionTag,
sectionTag,
amountTag,
wordTag;
sectionTag = document.createElement('div');
amountTag = document.createElement('span');
wordTag = document.createElement('span');
innerSectionTag = document.createElement('div');
innerSectionTag.appendChild(amountTag);
innerSectionTag.appendChild(wordTag);
sectionTag.appendChild(innerSectionTag);
sectionTag.classList.add(parameters.sectionClass);
sectionTag.classList.add(typeClass);
amountTag.classList.add(parameters.amountClass);
wordTag.classList.add(parameters.wordClass);
countdown.appendChild(sectionTag);
return {
full: sectionTag,
amount: amountTag,
word: wordTag
};
};
/**
* Function that create full countdown DOM elements calling createCountdownElt
* @param parameters
* @param countdown
* @returns {{days: (*|Element), hours: (*|Element), minutes: (*|Element), seconds: (*|Element)}}
*/
createElements = function (parameters, countdown) {
var spanTag;
if (!parameters.inline) {
return {
days: createCountdownElt(countdown, parameters, 'simply-days-section'),
hours: createCountdownElt(countdown, parameters, 'simply-hours-section'),
minutes: createCountdownElt(countdown, parameters, 'simply-minutes-section'),
seconds: createCountdownElt(countdown, parameters, 'simply-seconds-section')
};
}
spanTag = document.createElement('span');
spanTag.classList.add(parameters.inlineClass);
return spanTag;
};
/**
* simplyCountdown, create and display the coundtown.
* @param elt
* @param args (parameters)
*/
simplyCountdown = function (elt, args) {
var parameters = extend({
year: 2015,
month: 6,
day: 28,
hours: 0,
minutes: 0,
seconds: 0,
words: {
days: 'day',
hours: 'hour',
minutes: 'minute',
seconds: 'second',
pluralLetter: 's'
},
plural: true,
inline: false,
enableUtc: true,
onEnd: function () {
return;
},
refresh: 1000,
inlineClass: 'simply-countdown-inline',
sectionClass: 'simply-section',
amountClass: 'simply-amount',
wordClass: 'simply-word'
}, args),
interval,
targetDate,
targetTmpDate,
now,
nowUtc,
secondsLeft,
days,
hours,
minutes,
seconds,
cd = document.querySelectorAll(elt);
targetTmpDate = new Date(
parameters.year,
parameters.month - 1,
parameters.day,
parameters.hours,
parameters.minutes,
parameters.seconds
);
if (parameters.enableUtc) {
targetDate = new Date(
targetTmpDate.getUTCFullYear(),
targetTmpDate.getUTCMonth(),
targetTmpDate.getUTCDate(),
targetTmpDate.getUTCHours(),
targetTmpDate.getUTCMinutes(),
targetTmpDate.getUTCSeconds()
);
} else {
targetDate = targetTmpDate;
}
Array.prototype.forEach.call(cd, function (countdown) {
var fullCountDown = createElements(parameters, countdown);
interval = window.setInterval(function () {
var dayWord,
hourWord,
minuteWord,
secondWord;
now = new Date();
if (parameters.enableUtc) {
nowUtc = new Date(now.getFullYear(), now.getMonth(), now.getDate(),
now.getHours(), now.getMinutes(), now.getSeconds());
secondsLeft = (targetDate - nowUtc.getTime()) / 1000;
} else {
secondsLeft = (targetDate - now.getTime()) / 1000;
}
if (secondsLeft > 0) {
days = parseInt(secondsLeft / 86400, 10);
secondsLeft = secondsLeft % 86400;
hours = parseInt(secondsLeft / 3600, 10);
secondsLeft = secondsLeft % 3600;
minutes = parseInt(secondsLeft / 60, 10);
seconds = parseInt(secondsLeft % 60, 10);
} else {
days = 0;
hours = 0;
minutes = 0;
seconds = 0;
window.clearInterval(interval);
parameters.onEnd();
}
if (parameters.plural) {
dayWord = days > 1
? parameters.words.days + parameters.words.pluralLetter
: parameters.words.days;
hourWord = hours > 1
? parameters.words.hours + parameters.words.pluralLetter
: parameters.words.hours;
minuteWord = minutes > 1
? parameters.words.minutes + parameters.words.pluralLetter
: parameters.words.minutes;
secondWord = seconds > 1
? parameters.words.seconds + parameters.words.pluralLetter
: parameters.words.seconds;
} else {
dayWord = parameters.words.days;
hourWord = parameters.words.hours;
minuteWord = parameters.words.minutes;
secondWord = parameters.words.seconds;
}
/* display an inline countdown into a span tag */
if (parameters.inline) {
countdown.innerHTML =
days + ' ' + dayWord + ', ' +
hours + ' ' + hourWord + ', ' +
minutes + ' ' + minuteWord + ', ' +
seconds + ' ' + secondWord + '.';
} else {
fullCountDown.days.amount.textContent = days;
fullCountDown.days.word.textContent = dayWord;
fullCountDown.hours.amount.textContent = hours;
fullCountDown.hours.word.textContent = hourWord;
fullCountDown.minutes.amount.textContent = minutes;
fullCountDown.minutes.word.textContent = minuteWord;
fullCountDown.seconds.amount.textContent = seconds;
fullCountDown.seconds.word.textContent = secondWord;
}
}, parameters.refresh);
});
};
exports.simplyCountdown = simplyCountdown;
}(window));
/*global $, jQuery, simplyCountdown*/
if (window.jQuery) {
(function ($, simplyCountdown) {
'use strict';
function simplyCountdownify(el, options) {
simplyCountdown(el, options);
}
$.fn.simplyCountdown = function (options) {
return simplyCountdownify(this.selector, options);
};
}(jQuery, simplyCountdown));
}
......@@ -4,46 +4,11 @@
{% block body %}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<!-- <li data-target="#myCarousel" data-slide-to="1"></li>-->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- Timer -->
<div class="countdown">
<div class="simply-countdown-losange" id="simply-countdown-losange"></div>
</div>
<!-- //Timer -->
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<!--<div class="item">
<img src="/gala/static/blog/img/bandeau.jpg" alt="" width="1200" height="700">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>-->
</div>
<!-- Left and right controls -->
<!--<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
<header class="masthead">
<!-- Timer -->
<div id="gala-countdown" class="countdown d-flex flex-wrap align-items-center justify-content-between"></div>
<!-- //Timer -->
</header>
<h1 align="center">News</h1>
{% for article in articles %}
......
{% load set_var %}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gala-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../"><img src="/gala/static/blog/img/logo.png" alt="" width="40" height="25"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
{% for page in nav.pages %}
<nav class="navbar fixed-top navbar-expand-lg">
<a class="navbar-brand" href="../"><img src="/gala/static/blog/img/logo.png" alt="" width="40" height="25"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_navbar" aria-controls="main_navbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="main_navbar">
<ul class="navbar-nav">
{% for page in nav.pages %}
{% set active = "" %}
{% if nav.path == page.get_absolute_url %}
{% set active = "active" %}
{% endif %}
{% set active = "" %}
{% if nav.path == page.get_absolute_url %}
{% set active = "active" %}
{% endif %}
<li class="{{active}}"><a href="{{page.get_absolute_url}}">{{page.title}}</a></li>
<li class="{{active}} nav-item"><a class="nav-link" href="{{page.get_absolute_url}}">{{page.title}}</a></li>
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</nav>
......@@ -7,14 +7,18 @@
<title>Gala 2017</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="{% static "blog/css/style.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "blog/css/font-awesome.css" %}">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="{% static "blog/js/countdown.js" %}"></script>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
......@@ -29,25 +33,19 @@
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
......@@ -55,35 +53,6 @@ $(document).ready(function(){
});
})
</script>
<!-- Countdown-Timer-JavaScript -->
<script type="text/javascript" src="{% static "blog/js/jquery-2.1.4.min.js" %}"></script>
<script src="{% static "blog/js/simplyCountdown.js" %}"></script>
<script>
var d = new Date(new Date().getTime() + 948 * 120 * 120 * 2000);
// default example
simplyCountdown('.simply-countdown-one', {
year: d.getFullYear(),
month: d.getMonth() + 1,
day: d.getDate()
});
// inline example
simplyCountdown('.simply-countdown-inline', {
year: d.getFullYear(),
month: d.getMonth() + 1,
day: d.getDate(),
inline: true
});
//jQuery example
$('#simply-countdown-losange').simplyCountdown({
year: 2017,
month: 11,
day: 18,
enableUtc: true
});
</script>
<!-- //Countdown-Timer-JavaScript -->
</body>
</html>
Supports Markdown
0% or .