Commit 8673b4dd authored by Julie Blanc's avatar Julie Blanc
Browse files

header des parties / responsive

parent 7c225a42
......@@ -16,6 +16,7 @@ layout: microtypo
<figcaption>{{ page.legende_image }}</figcaption>
</figure>
</header>
<button id="link-notices"><a href="#liste-notices">Voir les notices ↓</a></button>
<section id="main-content">
{{ content }}
</section>
......
......@@ -6,7 +6,9 @@ body {
body {
color: #333333;
font-size: 24px;
line-height: 30px; }
line-height: 30px;
width: 100vw;
overflow-x: hidden; }
.fixed-position {
height: 100vh !important;
......@@ -450,10 +452,11 @@ figcaption {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
z-index: 10; }
#header-catalogue figure img {
width: 100%;
height: 100%;
height: 140%;
object-fit: cover;
object-position: top center; }
#header-catalogue .icon-scroll {
......@@ -479,9 +482,9 @@ figcaption {
height: 100vh;
top: 0; }
#header-catalogue figure img {
width: 200%;
height: 200%;
object-position: top right; }
width: 100%;
height: 180%;
object-position: top center; }
#header-catalogue .collection {
max-width: 200px;
position: absolute;
......@@ -963,9 +966,14 @@ figcaption {
font-family: "Lato";
font-size: 18px;
line-height: 22px;
font-weight: 400; }
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100vw - 450px - 60px); }
#section-navigation #nav-chemin ul li {
display: inline-block; }
display: inline-block;
white-space: nowrap; }
#section-navigation #nav-chemin ul li:after {
content: "▶";
font-size: 12px;
......@@ -978,7 +986,8 @@ figcaption {
font-size: 18px;
line-height: 22px;
font-weight: 400;
height: 100%; }
height: 100%;
white-space: nowrap; }
#section-navigation #nav-parties ul li {
display: inline-flex;
-webkit-box-pack: justify;
......@@ -1036,12 +1045,14 @@ input#open-menu, input#close-menu {
display: none; }
@media (max-width: 1026px) {
#nav-chemin ul, #nav-parties .nav-partie {
display: none !important; }
#section-images, #content-notice {
#nav-chemin ul {
max-width: calc(100vw - 170px - 60px) !important; }
#nav-parties .nav-partie {
display: none !important; } }
@media (max-width: 700px) {
#nav-chemin ul, #nav-parties .nav-partie {
display: none !important; }
#main-header {
position: fixed;
top: 0;
......@@ -1186,24 +1197,107 @@ input#open-menu, input#close-menu {
font-weight: 400; } }
#main-chapitre header {
height: 400px;
background-color: #f2f2ea;
position: relative;
border-bottom: 1px solid #DEDED7;
/* hgroup */ }
#main-chapitre header figure {
width: 400px;
#main-chapitre header hgroup h1 {
text-transform: uppercase; }
#main-chapitre header hgroup h1 small {
display: block;
text-transform: initial;
border-left: 1px solid currentColor;
padding-left: 12px; }
#main-chapitre header button {
font-family: "Lato";
font-size: 14px;
line-height: 18px;
font-weight: 400;
position: absolute;
bottom: 25px;
right: 50px;
background-color: #f2f2ea; }
@media (min-width: 700px) {
#main-chapitre header {
height: 400px;
/* hgroup */ }
#main-chapitre header figure {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 0; }
#main-chapitre header figure img {
width: 100%;
height: 100%; }
#main-chapitre header hgroup {
margin-left: 400px;
padding: 50px;
height: 100%;
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: space-between; }
#main-chapitre header hgroup h1 {
height: 100%;
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: space-between;
margin-bottom: 12px; }
#main-chapitre header hgroup h1 small {
margin-bottom: 30px;
font-family: "Lato";
font-size: 18px;
line-height: 22px;
font-weight: 400;
line-height: 32px; }
#link-notices {
border-top: 1px solid #DEDED7;
border-left: 1px solid #DEDED7;
border-bottom: 1px solid #DEDED7;
background-color: #f2f2ea;
color: #8F8F8A;
font-family: "Lato";
font-size: 14px;
line-height: 18px;
font-weight: 400;
padding: 0 12px;
height: 30px;
position: absolute;
top: 0;
left: 0; }
#main-chapitre header figure img {
width: 100%;
height: 100%; }
#main-chapitre header hgroup {
margin-left: 400px;
padding: 50px;
height: 100%;
right: 0;
top: 430px; } }
@media (max-width: 700px) {
#main-chapitre header {
height: calc(100vh - 60px);
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
......@@ -1220,58 +1314,115 @@ input#open-menu, input#close-menu {
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: space-between; }
#main-chapitre header hgroup h1 {
justify-content: stretch; }
#main-chapitre header figure {
-webkit-box-ordinal-group: 1;
/* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1;
/* OLD - Firefox 19- */
-ms-flex-order: 1;
/* TWEENER - IE 10 */
-webkit-order: 1;
/* NEW - Chrome */
order: 1;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-grow: 1;
width: 100%;
height: 100%;
display: -webkit-box;
overflow: hidden; }
#main-chapitre header figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center; }
#main-chapitre header hgroup {
-webkit-box-ordinal-group: 2;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
-moz-box-ordinal-group: 2;
/* OLD - Firefox 19- */
-ms-flex-order: 2;
/* TWEENER - IE 10 */
display: -webkit-flex;
-webkit-order: 2;
/* NEW - Chrome */
display: flex;
order: 2;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: space-between;
font-family: "Belleza";
font-weight: 200;
font-size: 60px;
line-height: 60px;
text-transform: uppercase;
margin-bottom: 12px; }
#main-chapitre header hgroup h1 small {
display: block;
max-width: 90px;
text-transform: initial;
font-family: "Lato";
font-size: 18px;
line-height: 22px;
font-weight: 400;
line-height: 32px;
margin-bottom: 30px;
border-left: 1px solid currentColor;
text-align: center; }
#main-chapitre header hgroup h2 {
font-family: "Belleza";
font-weight: 200;
font-size: 48px;
line-height: 48px; }
#main-chapitre header button {
padding: 20px; }
#main-chapitre header hgroup h1 {
font-family: "Belleza";
font-weight: 200;
font-size: 32px;
line-height: 32px; }
#main-chapitre header hgroup h1 small {
font-family: "Lato";
font-size: 14px;
line-height: 18px;
font-weight: 400;
line-height: 26px;
margin-top: 12px;
margin-bottom: 60px; }
#main-chapitre header hgroup h2 {
font-family: "Belleza";
font-weight: 200;
font-size: 24px;
line-height: 24px;
padding-top: 6px;
padding-bottom: 24px; }
#link-notices {
width: 100vw;
height: 60px;
background-color: #f2f2ea;
border-bottom: 1px solid #DEDED7;
color: #8F8F8A;
font-family: "Lato";
font-size: 14px;
line-height: 18px;
font-weight: 400;
position: absolute;
bottom: 25px;
right: 50px;
background-color: #f2f2ea; }
padding: 20px; } }
@media screen and (min-width: 900px) and (max-width: 1100px) {
#main-chapitre header h1 {
font-family: "Belleza";
font-weight: 200;
font-size: 48px;
line-height: 48px; }
#main-chapitre header h2 {
font-family: "Belleza";
font-weight: 200;
font-size: 32px;
line-height: 32px; } }
@media screen and (min-width: 1100px) {
#main-chapitre header h1 {
font-family: "Belleza";
font-weight: 200;
font-size: 60px;
line-height: 60px; }
#main-chapitre header h2 {
font-family: "Belleza";
font-weight: 200;
font-size: 48px;
line-height: 48px; } }
@media screen and (min-width: 700px) and (max-width: 900px) {
#main-chapitre header {
height: 300px; }
#main-chapitre header hgroup {
margin-left: 300px;
padding: 24px; }
#main-chapitre header hgroup h1 {
font-family: "Belleza";
font-weight: 200;
font-size: 32px;
line-height: 32px; }
#main-chapitre header hgroup h2 {
font-family: "Belleza";
font-weight: 200;
font-size: 24px;
line-height: 24px;
margin-bottom: 24px; }
#main-chapitre header figure {
width: 300px;
height: 300px; } }
#main-chapitre {
margin-top: 60px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment