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.

Author: echasnovski

_quarto.yml

@@ -20,7 +20,7 @@ website:
     left:
       - href: mini.nvim/index.md
         text: mini.nvim
-      - href: blog.qmd
+      - href: blog/index.qmd
         text: Blog
     right:
       - icon: github

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

@@ -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

index.qmd

@@ -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)

theme/brand-dark.yml

@@ -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 }

theme/brand-light.yml

@@ -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 }