mobile layout updates

This commit is contained in:
James Shiffer 2020-06-24 11:16:07 -07:00
parent 26799bc5bc
commit 0097a06211
No known key found for this signature in database
GPG Key ID: C0DB8774A1B3BA45
2 changed files with 16 additions and 4 deletions

View File

@ -40,18 +40,29 @@
}
div.link a {
text-decoration: none;
font-size: 1.5rem;
font-size: 2rem;
}
div.wordmark {
flex: 1 0 64px;
}
img.wordmark {
height: 3rem;
max-width: 100%;
object-fit: contain;
margin-right: 3rem;
}
@media (min-width: 800px) {
div.items {
flex-direction: row;
}
div.link a {
font-size: 1.5rem !important;
margin-left: 2rem;
}
div.search {
margin-left: 1rem;
}
}
@media (min-width: 1280px) {
div.link a {
font-size: 2rem !important;
margin-left: 4rem;
@ -59,6 +70,7 @@
}
div.search {
width: 100%;
flex: 1 0 64px;
}
input.search {
width: 100%;
@ -79,7 +91,7 @@
<nav>
<div class="items">
<div><a href="/"><img class="wordmark" src="/logo.png" alt="HowFeed.biz"></a></div>
<div class="wordmark"><a href="/"><img class="wordmark" src="/logo.png" alt="HowFeed.biz"></a></div>
<div class="search">
<input class="search" on:keyup={search} bind:value={query} type="text" placeholder="Search">
</div>

View File

@ -108,7 +108,7 @@ div.article-meta {
.content {
background: #fff;
margin: 8rem 0;
margin: 16rem 0;
padding: 2rem;
}