Fix mobile styles

- Use Flex box instead of text alignment for top bar
This commit is contained in:
Hypolite Petovan 2017-05-05 23:34:57 -04:00
parent a93184b38d
commit 901c66186e

View file

@ -31,9 +31,10 @@ p {
top: 0; top: 0;
height: 55px; height: 55px;
width: 100%; width: 100%;
text-align: center;
font-weight: 300; font-weight: 300;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
} }
#top-bar-spacer { #top-bar-spacer {
width: 100%; width: 100%;
@ -41,21 +42,18 @@ p {
} }
#top-bar .header { #top-bar .header {
position: absolute;
top: 14px;
left: 14px;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
line-height: 0.9em; line-height: 19px;
background: url('/images/friendica.svg') top left no-repeat; background: url('/images/friendica.svg') top left no-repeat;
background-size: 14px; background-size: 14px;
padding-left: 18px; padding-left: 18px;
margin: 0; margin: 0;
white-space: nowrap;
} }
#top-bar .search-form { #top-bar .search-form {
margin: 0 20px;
display: inline-block; display: inline-block;
} }
#top-bar .search-wrapper { #top-bar .search-wrapper {
@ -63,10 +61,8 @@ p {
} }
nav#links { nav#links {
position: absolute; line-height: 39px;
top: 0; white-space: nowrap;
right: 14px;
line-height: 55px;
} }
nav#links a { nav#links a {
display: inline-block; display: inline-block;
@ -342,7 +338,7 @@ nav#links a,
.homepage-wrapper, .homepage-wrapper,
.search-wrapper { .search-wrapper {
width: 95%; width: 100%;
max-width: 500px; max-width: 500px;
} }
.homepage-wrapper .search-wrapper { .homepage-wrapper .search-wrapper {
@ -360,10 +356,7 @@ nav#links a,
} }
.hamburger { .hamburger {
position: absolute; padding: 8px;
top: 0px;
right: 0px;
padding: 14px;
font-size: 22px; font-size: 22px;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
@ -412,6 +405,18 @@ nav#links a,
overflow: hidden; overflow: hidden;
} }
.directory-results {
flex-flow: column;
}
.directory-results > aside {
order: 2;
}
.directory-results > section {
order: 1;
}
} }
/* The moment the header starts getting squashed */ /* The moment the header starts getting squashed */