all interface is now responsive

This commit is contained in:
2021-12-07 17:10:59 +01:00
parent 62a9afcc33
commit c634eb80f3
7 changed files with 477 additions and 190 deletions
@@ -258,8 +258,6 @@ function perfart_get_performances(){
$count = $count_query->count()->execute();
pager_default_initialize($count, $limit);
$data = array();
foreach ($result['node'] as $eff) {
$eff = node_load($eff->nid);
//$eff = entity_load('node', array($eff->nid), NULL, FALSE);
@@ -324,6 +322,8 @@ function perfart_get_performances(){
if(in_array($perf['target_id'], $perfadded))
continue;
$item_classes = array();
$perfadded[] = $perf['target_id'];
$perf = node_load($perf['target_id']);
@@ -386,6 +386,9 @@ function perfart_get_performances(){
// dsm($image, 'image');
$date['thumb'] = l($image, $node_path, array('html'=>true));
$content .= $date['thumb'];
$item_classes[] = "with-image";
}else{
$item_classes[] = "without-image";
}
// $content .= '</div>';
@@ -445,11 +448,20 @@ function perfart_get_performances(){
pager_default_initialize($count, $limit);
// $data[] = $date;
$list['items'][] = $content;
$item = array(
'data' => $content,
// 'attributes' => array(
'class' => $item_classes,
// ),
);
$list['items'][] = $item;
}
}
$list['attributes']['id'] = "home-performances-list";
// dsm($data, '$data');
return theme('item_list', $list) . theme('pager');
}
@@ -458,6 +458,7 @@ body {
width: 100%;
height: 100%;
/* background-color: red;*/
overflow-y: hidden;
}
#container {
width: 100%;
@@ -517,7 +518,7 @@ html.oldie #header #header-blocks {
margin: 0;
}
#header ul.language-switcher-locale-url li {
padding-right: 10px;
padding-right: 0;
}
#header ul.language-switcher-locale-url li.active {
display: none;
@@ -621,10 +622,10 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
/** RESPONSIVE */
@media (min-width: 799px) {
#header .logo {
width: 35%;
width: 340px;
}
#header-blocks {
width: 63%;
width: calc(100% - 340px);
position: absolute;
bottom: 0;
right: 0;
@@ -644,7 +645,7 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
display: inline;
}
#header-blocks .region:not(:first-child) {
margin-left: 1.1em;
margin-left: 0.5em;
}
html.oldie #header-blocks .region {
float: left;
@@ -741,7 +742,7 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
html.oldie #header-blocks ul li a {
font-size: 9px;
}
body.burger-shown #header-blocks {
body.burger-header-shown #header-blocks {
transform: translateX(0);
}
.burger-icon {
@@ -755,6 +756,9 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
z-index: 20;
cursor: pointer;
}
.burger-icon.sidebar-first {
background-color: #A5A5A5;
}
.burger-icon span {
display: block;
background: #000;
@@ -786,14 +790,17 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
bottom: 2px;
margin-bottom: -2px;
}
body.burger-shown .burger-icon span {
body.burger-header-shown .burger-icon.header span,
body.burger-sidebar-first-shown .burger-icon.sidebar-first span {
background: transparent;
}
body.burger-shown .burger-icon:before {
body.burger-header-shown .burger-icon.header:before,
body.burger-sidebar-first-shown .burger-icon.sidebar-first:before {
top: 55%;
transform: rotate(45deg);
}
body.burger-shown .burger-icon:after {
body.burger-header-shown .burger-icon.header:after,
body.burger-sidebar-first-shown .burger-icon.sidebar-first:after {
bottom: 55%;
transform: rotate(-45deg);
}
@@ -869,22 +876,78 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
/** MAIN */
#main {
height: 97%;
position: relative;
/** SIDEBAR FIRST */
/** CENTER */
/** SIDEBAR SECOND */
}
#main #sidebar-first {
display: moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
width: 29%;
height: 99%;
overflow-x: hidden;
overflow-y: auto;
}
.ie7 #main #sidebar-first,
.ie8 #main #sidebar-first {
display: inline;
#main #sidebar-first .block-menu-block,
#main #sidebar-first .block-menu-block > .content {
height: 100%;
}
#main #sidebar-first #myList-nav {
max-height: 100%;
display: flex;
flex-flow: row nowrap;
}
#main #sidebar-first #myList-nav > div {
flex: 0 0 auto;
width: 1em;
}
#main #sidebar-first #myList-nav > div .ln-letters {
margin: 0;
}
#main #sidebar-first #myList-nav > ul {
flex: 0 0 auto;
box-sizing: border-box;
width: calc(100% - 1em);
max-height: 100%;
padding-left: 2em;
padding-right: 2em;
overflow-x: hidden;
overflow-y: auto;
margin-top: 2em;
}
@media (min-width: 799px) {
#main #sidebar-first {
display: moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
width: 300px;
}
.ie7 #main #sidebar-first,
.ie8 #main #sidebar-first {
display: inline;
}
}
@media (max-width: 799px) {
#main #sidebar-first {
position: absolute;
top: 0;
left: 0;
width: 70%;
background-color: #A5A5A5;
z-index: 10;
transition: transform 0.5s ease-in-out;
transform: translateX(calc(-100% + 2em));
}
#main #sidebar-first #myList-nav ul {
overflow-y: hidden;
}
body.burger-sidebar-first-shown #main #sidebar-first {
transform: translateX(0);
}
body.burger-sidebar-first-shown #main #sidebar-first #myList-nav ul {
overflow-y: auto;
}
}
#main ul li.leaf {
list-style-image: none;
@@ -978,9 +1041,25 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
.not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center {
margin-left: 75px;
width: 550px;
padding-top: 20px;
box-sizing: border-box;
}
@media (min-width: 799px) {
.not-front.node-type-page #main #center,
.not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center {
width: calc(99% - 300px);
padding: 20px;
}
}
@media (max-width: 799px) {
.not-front.node-type-page #main #center,
.not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center {
width: 100%;
padding: 0.5em 3em;
}
}
.not-front.node-type-page #main #center #content p,
.not-front.node-type-temoignage #main #center #content p,
@@ -1876,7 +1955,7 @@ html.no-js body.front .item-list .pager li,
html.classic-nav body.front .item-list .pager li {
background-color: transparent;
color: #000;
border-left: 1px solid #000;
padding: 0 0.25em;
}
html.no-js body.front .item-list .pager li a,
html.classic-nav body.front .item-list .pager li a,
@@ -1896,7 +1975,6 @@ html.classic-nav body.front .item-list ul li {
margin-bottom: 1em;
padding-right: 1em;
padding-left: 0.5em;
border-left: 3px solid #A5A5A5;
}
html.no-js body.front .item-list li a,
html.classic-nav body.front .item-list li a,
@@ -1908,6 +1986,71 @@ html.no-js body.front .item-list ul li a:visited,
html.classic-nav body.front .item-list ul li a:visited {
color: #A5A5A5;
}
html.no-js body.front #home-performances-list,
html.classic-nav body.front #home-performances-list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: space-between;
}
html.no-js body.front #home-performances-list > li,
html.classic-nav body.front #home-performances-list > li {
padding: 0 0.5em 0.5em;
margin: 0.5em;
}
html.no-js body.front #home-performances-list > li.with-image,
html.classic-nav body.front #home-performances-list > li.with-image {
flex: 0 1 auto;
}
html.no-js body.front #home-performances-list > li.without-image,
html.classic-nav body.front #home-performances-list > li.without-image {
flex: 1 1 auto;
}
html.no-js body.front #home-performances-list > li h4,
html.classic-nav body.front #home-performances-list > li h4,
html.no-js body.front #home-performances-list > li h5,
html.classic-nav body.front #home-performances-list > li h5 {
max-width: 200px;
margin: 0.5em 0;
line-height: 1.1;
}
html.no-js body.front #home-performances-list > li h4 a,
html.classic-nav body.front #home-performances-list > li h4 a,
html.no-js body.front #home-performances-list > li h5 a,
html.classic-nav body.front #home-performances-list > li h5 a {
line-height: 1.1;
}
html.no-js body.front #home-performances-list > li .date > a,
html.classic-nav body.front #home-performances-list > li .date > a {
display: block;
}
html.no-js body.front #home-performances-list > li figure,
html.classic-nav body.front #home-performances-list > li figure {
display: inline-block;
position: relative;
}
html.no-js body.front #home-performances-list > li figure img.image,
html.classic-nav body.front #home-performances-list > li figure img.image {
max-width: 100%;
}
html.no-js body.front #home-performances-list > li figure img.blank,
html.classic-nav body.front #home-performances-list > li figure img.blank {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
html.no-js body.front #home-performances-list > li figure figcaption,
html.classic-nav body.front #home-performances-list > li figure figcaption {
display: none;
}
@media (max-width: 799px) {
html.no-js body.front #home-performances-list > li,
html.classic-nav body.front #home-performances-list > li {
flex: 0 0 auto;
}
}
html.no-js body.node-type-performance #main,
html.classic-nav body.node-type-performance #main {
background-color: #D3D3D3;
@@ -1944,6 +2087,24 @@ html.no-js body.node-type-performance #main,
html.classic-nav body.node-type-performance #main {
background-color: #F2F2F2;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field {
flex: 0 0 auto;
max-width: 45%;
margin: 0.5em;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images {
flex: 1 1 100%;
max-width: 100%;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title {
margin: 0;
@@ -1951,9 +2112,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 900;
font-size: 24px;
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-label,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-label {
@@ -1966,28 +2124,16 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-personne,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-personne {
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long {
width: 400px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item {
max-height: 300px;
overflow: auto;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
@@ -2006,25 +2152,17 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
font-size: 16px;
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images > .field-items,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images > .field-items {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item {
display: moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
margin: 0 1em 1em 0;
}
.ie7 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie7 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie8 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie8 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item {
display: inline;
flex: 1 0 auto;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance {
@@ -2032,9 +2170,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
font-size: 16px;
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre {
@@ -2042,15 +2177,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
font-size: 12px;
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation {
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1 {
@@ -2065,9 +2191,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video {
width: 400px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
@@ -2075,9 +2198,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document {
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
@@ -2085,9 +2205,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-objet,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-objet {
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
@@ -2096,25 +2213,15 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure {
position: relative;
height: auto!important;
margin: 0.5em;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption {
position: absolute;
right: 0;
bottom: 0;
width: 96%;
padding: 2%;
background-color: rgba(255, 255, 255, 0.8);
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
color: #000;
font-size: 10px;
max-width: 100%;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure .blank,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure .blank {
@@ -2124,13 +2231,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
width: 100%;
height: 100%;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure:hover figcaption,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure:hover figcaption {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > .field {
display: inline-block;
@@ -2145,17 +2245,6 @@ html.no-js body.node-type-performance #main #center #content .node.type-performa
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents {
display: block;
border: none;
border-top: 2px solid #e4e4e4;
margin-top: 1em;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-effectuations .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-effectuations .field-item .field,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor .field-item .field,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents .field-item .field {
display: inline-block;
vertical-align: top;
padding-left: 0.5em;
@@ -24,14 +24,18 @@ Drupal.behaviors.init_theme.attach = function (context) {
}
});
if(!$('body').is('.front') && !$('body').is('.node-type-performance')){
$('#main').jScrollPane({autoReinitialise:true, hijackInternalLinks:true});
}
// DON'T USE JSCROLLPANE FOR NORMAL PAGES ANYMORE
// if(!$('body').is('.front') && !$('body').is('.node-type-performance')){
// $('#main').jScrollPane({autoReinitialise:true, hijackInternalLinks:true});
// }
$('#block-menu-block-2 ul.menu').listnav({cookieName:'test', attribute:'nom'});
$('.burger-icon').click(function(){
$('body').toggleClass('burger-shown');
$('.burger-icon.header').click(function(){
$('body').toggleClass('burger-header-shown');
});
$('.burger-icon.sidebar-first').click(function(){
$('body').toggleClass('burger-sidebar-first-shown');
});
};
@@ -105,4 +105,5 @@ body>img{display: none;}
}
}
}
}
}
@@ -15,6 +15,7 @@ html, body{
position:relative;
width:100%; height:100%;
/* background-color: red;*/
overflow-y: hidden;
}
@@ -51,7 +52,7 @@ html, body{
ul.language-switcher-locale-url{
padding:0; margin:0;
li{padding-right:10px;}
li{padding-right:0;}
li.active{display:none;}
a{.fs-header;}
}
@@ -82,14 +83,14 @@ html, body{
/** RESPONSIVE */
@media (min-width:799px) {
#header .logo {
width:35%;
width:340px;
}
#header-blocks{
// background-color: blue;
width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px;
width:calc(100% - 340px); position:absolute; bottom:0; right:0; text-align: right; height:27px;
.region{
.inlineblock;
&:not(:first-child){ margin-left:1.1em; }
&:not(:first-child){ margin-left:0.5em; }
// don't know why but here display:inline; deosn't work on ie8 …
html.oldie &{float:left; margin-left:10px;}
}
@@ -139,7 +140,7 @@ html, body{
transition: transform 0.5s ease-in-out;
transform: translateX(150%);
body.burger-shown &{
body.burger-header-shown &{
transform: translateX(0);
}
}
@@ -155,6 +156,10 @@ html, body{
vertical-align: middle;
z-index: 20;
cursor: pointer;
&.sidebar-first{
background-color: @timeline-lighten-color;
// top:0; right: 0;
}
span {
display: block;
background: #000;
@@ -189,7 +194,8 @@ html, body{
margin-bottom: -2px;
}
body.burger-shown & {
body.burger-header-shown &.header,
body.burger-sidebar-first-shown &.sidebar-first {
span {
background: transparent;
}
@@ -231,16 +237,79 @@ html, body{
/** MAIN */
#main{
height:97%;
position: relative;
// overflow-x: hidden;
// overflow-y: auto;
// display: flex;
// flex-flow: column nowrap;
/** SIDEBAR FIRST */
#sidebar-first{
.inlineblock; width: 29%;
height: 99%;
// min-height: 75%;
overflow-x: hidden;
overflow-y: auto;
.block-menu-block{
&, &>.content{
height: 100%; // this is not working, why ?
}
}
#myList-nav{
max-height: 100%;
display: flex;
flex-flow: row nowrap;
>div{
flex:0 0 auto;
width: 1em;
.ln-letters{
margin: 0;
}
}
>ul{
flex:0 0 auto;
box-sizing: border-box;
width:calc(100% - 1em);
max-height: 100%;
padding-left: 2em;
padding-right: 2em;
overflow-x: hidden;
overflow-y: auto;
margin-top: 2em;
}
}
@media (min-width:799px) {
.inlineblock; width: 300px;
}
@media (max-width:799px) {
position: absolute;
top:0;
left: 0;
width:70%;
background-color: @timeline-lighten-color;
z-index: 10;
transition: transform 0.5s ease-in-out;
transform: translateX(calc(-100% + 2em));
#myList-nav ul{
overflow-y: hidden;
}
body.burger-sidebar-first-shown &{
transform: translateX(0);
#myList-nav ul{
overflow-y: auto;
}
}
}
}
ul li.leaf{
ul li.leaf{
list-style-image:none;
list-style-type: none;
font-size: 12px;
@@ -308,20 +377,23 @@ html, body{
.not-front.node-type-temoignage &,
.not-front.node-type-document-video &,
.not-front.node-type-biographie &{
margin-left:75px;
width:550px;
padding-top:20px;
#content{
p {font-size:12px; color:#000; line-height:1.4;}
a{text-decoration:none; font-size:12px;}
a:visited{font-weight:700}
a:hover{font-weight:700}
a:active{font-weight:700}
box-sizing: border-box;
@media (min-width:799px) {
// margin-left:75px;
width:calc(99% - 300px);
padding:20px;
}
@media (max-width:799px) {
width: 100%;
padding:0.5em 3em;
}
#content{
p {font-size:12px; color:#000; line-height:1.4;}
a{text-decoration:none; font-size:12px;}
a:visited{font-weight:700}
a:hover{font-weight:700}
a:active{font-weight:700}
}
}
}
@@ -752,13 +824,13 @@ html.no-js, html.classic-nav{
body.front{
.generale-design;
.item-list {
.pager li{
background-color:transparent;
a,a:visited{color:#000;}
color:#000;
border-left:1px solid #000;
// border-left:1px solid #000;
padding: 0 0.25em;
}
li, ul li {
a,a:visited{color:#A5A5A5;}
@@ -770,11 +842,59 @@ html.no-js, html.classic-nav{
margin-bottom:1em;
padding-right:1em;
padding-left:0.5em;
border-left:3px solid #A5A5A5;
// border-left:3px solid #A5A5A5;
}
}
#home-performances-list{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: space-between;
>li{
&.with-image{
flex: 0 1 auto;
}
&.without-image{
flex: 1 1 auto;
}
padding:0 0.5em 0.5em;
margin: 0.5em;
h4, h5{
max-width: 200px;
margin: 0.5em 0; line-height: 1.1;
a{line-height: 1.1;}
}
.date > a{
display: block;
}
figure{
display: inline-block;
position: relative;
img.image{
max-width: 100%;
}
img.blank{
position: absolute;
top:0; left:0;
width:100%; height:100%;
}
figcaption{
display: none;
}
}
}
@media (max-width:799px) {
>li{
flex: 0 0 auto;
}
}
}
}
//FICHES PERFORMANCE//
@@ -786,7 +906,21 @@ html.no-js, html.classic-nav{
#center #content {
.node.type-performance>.content{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
>section.field{
// outline: 1px solid #036;
flex:0 0 auto;
max-width: 45%;
margin:0.5em;
&.field-name-field-images{
flex: 1 1 100%;
max-width: 100%;
}
}
.bordered-block(){
display: inline-block;
vertical-align: top;
@@ -800,32 +934,32 @@ html.no-js, html.classic-nav{
display:block; border:none;
}
@cel:100px;
@padd:0;
.cel(@n){
width:(@cel* @n) - @padd*2;
/* background-color:rgba(255,0,0,0.1);*/
padding:@padd;
//.bl(1px, rgba(255,0,0,0.1));
}
// @cel:100px;
// @padd:0;
// .cel(@n){
// width:(@cel* @n) - @padd*2;
// /* background-color:rgba(255,0,0,0.1);*/
// padding:@padd;
// //.bl(1px, rgba(255,0,0,0.1));
// }
h1.node-title{
.m(0);
.fs-perfnode-title;
.cel(3);
// .cel(3);
}
.field-label{.fs-perfnode-label; color:@timeline-lighten-color;}
.field-personne{
.cel(2);
// .cel(2);
.fs-perfnode-personne;
}
.field-type-textauthor, .field-type-text-long{
.cel(4);
// .cel(4);
.field-item{
max-height:@cel*3;
// max-height:@cel*3;
overflow:auto;
// article, address, p{
.fs-personne-texte;
@@ -836,57 +970,70 @@ html.no-js, html.classic-nav{
}
.field-name-field-serie{
.fs-perfnode-serie;
.cel(3);
// .cel(3);
}
.field-name-field-images{
>.field-items{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
}
.field-item{
.inlineblock; margin:0 1em 1em 0;
// .inlineblock; margin:0 1em 1em 0;
flex:1 0 auto;
// max-width: 33%;
}
}
.field-name-field-type-de-performance{
.fs-perfnode-serie;
.cel(3);
// .cel(3);
}
.field-name-field-tags-libre{
.fs-personne-texte;
.cel(2);
// .cel(2);
}
.node-effectuation{
.cel(2);
// .cel(2);
h1{.m(0);}
.field-item{.fs-perfnode-serie;}
}
.node-document-video{
.cel(4);
// .cel(4);
.fs-personne-texte;
}
.node-document{
.cel(3);
// .cel(3);
.fs-personne-texte;
}
.node-objet{
.cel(3);
// .cel(3);
.fs-personne-texte;
}
figure{
position: relative;
// width:auto!important;
height: auto!important;
margin: 0.5em;
figcaption{
position:absolute; right:0; bottom:0;
width:96%; padding:2%;
// position:absolute; right:0; bottom:0;
// width:96%; padding:2%;
background-color: rgba(255,255,255,0.8);
.opacity(0); .transition(opacity, 0.5s, ease-out);
color:#000; .10;
// .opacity(0); .transition(opacity, 0.5s, ease-out);
color:#000;
.10;
max-width: 100%;
}
.blank{ position:absolute; top:0; left:0; width:100%; height:100%;}
&:hover{figcaption{.opacity(1);}}
// &:hover{figcaption{.opacity(1);}}
}
>.field{
@@ -896,14 +1043,15 @@ html.no-js, html.classic-nav{
.field-name-field-effectuations,
.field-name-field-documents-sonor,
.field-name-field-documents{
.non-bordered;
border-top: 2px solid #e4e4e4;
margin-top:1em;
.field-item{
.field{
.bordered-block;
}
}
.bordered-block;
// .non-bordered;
// border-top: 2px solid #e4e4e4;
// margin-top:1em;
// .field-item{
// .field{
// .bordered-block;
// }
// }
}
.field-name-field-effectuations{
@@ -927,16 +1075,15 @@ html.no-js, html.classic-nav{
}
//EFFECTUATIONS, DOCUMENTS, OBJETS, ETC.//
body.node-type-document, .node-type-document-sonor, .node-type-object, .page-taxonomy-term {
.generale-design;
#center #content {
width: 720px;
img {margin:1em 0 1em 0;}
figure {position:relative;}
img.blank{position:absolute; top:0; left:0;}
figcaption {font-weight: 300; font-size:11px; width:250px; margin-bottom:1em; }
font-size:12px;
}
}
//EFFECTUATIONS, DOCUMENTS, OBJETS, ETC.//
body.node-type-document, .node-type-document-sonor, .node-type-object, .page-taxonomy-term {
.generale-design;
#center #content {
width: 720px;
img {margin:1em 0 1em 0;}
figure {position:relative;}
img.blank{position:absolute; top:0; left:0;}
figcaption {font-weight: 300; font-size:11px; width:250px; margin-bottom:1em; }
font-size:12px;
}
}
@@ -76,7 +76,7 @@
</hgroup>
<?php if ($page['headerblock_left'] || $page['headerblock_middle'] || $page['headerblock_right']): ?>
<div class="burger-icon"><span/></div>
<div class="burger-icon header"><span/></div>
<div id="header-blocks">
<?php print render($page['headerblock_left']); ?>
<?php print render($page['headerblock_middle']); ?>
@@ -0,0 +1,34 @@
<?php
/**
* @file
* Default theme implementation to display a region.
*
* Available variables:
* - $content: The content for this region, typically blocks.
* - $classes: String of classes that can be used to style contextually through
* CSS. It can be manipulated through the variable $classes_array from
* preprocess functions. The default values can be one or more of the following:
* - region: The current template type, i.e., "theming hook".
* - region-[name]: The name of the region with underscores replaced with
* dashes. For example, the page_top region would have a region-page-top class.
* - $region: The name of the region variable as defined in the theme's .info file.
*
* Helper variables:
* - $classes_array: Array of html class attribute values. It is flattened
* into a string within the variable $classes.
* - $is_admin: Flags true when the current user is an administrator.
* - $is_front: Flags true when presented in the front page.
* - $logged_in: Flags true when the current user is a logged-in member.
*
* @see template_preprocess()
* @see template_preprocess_region()
* @see template_process()
*/
?>
<?php if ($content): ?>
<section class="<?php print $classes; ?>"<?php print $attributes; ?>>
<div class="burger-icon sidebar-first"><span/></div>
<?php print $content; ?>
</section>
<?php endif; ?>