entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

style: make header responsive for even smaller widths (#28648)

This commit is contained in:
Frédéric Péters 2018-12-05 17:30:48 +01:00
parent 51f06b22ae
commit bf9719ecab
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
gadjo/static/css/gadjo.scss
View File

@ -199,7 +199,10 @@ div#header h1 {
overflow: hidden;
text-overflow: ellipsis;
@include vendor-prefix('transition', 'all ease 200ms');
@media screen and (max-width: $mobile-limit) {
width: 100%;
max-width: calc(100% - #{$sidepage-icon-width} - 21px);
}
a {
opacity: 0.8;
color: inherit;
@ -241,6 +244,14 @@ div#header h1 {
border: 1px solid white;
border-width: 2px 2px 0 0;
}
@media screen and (max-width: $mobile-limit) {
a {
display: none;
}
a:first-child {
display: inline-block;
}
}
}
}
@ -251,6 +262,12 @@ body[data-environment-label] div#header {
h1 {
// + picture width
padding-left: $sidepage-width + $sidepage-left-space + 70px;
@media screen and (max-width: $mobile-limit) {
max-width: calc(100% - 60px);
}
@media screen and (max-width: 380px) {
display: none;
}
}
}