all interface is now responsive
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user