feat: Improve desktop site nav and home.

This commit improves the styling of the site navigation to make it clearer and easier to scan through, and also updates the styling of the home page for similar reasons. Signed-off-by: Andrew Lilley Brinker <[email protected]>
mitre · Jan 24, 2025 · 9d050a2 · 9d050a2
1 parent 9541362
commit 9d050a2
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 69 deletions.
diff --git a/site/config.toml b/site/config.toml
@@ -34,7 +34,7 @@ nav = [
     { name = "Docs", url = "@/docs/_index.md" },
     { name = "Contribute", url = "@/docs/contributing/_index.md" },
     { name = "Blog", url = "@/blog/_index.md" },
-    { name = "Get Help", url = "https://github.com/mitre/hipcheck/discussions", icon = "life-buoy", external = true },
+    { name = "Help", url = "https://github.com/mitre/hipcheck/discussions", external = true },
     { name = "Install", url = "@/docs/getting-started/install.md", highlight = true, icon = "arrow-down" },
     { url = "https://github.com/mitre/hipcheck", icon = "github", icononly = true },
 ]
@@ -77,4 +77,4 @@ footer = [
 # Set an announcement for the site navigation bar.
 [extra.announce]
 url = "https://hipcheck.mitre.org/blog/hipcheck-3-9-1-release/"
-text = "Introducing Hipcheck 3.9.1"
+text = "v3.9.1"
diff --git a/site/templates/bases/base.tera.html b/site/templates/bases/base.tera.html
@@ -10,7 +10,7 @@
     </head>
     <body class="bg-white dark:bg-neutral-900 {% block body_classes %}{% endblock %}">
         <div class="">
-            <div class="border-b border-neutral-200 dark:border-neutral-800">
+            <div class="">
                 {% include "partials/nav.tera.html" %}
 
                 {% block breadcrumbs %}
@@ -19,7 +19,7 @@
                 {% endblock %}
             </div>
 
-            <div class="lg:max-w-7xl lg:mx-auto mt-8 lg:mt-32 lg:mb-8 px-4 lg:px-0 lg:pb-32">
+            <div class="lg:max-w-7xl lg:mx-auto mt-8 lg:mt-24 lg:mb-8 px-4 lg:px-0 lg:pb-32">
                 <div class="lg:grid lg:grid-cols-12 lg:gap-16">
                     <div class="lg:col-span-7">
                         <div class="

diff --git a/site/templates/index.html b/site/templates/index.html
@@ -16,34 +16,32 @@
 
 {% block content %}
     <span class="mt-4 text-4xl lg:text-5xl relative z-20 font-medium !leading-tight">
-        Helping maintainers assess
-        <span class="bg-gradient-to-r from-blue-600 via-cyan-600 to-green-600 text-transparent bg-clip-text">software<span class="inline lg:hidden"> </span><span class="hidden lg:inline">&nbsp;</span >packages</span>
-        for
-        <span class="bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 text-transparent bg-clip-text">long&nbsp;term&nbsp;risk</span>
+        <span class="bg-gradient-to-r from-blue-600 via-cyan-600 to-green-600 text-transparent bg-clip-text italic font-black">Maximally<span class="inline lg:hidden"> </span><span class="hidden lg:inline">&nbsp;</span>configurable</span>
+        analysis of open source software for
+        <span class="bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 text-transparent bg-clip-text italic font-black">long&nbsp;term&nbsp;risk</span>
     </span>
 
     <ul class="list-none ps-0 mt-12 text-lg">
-        <li class="before:inline-block before:top-0 before:left-0 before:w-6 before:h-6 before:-ml-2 before:-mb-1 before:mr-2 before:content-['✓'] before:font-extrabold before:text-green-500 before:text-xl">Filter hundreds of dependencies to a few for review</li>
-        <li class="before:inline-block before:top-0 before:left-0 before:w-6 before:h-6 before:-ml-2 before:-mb-1 before:mr-2 before:content-['✓'] before:font-extrabold before:text-green-500 before:text-xl">Use plugins to run only the analyses you choose</li>
-        <li class="before:inline-block before:top-0 before:left-0 before:w-6 before:h-6 before:-ml-2 before:-mb-1 before:mr-2 before:content-['✓'] before:font-extrabold before:text-green-500 before:text-xl">Configure scoring to decide when to investigate further</li>
+        <li class="before:inline-block before:top-0 before:left-0 before:w-6 before:h-6 before:-ml-2 before:-mb-1 before:mr-2 before:content-['✓'] before:font-extrabold before:text-green-500 before:text-xl">Filter <span class="font-bold italic">hundreds of dependencies</span> to a few for review</li>
+        <li class="before:inline-block before:top-0 before:left-0 before:w-6 before:h-6 before:-ml-2 before:-mb-1 before:mr-2 before:content-['✓'] before:font-extrabold before:text-green-500 before:text-xl">Use plugins to <span class="font-bold italic">run only the analyses you choose</span></li>
+        <li class="before:inline-block before:top-0 before:left-0 before:w-6 before:h-6 before:-ml-2 before:-mb-1 before:mr-2 before:content-['✓'] before:font-extrabold before:text-green-500 before:text-xl">Configure scoring to <span class="font-bold italic">decide when to investigate further</span></li>
     </ul>
 
     {% include "partials/install.tera.html" %}
 
     <a href="{{ get_url(path="@/docs/_index.md") }}" class="
             relative z-20
             inline-block
-            font-semibold
+            !font-semibold
             px-5 py-3
             no-underline
-            bg-transparent hover:bg-blue-50 dark:hover:bg-neutral-800
-            border border-neutral-300 hover:border-blue-300 dark:border-neutral-700
-            hover:!text-blue-500
-            rounded-lg
+            bg-blue-500 hover:bg-green-500 dark:hover:bg-neutral-800
+            text-white hover:!text-white
+            rounded-full
             mr-4 mt-8
             top-[-1px]
             ">
-        Read the Docs {{ ic::icon(name="book-open", classes="mt-[-2px] ml-2") }}
+        {{ ic::icon(name="book", classes="!w-5 !h-5 mt-[-2px] mr-1") }} Read the Docs
     </a>
 {% endblock %}
 

diff --git a/site/templates/macros/breadcrumbs.tera.html b/site/templates/macros/breadcrumbs.tera.html
@@ -8,11 +8,7 @@
             dark:text-neutral-400
             px-8 p-2
             mx-[-0.5rem]
-            border-t
-            border-neutral-200
-            dark:border-neutral-800
             rounded-md
-            bg-neutral-50
             dark:bg-neutral-700
             gap-3
             ">

diff --git a/site/templates/partials/footer.tera.html b/site/templates/partials/footer.tera.html
@@ -4,7 +4,7 @@
         <div class="grid grid-cols-2 lg:grid-cols-8 gap-x-4 lg:gap-8 dark:text-neutral-400 mb-10">
 
             <div class="col-span-2 lg:col-span-2 text-lg lg:my-0">
-                <a href="{{ get_url(path="@/_index.md") }}" class="hover:text-green-600 font-semibold">
+                <a href="{{ get_url(path="@/_index.md") }}" class="hover:text-green-600 font-black">
                     Hipcheck <span class="leading-none font-extrabold text-green-600 text-2xl">✓</span>
                 </a>
                 <p class="text-sm text-neutral-500 mt-3 leading-6">

diff --git a/site/templates/partials/install.tera.html b/site/templates/partials/install.tera.html
@@ -1,17 +1,43 @@
 
-<div class="mt-14 shadow-md bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-md p-2 w-fit max-w-full overflow-x-scroll">
-    <div class="flex justify-between items-center">
-        <div class="inline-flex">
-            <a data-platform="macos" data-active="true" class="installer-button data-[active]:bg-white dark:data-[active]:bg-neutral-500 !font-medium text-sm py-2 px-3 bg-neutral-100 dark:bg-neutral-700 hover:bg-blue-100 dark:hover:text-blue-300 no-underline rounded-t-md" href="#">macOS</a>
-            <a data-platform="linux" class="installer-button data-[active]:bg-white !font-medium text-sm py-2 px-3 bg-neutral-100 dark:bg-neutral-700 hover:bg-blue-100 dark:hover:text-blue-300 no-underline rounded-t-md" href="#">Linux</a>
-            <a data-platform="windows" class="installer-button data-[active]:bg-white !font-medium text-sm py-2 px-3 bg-neutral-100 dark:bg-neutral-700 hover:bg-blue-100 dark:hover:text-blue-300 no-underline rounded-t-md" href="#">Windows</a>
+<div class="
+        mt-14
+        bg-transparent dark:bg-neutral-800
+        rounded-md
+        w-fit max-w-full
+        overflow-x-scroll
+    ">
+    <div class="flex justify-between items-center px-2 mb-1">
+        <div class="inline-flex gap-1">
+            <a data-platform="macos" data-active="true" class="installer-button data-[active]:bg-blue-50 data-[active]:text-blue-500 dark:data-[active]:bg-neutral-500 !font-medium text-xs py-1 px-2 text-neutral-500 bg-transparent dark:bg-neutral-700 hover:bg-blue-100 dark:hover:text-blue-300 no-underline rounded-md" href="#">macOS</a>
+            <a data-platform="linux" class="installer-button data-[active]:bg-blue-50 data-[active]:text-blue-500 !font-medium text-xs py-1 px-2 text-neutral-500 bg-transparent dark:bg-neutral-700 hover:bg-blue-100 dark:hover:text-blue-300 no-underline rounded-md" href="#">Linux</a>
+            <a data-platform="windows" class="installer-button data-[active]:bg-blue-50 data-[active]:text-blue-500 !font-medium text-xs py-1 px-2 text-neutral-500 bg-transparent dark:bg-neutral-700 hover:bg-blue-100 dark:hover:text-blue-300 no-underline rounded-md" href="#">Windows</a>
         </div>
-        <div class="text-xs mr-2">
+        <div class="text-xs">
             <a class="no-underline text-neutral-500" href="{{ get_url(path='@/docs/getting-started/install.md') }}">Other methods &rarr;</a>
         </div>
     </div>
-    <div class="rounded-md bg-white dark:bg-neutral-500 rounded-tl-none flex justify-between gap-0 items-center py-2 min-w-[32rem] max-w-min overflow-x-scroll">
-        <pre class="m-0 bg-white dark:bg-neutral-500 text-neutral-700 dark:text-neutral-100 leading-none align-bottom text-sm"><code id="installer-cmd">curl -LsSf {{ config.base_url }}/dl/install.sh | sh</code></pre>
-        <a class="text-sm py-1 px-2 mr-2 rounded-md bg-white dark:bg-neutral-700 border border-neutral-200 dark:border-neutral-400 text-neutral-500 dark:text-neutral-300 hover:bg-blue-50 hover:border-blue-200" id='installer-copy' href="#">{{ ic::icon(name="clipboard", classes="-mt-[2px]") }}</a>
+    <div class="
+            rounded-xl
+            bg-neutral-100 dark:bg-neutral-500
+            flex
+            justify-between
+            gap-0
+            items-center
+            py-2
+            min-w-[32rem] max-w-min
+            overflow-x-scroll
+        ">
+        <pre class="m-0 bg-transparent dark:bg-neutral-500 text-neutral-700 dark:text-neutral-100 leading-none align-bottom text-sm"><code id="installer-cmd">curl -LsSf {{ config.base_url }}/dl/install.sh | sh</code></pre>
+        <a class="
+            text-sm
+            inline-flex
+            items-center
+            self-center
+            p-2
+            mr-2
+            rounded-full
+            bg-neutral-100 hover:bg-blue-50 dark:bg-neutral-700
+            text-neutral-500 dark:text-neutral-300
+        " id='installer-copy' href="#">{{ ic::icon(name="clipboard", classes="-mt-[2px]") }}</a>
     </div>
 </div>
diff --git a/site/templates/partials/nav.tera.html b/site/templates/partials/nav.tera.html
@@ -1,14 +1,14 @@
 
 {% import "macros/icon.tera.html" as ic %}
 
-<nav id="top" class="bg-white dark:bg-neutral-800 text-sm px-6 py-3 shadow-sm z-10 relative">
+<nav id="top" class="bg-white dark:bg-neutral-800 text-sm px-6 py-4 z-10 relative">
     <ul class="flex justify-between lg:justify-start gap-x-8">
         <li class="block lg:flex lg:flex-1 items-stretch">
             <a href="{{ get_url(path="@/_index.md") }}" class="
                     items-stretch content-center
                     text-black dark:text-neutral-200 hover:text-green-600
                     text-xl
-                    font-semibold
+                    font-black
                     ">
                 Hipcheck&nbsp;<span class="leading-none font-extrabold text-green-600 text-2xl">✓</span>
             </a>
@@ -18,17 +18,18 @@
                         hidden
                         lg:inline-flex
                         items-center
-                        rounded-md
-                        border
-                        bg-sky-50 dark:bg-neutral-700 hover:bg-sky-100 dark:hover:bg-blue-800
-                        text-sky-700 dark:text-neutral-200 hover:text-sky-800 dark:hover:text-blue-100
-                        border-sky-200 hover:border-sky-400 dark:border-neutral-600
+                        self-center
+                        rounded-full
+                        font-medium
+                        bg-[#f4f9f5] hover:bg-green-500 dark:bg-neutral-700 dark:hover:bg-blue-800
+                        text-green-600 hover:text-white dark:text-neutral-200 dark:hover:text-blue-100
                         ml-8
-                        px-3
+                        px-4
+                        py-1
                         leading-6
                         text-sm
                         ">
-                    {{ ic::icon(name="star", classes="mr-2") }} {{ config.extra.announce.text }} ↗
+                    {{ ic::icon(name="tag", classes="mr-2") }}&nbsp;{{ config.extra.announce.text }}
                 </a>
             {% endif %}
         </li>
@@ -44,36 +45,36 @@
 
         <li class="hidden lg:flex">
             <button id="search-button" class="
-                cursor-pointer
                 inline-flex
                 justify-between
+                items-center
+                gap-2
+
+                cursor-pointer
                 group
-                hover:bg-blue-50
-                hover:border-blue-500
-                hover:outline
-                hover:outline-1
-                hover:outline-blue-500
-                dark:hover:bg-neutral-700
+
+                text-xs
+
+                rounded-full
+
+                hover:bg-blue-50 dark:hover:bg-neutral-700
+                hover:outline hover:outline-1 hover:outline-blue-500
                 border
-                rounded-md
-                items-center
+
+                border-neutral-200 hover:border-blue-500 dark:border-neutral-700
                 whitespace-nowrap
-                gap-2
+
                 h-9
-                px-4
-                text-xs
-                pl-2.5
-                pr-3
-                border-neutral-300
-                dark:border-neutral-700
-                shadow-sm
                 min-h-6
-                min-w-44">
+                min-w-44
+
+                px-[0.6rem]
+                ">
                     <span class="inline-flex items-center gap-2">
                         {{ ic::icon(name="search", classes="group-hover:fill-blue-600 dark:fill-neutral-300") }}
                         <span class="text-neutral-400 group-hover:text-blue-600 font-light text-sm leading-none -mb-[1px]">Search</span>
                     </span>
-                    <span class="-mr-1 p-1 rounded-md bg-neutral-100 dark:bg-neutral-700 inline-flex items-center gap-1 text-neutral-600 dark:text-neutral-400 group-hover:bg-blue-100 group-hover:text-blue-600">{{ ic::icon(name="command") }} K</span>
+                    <span class="-mr-1 p-1 px-2 rounded-full bg-neutral-100 dark:bg-neutral-700 inline-flex items-center gap-0 text-neutral-600 dark:text-neutral-400 group-hover:bg-blue-100 group-hover:text-blue-600">{{ ic::icon(name="command", classes="text-xs !w-3 !h-3 mr-[2px]") }}K</span>
             </button>
         </li>
 
@@ -86,29 +87,29 @@
                 {% endif %}
 
                 <a href="{{ url }}" {% if item.id %}id="{{ item.id }}"{% endif %} class="
-                        items-stretch
+                        inline-flex
+                        items-center
+                        gap-1
+                        flex-nowrap
                         text-black dark:text-neutral-200 hover:text-blue-500
                         py-1.5
                         font-normal
                         {% if item.highlight %}
-                            font-semibold
+                            !font-medium
                             px-4
                             bg-blue-600 hover:bg-green-500 hover:from-green-100
-                            text-blue-50 hover:text-green-50
-                            rounded-md
+                            text-white hover:text-white
+                            rounded-full
                         {% else %}
                             p-0
                         {% endif %}
                         ">
                     {% if item.icon %}
                         {% set name = item.icon %}
-                        {{ ic::icon(name=name, classes="mt-[-2px] ml-[-4px] mr-1") }}
+                        {{ ic::icon(name=name, classes="ml-[-4px] mr-0") }}
                     {% endif %}
                     {% if not item.icononly %}
-                        {{ item.name }}
-                        {% if item.external %}
-                            ↗
-                        {% endif %}
+                        {{ item.name }}{% if item.external %}&nbsp;↗{% endif %}
                     {% endif %}
                 </a>
             </li>