james/howfeed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mobile layout updates

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Nav.svelte
View File

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

2
static/global.css
View File

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