Improve landing page plus overall view and structure.

Details:
- Make landing page less spread out and responsive by reusing existing
  template. Remove vertical line and adjust image to have border.
  Add extra highlighting for first letters of full name to associate
  them more with backronym name and logo.

- Make navbar monospace to stand out.

- Make dark and light brands more in sync.

- Move 'blog.qmd' into 'blog/index.qmd' for consistency.

- Improve social preview links (hopefully).

Author: echasnovski

_quarto.yml

@@ -4,23 +4,22 @@ project:
 
 website:
   title: MINI
-  favicon: assets/logo-mini_180x180.png
-  description: 'Modular Independent Neovim Improvements'
+  description: "Modular Independent Neovim Improvements"
   site-url: https://echasnovski.github.io/mini-site
   repo-url: https://github.com/nvim-mini
+  favicon: /assets/logo-mini_180x180.png
 
   open-graph:
-    site-name: "MINI"
-    locale: en_US
+    image: /assets/logo-mini_social.png
   twitter-card:
-    image: "assets/logo-mini.png"
+    image: /assets/logo-mini_social.png
 
   navbar:
     search: true
     left:
       - href: mini.nvim/index.md
         text: mini.nvim
-      - href: blog.qmd
+      - href: blog/index.qmd
         text: Blog
     right:
       - icon: github

assets/logo-mini_circle.png

@@ -1,8 +1,8 @@
 ---
 title: "Blog"
 listing:
-  contents: blog
-  template: theme/blog-listing.ejs
+  contents: .
+  template: ../theme/blog-listing.ejs
   sort-ui: true
   filter-ui: true
   date-format: iso

assets/logo-mini_social.png

@@ -1,20 +1,22 @@
-::: {.grid}
+---
+title: "MINI"
+about:
+  template: trestles
+  image: assets/logo-mini.png
+  image-shape: rectangle
+  image-alt: "Word \"MINI\" written in 3x5 pixel font; \"MI\" over \"NI\""
+format:
+  html:
+    include-in-header:
+      - text: "<style> .quarto-title > h1.title { display: none } </style>"
+---
 
-::: {.g-col-3}
-:::
-
-::: {.g-col-4}
-<img src="assets/logo-mini.png" alt="MINI" style="max-width:100%;border:solid 2px"/>
-:::
-
-::: {.g-col-5}
-<p style="font-size:2em"><b>M</b>odular</p>
-<p style="font-size:2em"><b>I</b>ndependent</p>
-<p style="font-size:2em"><b>N</b>eovim</p>
-<p style="font-size:2em"><b>I</b>mprovements</p>
-:::
-
-:::
+<!-- Make it monospace to align bold letters and stand out-->
+<span style="font-size:2em; font-family:monospace">
+  <!-- Add style of bold letters the same as in logo to show that this is backronym -->
+  <b style="background:#00182a; color:#b3daf9">M</b>odular <b style="background:#00182a; color:#b3daf9">I</b>ndependent<br>
+  <b style="background:#00182a; color:#d9d8aa">N</b>eovim&nbsp; <b style="background:#00182a; color:#d9d8aa">I</b>mprovements
+</span>
 
 - <p style="font-size:1.5em"><b><a href="mini.nvim/index.html">mini.nvim</a></b></p>
     - [Modules](mini.nvim/index.md#modules)

blog.qmd blog/index.qmdblog.qmd renamed to blog/index.qmd

@@ -48,6 +48,7 @@ typography:
     color: primary
   monospace:
     family: monospace
+    background-color: bg-2
   monospace-inline:
     color: cyan
     background-color: bg-2
@@ -62,25 +63,7 @@ defaults:
       navbar-fg: "#E6E2DB"
       code-block-bg: "#11262D"
     rules: |
-      p {
-        margin-top: 0em;
-        margin-bottom: 0.5em;
-      }
-      h1 { font-size: 2em }
-      h2 { font-size: 1.8em; margin-top: 1em; margin-bottom: 0.25em; }
-      h3 { font-size: 1.6em; margin-top: 1em; margin-bottom: 0.25em; }
-      h4 { font-size: 1.4em; margin-top: 1em; margin-bottom: 0.25em; font-weight: normal }
-      h5 { font-size: 1.2em; font-weight: normal }
-      h6 { font-size: 1em; font-weight: normal }
-
-      p pre code:not(.sourceCode),
-      li pre code:not(.sourceCode),
-      pre code:not(.sourceCode) {
-        background-color: #11262D;
-      }
-      .navbar {
-        border-bottom: solid 1px #E6E2DB
-      }
+      /* General adjustments */
       .blockquote {
         border-left: solid #D9D8AA;
         color: #98948E;
@@ -89,9 +72,36 @@ defaults:
         color: #98948E;
         background: #222222;
       }
-      div.category {
-        font-size: 0.8rem;
+      .about-image { border: solid 2px }
+      div.quarto-about-trestles .about-contents { border-left: none }
+      div.category { font-size: 0.8rem; }
+
+      p { margin-top: 0em; margin-bottom: 0.5em; }
+
+      p pre code:not(.sourceCode),
+      li pre code:not(.sourceCode),
+      pre code:not(.sourceCode) {
+        background-color: #11262D;
+      }
+
+      /* Headings */
+      h1 { font-size: 2em }
+      h2 { font-size: 1.75em; margin-top: 1em; margin-bottom: 0.25em; }
+      h3 { font-size: 1.5em; margin-top: 1em; margin-bottom: 0.25em; }
+      h4 { font-size: 1.35em; margin-top: 1em; margin-bottom: 0.25em; font-weight: normal; }
+      h5 { font-size: 1.2em; font-weight: normal; }
+      h6 { font-size: 1em; font-weight: normal; }
+
+      /* Navbar and offset when when navigating to the anchor*/
+      .navbar {
+        border-bottom: solid 1px #E6E2DB;
+        min-height: 60px;
       }
+      /* Using monospace font is just a visual preference */
+      .navbar-title, .nav-item { font-family: monospace }
+      :target { scroll-margin-top: 60px; }
+
+      /* Blog listing */
       .blog-listing-item {
         padding-top: 1em;
         padding-bottom: 1em;
@@ -119,9 +129,7 @@ defaults:
         border: solid 1px;
         border-radius: .25rem;
       }
-      .help-syntax-keys {
-        color: #EDC7E7
-      }
-      .help-syntax-special {
-        color: #D9D8AA
-      }
+
+      /* Help file custom syntax */
+      .help-syntax-keys { color: #EDC7E7 }
+      .help-syntax-special { color: #D9D8AA }

index.qmd

@@ -63,36 +63,45 @@ defaults:
       navbar-fg: "#1D1E23"
       code-block-bg: "#E9E1DD"
     rules: |
-      p {
-        margin-top: 0em;
-        margin-bottom: 0.5em;
+      /* General adjustments */
+      .blockquote {
+        border-left: solid #804E00;
+        color: #64666C;
       }
-      h1 { font-size: 2em }
-      h2 { font-size: 1.8em; margin-top: 1em; margin-bottom: 0.25em; }
-      h3 { font-size: 1.6em; margin-top: 1em; margin-bottom: 0.25em; }
-      h4 { font-size: 1.4em; margin-top: 1em; margin-bottom: 0.25em; font-weight: normal }
-      h5 { font-size: 1.2em; font-weight: normal }
-      h6 { font-size: 1em; font-weight: normal }
+      .cell-output {
+        color: #64666C;
+        background: #E2E2E2;
+      }
+      .about-image { border: solid 2px }
+      div.quarto-about-trestles .about-contents { border-left: none }
+      div.category { font-size: 0.8rem; }
+
+      p { margin-top: 0em; margin-bottom: 0.5em; }
 
       p pre code:not(.sourceCode),
       li pre code:not(.sourceCode),
       pre code:not(.sourceCode) {
         background-color: #E9E1DD;
       }
+
+      /* Headings */
+      h1 { font-size: 2em }
+      h2 { font-size: 1.75em; margin-top: 1em; margin-bottom: 0.25em; }
+      h3 { font-size: 1.5em; margin-top: 1em; margin-bottom: 0.25em; }
+      h4 { font-size: 1.35em; margin-top: 1em; margin-bottom: 0.25em; font-weight: normal; }
+      h5 { font-size: 1.2em; font-weight: normal; }
+      h6 { font-size: 1em; font-weight: normal; }
+
+      /* Navbar and offset when when navigating to the anchor*/
       .navbar {
-        border-bottom: solid 1px #1D1E23
-      }
-      .blockquote {
-        border-left: solid #804E00;
-        color: #64666C;
-      }
-      .cell-output {
-        background: #E2E2E2;
-        color: #64666C;
-      }
-      div.category {
-        font-size: 0.8rem;
+        border-bottom: solid 1px #1D1E23;
+        min-height: 60px;
       }
+      /* Using monospace font is just a visual preference */
+      .navbar-title, .nav-item { font-family: monospace }
+      :target { scroll-margin-top: 60px; }
+
+      /* Blog listing */
       .blog-listing-item {
         padding-top: 1em;
         padding-bottom: 1em;
@@ -120,9 +129,7 @@ defaults:
         border: solid 1px;
         border-radius: .25rem;
       }
-      .help-syntax-keys {
-        color: #370674
-      }
-      .help-syntax-special {
-        color: #804E00
-      }
+
+      /* Help file custom syntax */
+      .help-syntax-keys { color: #370674 }
+      .help-syntax-special { color: #804E00 }