Commit eeee6b23 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Make navigation fit lens in styling.

Also tweak nav tab colours to accommodate extra tab
parent eb262b08
......@@ -583,7 +583,7 @@ nav[aria-label="Site navigation"] {
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-template-columns: repeat(7, 1fr);
grid-template-columns: repeat(8, 1fr);
list-style-type: none;
margin: 0;
padding: 0 0 0.5em 0.5rem;
......@@ -592,7 +592,7 @@ nav[aria-label="Site navigation"] {
@media screen and (min-width: 52em) {
.navigation-menu {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
grid-template-columns: repeat(8, minmax(14.285714286%, 7.4em));
/* centre everything */
margin: 0 auto;
max-width: 51.8em;
......@@ -603,7 +603,7 @@ nav[aria-label="Site navigation"] {
/* 7 = number of columns = number of links in nav */
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-columns: repeat(8, 1fr);
justify-content: stretch;
padding: 0;
}
......@@ -628,12 +628,16 @@ nav[aria-label="Site navigation"] {
@media screen and (min-width: 65em) {
.navigation-menu ul a {
padding: calc(var(--layout-unit)/3) var(--layout-unit);
padding: calc(var(--layout-unit)/3) calc(var(--layout-unit)/1.5);
}
}
/* 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/"], body.kind-taxonomy .navigation-menu a[href="/posts/"] {
div.navigation-menu ul li.active a,
body.blog .navigation-menu a[href="/posts/"],
body.latest .navigation-menu a[href="/latest/"],
body.lens .navigation-menu a[href="/lens/"],
body.kind-taxonomy .navigation-menu a[href="/posts/"] {
background: white;
color: hsl(var(--text));
}
......@@ -644,8 +648,50 @@ nav[aria-label="Site navigation"] {
-webkit-text-decoration-color: currentcolor;
}
/* dictate colours of tabs depending upon which section we are in (and which tab is active) */
.navigation-menu li:nth-of-type(1) a {
background: hsla(var(--tab-two), .6);
color: hsl(var(--darklinktext));
}
.navigation-menu li:nth-of-type(2) a {
background: hsla(var(--tab-three), .6);
color: hsl(var(--darklinktext));
}
.navigation-menu li:nth-of-type(3) a {
background: hsla(var(--tab-four), .6);
color: hsl(var(--darklinktext));
}
.navigation-menu li:nth-of-type(4) a {
background: hsla(var(--tab-five), .6);
color: hsl(var(--darklinktext));
}
.navigation-menu li:nth-of-type(5) a {
background: hsla(var(--tab-six), .6);
color: hsl(var(--darklinktext));
}
.navigation-menu li:nth-of-type(6) a {
background: hsla(var(--brilliant), .6);
color: hsl(var(--darklinktext));
}
.navigation-menu li:nth-of-type(7) a {
background: hsla(var(--brilliant), .7);
color: hsl(var(--darklinktext));
}
.navigation-menu li:nth-of-type(8) a {
background: hsla(var(--brilliant), .8);
color: hsl(var(--darklinktext));
}
/* links before and after active navigation (relies on order of navigation being reflected) */
body.home .navigation-menu a[href="/about-me/"],
/* body.home .navigation-menu a[href="/about-me/"],
body.kind-404 .navigation-menu a[href="/about-me/"],
body.about-me .navigation-menu a[href="/"],
body.about-me .navigation-menu a[href="/book/"],
......@@ -662,11 +708,11 @@ body.speaking .navigation-menu a[href="/contact-me/"],
body.contact-me .navigation-menu a[href="/speaking/"] {
background: hsla(var(--tab-two), .8);
color: hsl(var(--darklinktext));
}
} */
/* links second before and after active navigation */
/* darken text accordingly */
body.home .navigation-menu a[href="/book/"],
/* body.home .navigation-menu a[href="/book/"],
body.kind-404 .navigation-menu a[href="/book/"],
body.about-me .navigation-menu a[href="/posts/"],
body.book .navigation-menu a[href="/"],
......@@ -681,11 +727,11 @@ body.speaking .navigation-menu a[href="/posts/"],
body.contact-me .navigation-menu a[href="/latest/"] {
background: hsla(var(--tab-three), .8);
color: hsl(var(--darklinktext));
}
} */
/* links third before and after active navigation */
/* darken text accordingly */
body.home .navigation-menu a[href="/posts/"],
/* body.home .navigation-menu a[href="/posts/"],
body.kind-404 .navigation-menu a[href="/posts/"],
body.about-me .navigation-menu a[href="/latest/"],
body.blog .navigation-menu a[href="/"],
......@@ -698,11 +744,11 @@ body.speaking .navigation-menu a[href="/book/"],
body.contact-me .navigation-menu a[href="/posts/"] {
background: hsla(var(--tab-four), .8);
color: hsl(var(--darklinktext));
}
} */
/* links fourth before and after active navigation */
/* darken text accordingly */
body.home .navigation-menu a[href="/latest/"],
/* body.home .navigation-menu a[href="/latest/"],
body.kind-404 .navigation-menu a[href="/latest/"],
body.about-me .navigation-menu a[href="/speaking/"],
body.book .navigation-menu a[href="/contact-me/"],
......@@ -711,11 +757,11 @@ body.speaking .navigation-menu a[href="/about-me/"],
body.contact-me .navigation-menu a[href="/book/"] {
background: hsla(var(--tab-five), .8);
color: hsl(var(--darklinktext));
}
} */
/* links fifth before and after active navigation */
/* darken text accordingly */
body.home .navigation-menu a[href="/speaking/"],
/* body.home .navigation-menu a[href="/speaking/"],
body.kind-404 .navigation-menu a[href="/speaking/"],
body.about-me .navigation-menu a[href="/contact-me/"],
body.latest .navigation-menu a[href="/"],
......@@ -723,16 +769,16 @@ body.speaking .navigation-menu a[href="/"],
body.contact-me .navigation-menu a[href="/about-me/"] {
background: hsla(var(--tab-six), .8);
color: hsl(var(--darklinktext));
}
} */
/* links sixth before and after active navigation */
/* darken text accordingly */
body.home .navigation-menu a[href="/contact-me/"],
/* body.home .navigation-menu a[href="/contact-me/"],
body.kind-404 .navigation-menu a[href="/contact-me/"],
body.contact-me .navigation-menu a[href="/"] {
background: hsla(var(--brilliant), .8);
color: hsl(var(--darklinktext));
}
} */
/* - - - - - - - - MAIN */
......
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