Skip to content
GitLab
Commit e17e1254 authored by Simon Daron's avatar Simon Daron
Browse files

Organising CSS & JS

parent cdd72568
Hide whitespace changes
Inline Side-by-side
panikweb_templates/static/css/general.css 0 → 100644
View file @ e17e1254
/******************/
/*HTML TAG DISPLAYS */
/******************/
a {
color:black;
text-decoration: none;
}
a:hover {
opacity:0.8;
text-decoration: underline;
}
img {
border: 2px solid black;
margin-right: 10px;
}
h1, h2, h3, h4, h5{
font-family: 'RegloBold';
}
h4, h5{
}
h1 { font-size: 5em;}
h2 { font-size: 4em;}
h3 { font-size: 3em;}
h4 { font-size: 1.8em;}
h5 { font-size: 1.3em;}
/*Specific rules for text writen by final users */
article h1, .content h1 { color:#aaa;font-size: 2.5em;}
article h2, .content h2 { color:#aaa;font-size: 2.3em;}
article h3, .content h3 { color:#aaa;font-size: 2em;}
article h4, .content h4 { color:#aaa;font-size: 1.5em;}
article h5, .content h5 { color:#aaa;font-size: 1.3em;}
h1{
transform: scale(0.5, 1);
-webkit-transform: scale(0.5, 1);
-moz-transform: scale(0.5, 1);
-ms-transform: scale(0.5, 1);
-o-transform: scale(0.5, 1);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width:200%;
}
nav{
font-family: "RegloBold";
text-transform: uppercase;
}
nav a.active,
nav a:hover{
text-decoration:underline;
}
p {
/*line-height: 1.2;*/
margin-bottom: 1em;
}
p a {
text-decoration: underline
}
em {
font-family:RegloBold;
}
blockquote {
font-family:RegloBold;
color:#aaa;
font-size: 1.5em;
padding: 1em;
font-style:italic;
}
ul, ol, dl {
margin: 0;
}
dt, dd{
letter-spacing:1px;
font-size: 0.8em;
line-height: 150%;
}
dt {
font-family: "RegloBold";
}
dd {
font-family: "RegloNormal";
margin-left: 4px;
}
dt:after {
content: ":";
}
dl.metadata dt {
clear: none;
margin: 0;
}
dl.metadata dd {
margin-right: 4px;
}
button {display:inline-block;}
ul.custom, ul.custom li{
list-style: none;
margin: none;
padding: none;
}
/******************/
/*USEFULL CLASSES */
/******************/
.ui-tabs {
background: transparent;
border: none;
}
.ui-tabs .ui-widget-header {
background: transparent;
border: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.ui-tabs .ui-tabs-nav .ui-state-default {
background: transparent;
border: none;
}
.ui-tabs .ui-tabs-nav .ui-state-active {
background: transparent;
border: none;
}
.ui-tabs .ui-tabs-nav .ui-state-default a {
color: #000;
}
.ui-tabs .ui-tabs-nav .ui-state-active a {
border-bottom:2px solid black;
}
.ui-tabs .ui-tabs-panel, .tabs .ui-tabs .ui-tabs-panel{
margin: 0 0 0 0;
padding:0 0 0 0;
}
.todo:hover, .todo *:hover{
text-decoration: line-through;
color:red !important;
}
.focusFade {
-webkit-transition-property: color;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease;
}
.extra-margin {
margin-bottom: 16px;
}
.ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.block {display:block;}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before, .cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
panikweb_templates/static/css/reset.css
View file @ e17e1254
......@@ -31,7 +31,6 @@ body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
......
panikweb_templates/static/css/style.css → panikweb_templates/static/css/specifics.css
View file @ e17e1254
......@@ -10,6 +10,24 @@
#player, #player .symbol{ color: #FF6633; }
#player .label { background-color:#FF6633; }
#player .controls, #player hr,player .item,#player img{border-color:#FF6633;}
/* FONTS */
.dateBloc {
font-family: "Reglo";
text-transform: uppercase;
}
.dateBloc *{line-height: 100%;}
.dateBloc .day {font-size: 2.2em;}
.dateBloc .number {font-size: 2.2em;}
.dateBloc .month {font-size: 0.8em;}
.dateBloc .time {font-size: 1.2em;}
.tabs .ui-tabs-nav {
font-size: 0.8em;
font-family: "Reglo";
text-transform: uppercase;
}
/* SIZES
@xxs: 8px;
......@@ -59,34 +77,7 @@ body {
@media screen and (min-width:400px) and (max-width: 780px) {
#main {font-size: 90%;}
}
/* Mixins & USEFUL CLASSES */
.squash(@x, @y: 1) {
transform: scale(@x, @y);
-webkit-transform: scale(@x, @y);
-moz-transform: scale(@x, @y);
-ms-transform: scale(@x, @y);
-o-transform: scale(@x, @y);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width:200%;
}
.focusFade {
-webkit-transition-property: color;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease;
}
.extra-margin {
margin-bottom: 16px;
}
.ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.symbol{
font-size: 3em;
......@@ -100,8 +91,6 @@ body {
font-size: 6em;
}
.label {
text-transform: uppercase;
font-family: "Reglo";
......@@ -114,6 +103,25 @@ body {
color:white;
padding:5px 7px 0px 7px;
}
ul.tags {
margin: 10px 0 0 0;
overflow:hidden;
margin-bottom:15px;
}
ul.tags li {
font-size: 0.8em;
font-family: RegloBold;
letter-spacing: 1px;
text-transform: uppercase;
float: left;
border: 1px solid black;
margin: 2px 2px;
padding: 3px 3px 0px 3px;
border-radius: 7px;
-moz-border-radius: 7px;
}
/*
.symbol {
font-family: RegloSymbol;
......@@ -131,7 +139,6 @@ body {
left:68px;
}
*/
.block {display:block;}
button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
width:100%;
......@@ -143,6 +150,9 @@ nav.menu li{
margin-right:2em;
}
/**** TABS ****/
/* GLOBAL SITE NAV */
#search-form{content:'Rechercher';}
......@@ -519,250 +529,12 @@ ul.tagsArchives li {
text-align: center;
}
/**** PROGRAM ****/
/****************************************************/
/**** Breves
.breves, #content.breve {
color:@blue;
a, a:visited, a:active {
color:@blue;
}
a:hover{
color: lighten(@blue, 30%);
}
}
.breves {
width: @breves-width;
float: left;
margin-left: 50px;
}
.breves img {
border: 2px solid @blue;
}
.breves-header span {
background-color: @blue;
color: white;
padding: 10px @s;
height: @s;
font-size: @s;
font-family: RegloBold;
text-transform: uppercase;
display: inline-block;
}
.breves h4 {
clear:both;
margin:10px 0 16px 0;
}
.label p{
margin-top:5px;
margin-right:5px;
float:left;
text-decoration:underline;
}
.breves-big {
width:350px;
margin:0 10px;
float:left
}
.breves-small {
width:165px;
margin:0 10px;
float:left
}
.breves .suite {
margin:10px 0 40px 0;
height:20px;
width:124px;
background-color: @blue;
clear:both;
margin-left: 10px;
}
.breves .symbol {
margin:2px 5px;
color:white;
font-size:@l;
}
.breves .suite p {
color: white;
text-transform: uppercase;
letter-spacing:1px;
font-family: RegloMedium;
font-size:@xs;
padding-top:4px;
}
.breves-image {
position: relative;
}
.breves .trans {
text-transform: uppercase;
font-family: Reglo;
letter-spacing:1px;
font-size:@m;
background-color:@blue;
position: absolute;
left:10px;
top:-5px;
color:white;
padding:5px 7px 0px 7px;
}
****/
/**** TO REWRITE ****/
/* The h1 needs to be two times bigger, than it’s containing box, because with the matrix transform we’re going to squash it in 2 */
/*
#content h1 {
width: 996px;
}
#content h3 {
margin-bottom:30px;
}
#content {
width: @content-width;
float: left;
margin-left: 60px;
}
#content.wide {
width: 498px + 50px + 370px;
}
a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissions a:active {
color: lighten(@black, 20%);
}
#content hr {
display: block;
height: 1px;
border-top: 3px solid @black;
}
.accordion {
margin-bottom:50px;
}
.accordion .slide-out {
display: none;
}
.accordion .strip {
margin:2px 0;
height:20px;
background-color: @black;
color: white;
font-family:RegloMedium;
text-transform: uppercase;
letter-spacing:1px;
font-size:@xs;
padding-top:4px;
.focusFade();
cursor: pointer;
}
.accordion .strip:hover {
background-color: @black;
}
.accordion .symbol {
color: white;
font-size:@l;
margin: 0px 5px;
}
.a-propos {
margin: 30px 10px;
}
.a-propos p {
margin-bottom:15px;
}
.a-propos h4 {
margin:15px 0;
height: 12px;
background-color:@black;
color:white;
font-family:RegloMedium;
padding:4px;
letter-spacing:1px;
font-size:@xs;
display:inline-block;
}
.associated-sounds {
margin: 30px 0;
.symbols {
font-size:@xl*1.3;
float: right;
line-height:50%;
}
.soundGrey {
background-color:#D0D0D0;
}
div.item {
margin-top: 20px;
padding: 10px;
}
h3 {
margin-bottom:30px;
}
}
*/
.todo:hover, .todo *:hover{
text-decoration: line-through;
color:red !important;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before, .cf:after {
content: " "; /* 1 */
display: table; /* 2 */
#Program .dateBloc {
float:left;
padding-top:1em;
margin-right:2em;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
panikweb_templates/static/js/specifics.js 0 → 100644
View file @ e17e1254
$(function() {
$(".tabs").tabs();
});
panikweb_templates/templates/base.html
View file @ e17e1254
......@@ -7,12 +7,13 @@
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="{{ STATIC_URL }}js/specifics.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/type.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/tags.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/general.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/specifics.css" type="text/css" />
<!--<script src="{{ STATIC_URL }}js/less-1.4.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" />-->
......
panikweb_templates/templates/program.html
View file @ e17e1254
{% extends "base.html" %}
{% block main %}
<h1>Programme</h1>
<div id="tabs">
<ul>
{% for day in days %}
<li><a href="#tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D" }}</a></li>
{% endfor %}
</ul>
{% for day in days %}
<div id="tabs-{{ day.datetime|date:"w" }}">
<ul class="emission-list">
{% for schedule in day.schedules %}
<li >
<div class="date">
<div class="time">{{ schedule.datetime|date:"H:i" }}</div>
</div>
{% include "emissions/inline.html" with emission=schedule.emission %}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
<div id="Program">
<h1>Programme</h1>
<div class="tabs">
<ul class="custom"</