DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

stylesheet: refactor the two-columns layout with adaptative margins

Browse source 
This allow to break to the single-column layout later, and thus to
display the two-columns variant of the layout on narrower screens.
This commit is contained in:
Pierre de La Morinerie 2019-03-14 16:39:25 +01:00
parent 5a0fd84e98
commit ce2df5cd25
2 changed files with 4 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/new_design/_constants.scss
View file

@ -6,7 +6,7 @@ $default-padding: 2 * $default-spacer;
// layouts
$two-columns-padding: 60px;
$two-columns-breakpoint: $page-width + (2 * $default-padding);
$two-columns-breakpoint: 980px;
// z-order
$alert-z-index: 100;

15
app/assets/stylesheets/new_design/layouts.scss
View file

@ -17,26 +17,17 @@
@media (min-width: $two-columns-breakpoint) {
flex-direction: row;
align-items: stretch;
justify-content: center;
justify-content: space-between;
}
}
.column {
padding: $two-columns-padding 0 0;
padding: $two-columns-padding 0 $two-columns-padding 0;
width: 100%;
max-width: 500px;
@media (min-width: $two-columns-breakpoint) {
padding: $two-columns-padding;
width: 50%;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
width: 45%;
}
}
}