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

View file

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