style: enhance header layout and add new CSS styles

Author: julioest

docs/website/index.html

@@ -49,15 +49,13 @@
         <div class="container">
             <h1>MrDocs</h1>
             <p>MrDocs is a C++ documentation generator for your projects.</p>
-            <p>
-                <a href="docs/" role="button" class="secondary" aria-label="Documentation">
-                    Get started
-                </a>
-                <a href="docs/mrdocs/install.html" role="button" class="contrast outline" aria-label="Download">
-                    Download
-                </a>
-            </p>
-            <p><code><small>No workarounds: A tool that fully understands C++</small></code></p>
+            <div class="header-cta">
+                <a href="docs/" class="secondary" role="button" aria-label="Documentation">Get started</a>
+                <a href="docs/mrdocs/install.html" class="contrast outline" role="button" aria-label="Download">Download</a>
+            </div>
+            <div class="banner-snippet">
+                <small><code>No workarounds: A tool that fully understands C++</code></small>
+            </div>
         </div>
     </header>
     <main>

docs/website/index.html.hbs

@@ -60,15 +60,13 @@
         <div class="container">
             <h1>{{ title }}</h1>
             <p>{{ description }}</p>
-            <p>
-                <a href="docs/" role="button" class="secondary" aria-label="Documentation">
-                    Get started
-                </a>
-                <a href="docs/mrdocs/install.html" role="button" class="contrast outline" aria-label="Download">
-                    Download
-                </a>
-            </p>
-            <p><code><small>{{ banner.description }}</small></code></p>
+            <div class="header-cta">
+                <a href="docs/" class="secondary" role="button" aria-label="Documentation">Get started</a>
+                <a href="docs/mrdocs/install.html" class="contrast outline" role="button" aria-label="Download">Download</a>
+            </div>
+            <div class="banner-snippet">
+                <small><code>{{ banner.description }}</code></small>
+            </div>
         </div>
     </header>
     <main>

docs/website/styles.css

@@ -2807,3 +2807,23 @@ nav {
   background-color: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(10px);
 }
+
+.header-cta {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  margin: 1.5rem 0 0 0;
+}
+
+.banner-snippet {
+  display: flex;
+  justify-content: center;
+  border-radius: 0.25rem;
+  margin: 0.5em 0 0 0;
+}
+
+.banner-snippet code {
+  margin-top: 0.5rem;
+  background-color: rgba(34, 34, 34, 0.5);
+  color: inherit;
+}