Logo: Set font to Montserrat

edg2s · MatmaRex · commit 364823c4f21d · 2021-11-09T00:09:27.000+01:00
Also split logo in CSS so text can be coloured
on hover, and hidden on mobile.
diff --git a/css/common.css b/css/common.css
@@ -47,21 +47,53 @@ header {
 	margin: 0;
 	flex-grow: 1;
 	white-space: nowrap;
+	height: 2em;
+	position: relative;
 }
 
 .logo {
+	position: relative;
 	display: inline-block;
-	text-decoration: none;
-	color: inherit;
-	background: url( ../images/logo.svg ) no-repeat 0 0;
-	background-size: 2em;
-	line-height: 2em;
-	padding-left: 2.5em;
+	width: 2em;
+	height: 2em;
+	margin-right: 7em;
+	background: url( ../images/wordmark.svg );
+	background-size: cover;
+}
+
+.logo > span {
+	color: transparent;
+}
+
+.logo:after {
+	content: ' ';
+	position: absolute;
+	top: 0;
+	left: 2em;
+	width: 7em;
+	height: 2em;
+	background: url( ../images/wordmark.svg ) -2em 0;
+	background-size: cover;
 }
 
 .logo:hover {
 	text-decoration: none;
-	color: #2a4b8d;
+}
+
+.logo:hover:after {
+	/* #2a4b8d */
+	filter: invert( 24% ) sepia( 13% ) saturate( 5585% ) hue-rotate( 195deg ) brightness( 98% ) contrast( 87% );
+}
+
+@media ( max-width: 720px ) {
+	/* Hide text part of logo on mobile */
+	.logo {
+		margin-right: 1em;
+	}
+
+	.logo:after {
+		display: none;
+	}
 }
 
 .sourceAndUser {
diff --git a/header.php b/header.php
@@ -22,7 +22,7 @@
 	<body>
 		<header>
 			<div class="headerInner">
-				<h1><a class="logo" href="' . $basePath . '/.">Patch demo</a></h1>
+				<h1><a class="logo" href="' . $basePath . '/."><span>Patch demo</span></a></h1>
 				<div class="sourceAndUser">';
 if ( $user ) {
 	echo "<div class='user'>Logged in as <b>{$user->username}</b> [<a href='?logout'>Log out</a>]</div>";
diff --git a/images/wordmark.svg b/images/wordmark.svg
@@ -1,17 +1,2 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="151" height="30" version="1.1" viewBox="0 0 39.952 7.9376" xmlns="http://www.w3.org/2000/svg">
-	<g transform="matrix(.1948 0 0 .1948 .39977 .52876)" fill-rule="evenodd">
-		<rect transform="rotate(-45)" x="-20.429" y="18.447" width="40.864" height="13.621" rx="6.8107" fill="#069"/>
-		<path d="m3.4117 3.4157c-2.668 2.668-2.668 6.9638-1e-6 9.6318l3.2026 3.2026 9.6318-9.6318-3.2026-3.2026c-2.668-2.668-6.9638-2.668-9.6318 0zm16.061 25.693 3.2027 3.2027c2.668 2.668 6.9638 2.668 9.6318 0s2.668-6.9638 0-9.6318l-3.2027-3.2027z" fill="#396"/>
-	</g>
-	<path d="m4.2095 4.0422-0.5287 0.30525v-0.6105z" color="#000000" fill="#900" stroke="#fff" stroke-linejoin="round" stroke-width=".09664"/>
-	<g transform="matrix(.1948 0 0 .1948 .39977 .52876)" fill="#fff">
-		<path d="m12.178 16.221v3.5781h1.1017v-0.51987h-0.53899v-2.5368h0.53899v-0.52142z"/>
-		<path d="m13.859 16.221v3.5781h1.1017v-0.51987h-0.53899v-2.5368h0.53899v-0.52142z"/>
-	</g>
-	<g transform="matrix(-.1948 0 0 .1948 7.359 .52876)" fill="#fff">
-		<path d="m12.178 16.221v3.5781h1.1017v-0.51987h-0.53899v-2.5368h0.53899v-0.52142z"/>
-		<path d="m13.859 16.221v3.5781h1.1017v-0.51987h-0.53899v-2.5368h0.53899v-0.52142z"/>
-	</g>
-	<text x="8.4825125" y="5.8100233" fill="#333333" font-family="Verdana" font-size="3.5278px" letter-spacing="0px" stroke-width=".26459px" word-spacing="0px" style="line-height:0px" xml:space="preserve"><tspan x="8.4825125" y="5.8100233" fill="#333333" font-family="sans-serif" font-size="4.9389px" stroke-width=".26459px">Patch demo</tspan></text>
-</svg>
+<svg width="151" height="30" version="1.1" viewBox="0 0 40 7.94" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.226 0 0 .226 -.163 -.0337)" fill-rule="evenodd"><rect transform="rotate(-45)" x="-20.4" y="18.4" width="40.9" height="13.6" rx="6.81" fill="#069"/><path d="m3.41 3.42c-2.67 2.67-2.67 6.96-1e-6 9.63l3.2 3.2 9.63-9.63-3.2-3.2c-2.67-2.67-6.96-2.67-9.63 0zm16.1 25.7 3.2 3.2c2.67 2.67 6.96 2.67 9.63 0s2.67-6.96 0-9.63l-3.2-3.2z" fill="#396"/></g><path d="m4.26 4.05-0.614 0.355v-0.709z" color="#000000" fill="#900" stroke="#fff" stroke-linejoin="round" stroke-width=".112"/><g transform="matrix(.226 0 0 .226 -.163 -.0337)" fill="#fff"><path d="m12.2 16.2v3.58h1.1v-0.52h-0.539v-2.54h0.539v-0.521z"/><path d="m13.9 16.2v3.58h1.1v-0.52h-0.539v-2.54h0.539v-0.521z"/></g><g transform="matrix(-.226 0 0 .226 7.92 -.0337)" fill="#fff"><path d="m12.2 16.2v3.58h1.1v-0.52h-0.539v-2.54h0.539v-0.521z"/><path d="m13.9 16.2v3.58h1.1v-0.52h-0.539v-2.54h0.539v-0.521z"/></g><g fill="#333" aria-label="Patch demo"><path d="m11.7 2.6q0.374 0 0.649 0.123 0.279 0.123 0.427 0.353 0.148 0.23 0.148 0.546 0 0.312-0.148 0.546-0.148 0.23-0.427 0.353-0.275 0.123-0.649 0.123h-0.649v0.829h-0.534v-2.87zm-0.0246 1.59q0.349 0 0.53-0.148 0.181-0.148 0.181-0.423 0-0.275-0.181-0.423-0.181-0.148-0.53-0.148h-0.624v1.14z"/><path d="m14.1 3.26q0.485 0 0.739 0.234 0.259 0.23 0.259 0.698v1.29h-0.485v-0.267q-0.0944 0.144-0.271 0.222-0.172 0.0739-0.419 0.0739-0.246 0-0.431-0.0821-0.185-0.0862-0.287-0.234-0.0985-0.152-0.0985-0.341 0-0.296 0.218-0.472 0.222-0.181 0.694-0.181h0.567v-0.0328q0-0.23-0.14-0.353-0.135-0.123-0.406-0.123-0.185 0-0.365 0.0575-0.177 0.0575-0.3 0.16l-0.201-0.374q0.172-0.131 0.415-0.201 0.242-0.0698 0.513-0.0698zm-0.0698 1.87q0.193 0 0.341-0.0862 0.152-0.0903 0.214-0.255v-0.255h-0.53q-0.443 0-0.443 0.292 0 0.14 0.111 0.222 0.111 0.0821 0.308 0.0821z"/><path d="m17 5.36q-0.0903 0.0739-0.222 0.111-0.127 0.037-0.271 0.037-0.361 0-0.558-0.189t-0.197-0.55v-1.06h-0.361v-0.411h0.361v-0.501h0.513v0.501h0.587v0.411h-0.587v1.04q0 0.16 0.078 0.246 0.078 0.0821 0.226 0.0821 0.172 0 0.287-0.0903z"/><path d="m18.3 5.51q-0.341 0-0.612-0.144-0.271-0.144-0.423-0.398-0.152-0.259-0.152-0.583 0-0.324 0.152-0.579 0.152-0.255 0.419-0.398 0.271-0.144 0.616-0.144 0.324 0 0.567 0.131 0.246 0.131 0.37 0.378l-0.394 0.23q-0.0944-0.152-0.238-0.226-0.14-0.078-0.308-0.078-0.287 0-0.476 0.189-0.189 0.185-0.189 0.497t0.185 0.501q0.189 0.185 0.48 0.185 0.168 0 0.308-0.0739 0.144-0.078 0.238-0.23l0.394 0.23q-0.127 0.246-0.374 0.382-0.242 0.131-0.563 0.131z"/><path d="m20.8 3.26q0.415 0 0.665 0.242 0.25 0.242 0.25 0.719v1.26h-0.513v-1.19q0-0.287-0.135-0.431-0.135-0.148-0.386-0.148-0.283 0-0.448 0.172-0.164 0.168-0.164 0.489v1.11h-0.513v-3.05h0.513v1.11q0.127-0.135 0.312-0.205 0.189-0.0739 0.419-0.0739z"/><path d="m25.4 2.43v3.05h-0.493v-0.283q-0.127 0.156-0.316 0.234-0.185 0.078-0.411 0.078-0.316 0-0.571-0.14-0.25-0.14-0.394-0.394-0.144-0.259-0.144-0.591 0-0.333 0.144-0.587 0.144-0.255 0.394-0.394 0.255-0.14 0.571-0.14 0.218 0 0.398 0.0739t0.308 0.222v-1.13zm-1.16 2.64q0.185 0 0.333-0.0821 0.148-0.0862 0.234-0.242 0.0862-0.156 0.0862-0.361t-0.0862-0.361q-0.0862-0.156-0.234-0.238-0.148-0.0862-0.333-0.0862t-0.333 0.0862q-0.148 0.0821-0.234 0.238-0.0862 0.156-0.0862 0.361t0.0862 0.361q0.0862 0.156 0.234 0.242 0.148 0.0821 0.333 0.0821z"/><path d="m28 4.39q0 0.0534-0.0082 0.152h-1.72q0.0452 0.242 0.234 0.386 0.193 0.14 0.476 0.14 0.361 0 0.595-0.238l0.275 0.316q-0.148 0.177-0.374 0.267-0.226 0.0903-0.509 0.0903-0.361 0-0.636-0.144-0.275-0.144-0.427-0.398-0.148-0.259-0.148-0.583 0-0.32 0.144-0.575 0.148-0.259 0.406-0.402 0.259-0.144 0.583-0.144 0.32 0 0.571 0.144 0.255 0.14 0.394 0.398 0.144 0.255 0.144 0.591zm-1.11-0.723q-0.246 0-0.419 0.148-0.168 0.144-0.205 0.386h1.24q-0.0328-0.238-0.201-0.386-0.168-0.148-0.419-0.148z"/><path d="m31.2 3.26q0.415 0 0.657 0.242 0.242 0.238 0.242 0.719v1.26h-0.513v-1.19q0-0.287-0.127-0.431-0.127-0.148-0.365-0.148-0.259 0-0.415 0.172-0.156 0.168-0.156 0.485v1.11h-0.513v-1.19q0-0.287-0.127-0.431-0.127-0.148-0.365-0.148-0.263 0-0.419 0.168-0.152 0.168-0.152 0.489v1.11h-0.513v-2.19h0.489v0.279q0.123-0.148 0.308-0.226 0.185-0.078 0.411-0.078 0.246 0 0.435 0.0944 0.193 0.0903 0.304 0.271 0.135-0.172 0.349-0.267 0.214-0.0985 0.472-0.0985z"/><path d="m33.6 5.51q-0.333 0-0.599-0.144-0.267-0.144-0.419-0.398-0.148-0.259-0.148-0.583 0-0.324 0.148-0.579 0.152-0.255 0.419-0.398 0.267-0.144 0.599-0.144 0.337 0 0.604 0.144 0.267 0.144 0.415 0.398 0.152 0.255 0.152 0.579 0 0.324-0.152 0.583-0.148 0.255-0.415 0.398-0.267 0.144-0.604 0.144zm0-0.439q0.283 0 0.468-0.189t0.185-0.497-0.185-0.497-0.468-0.189-0.468 0.189q-0.181 0.189-0.181 0.497t0.181 0.497q0.185 0.189 0.468 0.189z"/></g></svg>
