Style the site-menu

* Remove the list item bullets
* Put some padding between the list items
* Style the navigation area to be a flex box, with item wrapping
* Add a decorative border to the navigation area
master
Kevin C. Coram 2019-12-09 21:23:24 -05:00
parent ab951ced60
commit 3a187409f4
Signed by: kevin
GPG Key ID: 0342351B3D61AD35
3 changed files with 20 additions and 2 deletions

View File

@ -23,7 +23,7 @@
<!-- Code that all your templates share, like a header --> <!-- Code that all your templates share, like a header -->
{{ partial "header.html" . }} {{ partial "header.html" . }}
{{- end }} {{- end }}
<nav> <nav class="site-menu">
{{ block "site-menu" . -}} {{ block "site-menu" . -}}
{{ partial "site-menu.html" . }} {{ partial "site-menu.html" . }}
{{- end }} {{- end }}

View File

@ -7,3 +7,16 @@
div.author-card-content { div.author-card-content {
flex-grow: 1; flex-grow: 1;
} }
nav.site-menu ul {
display:flex;
flex-wrap: wrap;
justify-content: left;
list-style-type: none;
margin: 0;
padding: 0;
}
nav.site-menu ul li {
padding: 0.5em 0.5em 0.5em 0.5em;
}

View File

@ -6,3 +6,8 @@ img.u-photo {
.glyph { .glyph {
font-size: 1.25em; font-size: 1.25em;
} }
nav.site-menu {
border-top: thin solid;
border-bottom: double;
}