style: styling fixes for letter-spacing, line-height, text color and icon sizing

Author: julhoang

core/views.py

@@ -1724,8 +1724,9 @@ def get_context_data(self, **kwargs):
                 {"label": "Visit the FAQ", "url": "https://www.example.com"},
             ],
             "url": "https://www.example.com",
-            "label": "Learn more about Boost",
-            "image_src": "/static/img/v3/examples/Learn Card Image.png",
+            "label": "Get started with Boost",
+            "image_src": f"{settings.STATIC_URL}img/v3/examples/Learn_Card_Image.png",
+            "mobile_image_src": f"{settings.STATIC_URL}img/v3/examples/Cheetah_Mobile.png",
         }
 
         context["testimonial_data"] = {

static/css/v3/card.css

@@ -52,11 +52,14 @@
 }
 
 .card__column {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-large);
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-large);
+  width: 100%;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-medium);
+  letter-spacing: var(--letter-spacing-tight);
 }
 
 .card__header {

static/css/v3/carousel-buttons.css

@@ -26,13 +26,13 @@
 }
 
 .carousel-buttons .btn-carousel .btn-icon {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 
 .carousel-buttons .btn-carousel .btn-icon svg {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 
 .carousel-buttons .btn-carousel:hover:not(:disabled) {

static/css/v3/category-tags.css

@@ -5,6 +5,7 @@
   font-family: var(--font-sans);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
   font-weight: var(--font-weight-regular);
   border-radius: var(--border-radius-s);
   text-decoration: none;

static/css/v3/code-block.css

@@ -39,7 +39,7 @@
   border-radius: var(--border-radius-l);
   overflow: auto;
   font-family: var(--font-code);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-xs);
   line-height: var(--line-height-code);
   color: var(--code-block-text);
   box-sizing: border-box;
@@ -68,6 +68,8 @@
   font-weight: 500;
   color: var(--color-syntax-cpp-text) !important;
   white-space: break-spaces !important;
+  font-size: inherit;
+  line-height: var(--line-height-code);
 }
 
 /* CTA button in card */
@@ -136,18 +138,15 @@ html.dark .code-block-card--grey {
 .code-block-card__heading {
   margin: 0;
   padding: 0 var(--space-card) var(--space-card) var(--space-card);
-  font-size: var(--font-size-large);
-  font-weight: 600;
-  font-family: var(--font-display);
-  color: var(--color-text-primary);
 }
 
 .code-block-card__description {
   padding: var(--space-card) var(--space-card) var(--space-default)
     var(--space-card);
   margin: 0 0 var(--space-medium);
   font-size: var(--font-size-medium);
-  line-height: var(--line-height-relaxed);
+  line-height: var(--line-height-default);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-secondary);
 }
 
@@ -162,12 +161,14 @@ html.dark .code-block-card--grey {
   white-space: pre;
   min-height: 1em;
   overflow: hidden;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .code-block__copy {
   position: absolute;
-  top: var(--space-default);
-  right: var(--space-default);
+  top: var(--space-card);
+  right: var(--space-card);
   width: var(--code-block-copy-icon-size);
   height: var(--code-block-copy-icon-size);
   padding: 0;

static/css/v3/content.css

@@ -83,6 +83,7 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) {
   margin: 0;
   font-size: var(--font-size-small);
   line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-secondary);
   padding: 0;
 }

static/css/v3/dialog.css

@@ -99,7 +99,7 @@
   font-size: var(--font-size-large);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-tight);
-  letter-spacing: var(--letter-spacing-display-regular);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-primary);
   display: block !important;
 }

static/css/v3/forms.css

@@ -15,7 +15,7 @@
   font-family: var(--font-sans);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-relaxed);
+  line-height: var(--line-height-default);
   letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-primary);
 }

static/css/v3/learn-cards.css

@@ -15,7 +15,7 @@
 }
 
 .learn-card__link-column {
-    gap: var(--space-s);
+    gap: var(--space-default);
 }
 
 @media (max-width: 1280px) {
@@ -44,7 +44,6 @@
 
 .learn-card__title {
     color: var(--color-text-primary);
-
     font-family: var(--font-display);
     font-size: var(--font-size-large);
     font-weight: var(--font-weight-medium);
@@ -53,11 +52,8 @@
 }
 
 .learn-card__text {
-    color: var(--color-text-secondary);
-
     font-family: var(--font-sans);
     font-size: var(--font-size-base);
-    font-weight: var(--font-weight-medium);
     letter-spacing: -0.16px;
 }
 
@@ -90,7 +86,12 @@
     text-decoration-skip-ink: auto;
     text-decoration-thickness: 7.5%;
     text-underline-offset: 15.2%;
-    text-underline-position: from-font;
+    text-underline-position: auto;
+    color: var(--color-text-primary);
+}
+
+.learn-card__link:hover {
+    color: var(--color-text-link-accent);
 }
 
 

static/css/v3/library-intro-card.css

@@ -42,6 +42,10 @@
   color: var(--color-text-primary, #050816);
 }
 
+.library-intro-card__description {
+  color: var(--color-text-secondary);
+}
+
 .library-intro-card__title-pill {
   display: inline-flex;
   align-items: center;