fix(whatislove-dev): add fieldset element to theme switcher wd-586 (#592

)

* fix(whatislove-dev): edit canonical on all pages wd-586

* fix(whatislove-dev): add fieldset element to theme switcher wd-586

apps/whatislove-dev/src/includes/settings.njk

@@ -1,8 +1,8 @@
 {% macro settings(className) %}
-	<section class="{{ className }} settings settings--theme">
-		<h2 class="settings__title visually-hidden">Theme switcher</h2>
+	<fieldset class="{{ className }} settings settings--theme">
+		<legend class="settings__title visually-hidden">Theme switcher</legend>
 		<input class="settings__theme-control" type="radio" name="theme" value="light" aria-label="Light" />
 		<input class="settings__theme-control" type="radio" name="theme" value="auto" aria-label="Auto" checked />
 		<input class="settings__theme-control" type="radio" name="theme" value="dark" aria-label="Dark" />
-	</section>
+	</fieldset>
 {% endmacro %}

apps/whatislove-dev/src/layouts/page.njk

@@ -34,7 +34,7 @@
 		<link rel="apple-touch-icon" href="/images/favicons/180.png" />
 		<link rel="manifest" href="/manifest.json" />
 
-		<link rel="canonical" href="{{ global.domain }}" />
+		<link rel="canonical" href="{{ global.domain + page.url }}" />
 		<link rel="authorization_endpoint" href="https://indieauth.com/auth" />
 
 		<meta name="description" content="{{ pageDescription }}" />

apps/whatislove-dev/src/styles/blocks/settings.css

@@ -4,7 +4,9 @@
 	align-items: center;
 	padding-block: 8px;
 	padding-inline: 10px;
+	margin: 0;
 	background-color: hsl(var(--color-page-background-highlight));
+	border: 0;
 	border-radius: 5px;
 }