@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/layouts/blog.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Blog layout */
 
 /* The blog header chrome is taller (1.125rem padding + 2rem logo), so
@@ -8,33 +9,18 @@
 }
 /* ---- Header ---- */
 .rf-blog-header {
-	position: sticky;
-	top: 0;
-	z-index: 100;
 	background: var(--rf-color-bg);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-blog-header__inner {
-	display: flex;
-	align-items: center;
 	gap: 1rem;
 	padding: 1.125rem 1.5rem;
 }
-.rf-blog-header__inner .rf-search-trigger {
-	margin-left: auto;
-}
-.rf-blog-header__inner p ~ p {
-	order: 1;
-}
-.rf-blog-header__inner .rf-mobile-menu-btn {
-	order: 2;
-}
 .rf-blog-header p {
 	margin: 0;
 	line-height: 1;
 }
 .rf-blog-header a {
-	display: inline-block;
 	color: inherit;
 	text-decoration: none;
 }
@@ -42,25 +28,17 @@
 	text-decoration: none;
 }
 .rf-blog-header p:first-child a {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-xl);
+	letter-spacing: var(--rf-tracking-tight);
 }
-.rf-blog-header img,
 .rf-blog-header p:first-child a > .rf-icon {
-	height: 2rem;
-	width: 2rem;
-}
-.rf-blog-header p:first-child a > .rf-icon {
-	display: inline-block;
 	vertical-align: middle;
 	color: currentColor;
 }
 .rf-blog-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-blog-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -70,53 +48,35 @@
 	color: var(--rf-color-text);
 }
 .rf-blog-header__inner p ~ p a svg {
-	width: 1.1rem;
-	height: 1.1rem;
 	vertical-align: -0.15em;
 }
 
 /* ---- Layout container ---- */
 .rf-blog {
-	max-width: 72rem;
-	margin: 0 auto;
 	padding: 2.5rem 1.5rem 4rem;
 }
 .rf-blog--has-sidebar {
-	display: grid;
-	grid-template-columns: 1fr 16rem;
 	gap: 3rem;
-	align-items: start;
-}
-
-/* ---- Blog index ---- */
-.rf-blog-index {
-	max-width: 42rem;
 }
 .rf-blog-index__title {
-	font-size: 2.25rem;
-	font-weight: 800;
-	line-height: 1.15;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-tight);
+	letter-spacing: var(--rf-tracking-tight);
 	margin: 0 0 1rem;
 	color: var(--rf-color-text);
 }
 .rf-blog-index__body {
 	margin-bottom: 2rem;
-	line-height: 1.8;
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
-.rf-blog-index__body:empty {
-	display: none;
-}
 .rf-blog-index__posts {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 
 /* ---- Post card ---- */
 .rf-blog-card {
-	display: block;
 	padding: 1.5rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md, 0.5rem);
@@ -130,16 +90,14 @@
 	text-decoration: none;
 }
 .rf-blog-card__title {
-	font-size: 1.35rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
 	margin: 0 0 0.5rem;
 	color: var(--rf-color-text);
 }
 .rf-blog-card__meta {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	margin-bottom: 0.5rem;
 }
@@ -149,62 +107,51 @@
 }
 .rf-blog-card__desc {
 	margin: 0 0 0.75rem;
-	font-size: 0.95rem;
-	line-height: 1.6;
+	font-size: var(--rf-text);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-blog-card__tags {
-	display: flex;
-	flex-wrap: wrap;
 	gap: 0.5rem;
 	margin-bottom: 0.75rem;
 }
 .rf-blog-card__link {
-	font-size: 0.85rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary, var(--rf-color-text));
 }
-
-/* ---- Article ---- */
-.rf-blog-article {
-	max-width: 42rem;
-}
 .rf-blog-article__header {
 	margin-bottom: 2.5rem;
 	padding-bottom: 1.5rem;
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-blog-article__title {
-	font-size: 2.25rem;
-	font-weight: 800;
-	line-height: 1.15;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-tight);
+	letter-spacing: var(--rf-tracking-tight);
 	margin: 0 0 1rem;
 	color: var(--rf-color-text);
 }
 .rf-blog-article__meta {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
-	font-size: 0.9rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-blog-article__meta time {
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 .rf-blog-article__author::before {
 	content: '\00b7';
 	margin-right: 0.75rem;
 }
 .rf-blog-article__tags {
-	display: flex;
-	flex-wrap: wrap;
 	gap: 0.5rem;
 	margin-top: 0.75rem;
 }
 .rf-blog-article__tag {
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	padding: 0.2rem 0.6rem;
 	border-radius: 9999px;
 	background: var(--rf-color-surface);
@@ -214,7 +161,7 @@
 
 /* ---- Article body typography ---- */
 .rf-blog-article__body {
-	line-height: 1.8;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-blog-article__body h2 {
 	margin-top: 2.5rem;
@@ -232,24 +179,21 @@
 
 /* ---- Sidebar ---- */
 .rf-blog-sidebar {
-	position: sticky;
-	top: 2.5rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-blog-sidebar h2,
 .rf-blog-sidebar h3,
 .rf-blog-sidebar h4 {
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 	margin-top: 0;
 	margin-bottom: 0.5rem;
 }
 .rf-blog-sidebar ul {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
@@ -269,24 +213,19 @@
 	border-top: 1px solid var(--rf-color-border);
 	padding: 2rem 1.5rem;
 	text-align: center;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 
 /* ---- Mobile ---- */
 @media (max-width: 768px) {
-	.rf-blog-header__inner p ~ p {
-		display: none;
-	}
-	.rf-blog--has-sidebar {
-		grid-template-columns: 1fr;
-	}
 	.rf-blog-article__title {
-		font-size: 1.75rem;
+		font-size: var(--rf-text-3xl);
 	}
 	.rf-blog-sidebar {
-		position: static;
 		border-top: 1px solid var(--rf-color-border);
 		padding-top: 1.5rem;
 	}
 }
+
+}

package/styles/layouts/default.css

@@ -1,43 +1,25 @@
+@layer skin {
 /* Default layout */
 .rf-header {
-	position: sticky;
-	top: 0;
-	z-index: 100;
 	background: var(--rf-color-bg);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-header__inner {
-	display: flex;
-	align-items: center;
 	gap: 1rem;
 	padding: 0.625rem 1.5rem;
 }
-.rf-header__inner .rf-search-trigger {
-	margin-left: auto;
-	order: 1;
-}
-.rf-header__inner > rf-nav {
-	order: 3;
-}
-.rf-header__inner p ~ p {
-	order: 1;
-}
-.rf-header__inner .rf-mobile-menu-btn {
-	order: 3;
-}
 .rf-header p {
 	margin: 0;
 	line-height: 1;
 }
 .rf-header h1, .rf-header h2, .rf-header h3 {
 	margin: 0;
-	font-size: 1.2rem;
-	font-weight: 600;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-tight);
 	line-height: 1;
 }
 .rf-header a {
-	display: inline-block;
 	color: inherit;
 	text-decoration: none;
 }
@@ -45,28 +27,17 @@
 	text-decoration: none;
 }
 .rf-header p:first-child a {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-xl);
+	letter-spacing: var(--rf-tracking-tight);
 }
-.rf-header img,
 .rf-header p:first-child a > .rf-icon {
-	height: 2rem;
-	width: 2rem;
-}
-.rf-header img {
-	width: auto;
-}
-.rf-header p:first-child a > .rf-icon {
-	display: inline-block;
 	vertical-align: middle;
 	color: currentColor;
 }
 .rf-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -76,8 +47,6 @@
 	color: var(--rf-color-text);
 }
 .rf-header__inner p ~ p a svg {
-	width: 1.1rem;
-	height: 1.1rem;
 	vertical-align: -0.15em;
 }
 .rf-page-content {
@@ -86,39 +55,8 @@
 
 	padding-top: 2.5rem;
 	padding-bottom: 4rem;
-	container-type: inline-size;
-}
-/* Markdoc wraps content in <article>; make it the grid container.
-   5-track named grid: full | wide | content | wide | full */
-.rf-page-content > article {
-	display: grid;
-	grid-template-columns:
-		[full-start] 1fr
-		[wide-start] minmax(0, var(--rf-wide-inset, 8rem))
-		[content-start] min(var(--rf-content-max), 100% - var(--rf-content-gutter) * 2)
-		[content-end] minmax(0, var(--rf-wide-inset, 8rem))
-		[wide-end] 1fr
-		[full-end];
-}
-.rf-page-content > article > * {
-	grid-column: content;
-}
-
-/* Width constraint via data-width attribute — narrower than content */
-.rf-page-content > article > [data-width="compact"] {
-	max-width: var(--rf-width-compact, 30rem);
-	margin-inline: auto;
-}
-.rf-page-content > article > [data-width="narrow"] {
-	max-width: var(--rf-width-narrow, 40rem);
-	margin-inline: auto;
-}
-/* Width breakout via data-width attribute — wider than content */
-.rf-page-content > article > [data-width="wide"] {
-	grid-column: wide;
 }
 .rf-page-content > article > [data-width="full"] {
-	grid-column: full;
 	padding-inline: max(
 		var(--rf-content-gutter, 1.5rem),
 		calc((100% - var(--rf-content-max, 80rem)) / 2)
@@ -126,7 +64,6 @@
 }
 /* Tinted sections also break out to full width */
 .rf-page-content > article > :is([data-tint], [data-color-scheme]):not([data-width]) {
-	grid-column: full;
 	padding-inline: max(
 		var(--rf-content-gutter, 1.5rem),
 		calc((100% - var(--rf-content-max, 80rem)) / 2)
@@ -219,29 +156,18 @@
 	padding-bottom: 0;
 }
 
-@media (max-width: 768px) {
-	.rf-header__inner p ~ p {
-		display: none;
-	}
-}
-
 /* Site footer */
 .rf-footer {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 	padding: 2.5rem 1.5rem 2rem;
 	border-top: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg);
 	color: var(--rf-color-muted);
-	font-size: 0.875rem;
-}
-.rf-footer > * {
-	width: 100%;
-	max-width: 80rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-footer p {
 	margin: 1.5rem 0 0;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }
+
+}