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

header: make the header even narrower on mobile

Browse source 
This ensures that the help button is displayed on mobile devices.
This commit is contained in:
Pierre de La Morinerie 2019-03-13 16:24:18 +00:00
parent 69580288a4
commit 20bff93f0d
5 changed files with 25 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/images/header/logo-ds-narrow.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Before After
Before After

1
app/assets/images/header/logo-ds-wide.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

2
app/assets/images/header/logo-ds.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Before After
Before After

37
app/assets/stylesheets/new_design/new_header.scss
View file

@ -3,7 +3,8 @@
@import "constants";
@import "mixins";
$landing-breakpoint: 1040px;
$header-landing-breakpoint: 1040px;
$header-mobile-breakpoint: 550px;
// FIXME: Rename when the header is generalized
.new-header {
@ -23,24 +24,28 @@ $landing-breakpoint: 1040px;
.header-logo {
display: inline-block;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.header-logo-wide {
margin-right: 4 * $default-spacer;
// Logo large
background-image: url("/assets/header/logo-ds-wide.svg");
width: 360px;
margin-right: 4 * $default-spacer;
// Logo normal
@media (max-width: $header-landing-breakpoint) {
background-image: url("/assets/header/logo-ds.svg");
width: 132px;
margin-right: $default-spacer;
}
.header-logo-narrow {
display: none;
}
@media (max-width: $landing-breakpoint) {
.header-logo-wide {
display: none;
}
.header-logo-narrow {
display: inline;
margin-right: 0;
}
// Logo narrow
@media (max-width: $header-mobile-breakpoint) {
background-image: url("/assets/header/logo-ds-narrow.svg");
width: 32px;
margin-right: 0;
}
}