flashii/misuzu
flashii/misuzu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

It looks good on mobile now too !

Browse source
This commit is contained in:
flash 2018-08-14 21:46:20 +02:00
parent 92f3cba259
commit 1b1e53b377
1 changed files with 60 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
assets/less/mio/classes/header.less
View file

@ -57,29 +57,26 @@
list-style: none;
display: flex;
&-toggle {
display: none;
}
@media (max-width: @mio-header-mobile) {
display: none;
font-size: 1.6em;
line-height: 1.5em;
}
&-toggle {
display: none;
&:checked ~ .header__menu {
&-toggle:checked ~ .header__menu {
display: block;
}
}
@media (max-width: @mio-header-mobile) {
width: 100%;
background: #c2affe;
&__item {
background: #c2affe;
&:not(:last-child) {
border-bottom: 1px solid #9475b2;
}
&__item:not(:last-child) {
border-bottom: 1px solid #9475b2;
}
&__link {
@ -162,14 +159,17 @@
flex-direction: row-reverse;
order: 3;
@media (max-width: @mio-header-mobile) {
&-toggle {
display: none;
}
&-toggle {
@media (max-width: @mio-header-mobile) {
display: none;
width: 100%;
background: #c2affe;
font-size: 1.1em;
&:checked ~ .header__user {
&-toggle:checked ~ .header__user {
display: flex;
}
}
@ -190,6 +190,13 @@
flex-direction: column;
align-items: flex-end;
justify-content: center;
@media (max-width: @mio-header-mobile) {
margin: 0;
padding: 0;
display: block;
width: 100%;
}
}
&__name {
@ -199,12 +206,20 @@
font-family: @mio-font-heading;
text-decoration: none;
display: block;
display: inline-flex;
align-items: flex-end;
justify-content: right;
text-align: right;
&:hover {
text-decoration: underline;
@media (min-width: @mio-header-mobile) {
&:hover {
text-decoration: underline;
}
}
@media (max-width: @mio-header-mobile) {
font-size: 1.6em;
line-height: 1.5em;
border-bottom: 1px solid #9475b2;
padding: 4px 8px;
text-align: left;
}
}
@ -216,18 +231,42 @@
max-width: 100px;
font-size: .9em;
line-height: 1.4em;
@media (max-width: @mio-header-mobile) {
font-size: 1.6em;
line-height: 1.5em;
max-width: initial;
width: 100%;
flex-direction: column;
}
}
&__action {
padding-left: 6px;
@media (max-width: @mio-header-mobile) {
padding: 0;
&:not(:last-child) {
border-bottom: 1px solid #9475b2;
}
}
}
&__link {
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
@media (max-width: @mio-header-mobile) {
padding: 4px 8px;
display: block;
width: 100%;
}
@media (min-width: @mio-header-mobile) {
&:hover {
text-decoration: underline;
}
}
}
}