use a flexbox for the header sections

this is better than a float because I have always kind of hated how
floating divs work, and this also orders and displays the navs better in
elinks
This commit is contained in:
Brian S. Stephan 2021-02-11 00:23:19 -06:00
parent ad33cf2e83
commit 5e41cde52e
4 changed files with 26 additions and 18 deletions

View File

@ -28,12 +28,15 @@ a:hover, a:active {
border-bottom: 1px dotted #EEE; border-bottom: 1px dotted #EEE;
} }
div.nav, div.styles { div.header {
color: #BBB;
background: #222; background: #222;
border-bottom: 1px solid #222; border-bottom: 1px solid #222;
} }
div.nav, div.styles {
color: #BBB;
}
div.nav a, div.styles a { div.nav a, div.styles a {
color: #BBB; color: #BBB;
} }

View File

@ -28,12 +28,15 @@ a:hover, a:active {
border-bottom: 1px dotted #111; border-bottom: 1px dotted #111;
} }
div.nav, div.styles { div.header {
color: #666;
background: #EEE; background: #EEE;
border-bottom: 1px solid #CCC; border-bottom: 1px solid #CCC;
} }
div.nav, div.styles {
color: #666;
}
div.nav a, div.styles a { div.nav a, div.styles a {
color: #666; color: #666;
} }

View File

@ -63,9 +63,13 @@ a:active {
text-decoration: none; text-decoration: none;
} }
div.header {
display: flex;
justify-content: space-between;
}
div.nav, div.styles { div.nav, div.styles {
font-size: 0.75em; font-size: 0.75em;
border-bottom: 1px solid #444;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
} }
@ -73,10 +77,6 @@ div.nav a, div.styles a {
border-bottom: none; border-bottom: none;
} }
div.styles {
float: right;
}
div.content { div.content {
font-size: 11pt; font-size: 11pt;

View File

@ -11,15 +11,17 @@
<link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}"> <link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}">
<div class="site-wrap"> <div class="site-wrap">
<div class="styles"> <div class="header">
<a href="?style=dark">[dark]</a> <div class="nav">
<a href="?style=light">[light]</a> {% for nav in navs %}
</div> <a href="{{ nav.1 }}">{{ nav.0 }}</a>
<div class="nav"> {% if not loop.last %} &raquo; {% endif %}
{% for nav in navs %} {% endfor %}
<a href="{{ nav.1 }}">{{ nav.0 }}</a> </div>
{% if not loop.last %} &raquo; {% endif %} <div class="styles">
{% endfor %} <a href="?style=dark">[dark]</a>
<a href="?style=light">[light]</a>
</div>
</div> </div>
<div class="content"> <div class="content">
{{ content }} {{ content }}