started responsive UI: header

This commit is contained in:
2021-03-18 23:13:50 +01:00
parent 1862f2922e
commit 5ffacc45ed
7 changed files with 182 additions and 20 deletions

View File

@@ -1246,18 +1246,24 @@ aside.messages {
header[role="banner"] {
padding: 0.2em 0 0 0; }
header[role="banner"] #block-userlogin h2, header[role="banner"] #user-tools h4, header[role="banner"] #user-flags h2, header[role="banner"] #user-flags li h5, header[role="banner"] #block-header ul.menu li a {
header[role="banner"] #block-userlogin h2, header[role="banner"] #user-tools a.mdi-account, header[role="banner"] #user-flags h2, header[role="banner"] #user-flags li h5, header[role="banner"] #block-header ul.menu li a {
font-size: 0.9em;
font-weight: 400; }
header[role="banner"] #block-sitebranding h1 {
margin: 0;
line-height: 1; }
@media (max-width: 375px) {
header[role="banner"] #block-sitebranding .slogan {
display: none; } }
header[role="banner"] #block-socialmedialinks {
padding-right: 0.5em;
border-right: 1px solid #1A1A1A;
margin-right: 0.5em; }
header[role="banner"] #block-socialmedialinks li {
padding: 0; }
@media (max-width: 375px) {
header[role="banner"] #block-socialmedialinks {
display: none; } }
header[role="banner"] #block-userlogin {
position: relative;
padding: 0 1em;
@@ -1328,8 +1334,11 @@ header[role="banner"] {
margin-right: 1em; }
header[role="banner"] #user-tools {
padding-top: 0.06em; }
header[role="banner"] #user-tools h4 {
header[role="banner"] #user-tools a.mdi-account {
cursor: pointer; }
@media (max-width: 375px) {
header[role="banner"] #user-tools a.mdi-account span {
display: none; } }
header[role="banner"] #user-tools .mdi-logout::before {
margin: -0.125em 0 0 0;
vertical-align: top; }
@@ -1344,6 +1353,9 @@ header[role="banner"] {
cursor: pointer; }
header[role="banner"] #user-flags h2:before {
padding-right: 0.2em; }
@media (max-width: 375px) {
header[role="banner"] #user-flags h2 span {
display: none; } }
header[role="banner"] #user-flags ul {
background-color: #fff;
overflow: hidden;
@@ -1410,13 +1422,39 @@ header[role="banner"] {
margin-right: 1em;
padding-left: 1em;
border-left: 1px solid #000; }
header[role="banner"] #block-header #block-header-menu,
header[role="banner"] #block-header label[for="block-header-menu"] {
display: none; }
header[role="banner"] #block-header ul.menu {
margin: 0; }
header[role="banner"] #block-header ul.menu li {
padding: 0;
padding: 0; }
@media (min-width: 1080px) {
header[role="banner"] #block-header ul.menu li {
display: inline-block; }
header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
margin-left: 0.5em; }
margin-left: 0.5em; } }
@media (max-width: 375px) {
header[role="banner"] #block-header {
position: relative;
/* Toggle Show/Hide Menu */ }
header[role="banner"] #block-header label[for="block-header-menu"] {
display: block; }
header[role="banner"] #block-header ul.menu {
display: none; }
header[role="banner"] #block-header input:checked ~ ul.menu {
display: block; }
header[role="banner"] #block-header ul.menu {
position: absolute;
width: 110px;
height: auto;
top: 18.9px;
right: 0;
background-color: white;
padding: 0.2em 0.5em;
margin-right: -0.5em;
z-index: 90;
text-align: right; } }
header[role="banner"] #block-languageswitcher {
text-align: right; }
header[role="banner"] #block-languageswitcher h2 {