Responsive style

This commit is contained in:
Guillaume Ayoub 2017-09-22 17:54:04 +02:00
parent 96886e2206
commit 1330c32121
2 changed files with 27 additions and 5 deletions

View File

@ -56,7 +56,9 @@ body
header
background: $header
box-sizing: border-box
order: 1
padding: 0 1em
nav
align-items: center
@ -67,9 +69,10 @@ nav
ul
display: flex
flex-wrap: wrap
list-style: none
margin: 0
padding-left: 0
padding: 0 calc(4em + 50px)
li
&:first-child
@ -79,7 +82,6 @@ nav
position: absolute
top: 10px
a
color: $text
display: block
@ -91,16 +93,20 @@ nav
color: $action-secondary
main
box-sizing: border-box
flex-grow: 1
margin: 1em auto 0
max-width: 1200px
order: 3
padding: 0 1em
width: 100%
footer
background: $header
box-sizing: border-box
margin-top: 2em
order: 4
padding: 0 1em
ul
display: flex
@ -178,3 +184,8 @@ time
h2
font-size: 1.2em
font-weight: 600
@media screen and (max-width: 640px)
#planet main, #emplois main, #index-news
article
flex: 1 100%

View File

@ -49,7 +49,9 @@ body {
header {
background: #1d1e23;
order: 1; }
box-sizing: border-box;
order: 1;
padding: 0 1em; }
nav {
align-items: center;
@ -59,9 +61,10 @@ nav {
order: 0; }
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding-left: 0; }
padding: 0 calc(4em + 50px); }
nav ul li:first-child a::before {
content: url(../images/logo.svg);
left: 3em;
@ -77,16 +80,20 @@ nav {
color: #ffcd05; }
main {
box-sizing: border-box;
flex-grow: 1;
margin: 1em auto 0;
max-width: 1200px;
order: 3;
padding: 0 1em;
width: 100%; }
footer {
background: #1d1e23;
box-sizing: border-box;
margin-top: 2em;
order: 4; }
order: 4;
padding: 0 1em; }
footer ul {
display: flex;
justify-content: center;
@ -154,4 +161,8 @@ time {
font-size: 1.2em;
font-weight: 600; }
@media screen and (max-width: 640px) {
#planet main article, #emplois main article, #index-news article {
flex: 1 100%; } }
/*# sourceMappingURL=../static/css/style.sass.css.map */