override hero block in theme template

Author: 2bndy5

docs/index.md

@@ -2,37 +2,11 @@
 hide:
   - navigation
   - toc
+template: home.html
 ---
 
 <!-- markdownlint-disable MD041 MD033 MD036 -->
 
-<style>
-  /* this must be embedded in the page because
-     it removes the gap between header and hero */
-  .md-main__inner {
-    margin-top: 0;
-  }
-  .md-content__inner {
-    padding-top: 0;
-  }
-  .md-content__inner::before {
-    height: 0;
-  }
-</style>
-<div class="hero" markdown>
-
-# C/C++ linting that simply works
-
-**Lint your C/C++ code in workflow** - automated, configurable, and reliable. Integrate seamlessly into any workflow in minutes.
-
-[Get started :material-rocket-launch:](getting-started.md){ .md-button .md-button--primary }
-
-</div>
-
-<div class="grid cards" markdown>
-
-</div>
-
 ## Everything you need for linting C/C++ code
 
 <div class="grid cards" markdown>

docs/overrides/home.html

@@ -0,0 +1,20 @@
+{% extends "main.html" %}
+
+{% block hero %}
+    <div class="hero">
+        <h1 id="cc-linting-that-simply-works">C/C++ linting that simply works</h1>
+        <p>
+            <strong>Lint your C/C++ code in your development workflow</strong>
+            - automated, configurable, and reliable.
+            Integrate seamlessly into any development workflow in minutes.
+        </p>
+        <p>
+            <a class="md-button md-button--primary" href="getting-started/">
+                Get started
+                <span class="twemoji">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.13 22.19-1.63-3.83c1.57-.58 3.04-1.36 4.4-2.27zM5.64 12.5l-3.83-1.63 6.1-2.77C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39S16.66.269 11 5.93c-2.19 2.19-3.5 4.6-4.35 6.71-.28.75-.09 1.57.46 2.13l2.13 2.12c.55.56 1.37.74 2.12.46A19.1 19.1 0 0 0 18.07 13c5.66-5.66 3.54-10.61 3.54-10.61m-7.07 7.07c-.78-.78-.78-2.05 0-2.83s2.05-.78 2.83 0c.77.78.78 2.05 0 2.83s-2.05.78-2.83 0m-5.66 7.07-1.41-1.41zM6.24 22l3.64-3.64c-.34-.09-.67-.24-.97-.45L4.83 22zM2 22h1.41l4.77-4.76-1.42-1.41L2 20.59zm0-2.83 4.09-4.08c-.21-.3-.36-.62-.45-.97L2 17.76z"></path></svg>
+                </span>
+            </a>
+        </p>
+    </div>
+{% endblock %}

docs/stylesheets/extra.css

@@ -5,6 +5,7 @@ th {
 :root > * {
     --cpp-linter-logo-color-green: #40b385;
     --cpp-linter-logo-color-yellow: #ffc20a;
+    --rocket: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.13 22.19-1.63-3.83c1.57-.58 3.04-1.36 4.4-2.27zM5.64 12.5l-3.83-1.63 6.1-2.77C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39S16.66.269 11 5.93c-2.19 2.19-3.5 4.6-4.35 6.71-.28.75-.09 1.57.46 2.13l2.13 2.12c.55.56 1.37.74 2.12.46A19.1 19.1 0 0 0 18.07 13c5.66-5.66 3.54-10.61 3.54-10.61m-7.07 7.07c-.78-.78-.78-2.05 0-2.83s2.05-.78 2.83 0c.77.78.78 2.05 0 2.83s-2.05.78-2.83 0m-5.66 7.07-1.41-1.41zM6.24 22l3.64-3.64c-.34-.09-.67-.24-.97-.45L4.83 22zM2 22h1.41l4.77-4.76-1.42-1.41L2 20.59zm0-2.83 4.09-4.08c-.21-.3-.36-.62-.45-.97L2 17.76z"></path></svg>' )
 }
 
 /* Hero section styling */
@@ -16,8 +17,8 @@ th {
     /* animation: gradientShift 8s ease infinite; */
     background: var(--md-primary-fg-color);
     color: var(--md-primary-bg-color);
-    margin: 0 -1em 3rem -1em;
-    border-radius: 0 0 1rem 1rem;
+    /* margin: 0 -1em 3rem -1em; */
+    /* border-radius: 0 0 1rem 1rem; */
 }
 
 .hero h1 {
@@ -38,14 +39,18 @@ th {
     margin-right: auto;
 }
 
-.hero .md-button:hover {
-    border: 2px solid black;
+.hero .twemoji {
+	--md-icon-size: 1.125em;
+	display: inline-flex;
+	height: var(--md-icon-size);
+	vertical-align: text-top;
 }
 
 .hero .md-button {
     background: var(--cpp-linter-logo-color-green);
     color: black;
     border: none;
+    border-radius: unset;
 }
 
 .hero .md-button:hover {

mkdocs.yml

@@ -16,8 +16,10 @@ exclude_docs: |
 
 theme:
   name: material
+  custom_dir: docs/overrides
   features:
     - navigation.tabs
+    - navigation.tabs.sticky
     - toc.integrate
     - navigation.top
     - navigation.sections