aligns top bar with content

This commit is contained in:
Mouse Reeve 2020-01-28 17:39:07 -08:00
parent a272e2c40d
commit 4007ed8827
2 changed files with 34 additions and 30 deletions

View file

@ -19,15 +19,25 @@ h2 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#main { #main, header > div {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
max-width: 75rem; max-width: 75rem;
width: 100%;
}
#branding, #actions {
margin: 0 1rem;
}
#branding {
flex-grow: 1;
}
#actions {
flex-grow: 0;
} }
#top-bar { #top-bar {
height: 4rem;
background-color: #B2DBBF; background-color: #B2DBBF;
overflow: hidden; overflow: hidden;
padding: 0.5rem; padding: 0.5rem;
@ -42,14 +52,6 @@ h2 {
font-size: 2em; font-size: 2em;
} }
header > div:first-child {
float: left;
}
header > div:last-child {
float: right;
}
#sidebar { #sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View file

@ -21,27 +21,29 @@
<div id="top-bar"> <div id="top-bar">
<header> <header>
<div id="branding"><a href="/">📚FediReads</a></div>
<div> <div>
<div id="account"> <div id="branding"><a href="/">📚FediReads</a></div>
{% if user.is_authenticated %} <div id="actions">
<form name="logout" action="/logout/" method="post"> <div id="account">
Welcome, {% if request.user.localname %}{{ request.user.localname }}{% else %}{{ request.user.username }}{% endif %} {% if user.is_authenticated %}
<input type="submit" value="Log out"></input> <form name="logout" action="/logout/" method="post">
</form> Welcome, {% if request.user.localname %}{{ request.user.localname }}{% else %}{{ request.user.username }}{% endif %}
{% else %} <input type="submit" value="Log out"></input>
<form name="login" action="/login/" method="post"> </form>
<input type="text" name="username"></input> {% else %}
<input type="password" name="password"></input> <form name="login" action="/login/" method="post">
<input type="submit" value="Log in"></input> <input type="text" name="username"></input>
</form> <input type="password" name="password"></input>
{% endif %} <input type="submit" value="Log in"></input>
</div> </form>
<div id="search"> {% endif %}
<form action="/search/"> </div>
<input type="text" name="q"></input> <div id="search">
<input type="submit" value="🔍"></input> <form action="/search/">
</form> <input type="text" name="q"></input>
<input type="submit" value="🔍"></input>
</form>
</div>
</div> </div>
</div> </div>
</header> </header>