From caea7e3844fca3888279f2eab664cd7bc612e800 Mon Sep 17 00:00:00 2001
From: MarketHubb <chris@markethubb.com>
Date: Sun, 29 Jun 2025 18:22:05 -0500
Subject: [PATCH]   Modernize package grid design with improved typography and
 spacing and colors

  - Add gray-scale color palette for better design consistency
  - Update card components with white backgrounds, rounded corners & left-aligned tags
  - Convert typography units from px to rem for better scalability
  - Implement 3-column grid layout with increased spacing between cards
  - Add utilities.css for design tokens (spacing, font-weights) and future (non typography-related) vars
  - Update label buttons with softer styling and pill-shaped borders
  - Improve text contrast and readability with color-mix functions
  - Change site background to lighter gray for better card contrast
---
 static/style/colors.css     |  7 ++++++
 static/style/grid.css       | 49 ++++++++++++++++++++++++++++---------
 static/style/typography.css |  5 ++--
 static/style/utilities.css  |  8 ++++++
 static/styles.css           |  3 ++-
 5 files changed, 57 insertions(+), 15 deletions(-)
 create mode 100644 static/style/utilities.css

diff --git a/static/style/colors.css b/static/style/colors.css
index 78aa42f75..7e4e16faf 100644
--- a/static/style/colors.css
+++ b/static/style/colors.css
@@ -4,6 +4,12 @@
   --primary-accent: #fd971f;   /* orange */
   --secondary-accent: #66d9ef; /* blue */
   --tertiary-accent: #a6e22e;  /* green */
+  --white: #fff;
+  --gray-lightest: #f9fafb;
+  --gray-light: #CDD7D9;
+  --gray: #586E75;
+  --gray-dark: #38464B;
+  --gray-darkest: #262F32;
 
   --primary-accent-darker: #4694A3;
 
@@ -12,6 +18,7 @@
   --background-darker: #f2f2f2;
   --background-darkest: #cacaca;
 
+
   --foreground: #586e75;
   --foreground-darker: #38464b;
   --foreground-lighter: #839496;
diff --git a/static/style/grid.css b/static/style/grid.css
index 61f60e4f9..09b30f8de 100644
--- a/static/style/grid.css
+++ b/static/style/grid.css
@@ -1,14 +1,17 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
-  gap: 11px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: calc(var(--spacing) * 4);
   margin: 0;
   padding: 0;
-  > * {
+  align-items: stretch;
+
+  >* {
     display: flex;
     margin: 0;
     padding: 0;
-    > * {
+
+    >* {
       flex: 1;
     }
   }
@@ -17,9 +20,11 @@
 .card {
   display: flex;
   flex-direction: column;
-  background: var(--background-slightly-darker);
-  border: 1px solid var(--background-darker);
-  padding: 1rem;
+  background: var(--white);
+  border: 1px solid;
+  border-color: color-mix(in oklab, var(--gray-light) 50%, transparent);
+  padding: 1.25rem 1.5rem;
+  border-radius: 6px;
   position: relative;
   transition: border-color .3s ease-in-out;
 
@@ -30,23 +35,33 @@
   }
 
   h3 a {
-    color: var(--foreground);
+    color: var(--gray-darkest);
+    color: color-mix(in oklab, var(--gray-darkest) 80%, transparent);
+
     &:hover {
       text-decoration: none;
       color: var(--foreground-darker);
     }
   }
 
+  h3+p {
+    color: color-mix(in oklab, var(--gray) 80%, transparent);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
   h3 {
     padding-top: 0;
     padding-right: 2em;
     margin-top: 0;
     margin-bottom: -4px;
+    font-weight: normal;
 
-    + * {
+    +* {
       margin-top: 0;
       padding-bottom: 9px;
-      flex: 1; /* push other content to the end of the card */
+      flex: 1;
+      /* push other content to the end of the card */
     }
   }
 
@@ -55,16 +70,26 @@
     top: 22px;
     right: 1rem;
     font-size: calc(1rem / 1.33);
+
     svg {
       width: 12px;
       height: 12px;
     }
   }
 
+  a.button.label {
+    background-color: color-mix(in oklab, var(--gray-light) 15%, transparent);
+    border: 1px solid;
+    border-color: color-mix(in oklab, var(--gray-light) 40%, transparent);
+    color: var(--gray);
+    padding: 0 8px;
+    border-radius: calc(infinity * 1px);
+  }
+
   .labels {
     font-size: calc(1rem / 1.33);
-    justify-content: flex-end;
+    justify-content: flex-start;
     padding: 0;
     margin: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/static/style/typography.css b/static/style/typography.css
index df6dc293c..d587dfe4a 100644
--- a/static/style/typography.css
+++ b/static/style/typography.css
@@ -40,16 +40,17 @@ h1 {
 }
 
 h2 {
-  font-size: 25px;
+  font-size: 1.5rem;
   line-height: 44px;
   padding-top: 14px;
   margin-bottom: 8px;
   padding-bottom: 0;
   margin-top: 0;
+  font-weight: var(--font-weight-medium);
 }
 
 h3 {
-  font-size: 19px;
+  font-size: 1.25rem;
   line-height: 22px;
   padding-top: 5px;
   margin-bottom: 17px;
diff --git a/static/style/utilities.css b/static/style/utilities.css
new file mode 100644
index 000000000..4e0ff2cb7
--- /dev/null
+++ b/static/style/utilities.css
@@ -0,0 +1,8 @@
+/* inspired by monokai neue */
+
+:root {
+  --spacing: 0.25rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+}
diff --git a/static/styles.css b/static/styles.css
index 4473d6bed..ce715602a 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -6,13 +6,14 @@
 @import url('style/grid.css');
 @import url('style/pagination.css');
 @import url('style/search.css');
+@import url('style/utilities.css');
 
 html {
   height: 100%;
 }
 
 body {
-  background: var(--background);
+  background: var(--gray-lightest);
   color: var(--foreground);
   margin: 0;
   padding: 0;