neale/homepage
neale
/
homepage
1
0
Fork 0
Code Pull Requests Actions Activity

Flexbox nav menu

This commit is contained in:
Neale Pickett 2022-08-09 20:12:34 -06:00
parent 0c8dcac5a5
commit b7678373ff
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_layouts/blog.html
View File

@ -12,4 +12,3 @@ layout: default
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}

7
_layouts/default.html
View File

@ -36,17 +36,14 @@
</main> </main>
<footer> <footer>
<nav class="left"> <nav>
<ul> <ul>
<li><a href="{{ '/tartans/' | relative_url }}" title="AKA Plaids">Tartans</a></li> <li><a href="{{ '/tartans/' | relative_url }}" title="AKA Plaids">Tartans</a></li>
<li><a href="{{ '/poems/' | relative_url }}" title="I won't quit my day job">Poems</a></li> <li><a href="{{ '/poems/' | relative_url }}" title="I won't quit my day job">Poems</a></li>
<li><a href="{{ '/papers/' | relative_url }}" title="Various writings">Papers</a></li> <li><a href="{{ '/papers/' | relative_url }}" title="Various writings">Papers</a></li>
<li><a href="{{ '/blog/' | relative_url }}" title="Public Journal">Blog</a></li> <li><a href="{{ '/blog/' | relative_url }}" title="Public Journal">Blog</a></li>
<li><a href="{{ '/toys/' | relative_url }}" title="Dumb apps">Toys</a></li> <li><a href="{{ '/toys/' | relative_url }}" title="Dumb apps">Toys</a></li>
</ul> <li class="fill"></li>
</nav>
<nav class="right">
<ul>
<li><a href="https://github.com/nealey/">GitHub</a></li> <li><a href="https://github.com/nealey/">GitHub</a></li>
<li><a href="mailto:neale@woozle.org">Email</a></li> <li><a href="mailto:neale@woozle.org">Email</a></li>
</ul> </ul>

12
assets/css/default.css
View File

@ -76,13 +76,21 @@ footer {
} }
nav ul { nav ul {
display: flex;
padding: 0; padding: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
flex-wrap: wrap;
} }
nav li {
nav ul li {
display: inline; display: inline;
padding-right: 1em; padding: 0 0.5em;
flex-grow: 1;
}
nav ul .fill {
flex-grow: 20;
} }
.left { .left {