responcive: better header

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-19 21:38:28 +01:00
parent 8cb32b1b48
commit 4d1299387a
3 changed files with 84 additions and 18 deletions

View File

@ -19352,16 +19352,20 @@ header[role="banner"] {
header[role="banner"] #block-sitebranding h1 { header[role="banner"] #block-sitebranding h1 {
margin: 0; margin: 0;
line-height: 1; } line-height: 1; }
@media (max-width: 436px) { header[role="banner"] #block-sitebranding .slogan {
header[role="banner"] #block-sitebranding .slogan { font-size: 0.882em;
display: none; } } display: block;
white-space: nowrap; }
@media (max-width: 436px) {
header[role="banner"] #block-sitebranding .slogan {
display: none; } }
header[role="banner"] #block-socialmedialinks { header[role="banner"] #block-socialmedialinks {
padding-right: 0.5em; padding-right: 0.5em;
border-right: 1px solid #1A1A1A; border-right: 1px solid #1A1A1A;
margin-right: 0.5em; } margin-right: 0.5em; }
header[role="banner"] #block-socialmedialinks li { header[role="banner"] #block-socialmedialinks li {
padding: 0; } padding: 0; }
@media (max-width: 654px) { @media (max-width: 872px) {
header[role="banner"] #block-socialmedialinks { header[role="banner"] #block-socialmedialinks {
display: none; } } display: none; } }
header[role="banner"] #block-userlogin { header[role="banner"] #block-userlogin {
@ -19439,7 +19443,7 @@ header[role="banner"] {
padding-top: 0.06em; } padding-top: 0.06em; }
header[role="banner"] #user-tools a.mdi-account { header[role="banner"] #user-tools a.mdi-account {
cursor: pointer; } cursor: pointer; }
@media (max-width: 654px) { @media (max-width: 1090px) {
header[role="banner"] #user-tools a.mdi-account span { header[role="banner"] #user-tools a.mdi-account span {
display: none; } } display: none; } }
header[role="banner"] #user-tools .mdi-logout::before { header[role="banner"] #user-tools .mdi-logout::before {
@ -19456,7 +19460,7 @@ header[role="banner"] {
cursor: pointer; } cursor: pointer; }
header[role="banner"] #user-flags h2:before { header[role="banner"] #user-flags h2:before {
padding-right: 0.2em; } padding-right: 0.2em; }
@media (max-width: 654px) { @media (max-width: 1090px) {
header[role="banner"] #user-flags h2 span { header[role="banner"] #user-flags h2 span {
display: none; } } display: none; } }
header[role="banner"] #user-flags ul { header[role="banner"] #user-flags ul {
@ -19538,11 +19542,10 @@ header[role="banner"] {
margin: 0; } margin: 0; }
header[role="banner"] #block-header ul.menu li { header[role="banner"] #block-header ul.menu li {
padding: 0; } padding: 0; }
@media (max-width: 654px) { header[role="banner"] #block-header ul.menu li {
header[role="banner"] #block-header ul.menu li { display: inline-block; }
display: inline-block; } header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
header[role="banner"] #block-header ul.menu li:not(:first-of-type) { margin-left: 0.5em; }
margin-left: 0.5em; } }
@media (max-width: 654px) { @media (max-width: 654px) {
header[role="banner"] #block-header { header[role="banner"] #block-header {
position: relative; position: relative;
@ -19563,7 +19566,9 @@ header[role="banner"] {
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
margin-right: -0.5em; margin-right: -0.5em;
z-index: 90; z-index: 90;
text-align: right; } } text-align: right; }
header[role="banner"] #block-header ul.menu li {
display: block; } }
header[role="banner"] #block-languageswitcher { header[role="banner"] #block-languageswitcher {
text-align: right; text-align: right;
position: relative; position: relative;

File diff suppressed because one or more lines are too long

View File

@ -60,7 +60,9 @@ header[role="banner"]{
line-height: 1; line-height: 1;
} }
.slogan{ .slogan{
font-size: 0.882em;
display: block;
white-space: nowrap;
@include col-mediaquery-max(2){ @include col-mediaquery-max(2){
display:none; display:none;
} }
@ -74,7 +76,7 @@ header[role="banner"]{
li{ li{
padding:0; padding:0;
} }
@include col-mediaquery-max(3){ @include col-mediaquery-max(4){
display:none; display:none;
} }
} }
@ -183,7 +185,7 @@ header[role="banner"]{
@extend %header-fs; @extend %header-fs;
cursor: pointer; cursor: pointer;
span{ span{
@include col-mediaquery-max(3){ @include col-mediaquery-max(5){
display:none; display:none;
} }
} }
@ -207,7 +209,7 @@ header[role="banner"]{
cursor: pointer; cursor: pointer;
&:before{padding-right: 0.2em;} &:before{padding-right: 0.2em;}
span{ span{
@include col-mediaquery-max(3){ @include col-mediaquery-max(5){
display:none; display:none;
} }
} }
@ -321,7 +323,7 @@ header[role="banner"]{
} }
} }
} }
@include col-mediaquery-max(3){ // @include col-mediaquery-max(3){
ul.menu{ ul.menu{
li{ li{
display: inline-block; display: inline-block;
@ -330,7 +332,7 @@ header[role="banner"]{
} }
} }
} }
} // }
@include col-mediaquery-max(3){ @include col-mediaquery-max(3){
position: relative; position: relative;
@ -352,6 +354,9 @@ header[role="banner"]{
margin-right: -0.5em; margin-right: -0.5em;
z-index: 90; z-index: 90;
text-align: right; text-align: right;
li{
display: block;
}
} }
} }
} }