From e0c5cbbd280b8c277835c5059b33d348218811f2 Mon Sep 17 00:00:00 2001
From: Techatrix <techatrix@mailbox.org>
Date: Thu, 8 Aug 2024 07:18:16 +0200
Subject: [PATCH] WIP

---
 assets/style.css          |  58 +++++++++++++++++++---
 content/zls/install.md    |  61 +++++++++++++++--------
 layouts/index.shtml       |   9 +++-
 layouts/zls-install.shtml | 102 ++++++++++++++++++++------------------
 layouts/zls-release.shtml |   4 --
 5 files changed, 151 insertions(+), 83 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 41ddc08..f6b8b9e 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -20,23 +20,58 @@ nav {
 
 h1,
 h2,
-h3 {
+h3,
+h4,
+h5,
+h6 {
   font-family: sans-serif;
-  font-weight: 600;
+  font-weight: bold;
+  font-size: inherit;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.3rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+h4 {
+  font-size: 1rem;
+}
+
+h1 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   align-self: center;
   text-align: center;
 }
 
-h2 {
-  border-bottom: 1px dashed #aaa;
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+h2,
+h3 {
+  border-bottom: 1px dashed #666;
 }
 
 body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  padding: 0px;
-  margin: 0px;
+  margin: 0;
+  padding: 0;
   font-family: sans-serif;
 }
 
@@ -79,6 +114,11 @@ p:has(+ pre) {
   margin-bottom: 0;
 }
 
+p {
+  margin-top: 0.35rem;
+  margin-bottom: 0.35rem;
+}
+
 p code {
   font-weight: bold;
 }
@@ -105,8 +145,12 @@ figure img {
   max-width: 100%;
 }
 
+body {
+  color: #222;
+}
+
 a {
-  color: #121212;
+  color: #111;
 }
 
 pre {
diff --git a/content/zls/install.md b/content/zls/install.md
index 2c238d8..e952d99 100644
--- a/content/zls/install.md
+++ b/content/zls/install.md
@@ -15,7 +15,8 @@
 
 > Many editor extensions can find Zig and ZLS automatically by adding them to your `PATH`.
 
-<details>
+<!-- `name` attribute on `<details>`:  https://caniuse.com/mdn-html_elements_details_name -->
+<details name="editor-extensions">
   <summary>
 
 ## Visual Studio Code
@@ -27,7 +28,7 @@ Using ZLS in VS Code is as simple as installing the [official Zig Language exten
 
 </details> <!-- Visual Studio Code -->
 
-<details>
+<details name="editor-extensions">
   <summary>
 
 <h2 id="sublime-text">Sublime Text</h2> <!-- linked from "In-Editor Configuration" -->
@@ -39,7 +40,11 @@ Using ZLS in VS Code is as simple as installing the [official Zig Language exten
 3. place the following snippet in the `Zig.sublime-settings` (Preferences -> Package Settings -> Zig -> Settings)
 
 <details>
-<summary>show <b>Zig.sublime-settings</b></summary>
+<summary>
+
+  show **Zig.sublime-settings**
+
+</summary>
 
 ```json
 // Zig.sublime-settings
@@ -56,7 +61,11 @@ Using ZLS in VS Code is as simple as installing the [official Zig Language exten
 ### Sublime Text 4
 
 <details>
-<summary>show <b>LSP.sublime-settings</b></summary>
+<summary>
+
+  show **LSP.sublime-settings**
+
+</summary>
 
 ```json
 // LSP.sublime-settings
@@ -107,7 +116,11 @@ Using ZLS in VS Code is as simple as installing the [official Zig Language exten
 ### Sublime Text 3
 
 <details>
-<summary>show <b>LSP.sublime-settings</b></summary>
+<summary>
+
+  show **LSP.sublime-settings**
+
+</summary>
 
 ```json
 // LSP.sublime-settings
@@ -128,7 +141,7 @@ Using ZLS in VS Code is as simple as installing the [official Zig Language exten
 
 </details> <!-- Sublime Text -->
 
-<details>
+<details name="editor-extensions">
   <summary>
 
 ## CLion / other JetBrains IDEs
@@ -146,7 +159,7 @@ If everything is set up correctly, an LSP status indicator should appear in the
 
 </details> <!-- CLion / other JetBrains IDE -->
 
-<details>
+<details name="editor-extensions">
   <summary>
 
 <h2 id="helix">Helix</h2> <!-- linked from "In-Editor Configuration" -->
@@ -159,7 +172,11 @@ To apply in-editor configuration or manually specify paths to `zls` or `zig`, op
 
 <details>
 
-<summary>show <b>languages.toml</b></summary>
+<summary>
+
+  show **languages.toml**
+
+</summary>
 
 ```toml
 [language-server.zls]
@@ -192,21 +209,21 @@ For more information on the health check results refer to [Health check](https:/
 
 </details> <!-- Helix -->
 
-<details>
+<details name="editor-extensions">
   <summary>
 
 ## Neovim / Vim8
 
   </summary>
 
-<div class="banner-warning">
+<blockquote class="banner-warning">
 
 The [mason](https://github.com/williamboman/mason.nvim) package manager can only install the latest tagged release of ZLS which should **not** be used with Zig master.
 Do **not** use ZLS from mason with Zig master.
 
-</div>
+</blockquote>
 
-<details>
+<details name="vim-extensions">
   <summary>
 
 <h3 id="nvim-lspconfig">nvim-lspconfig</h3> <!-- linked from "In-Editor Configuration" -->
@@ -321,7 +338,7 @@ EOF
 
 </details> <!-- nvim-lspconfig -->
 
-<details>
+<details name="vim-extensions">
   <summary>
   
 ### CoC
@@ -348,7 +365,7 @@ Add ZLS in your `coc-settings.json` (open it using `:CocConfig`) like this:
 
 </details> <!-- CoC -->
 
-<details>
+<details name="vim-extensions">
   <summary>
 
 ### YouCompleteMe
@@ -373,7 +390,7 @@ let g:ycm_language_server =
 
 </details> <!-- YouCompleteMe -->
 
-<details>
+<details name="vim-extensions">
   <summary>
 
 ### LanguageClient-neovim
@@ -393,7 +410,7 @@ let g:LanguageClient_serverCommands = {
 
 </details>
 
-<details>
+<details name="editor-extensions">
   <summary>
 
 ## Emacs
@@ -407,7 +424,7 @@ Use `M-x eglot` in a zig-mode buffer to start the server.
 
 </details>
 
-<details>
+<details name="editor-extensions">
   <summary>
 
 ## Doom Emacs
@@ -420,7 +437,7 @@ Use `M-x eglot` in a zig-mode buffer to start the server.
 
 </details> <!-- Doom Emacs -->
 
-<details>
+<details name="editor-extensions">
   <summary>
 
 ## Spacemacs
@@ -436,7 +453,7 @@ Use `M-x eglot` in a zig-mode buffer to start the server.
 
 </details> <!-- Spacemacs -->
 
-<details>
+<details name="editor-extensions">
   <summary>
 
 ## Kate
@@ -467,7 +484,7 @@ If you wish to manually specify the path to the ZLS executable, open `Settings -
 
 > ZLS works well without any configuration, all config options have reasonable defaults. Feel free to read through the available config options but unless there is something you want to change, there is no need to configure ZLS.
 
-<details>
+<details name="configuration">
   <summary>
 
 ## In-Editor Configuration (recommended)
@@ -488,7 +505,7 @@ This feature is available for the following editors:
 
 </details> <!-- In-Editor Configuration -->
 
-<details>
+<details name="configuration">
   <summary>
 
 ## zls.json
@@ -572,7 +589,7 @@ info  ( main ): A path to the local configuration folder will be printed instead
 
 </details> <!-- zls.json -->
 
-<details>
+<details name="configuration">
   <summary>
 
 ## Per-build Configuration (advanced)
diff --git a/layouts/index.shtml b/layouts/index.shtml
index a84ba87..ed3e533 100644
--- a/layouts/index.shtml
+++ b/layouts/index.shtml
@@ -2,14 +2,19 @@
 <title id="title" var="$page.title"></title>
 <head id="head">
   <style>
-    h2 {
+    #header h1 {
+      font-size: 3rem;
+    }
+    #header h2 {
         border: none;
+        align-self: center;
+        text-align: center;
     }
   </style>
 </head>
 <header id="header">
   <h1>Zigtools</h1>
-  <h2>We make free and open-source tools for the
+  <h2>We make free and open-source tools <br> for the
     <a href="https://github.com/ziglang/zig">@ziglang</a>
     community.</h2>
 </header>
diff --git a/layouts/zls-install.shtml b/layouts/zls-install.shtml
index e223ce0..b7ce9a5 100644
--- a/layouts/zls-install.shtml
+++ b/layouts/zls-install.shtml
@@ -2,69 +2,73 @@
 <title id="title" var="$page.title"></title>
 <head id="head">
   <style>
-    #page h2,
-    #page h3 {
-      text-align: left;
+    .tagline {
+      font-size: 1rem;
+      font-style: italic;
+      margin: 4px 0px;
+    }
+
+    .vscode-banner {
+      display: flex;
+      flex-direction: column;
+      width: fit-content;
+      border: 0.3em solid;
+      border-radius: 9999px;
+      border-color: rgb(0, 120, 212);
+      padding: 0px 2rem;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
+
+    #form-result {
+      padding-top: 2rem;
     }
 
     #form-result pre {
       font-size: larger;
     }
 
-    #form-result table {
+    #form-table {
       padding: 0.5rem 0;
     }
 
-    .tagline {
-      font-size: 1rem;
-      font-style: italic;
-    }
-
     .banner-note {
       border-left: 0.3em solid;
-      padding-left: 1em;
+      padding: 0.1em 0 0.1em 1em;
       border-color: var(--banner-note-color);
     }
 
     .banner-warning {
       border-left: 0.3em solid;
-      padding-left: 1em;
+      padding: 0.1em 0 0.1em 1em;
       border-color: var(--banner-warning-color);
     }
 
     .banner-important {
       border-left: 0.3em solid;
-      padding-left: 1em;
+      padding: 0.1em 0 0.1em 1em;
       border-color: var(--banner-important-color);
     }
-
+    
     details> :not(summary) {
-      margin-left: 0.25rem;
+      margin-left: 1.5rem;
     }
 
     summary {
-      position: relative;
+      display: flex;
     }
-    summary::marker {
-      content: none;
+    summary > * {
+      flex-grow: 1;
     }
-    summary::before,
-    summary::after {
-      content: '';
-      width: .75em;
-      height: 0;
-      border-bottom: 2px solid;
-      position: absolute;
-      top: calc(50% - 1px);
-      right: 0;
-      transform: translateY(-50%);
+    summary::before {
+      content: "\2212";
+      font-size: 16px;
+      margin-right: 0.5rem;
+      align-self: center;
     }
-    summary::after {
-      transform: rotate(90deg);
-      transform-origin: 50% 50%;
-    }
-    [open]>summary::after {
-      transform: rotate(0deg);
+    details[open] > summary::before {
+      content: "+" !important;
     }
 
     form {
@@ -136,17 +140,14 @@
   <h1 class="title" var="$page.title"></h1>
 </header>
 <main id="content">
-  <div style="display: flex; justify-content: center;">
-    <div style="width: fit-content; border: 0.3em solid; border-radius: 9999px; border-color: rgb(0, 120, 212); padding: 0px 1.4rem; text-align: center;">
-      <p style="margin: 6px 0px">
-        <strong>VS Code</strong>
-        users only need the
-        <a href="https://marketplace.visualstudio.com/items?itemName=ziglang.vscode-zig">official Zig Language extension</a>.
-      </p>
-      <p style="margin: 4px 0px" class="tagline">No need to manually install Zig or ZLS.</p>
-    </div>
+  <div class="vscode-banner">
+    <p>
+      <strong>VS Code</strong>
+      users only need the
+      <a href="https://marketplace.visualstudio.com/items?itemName=ziglang.vscode-zig">official Zig Language extension</a>.
+    </p>
+    <p class="tagline">No need to manually install Zig or ZLS.</p>
   </div>
-  <h1>Install ZLS</h1>
   <form>
     <input
     type="text"
@@ -165,12 +166,14 @@
       </button>
     </div>
   </form>
-  <div id="form-result">
+  <div id="form-result" style="display: none;">
+    <blockquote>
+      <p>Files are signed with
+        <a href="https://jedisct1.github.io/minisign/">minisign</a>
+        using this public key:</p>
+      <pre><code>RWR+9B91GBZ0zOjh6Lr17+zKf5BoSuFvrx2xSeDE57uIYvnKBGmMjOex</code></pre>
+    </blockquote>
     <table id="form-table"></table>
-    <p>Files are signed with
-      <a href="https://jedisct1.github.io/minisign/">minisign</a>
-      using this public key:</p>
-    <pre><code>RWR+9B91GBZ0zOjh6Lr17+zKf5BoSuFvrx2xSeDE57uIYvnKBGmMjOex</code></pre>
   </div>
   <script>
     const params = new Proxy(new URLSearchParams(window.location.search), {
@@ -203,6 +206,7 @@
       const fname = document.getElementById("zig-version");
       if ("error" in json) {
         fname.setCustomValidity(json.error);
+        document.getElementById("form-result").style.display = "none";
         return;
       } else {
         fname.setCustomValidity("");
@@ -210,6 +214,7 @@
 
       if (!("version" in json) || !("date" in json)) {
         alert("418 I'm a teapot");
+        document.getElementById("form-result").style.display = "none";
         return;
       }
 
@@ -266,6 +271,7 @@
       table.appendChild(tbody);
 
       document.getElementById("form-table").innerHTML = table.outerHTML;
+      document.getElementById("form-result").style.display = ""; 
     };
 
     if (params["zig_version"] && params["compatibility"]) {
diff --git a/layouts/zls-release.shtml b/layouts/zls-release.shtml
index cf86058..23f585c 100644
--- a/layouts/zls-release.shtml
+++ b/layouts/zls-release.shtml
@@ -2,10 +2,6 @@
 <title id="title" var="$page.title"></title>
 <head id="head">
   <style>
-    #page h2, #page h3 {
-        text-align: left;
-    }
-    
     @media (prefers-color-scheme: dark) {
       figure > img {
           border: 1px solid #333;