diff --git a/web/layouts/partials/header.html b/web/layouts/partials/header.html
index 2327d58b67f878eb8cca42abaebfeecb722eac13..b910547eb79e6300dd0c65bae08385971c0d5ac0 100644
--- a/web/layouts/partials/header.html
+++ b/web/layouts/partials/header.html
@@ -26,22 +26,25 @@
<body class="font-sans">
<header class="bg-light">
<div class="container mx-auto">
- <div class="flex border-b py-4">
+ <nav class="flex border-b py-4">
<div class="w-1/4">
<a href="/" class="font-serif-caps">{{ .Site.Title }}</a>
</div>
{{ $currentPage := . }}
+ {{ $segments := split .RelPermalink "/" }}
+ {{ $section := index $segments 1 }}
<div class="w-1/2 flex justify-center">
{{ range .Site.Menus.main }}
- <a href="{{ .URL }}" class="mr-8{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}">{{ .Name }}</a>
+ {{ $url_trimmed := trim .URL "/" }}
+ <a href="{{ .URL }}" class="mr-8{{if (eq $section $url_trimmed) }} active{{end}}">{{ .Name }}</a>
{{ end }}
</div>
<div class="w-1/4">
{{ partial "site-search.html" . }}
</div>
- </div>
+ </nav>
{{ if .Site.Params.alert }}
- <div class="text-sm flex justify-center m-2 p-2 bg-blue-lightest text-blue-darker rounded">
+ <div class="text-sm flex justify-center my-2 p-2 bg-blue-lightest text-blue-darker border-l-4 border-blue">
<i class="fas fa-exclamation-triangle"></i>
<span class="lh-title ml3">{{ .Site.Params.alert | safeHTML }}</span>
</div>
diff --git a/web/src/styles.css b/web/src/styles.css
index 7d502f5f6028b3f6f7ac07c117b38bbb62dddbf8..c1c000b7f23059cd23b0ea41a8da358c31f10440 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -4,14 +4,25 @@
@import url('https://fonts.googleapis.com/css?family=Spectral+SC');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700');
+/* -- Links -- */
a {
@apply .text-grey-darkest;
- text-decoration: none;
+ @apply .no-underline;
+}
+a:hover {
+ @apply .underline;
}
a.active {
@apply .text-orange;
}
+nav a.active {
+ @apply text-grey-darkest;
+ @apply .border-b-2;
+ @apply .border-orange;
+}
+
+/* -- Typography -- */
h1, h2, h3, h4, h5, h6 {
@apply .font-serif;
@apply .pt-2;
@@ -26,6 +37,8 @@ p, ul, pre {
@apply .mb-4;
}
+/* -- Misc -- */
+
hr {
@apply .border;
}
@@ -47,10 +60,13 @@ hr {
@apply .px-4;
@apply .py-1;
@apply .mb-4;
+ @apply .border-l-4;
+ @apply .border-orange;
}
.note h3 {
@apply .text-orange;
+ @apply .mb-2;
}
/* -------------------------------- Algolia---------------------------------- */