Add Other dropdown menu

site/css/main.scss

@@ -4,7 +4,7 @@
 // Fonts
 $sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
 $serif: Charter, Georgia, serif;
-$monospace: SF Mono, Monaco, Courier New, monospace;
+$monospace: SF Mono, Courier New, monospace;
 
 // General
 body {
@@ -237,13 +237,70 @@ figure {
 	.site-nav ul {
 		padding: 0;
 		margin: 0;
+		display: inline-block;
+		position: relative;
 
 		li {
 			list-style: none;
 			display: inline;
-			margin-right: 1em;
 			font-variant: small-caps;
 			font-weight: bold;
+
+			&:not(:last-child) {
+				margin-right: 1em;
+			}
+
+			a.dropdown-link {
+				color: black;
+				text-decoration: none;
+
+				.arrow-down {
+					display: inline-block;
+					width: 0.5em;
+					height: 0.5em;
+					margin-bottom: 2px;
+					margin-left: 2px;
+					border-bottom: 2px solid var(--ui-text-color);
+					border-right: 2px solid var(--ui-text-color);
+					transform: rotate(45deg);
+				}
+			}
+
+			ul {
+				visibility: hidden;
+				opacity: 0;
+				min-width: 5rem;
+				position: absolute;
+				transition: all 0.5s ease;
+				right: -1em;
+				display: none;
+				padding: 1em;
+				background-color: white;
+				box-shadow: 0 10px 15px -5px var(--shadow-color), // bottom
+							10px 0 15px -5px var(--shadow-color), // right
+							-10px 0 15px -5px var(--shadow-color); // left
+				z-index: 10;
+
+				li {
+					width: 100%;
+					display: block;
+					margin-right: 0px;
+					text-align: right;
+
+					&:not(:last-child) {
+						margin-bottom: 1em;
+					}
+				}
+			}
+
+			&:hover > ul,
+			&:focus-within > ul,
+			ul:hover,
+			ul:focus {
+				visibility: visible;
+				opacity: 1;
+				display: block;
+			}
 		}
 	}
 

site/layouts/default.html.ejs

@@ -50,10 +50,17 @@
 			<p class="site-description">The outper part of a shadow is called the penumbra.</p>
 			<nav class="site-nav" role="navigation">
 				<ul>
-					<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
+					<li><%- fancyLink("Tutorials", "/tutorials/") %></li>
 					<li><%- fancyLink("RTFM", "https://rtfm.shadowfacts.net") %></li>
 					<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
-					<li><%- fancyLink("Tutorials", "/tutorials/") %></li>
+					<li>
+						<a href="#" class="dropdown-link" aria-haspopup="true">Other <span class="arrow arrow-down" aria-hidden="true"></span></a>
+						<ul aria-label="other links">
+							<li><%- fancyLink("Gitea", "https://git.shadowfacts.net") %></li>
+							<li><%- fancyLink("Maven", "https://maven.shadowfacts.net") %></li>
+							<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
+						</ul>
+					</li>
 				</ul>
 			</nav>
 		</div>