More polish for components section on main page

Signed-off-by: Luc Perkins <luc.perkins@datadoghq.com>
vectordotdev · Jun 20, 2021 · d334c63 · d334c63
1 parent 5f38f72
commit d334c63
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/docs/layouts/partials/home/components.html b/docs/layouts/partials/home/components.html
@@ -1,6 +1,6 @@
 {{ $text := .Params.components }}
 {{ $types := slice "Sources" "Transforms" "Sinks" }}
-<div class="relative py-12 md:py-16 lg:py-20 px-4 sm:px-6 mx-auto max-w-7xl">
+<div class="relative py-12 md:py-16 lg:py-20 px-4 sm:px-6 mx-auto max-w-6xl">
   <div class="text-center">
     {{ partial "home/heading.html" (dict "title" $text.title) }}
 
@@ -9,21 +9,20 @@
     </p>
   </div>
 
-  <div class="mt-8 grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-8 max-w-6xl mx-auto">
+  <div class="mt-8 grid grid-cols-2 md:grid-cols-3 gap-8 md:gap-10">
     {{ range $types }}
     {{ $type := . }}
     {{ $components := where site.RegularPages ".CurrentSection.Params.short" . }}
     {{ $num := len $components }}
-
-    <div class="shadow py-3 px-5">
+    <div>
       <span class="text-xl text-gray-600 dark:text-gray-100 text-primaryfont-light tracking-wide">
-        <span class="font-semibold">
+        <span class="font-extrabold">
           {{ $num }}
         </span>
         {{ $type | lower }}
       </span>
 
-      <div class="mt-4 grid grid-cols-2 gap-y-2 gap-x-3">
+      <div class="mt-6 grid grid-cols-2 gap-y-2.5 gap-x-2 lg:gap-x-3">
         {{ range $components }}
         {{ $title := .Params.short | default .Title }}
         {{ template "component-chip" (dict "title" $title "href" .RelPermalink) }}

diff --git a/docs/layouts/partials/home/configure.html b/docs/layouts/partials/home/configure.html
@@ -22,7 +22,7 @@
     </div>
 
     <div class="bg-black shadow-lg rounded-xl">
-      <div class="flex px-6 py-4 justify-between items-center border-b border-gray-700">
+      <div class="flex py-2.5 px-4 justify-between items-center border-b border-gray-700">
         <div class="flex space-x-2">
           {{ template "dot" "red-500" }}
           {{ template "dot" "yellow-500" }}
@@ -36,7 +36,7 @@
         </div>
       </div>
 
-      <div class="p-6">
+      <div class="p-4">
         {{ range $configs }}
         {{ $code := highlight .config "toml" "" }}
         <div x-show="config === '{{ .title }}'">
@@ -55,5 +55,5 @@
 </div>
 
 {{ define "dot" }}
-<span class="h-3.5 w-3.5 bg-{{ . }} rounded-full"></span>
+<span class="h-3 w-3 bg-{{ . }} rounded-full"></span>
 {{ end }}