feat: improve landing page and logo

.github/workflows/gh-pages.yml

@@ -5,13 +5,12 @@ on:
     branches:
       - main
     tags:
-      - 'v*'
+      - "v*"
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
-
   deploy:
     runs-on: ubuntu-22.04
     permissions:
@@ -42,4 +41,4 @@ jobs:
           MAJOR_MINOR=${REF_NAME%.*}
           # strip the leading v from the ref_name
           # update the latest alias          
-          nix develop --command bash -c "mike deploy -p -u ${MAJOR_MINOR} latest"      
+          nix develop --command bash -c "mike deploy -p -u ${MAJOR_MINOR} latest"

mkdocs.yml

@@ -22,6 +22,10 @@ validation:
 theme:
   name: material
   custom_dir: overrides
+
+  logo: assets/images/logo.png
+  favicon: assets/images/logo.png
+
   features:
     - content.code.annotate
     - content.code.copy

overrides/home.html

@@ -51,32 +51,43 @@
   .md-header {
     position: initial;
   }
-  /*.md-main__inner{margin:0}*/
-  .md-content {
-    display: none;
+  .mdx-hero {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 500px;
+    height: calc(100vh - 2.4rem);
   }
-  .mdx-hero__image {
-    padding: 4rem 0 0 0;
+
+  .magnifying-glass {
+    fill: #f58634;
+    stroke: #f58634;
   }
   .mdx-hero__content {
-    /*padding-bottom: 0;*/
-    /*position: relative;*/
-    /*top: -10rem;*/
+    min-width: 20rem;
+  }
+
+  .md-main {
+    display: none;
+  }
+
+  @media screen and (max-width: 60em) {
+    .mdx-hero {
+      flex-direction: column-reverse;
+    }
+    .mdx-hero__image {
+      margin-top: 4rem;
+    }
+    .mdx-hero__content {
+      min-width: unset;
+    }
   }
 </style>
 <section class="mdx-container">
   <div class="md-grid md-typeset">
     <div class="mdx-hero">
-      <div class="mdx-hero__image">
-        <img
-          src="assets/images/illustration.png"
-          alt=""
-          width="1659"
-          height="1200"
-          draggable="false"
-        />
-      </div>
-      <div class="md-content__inner">
+      <div class="mdx-hero__content md-content__inner">
         <h1>NixOS Facter</h1>
         <p>{{ config.site_description }}</p>
         <a
@@ -94,6 +105,10 @@ <h1>NixOS Facter</h1>
           More info
         </a>
       </div>
+
+      <div class="mdx-hero__image md-content__inner">
+        <img src="assets/images/hero.svg" alt="" draggable="false" />
+      </div>
     </div>
   </div>
 </section>