style: login and config working

src/routes/how-do-i.tsx

@@ -1,10 +1,11 @@
+import Layout from "~/components/Layout";
 import "../styles/pages/how-do-i.scss";
 
 function howDoI() {
   return (
-    <>
-      <h1 class="hdi-title">How do I...?</h1>
-      <section class="hdi-section">
+    <Layout site="how-do-i">
+      <h1>How do I...?</h1>
+      <section>
         <h2>.. enable / disable certain features?</h2>
         <p>
           Features can be enabled and disables using the <code>/feature</code>
@@ -26,7 +27,7 @@ function howDoI() {
           {/* <p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p> */}
         </div>
       </section>
-      <section class="hdi-section">
+      <section>
         <h2>.. create a match?</h2>
         <p>
           You can create a match time using the <code>/match</code> command.
@@ -47,14 +48,14 @@ function howDoI() {
           {/* <p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p> */}
         </div>
       </section>
-      <section class="hdi-footernotesection">
+      <section class="note">
         <p>
           Is something missing here?
           <br />
           Please <a href="/contact">contact me</a>!
         </p>
       </section>
-    </>
+    </Layout>
   );
 }