NixOS · Sep 9, 2020 · Sep 9, 2020 · Sep 9, 2020
Showing with 65 additions and 10 deletions.

+1 −0 Makefile

+30 −9 layout.tt

+34 −1 site-styles/components/navbar.less
diff --git a/Makefile b/Makefile
@@ -108,6 +108,7 @@ favicon.ico: favicon.png
 	  --pre_chomp --post_chomp \
 	  --define root=$(ROOT) \
 	  --define fileName=$< \
+	  --define outputName=$@ \
 	  --define nixosAmis=$(NIXOS_AMIS) \
 	  --define latestNixVersion=$(NIX_STABLE_VERSION) \
 	  --define latestNixOSSeries=$(NIXOS_STABLE_SERIES) \

diff --git a/layout.tt b/layout.tt
@@ -1,7 +1,26 @@
 <!DOCTYPE html>
 
-[% USE HTML %]
-[% USE date %]
+[%-
+USE HTML;
+USE date;
+
+# Automatically marks the link with the class "active" if it is the current page.
+# title: Link label
+# content: use custom content instead of title in link.
+# href: Page output filename without leading slash
+# class: Additional classes
+BLOCK navigationLink %]
+
+<li class="[% outputName == href ? "active" : "" %] [% class %]">
+[%- IF href -%]
+<a href="[% root %][% href %]">[% title %]</a>
+[%- ELSE -%]
+[%- content -%]
+[%- END -%]
+</li>
+[% END;
+
+-%]
 
 <html lang="en" class="without-js">
 
@@ -39,13 +58,15 @@
 	  [%# ???! go read `navbar.less` and `nixos-site.js`, it's all fine I swear. %]
       <nav style="display: none;">
         <ul>
-          <li><a href="[%root%]features.html">Features</a></li>
-          <li><a href="[%root%]download.html">Download</a></li>
-          <li><a href="[%root%]learn.html">Learn</a></li>
-          <li><a href="[%root%]community.html">Community</a></li>
-          <li><a href="[%root%]governance.html">Governance</a></li>
-          <li><a href="[%root%]donate.html">Donate</a></li>
-          <li class="install-nix"><a class="button -primary" href="#">Install Nix</a></li>
+          [% INCLUDE navigationLink href="features.html" title="Features" %]
+          [% INCLUDE navigationLink href="download.html" title="Download" %]
+          [% INCLUDE navigationLink href="learn.html" title="Learn" %]
+          [% INCLUDE navigationLink href="community.html" title="Community" %]
+          [% INCLUDE navigationLink href="governance.html" title="Governance" %]
+          [% INCLUDE navigationLink href="donate.html" title="Donate" %]
+          [% WRAPPER navigationLink %]
+            <a class="button -primary" href="#">Install Nix</a>
+          [% END %]
         </ul>
       </nav>
     </div>

diff --git a/site-styles/components/navbar.less b/site-styles/components/navbar.less
@@ -2,6 +2,7 @@
 
 body > header {
 	@_height: #theme.navbar[height];
+	@_link_flavour_size: 4*@unit;
 	#no-select();
 
 	position: relative;
@@ -123,6 +124,9 @@ body > header {
 
 	nav .button {
 		margin-left: @gutter / 2;
+		&::before {
+			display: none;
+		}
 	}
 
 	.header-search {
@@ -180,6 +184,35 @@ body > header {
 		}
 	}
 
+	li {
+		a {
+			position: relative;
+			&::before {
+				content: "";
+				display: block;
+				position: absolute;
+				bottom: 0;
+
+				// See paddings higher up.
+				left: 13*@unit;
+				right: 13*@unit;
+				#screen-sm-only({
+					left: 8*@unit;
+					right: 8*@unit;
+				});
+				height: @_link_flavour_size;
+			}
+		}
+		&.active a {
+			font-weight: bold;
+		}
+		&.active a, & a:active, & a:hover, & a:focus {
+			&::before {
+				background: #theme.color[blue-light];
+			}
+		}
+	}
+
 	#screen-sm-only({
 		// When the site is narrow, but not quite xs, prefer filling
 		// the width with the menu instead of using the hamburglar menu.
@@ -236,7 +269,7 @@ body > header {
 				color: #theme.color[blue-dark2];
 			}
 
-			a.active, a:hover, a:focus {
+			li.active a, a.active, a:hover, a:focus {
 				background: #theme.color[blue-light];
 				color: #theme.color[white];
 			}