Responsive style
This commit is contained in:
parent
96886e2206
commit
1330c32121
|
@ -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%
|
||||
|
|
|
@ -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 */
|
Loading…
Reference in New Issue
Block a user