Commit 9d0b1966 authored by Adèle's avatar Adèle
Browse files

Responsive header - animated burger menu

parent 6c09cacd
</
......@@ -23,6 +23,7 @@ body {
margin: 0;
padding: 0;
text-align: left;
position: relative;
}
/* Headings */
......@@ -177,47 +178,56 @@ Header
}
#headerContainer {
width: 60%;
margin: 0 auto 2em;
padding: 30px 0;
position: relative;
height: 50px;
width: 1140px;
margin: auto;
padding: 20px 0;
font-size: 14px;
display: table;
position: relative;
z-index: 100;
}
#banner #logo {
display: inline-block;
margin-right: 20px;
position: absolute;
vertical-align: middle;
display: table-cell;
}
#banner #logo img {
width: 230px;
#banner #logo a {
width:230px;
height: 77px;
display: block;
content: " ";
background-image: url(../images/logo_blc.png);
background-size: 230px auto;
background-repeat: no-repeat;
background-position: center;
}
/* Main Nav */
#banner nav {
display: inline-block;
display: table-cell;
background: #000305;
font-size: 1.2em;
height: 40px;
line-height: 30px;
margin: 0 ;
padding: 0;
text-align: center;
width: 750px;
position: absolute;
right: 0;
top: 50%;
text-align: right;
vertical-align: middle;
}
#banner nav ul {list-style: none; margin: 0 auto; width: 840px;}
#banner nav li {float: left; display: inline; margin: 0 5px;}
#banner nav ul {
list-style: none;
margin: 0;
}
#banner nav li {
display: inline;
margin: 0 5px;
}
#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 1em;
font-family: Lato;
text-decoration: none;
......@@ -232,21 +242,130 @@ Header
text-shadow: none !important;
}
#banner nav li a.icon {
display: inline-block;
#banner nav li.icon a {
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
height: 18px;
vertical-align: middle;
}
#banner nav li a#twitter {
#banner nav li#twitter a {
background-image: url(../images/twitter.png);
}
#banner nav li a#rss {
#banner nav li#rss a {
background-image: url(../images/rss.png);
}
#burger {
display: table-cell;
text-align: right;
}
.cacheMenu {
position: absolute;
top: 84px;
bottom: 0;
left: 0;
right: 0;
content: " ";
background-color: rgba(0,0,0,.5);
display: none;
}
#burger ul {
display: inline-block;
margin-right: 30px;
}
#burger li {
content: " ";
background-color: #FFF;
width: 30px;
height: 4px;
display: block;
margin-bottom: 6px;
}
/* Responsive header */
@media screen and (min-width: 1141px){
#burger {
display: none;
}
}
@media screen and (max-width: 1140px){
#banner #logo {
padding-left: 25px;
}
#banner #logo a {
width:155px;
height: 32px;
background-image: url(../images/logo_blc_small.png);
background-size: 153px auto;
}
#headerContainer {
width: 100%;
}
#banner nav {
position: absolute;
top: 80px;
width: 300px;
right: -300px;
-webkit-transition: right .5s; /* Safari */
transition: right .5s;
}
#banner nav.opened {
right: 0;
-webkit-transition: right .5s; /* Safari */
transition: right .5s;
}
#banner nav li {
display: block;
padding: 20px 1em;
border-bottom: 1px solid #FFF;
text-align: left;
}
#banner nav li:first-child {
border-top: 1px solid #FFF;
}
#banner nav li.icon {
display: inline-block;
border-bottom: none;
float: left;
}
#banner nav li.icon a{
display: inline;
background-position: left;
padding-left: 30px;
}
#banner nav li#twitter a {
content: "Twitter";
}
#banner nav li#rss a {
content: "rss";
font-size: 24px;
}
#banner nav li a {
display: block;
width: 100%;
font-size: 22px;
font-weight: bold;
}
#banner nav .active a:link, #banner nav .active a:visited {
border: none;
font-weight: bold;
text-decoration: underline;
}
}
/*
Side navigation
......@@ -366,14 +485,14 @@ Body
Home page
*****************/
//#content-home section.titre {
// background-image: url(../images/pessin2.png);
// background-repeat: no-repeat;
// background-position: right top;
// background-size: 50%;
// padding-bottom: 200px;
// margin-bottom: -40px;
//}
#content-home section.titre {
background-image: url(../images/pessin2.png);
background-repeat: no-repeat;
background-position: right top;
background-size: 50%;
padding-bottom: 200px;
margin-bottom: -40px;
}
#content-home h1 {
font-size: 56px;
......@@ -766,534 +885,4 @@ li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
margin-bottom: 20px;
}
.show {
display: block; }
.hide,
.hidden {
display: none; }
.invisible {
visibility: hidden; }
.left {
float: left; }
.right {
float: right; }
.clearfix:before, .clearfix:after {
display: table;
content: " "; }
.clearfix:after {
clear: both; }
.text-left {
text-align: left; }
.text-right {
text-align: right; }
.center {
text-align: center; }
ul.list-inline {
list-style: none;
padding-left: 0;
margin: 0 0 0 -5px; }
ul.list-inline > li {
display: inline-block;
padding: 0 5px 0 5px; }
*, *:before, *:after {
box-sizing: border-box; }
.container {
max-width: 64rem;
width: 94%;
margin: 0 auto; }
@media all and (min-width: 40em) {
.container {
width: 100%;
padding: 0 1rem; } }
@media all and (min-width: 40em) {
.col1of1 {
float: left;
width: 100%; } }
@media all and (min-width: 40em) {
.col1of2 {
float: left;
width: 50%; } }
@media all and (min-width: 40em) {
.col1of3 {
float: left;
width: 33.33333%; } }
@media all and (min-width: 40em) {
.col2of3 {
float: left;
width: 66.66667%; } }
@media all and (min-width: 40em) {
.col1of4 {
float: left;
width: 25%; } }
@media all and (min-width: 40em) {
.col3of4 {
float: left;
width: 75%; } }
@media all and (min-width: 40em) {
.col1of5 {
float: left;
width: 20%; } }
@media all and (min-width: 40em) {
.col2of5 {
float: left;
width: 40%; } }
@media all and (min-width: 40em) {
.col3of5 {
float: left;
width: 60%; } }
@media all and (min-width: 40em) {
.col4of5 {
float: left;
width: 80%; } }
@media all and (min-width: 40em) {
.col1of6 {
float: left;
width: 16.66667%; } }
@media all and (min-width: 40em) {
.col5of6 {
float: left;
width: 83.33333%; } }
.row1 {
min-height: 2.5rem; }
@media all and (min-width: 40em) {
.row1 {
height: 2.5rem; } }
.row2 {
min-height: 5rem; }
@media all and (min-width: 40em) {
.row2 {
height: 5rem; } }
.row3 {
min-height: 7.5rem; }
@media all and (min-width: 40em) {
.row3 {
height: 7.5rem; } }
.row4 {
min-height: 10rem; }
@media all and (min-width: 40em) {
.row4 {
height: 10rem; } }
.row5 {
min-height: 12.5rem; }
@media all and (min-width: 40em) {
.row5 {
height: 12.5rem; } }
.row6 {
min-height: 15rem; }
@media all and (min-width: 40em) {
.row6 {
height: 15rem; } }
.row7 {
min-height: 17.5rem; }
@media all and (min-width: 40em) {
.row7 {
height: 17.5rem; } }
.row8 {
min-height: 20rem; }
@media all and (min-width: 40em) {
.row8 {
height: 20rem; } }
.row9 {
min-height: 22.5rem; }
@media all and (min-width: 40em) {
.row9 {
height: 22.5rem; } }
.row10 {
min-height: 25rem; }
@media all and (min-width: 40em) {
.row10 {
height: 25rem; } }
.row11 {
min-height: 27.5rem; }
@media all and (min-width: 40em) {
.row11 {
height: 27.5rem; } }
.row12 {
min-height: 30rem; }
@media all and (min-width: 40em) {
.row12 {
height: 30rem; } }
.row13 {
min-height: 32.5rem; }
@media all and (min-width: 40em) {
.row13 {
height: 32.5rem; } }
.row14 {
min-height: 35rem; }
@media all and (min-width: 40em) {
.row14 {
height: 35rem; } }
.row15 {
min-height: 37.5rem; }
@media all and (min-width: 40em) {
.row15 {
height: 37.5rem; } }
.row16 {
min-height: 40rem; }
@media all and (min-width: 40em) {
.row16 {
height: 40rem; } }
@media all and (min-width: 40em) {
.pre1of1 {
margin-left: 100%; } }
@media all and (min-width: 40em) {
.pre1of2 {
margin-left: 50%; } }
@media all and (min-width: 40em) {
.pre2of2 {
margin-left: 100%; } }
@media all and (min-width: 40em) {
.pre1of3 {
margin-left: 33.33333%; } }
@media all and (min-width: 40em) {
.pre2of3 {
margin-left: 66.66667%; } }
@media all and (min-width: 40em) {
.pre3of3 {
margin-left: 100%; } }
@media all and (min-width: 40em) {
.pre1of4 {
margin-left: 25%; } }
@media all and (min-width: 40em) {
.pre2of4 {
margin-left: 50%; } }
@media all and (min-width: 40em) {
.pre3of4 {
margin-left: 75%; } }
@media all and (min-width: 40em) {
.pre4of4 {
margin-left: 100%; } }
@media all and (min-width: 40em) {
.pre1of5 {
margin-left: 20%; } }
@media all and (min-width: 40em) {
.pre2of5 {
margin-left: 40%; } }
@media all and (min-width: 40em) {
.pre3of5 {
margin-left: 60%; } }
@media all and (min-width: 40em) {
.pre4of5 {
margin-left: 80%; } }
@media all and (min-width: 40em) {
.pre5of5 {
margin-left: 100%; } }
@media all and (min-width: 40em) {
.pre1of6 {
margin-left: 16.66667%; } }
@media all and (min-width: 40em) {
.pre2of6 {
margin-left: 33.33333%; } }
@media all and (min-width: 40em) {
.pre3of6 {
margin-left: 50%; } }
@media all and (min-width: 40em) {
.pre4of6 {
margin-left: 66.66667%; } }
@media all and (min-width: 40em) {
.pre5of6 {
margin-left: 83.33333%; } }
@media all and (min-width: 40em) {
.pre6of6 {
margin-left: 100%; } }
@media all and (min-width: 40em) {
.post1of1 {
margin-right: 100%; } }
@media all and (min-width: 40em) {
.post1of2 {
margin-right: 50%; } }
@media all and (min-width: 40em) {
.post2of2 {
margin-right: 100%; } }
@media all and (min-width: 40em) {
.post1of3 {
margin-right: 33.33333%; } }
@media all and (min-width: 40em) {
.post2of3 {
margin-right: 66.66667%; } }
@media all and (min-width: 40em) {
.post3of3 {
margin-right: 100%; } }
@media all and (min-width: 40em) {
.post1of4 {
margin-right: 25%; } }
@media all and (min-width: 40em) {
.post2of4 {
margin-right: 50%; } }
@media all and (min-width: 40em) {
.post3of4 {
margin-right: 75%; } }
@media all and (min-width: 40em) {
.post4of4 {
margin-right: 100%; } }
@media all and (min-width: 40em) {
.post1of5 {
margin-right: 20%; } }
@media all and (min-width: 40em) {
.post2of5 {
margin-right: 40%; } }
@media all and (min-width: 40em) {
.post3of5 {
margin-right: 60%; } }
@media all and (min-width: 40em) {
.post4of5 {
margin-right: 80%; } }
@media all and (min-width: 40em) {
.post5of5 {
margin-right: 100%; } }
@media all and (min-width: 40em) {
.post1of6 {
margin-right: 16.66667%; } }
@media all and (min-width: 40em) {
.post2of6 {
margin-right: 33.33333%; } }
@media all and (min-width: 40em) {
.post3of6 {
margin-right: 50%; } }
@media all and (min-width: 40em) {
.post4of6 {
margin-right: 66.66667%; } }
@media all and (min-width: 40em) {
.post5of6 {
margin-right: 83.33333%; } }
@media all and (min-width: 40em) {
.post6of6 {
margin-right: 100%; } }
.m0 {
margin: 0; }
.m0x {