Commit 1860f8b2 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Make nav better on narrower viewports. Closes #44

parent 561c57b7
...@@ -455,34 +455,39 @@ figcaption, .site-footer p, .site-footer small, .note { ...@@ -455,34 +455,39 @@ figcaption, .site-footer p, .site-footer small, .note {
.navigation-menu ul { .navigation-menu ul {
background: hsla(var(--tab-five), 0.1); background: hsla(var(--tab-five), 0.1);
display: flex; display: flex;
flex-direction: row; flex-wrap: wrap;
flex-wrap: wrap; grid-template-columns: repeat(7, 1fr);
justify-content: center;
align-content: stretch;
align-items: stretch;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0 0 0.5em 0.5em;
} }
.navigation-menu ul li { @media screen and (min-width: 37em) {
background: hsl(var(--secondary-bg)); .navigation-menu ul {
/* 7 = number of columns = number of links in nav */
display: grid;
grid-template-columns: repeat(7, auto);
padding: 0;
}
} }
.navigation-menu ul a { .navigation-menu ul a {
border-radius: 0.75em;
display: block; display: block;
padding: calc(var(--layout-unit)/3) var(--layout-unit); margin: 0.5em 0.5em 0 0;
padding: calc(var(--layout-unit)/3) calc(var(--layout-unit)/2);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
} }
@media screen and (min-width: 35em) { @media screen and (min-width: 37em) {
.navigation-menu ul a { .navigation-menu ul a {
padding: calc(var(--layout-unit)/3) var(--layout-unit); border-radius: 0;
display: block;
margin: 0;
} }
} }
/* set active navigation link background colour */ /* set active navigation link background colour */
.navigation-menu li.active a, body.blog .navigation-menu a[href="/posts/"], body.latest .navigation-menu a[href="/latest/"] { .navigation-menu li.active a, body.blog .navigation-menu a[href="/posts/"], body.latest .navigation-menu a[href="/latest/"] {
background: rgba(255,255,255,0.85); background: rgba(255,255,255,0.85);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment