@jxsuite/starters 0.34.0 → 0.35.0

package/sites/blog/components/bl-author-bio.json

@@ -8,17 +8,16 @@
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-cream)",
-    "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)",
-    "padding": "1.75rem"
+    "borderTop": "1.5px solid var(--color-rule)",
+    "borderBottom": "1.5px solid var(--color-rule)",
+    "padding": "1.75rem 0"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
         "display": "flex",
-        "gap": "1.25rem",
+        "gap": "1.5rem",
         "alignItems": "center",
         "@--sm": { "flexDirection": "column", "textAlign": "center" }
       },
@@ -32,11 +31,12 @@
           },
           "style": {
             "display": "${state.avatar ? 'block' : 'none'}",
-            "width": "72px",
-            "height": "72px",
+            "width": "84px",
+            "height": "84px",
             "borderRadius": "999px",
             "objectFit": "cover",
-            "flexShrink": "0"
+            "flexShrink": "0",
+            "filter": "grayscale(1)"
           }
         },
         {
@@ -45,21 +45,23 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-body)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.12em",
-                "fontSize": "0.72rem",
+                "letterSpacing": "0.16em",
+                "fontSize": "0.7rem",
                 "fontWeight": "600",
                 "color": "var(--color-primary)",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.4rem"
               },
-              "textContent": "${state.role}"
+              "textContent": "Written by · ${state.role}"
             },
             {
               "tagName": "div",
               "style": {
                 "fontFamily": "var(--font-heading)",
-                "fontSize": "1.3rem",
-                "fontWeight": "600",
+                "fontSize": "1.5rem",
+                "fontWeight": "700",
+                "letterSpacing": "-0.01em",
                 "margin": "0 0 0.4rem"
               },
               "textContent": "${state.name}"
@@ -68,8 +70,10 @@
               "tagName": "p",
               "style": {
                 "margin": "0",
+                "fontFamily": "var(--font-heading)",
+                "fontStyle": "italic",
                 "color": "var(--color-text-muted)",
-                "fontSize": "1rem",
+                "fontSize": "1.1rem",
                 "lineHeight": "1.6"
               },
               "textContent": "${state.bio}"

package/sites/blog/components/bl-cta.json

@@ -22,9 +22,10 @@
           "tagName": "h2",
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
-            "fontWeight": "600",
-            "lineHeight": "1.15",
+            "fontSize": "clamp(2rem, 5vw, 3.25rem)",
+            "fontWeight": "700",
+            "lineHeight": "1.05",
+            "letterSpacing": "-0.02em",
             "margin": "0 0 1rem"
           },
           "textContent": "${state.heading}"
@@ -32,10 +33,13 @@
         {
           "tagName": "p",
           "style": {
-            "fontSize": "1.15rem",
-            "lineHeight": "1.7",
-            "opacity": "0.85",
-            "margin": "0 0 2rem"
+            "fontFamily": "var(--font-heading)",
+            "fontStyle": "italic",
+            "fontSize": "1.2rem",
+            "lineHeight": "1.6",
+            "opacity": "0.8",
+            "margin": "0 auto 2rem",
+            "maxWidth": "46ch"
           },
           "textContent": "${state.text}"
         },
@@ -44,17 +48,19 @@
           "attributes": { "href": "${state.ctaHref}" },
           "style": {
             "display": "inline-block",
-            "backgroundColor": "var(--color-primary)",
             "color": "var(--color-text-white)",
-            "padding": "0.9rem 2.25rem",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1.05rem",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.82rem",
             "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.18em",
             "textDecoration": "none",
-            "transition": "background-color 0.15s",
-            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+            "borderBottom": "1.5px solid var(--color-primary)",
+            "paddingBottom": "0.35rem",
+            "transition": "opacity 0.15s",
+            ":hover": { "opacity": "0.65" }
           },
-          "textContent": "${state.cta}"
+          "textContent": "${state.cta} →"
         }
       ]
     }

package/sites/blog/components/bl-footer.json

@@ -2,15 +2,15 @@
   "tagName": "bl-footer",
   "state": {
     "brand": "The Long Field",
-    "tagline": "Essays and field notes on design, technology, and the craft of making things well.",
+    "tagline": "Slow essays on design, technology, and the craft of making things well.",
     "email": "hello@thelongfield.co",
     "cadence": "A new essay most Sundays."
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
-    "color": "var(--color-text-white)",
-    "padding": "3.5rem 1.5rem 2rem"
+    "backgroundColor": "var(--color-paper)",
+    "borderTop": "1.5px solid var(--color-rule)",
+    "padding": "clamp(3rem, 6vw, 4.5rem) 1.5rem 2.5rem"
   },
   "children": [
     {
@@ -18,67 +18,67 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "display": "grid",
-        "gridTemplateColumns": "2fr 1fr 1fr",
-        "gap": "2.5rem",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "textAlign": "center"
       },
       "children": [
         {
           "tagName": "div",
-          "children": [
-            {
-              "tagName": "div",
-              "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.4rem",
-                "fontWeight": "600",
-                "marginBottom": "0.75rem"
-              },
-              "textContent": "${state.brand}"
-            },
-            {
-              "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.75", "maxWidth": "40ch" },
-              "textContent": "${state.tagline}"
-            }
-          ]
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontWeight": "900",
+            "fontSize": "clamp(2rem, 6vw, 3.25rem)",
+            "letterSpacing": "-0.03em",
+            "lineHeight": "1",
+            "margin": "0 0 1rem",
+            "color": "var(--color-text-primary)"
+          },
+          "textContent": "${state.brand}"
         },
         {
-          "tagName": "div",
+          "tagName": "p",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontStyle": "italic",
+            "fontSize": "1.15rem",
+            "color": "var(--color-text-muted)",
+            "margin": "0 auto 1.75rem",
+            "maxWidth": "42ch"
+          },
+          "textContent": "${state.tagline}"
+        },
+        {
+          "tagName": "nav",
+          "style": {
+            "display": "flex",
+            "justifyContent": "center",
+            "flexWrap": "wrap",
+            "gap": "1.75rem",
+            "paddingTop": "1.75rem",
+            "borderTop": "1px solid var(--color-border)",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.74rem",
+            "fontWeight": "500",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em"
+          },
           "children": [
-            {
-              "tagName": "div",
-              "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
-              },
-              "textContent": "Read"
-            },
             {
               "tagName": "a",
-              "attributes": { "href": "/" },
+              "attributes": { "href": "/#latest" },
               "style": {
-                "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                ":hover": { "color": "var(--color-primary)" }
               },
-              "textContent": "Writing"
+              "textContent": "Essays"
             },
             {
               "tagName": "a",
               "attributes": { "href": "/about/" },
               "style": {
-                "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                ":hover": { "color": "var(--color-primary)" }
               },
               "textContent": "About"
             },
@@ -86,58 +86,35 @@
               "tagName": "a",
               "attributes": { "href": "/contact/" },
               "style": {
-                "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
-                "textDecoration": "none"
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                ":hover": { "color": "var(--color-primary)" }
               },
-              "textContent": "Subscribe"
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "children": [
+              "textContent": "Contact"
+            },
             {
-              "tagName": "div",
+              "tagName": "a",
+              "attributes": { "href": "mailto:${state.email}" },
               "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                ":hover": { "color": "var(--color-primary)" }
               },
-              "textContent": "Elsewhere"
-            },
-            {
-              "tagName": "p",
-              "style": { "margin": "0 0 0.35rem", "opacity": "0.85" },
               "textContent": "${state.email}"
-            },
-            {
-              "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.85" },
-              "textContent": "${state.cadence}"
             }
           ]
-        }
-      ]
-    },
-    {
-      "tagName": "div",
-      "style": {
-        "maxWidth": "var(--max-width)",
-        "margin": "2.5rem auto 0",
-        "paddingTop": "1.5rem",
-        "borderTop": "1px solid rgba(255, 255, 255, 0.15)",
-        "fontSize": "0.85rem",
-        "opacity": "0.6"
-      },
-      "children": [
+        },
         {
           "tagName": "p",
-          "style": { "margin": "0" },
-          "textContent": "© The Long Field. Built with Jx."
+          "style": {
+            "margin": "1.75rem 0 0",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.72rem",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.14em",
+            "color": "var(--color-text-muted)"
+          },
+          "textContent": "© The Long Field · Set in Fraunces & Newsreader · Built with Jx"
         }
       ]
     }

package/sites/blog/components/bl-masthead.json

@@ -1,124 +1,130 @@
 {
   "tagName": "bl-masthead",
   "state": {
-    "eyebrow": "",
-    "heading": "",
-    "subheading": "",
+    "edition": "Field Notes · Vol. IV · Published most Sundays",
+    "heading": "The Long Field",
+    "subheading": "Slow essays on design, technology, and the craft of making things well — written by hand, one at a time.",
+    "colophon": "Est. 2021 · Set in Fraunces & Newsreader · Marren Oda, editor",
     "cta": "Read the latest",
-    "ctaHref": "#latest",
-    "cta2": "",
-    "cta2Href": "/about/",
-    "bg": { "type": "string", "format": "image", "default": "" }
+    "ctaHref": "#latest"
   },
   "style": {
     "display": "block",
-    "position": "relative",
-    "minHeight": "72vh",
-    "color": "var(--color-text-white)",
-    "backgroundImage": "url('${state.bg}')",
-    "backgroundSize": "cover",
-    "backgroundPosition": "center"
+    "backgroundColor": "var(--color-paper)",
+    "padding": "clamp(2rem, 5vw, 3.5rem) 1.5rem clamp(2.5rem, 6vw, 4rem)"
   },
   "children": [
     {
       "tagName": "div",
-      "style": {
-        "position": "absolute",
-        "inset": "0",
-        "background": "linear-gradient(180deg, rgba(10,12,16,0.35) 0%, rgba(10,12,16,0.78) 100%)"
-      }
-    },
-    {
-      "tagName": "div",
-      "style": {
-        "position": "relative",
-        "zIndex": "10",
-        "display": "flex",
-        "alignItems": "center",
-        "minHeight": "72vh",
-        "maxWidth": "var(--max-width)",
-        "margin": "0 auto",
-        "padding": "4rem 1.5rem"
-      },
+      "style": { "maxWidth": "var(--max-width)", "margin": "0 auto" },
       "children": [
         {
           "tagName": "div",
-          "style": { "maxWidth": "680px" },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "1.25rem",
+            "marginBottom": "clamp(1.25rem, 3vw, 2rem)"
+          },
           "children": [
             {
-              "tagName": "p",
+              "tagName": "span",
+              "style": { "flex": "1", "height": "1px", "backgroundColor": "var(--color-rule)" }
+            },
+            {
+              "tagName": "span",
               "style": {
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.74rem",
+                "fontWeight": "500",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.2em",
-                "fontSize": "0.8rem",
-                "fontWeight": "600",
-                "marginBottom": "1rem",
-                "color": "#bae6fd"
+                "letterSpacing": "0.22em",
+                "color": "var(--color-text-muted)",
+                "textAlign": "center",
+                "whiteSpace": "nowrap",
+                "@--sm": { "whiteSpace": "normal", "letterSpacing": "0.14em" }
               },
-              "textContent": "${state.eyebrow}"
+              "textContent": "${state.edition}"
             },
             {
-              "tagName": "h1",
+              "tagName": "span",
+              "style": { "flex": "1", "height": "1px", "backgroundColor": "var(--color-rule)" }
+            }
+          ]
+        },
+        {
+          "tagName": "h1",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontWeight": "900",
+            "fontSize": "clamp(3.2rem, 15vw, 11rem)",
+            "lineHeight": "0.9",
+            "letterSpacing": "-0.035em",
+            "textAlign": "center",
+            "margin": "0",
+            "color": "var(--color-text-primary)"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "marginTop": "clamp(1.5rem, 3vw, 2.25rem)",
+            "paddingTop": "clamp(1.5rem, 3vw, 2.25rem)",
+            "borderTop": "3px double var(--color-rule)",
+            "display": "flex",
+            "flexDirection": "column",
+            "alignItems": "center",
+            "gap": "1.1rem"
+          },
+          "children": [
+            {
+              "tagName": "p",
               "style": {
                 "fontFamily": "var(--font-heading)",
-                "fontSize": "clamp(2.6rem, 6vw, 4.5rem)",
-                "fontWeight": "600",
-                "lineHeight": "1.05",
-                "margin": "0 0 1.25rem",
-                "letterSpacing": "-0.02em"
+                "fontStyle": "italic",
+                "fontWeight": "400",
+                "fontSize": "clamp(1.3rem, 3vw, 1.9rem)",
+                "lineHeight": "1.4",
+                "textAlign": "center",
+                "maxWidth": "30ch",
+                "margin": "0",
+                "color": "var(--color-text-primary)"
               },
-              "textContent": "${state.heading}"
+              "textContent": "${state.subheading}"
             },
             {
               "tagName": "p",
               "style": {
-                "fontSize": "clamp(1.15rem, 2vw, 1.4rem)",
-                "lineHeight": "1.6",
-                "margin": "0 0 2rem",
-                "opacity": "0.92",
-                "maxWidth": "52ch"
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.76rem",
+                "fontWeight": "500",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.16em",
+                "color": "var(--color-text-muted)",
+                "textAlign": "center",
+                "margin": "0"
               },
-              "textContent": "${state.subheading}"
+              "textContent": "${state.colophon}"
             },
             {
-              "tagName": "div",
-              "style": { "display": "flex", "gap": "0.75rem", "flexWrap": "wrap" },
-              "children": [
-                {
-                  "tagName": "a",
-                  "attributes": { "href": "${state.ctaHref}" },
-                  "style": {
-                    "display": "inline-block",
-                    "backgroundColor": "var(--color-primary)",
-                    "color": "var(--color-text-white)",
-                    "padding": "0.85rem 2rem",
-                    "borderRadius": "var(--radius)",
-                    "fontSize": "1.05rem",
-                    "fontWeight": "600",
-                    "textDecoration": "none",
-                    "transition": "background-color 0.15s",
-                    ":hover": { "backgroundColor": "var(--color-primary-hover)" }
-                  },
-                  "textContent": "${state.cta}"
-                },
-                {
-                  "tagName": "a",
-                  "attributes": { "href": "${state.cta2Href}" },
-                  "style": {
-                    "display": "${state.cta2 ? 'inline-block' : 'none'}",
-                    "border": "1px solid rgba(255,255,255,0.6)",
-                    "color": "var(--color-text-white)",
-                    "padding": "0.85rem 2rem",
-                    "borderRadius": "var(--radius)",
-                    "fontSize": "1.05rem",
-                    "fontWeight": "600",
-                    "textDecoration": "none",
-                    "transition": "background-color 0.15s",
-                    ":hover": { "backgroundColor": "rgba(255,255,255,0.12)" }
-                  },
-                  "textContent": "${state.cta2}"
-                }
-              ]
+              "tagName": "a",
+              "attributes": { "href": "${state.ctaHref}" },
+              "style": {
+                "marginTop": "0.5rem",
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.8rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.16em",
+                "color": "var(--color-primary)",
+                "textDecoration": "none",
+                "borderBottom": "1px solid var(--color-primary)",
+                "paddingBottom": "0.15rem",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "0.6" }
+              },
+              "textContent": "${state.cta} ↓"
             }
           ]
         }