@refrakt-md/lumina 0.4.0 → 0.5.1

package/styles/elements/blockquote.css

@@ -1,5 +1,5 @@
 /* Blockquote */
-.rf-blockquote {
+blockquote {
 	position: relative;
 	border-left: 3px solid var(--rf-color-primary);
 	margin: 1.5rem 0;
@@ -8,15 +8,19 @@
 	background: var(--rf-color-surface);
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 }
-.rf-blockquote__mark {
+blockquote::before {
+	content: '';
 	position: absolute;
 	left: 0.75rem;
 	top: 1rem;
 	width: 18px;
 	height: 18px;
-	color: var(--rf-color-primary);
+	background: var(--rf-color-primary);
 	opacity: 0.4;
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8C10 5.79 8.21 4 6 4C3.79 4 2 5.79 2 8C2 10.21 3.79 12 6 12C6.67 12 7.31 11.83 7.88 11.54C7.63 14.08 5.55 16.09 3 16.34V18.36C6.68 18.09 9.64 15.13 9.93 11.45C9.98 10.99 10 10.5 10 10V8ZM22 8C22 5.79 20.21 4 18 4C15.79 4 14 5.79 14 8C14 10.21 15.79 12 18 12C18.67 12 19.31 11.83 19.88 11.54C19.63 14.08 17.55 16.09 15 16.34V18.36C18.68 18.09 21.64 15.13 21.93 11.45C21.98 10.99 22 10.5 22 10V8Z'/%3E%3C/svg%3E");
+	mask-size: contain;
+	mask-repeat: no-repeat;
 }
-.rf-blockquote p:last-child {
+blockquote p:last-child {
 	margin-bottom: 0;
 }

package/styles/elements/code.css

@@ -0,0 +1,40 @@
+/* Code wrapper — behavior-injected copy button for code blocks */
+.rf-code-wrapper {
+	position: relative;
+}
+
+.rf-code-wrapper > pre {
+	margin: 0;
+}
+
+.rf-copy-btn {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 2rem;
+	border: none;
+	border-radius: var(--rf-radius-sm);
+	background: transparent;
+	color: var(--rf-color-code-text, #e2e8f0);
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity 150ms ease, background-color 150ms ease;
+}
+
+.rf-code-wrapper:hover .rf-copy-btn {
+	opacity: 0.6;
+}
+
+.rf-copy-btn:hover {
+	opacity: 1 !important;
+	background: rgba(255, 255, 255, 0.1);
+}
+
+.rf-copy-btn--copied {
+	opacity: 1 !important;
+	color: var(--rf-color-success, #4ade80);
+}

package/styles/global.css

@@ -102,13 +102,6 @@ li > p {
 	margin-bottom: 0.5rem;
 }
 
-blockquote {
-	border-left: 3px solid var(--rf-color-border);
-	margin: 1.5rem 0;
-	padding: 0.5rem 1rem;
-	color: var(--rf-color-muted);
-}
-
 table {
 	width: 100%;
 	border-collapse: collapse;

package/styles/layouts/blog.css

@@ -0,0 +1,267 @@
+/* Blog layout */
+
+/* ---- Header ---- */
+.rf-blog-header {
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-blog-header__inner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 1.125rem 1.5rem;
+}
+.rf-blog-header p {
+	margin: 0;
+	line-height: 1;
+}
+.rf-blog-header a {
+	display: inline-block;
+	color: inherit;
+	text-decoration: none;
+}
+.rf-blog-header a:hover {
+	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;
+}
+.rf-blog-header img {
+	height: 2rem;
+	width: auto;
+}
+.rf-blog-header__inner p ~ p {
+	font-size: 0.85rem;
+}
+.rf-blog-header__inner p ~ p a {
+	margin-left: 1.5rem;
+	color: var(--rf-color-muted);
+}
+.rf-blog-header__inner p ~ p a:hover {
+	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;
+	margin: 0 0 1rem;
+	color: var(--rf-color-text);
+}
+.rf-blog-index__body {
+	margin-bottom: 2rem;
+	line-height: 1.8;
+	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);
+	text-decoration: none;
+	color: inherit;
+	transition: border-color 0.15s, box-shadow 0.15s;
+}
+.rf-blog-card:hover {
+	border-color: var(--rf-color-text);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+	text-decoration: none;
+}
+.rf-blog-card__title {
+	font-size: 1.35rem;
+	font-weight: 700;
+	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;
+	color: var(--rf-color-muted);
+	margin-bottom: 0.5rem;
+}
+.rf-blog-card__author::before {
+	content: '\00b7';
+	margin-right: 0.75rem;
+}
+.rf-blog-card__desc {
+	margin: 0 0 0.75rem;
+	font-size: 0.95rem;
+	line-height: 1.6;
+	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;
+	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;
+	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;
+	color: var(--rf-color-muted);
+}
+.rf-blog-article__meta time {
+	font-weight: 500;
+}
+.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;
+	padding: 0.2rem 0.6rem;
+	border-radius: 9999px;
+	background: var(--rf-color-surface);
+	color: var(--rf-color-muted);
+	border: 1px solid var(--rf-color-border);
+}
+
+/* ---- Article body typography ---- */
+.rf-blog-article__body {
+	line-height: 1.8;
+}
+.rf-blog-article__body h2 {
+	margin-top: 2.5rem;
+}
+.rf-blog-article__body h3 {
+	margin-top: 2rem;
+}
+.rf-blog-article__body p {
+	margin-bottom: 1.25rem;
+}
+.rf-blog-article__body img {
+	border-radius: var(--rf-radius-md);
+	margin: 1.5rem 0;
+}
+
+/* ---- Sidebar ---- */
+.rf-blog-sidebar {
+	position: sticky;
+	top: 2.5rem;
+	font-size: 0.85rem;
+	color: var(--rf-color-muted);
+}
+.rf-blog-sidebar h2,
+.rf-blog-sidebar h3,
+.rf-blog-sidebar h4 {
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+}
+.rf-blog-sidebar ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.rf-blog-sidebar li {
+	padding: 0.25rem 0;
+}
+.rf-blog-sidebar a {
+	color: var(--rf-color-muted);
+	text-decoration: none;
+}
+.rf-blog-sidebar a:hover {
+	color: var(--rf-color-text);
+}
+
+/* ---- Footer ---- */
+.rf-blog-footer {
+	border-top: 1px solid var(--rf-color-border);
+	padding: 2rem 1.5rem;
+	text-align: center;
+	font-size: 0.85rem;
+	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;
+	}
+	.rf-blog-sidebar {
+		position: static;
+		border-top: 1px solid var(--rf-color-border);
+		padding-top: 1.5rem;
+	}
+}

package/styles/layouts/default.css

@@ -6,7 +6,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0.875rem 1.5rem;
+	padding: 1.125rem 1.5rem;
 }
 .rf-header p {
 	margin: 0;
@@ -20,21 +20,33 @@
 .rf-header a:hover {
 	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;
+}
 .rf-header img {
-	display: block;
-	height: 1.5rem;
+	height: 2rem;
 	width: auto;
 }
-.rf-header__inner p:last-child:not(:first-child) {
+.rf-header__inner p ~ p {
 	font-size: 0.85rem;
 }
-.rf-header__inner p:last-child:not(:first-child) a {
+.rf-header__inner p ~ p a {
 	margin-left: 1.5rem;
 	color: var(--rf-color-muted);
 }
-.rf-header__inner p:last-child:not(:first-child) a:hover {
+.rf-header__inner p ~ p a:hover {
 	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 {
 	padding-top: 2.5rem;
 	padding-bottom: 4rem;
@@ -42,4 +54,12 @@
 	margin: 0 auto;
 	padding-left: 1.5rem;
 	padding-right: 1.5rem;
+	--rf-content-padding: 1.5rem;
+	container-type: inline-size;
+}
+
+@media (max-width: 768px) {
+	.rf-header__inner p ~ p {
+		display: none;
+	}
 }

package/styles/layouts/docs.css

@@ -1,18 +1,20 @@
 /* Docs layout */
+
+/* ---- Fixed header ---- */
 .rf-docs-header {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	z-index: 10;
-	background: var(--rf-color-bg);
+	background: var(--rf-color-bg, #fff);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-docs-header__inner {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0.875rem 1.5rem;
+	padding: 1.125rem 1.5rem;
 }
 .rf-docs-header p {
 	margin: 0;
@@ -26,41 +28,56 @@
 .rf-docs-header a:hover {
 	text-decoration: none;
 }
+.rf-docs-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;
+}
 .rf-docs-header img {
-	display: block;
-	height: 1.5rem;
+	height: 2rem;
 	width: auto;
 }
-.rf-docs-header__inner p:last-child:not(:first-child) {
+.rf-docs-header__inner p ~ p {
 	font-size: 0.85rem;
 }
-.rf-docs-header__inner p:last-child:not(:first-child) a {
+.rf-docs-header__inner p ~ p a {
 	margin-left: 1.5rem;
 	color: var(--rf-color-muted);
 }
-.rf-docs-header__inner p:last-child:not(:first-child) a:hover {
+.rf-docs-header__inner p ~ p a:hover {
 	color: var(--rf-color-text);
 }
-/* Sidebar */
+.rf-docs-header__inner p ~ p a svg {
+	width: 1.1rem;
+	height: 1.1rem;
+	vertical-align: -0.15em;
+}
+
+/* ---- Fixed sidebar ---- */
 .rf-docs-sidebar {
 	position: fixed;
 	left: 0;
-	top: 3.375rem;
+	top: 4.125rem;
 	bottom: 0;
 	width: 240px;
 	overflow-y: auto;
 	padding: 1.5rem;
 	border-right: 1px solid var(--rf-color-border);
-	background: var(--rf-color-bg);
+	background: var(--rf-color-bg, #fff);
 	z-index: 5;
 }
 .rf-docs-sidebar::-webkit-scrollbar {
 	width: 0;
 }
-/* Content area */
+
+/* ---- Content area ---- */
 .rf-docs-content {
-	padding-top: 5rem;
+	padding-top: 5.75rem;
 	padding-bottom: 4rem;
+	container-type: inline-size;
 }
 .rf-docs-content--has-nav {
 	margin-left: 240px;
@@ -69,18 +86,66 @@
 	max-width: 60rem;
 	margin: 0 auto;
 	padding: 0 2.5rem;
+	--rf-content-padding: 2.5rem;
+}
+
+/* ---- Mobile toolbar (hidden on desktop) ---- */
+.rf-docs-toolbar {
+	display: none;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.625rem 1rem;
+	border-bottom: 1px solid var(--rf-color-border);
+	background: var(--rf-color-bg, #fff);
 }
-/* Mobile */
+.rf-docs-toolbar__hamburger {
+	background: none;
+	border: none;
+	padding: 0.25rem;
+	cursor: pointer;
+	color: var(--rf-color-muted);
+	line-height: 0;
+	flex-shrink: 0;
+}
+.rf-docs-toolbar__hamburger:hover {
+	color: var(--rf-color-text);
+}
+.rf-docs-toolbar__breadcrumb {
+	font-size: 0.8rem;
+	color: var(--rf-color-muted);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.rf-docs-breadcrumb-category {
+	color: var(--rf-color-muted);
+}
+.rf-docs-breadcrumb-sep {
+	margin: 0 0.35rem;
+	color: var(--rf-color-border);
+}
+.rf-docs-breadcrumb-page {
+	color: var(--rf-color-text);
+	font-weight: 500;
+}
+
+/* ---- Mobile overrides ---- */
 @media (max-width: 768px) {
 	.rf-docs-header {
 		position: static;
 	}
+	.rf-docs-header__inner p ~ p {
+		display: none;
+	}
+	.rf-docs-toolbar {
+		display: flex;
+	}
+	.rf-mobile-panel--nav {
+		top: 6.25rem;
+	}
 	.rf-docs-sidebar {
-		position: static;
-		width: auto;
-		border-right: none;
-		border-bottom: 1px solid var(--rf-color-border);
-		padding: 1rem 1.5rem;
+		display: none;
 	}
 	.rf-docs-content {
 		padding-top: 2rem;
@@ -90,5 +155,6 @@
 	}
 	.rf-docs-content__inner {
 		padding: 0 1.5rem;
+		--rf-content-padding: 1.5rem;
 	}
 }

package/styles/layouts/mobile.css

@@ -0,0 +1,84 @@
+/* Shared mobile UI — menu button, fullscreen panel, close */
+
+/* ---- Mobile menu button (hidden on desktop) ---- */
+.rf-mobile-menu-btn {
+	display: none;
+	background: none;
+	border: none;
+	padding: 0.25rem;
+	cursor: pointer;
+	color: var(--rf-color-muted);
+	line-height: 0;
+}
+.rf-mobile-menu-btn:hover {
+	color: var(--rf-color-text);
+}
+
+/* ---- Fullscreen mobile panel ---- */
+.rf-mobile-panel {
+	display: none;
+	position: fixed;
+	inset: 0;
+	z-index: 100;
+	background: var(--rf-color-bg, #fff);
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+.rf-mobile-panel__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 1.125rem 1.5rem;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-mobile-panel__title {
+	font-size: 0.85rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+.rf-mobile-panel__close {
+	background: none;
+	border: none;
+	padding: 0.25rem;
+	cursor: pointer;
+	color: var(--rf-color-muted);
+	line-height: 0;
+}
+.rf-mobile-panel__close:hover {
+	color: var(--rf-color-text);
+}
+.rf-mobile-panel__nav {
+	padding: 1.5rem;
+}
+.rf-mobile-panel__nav p {
+	margin: 0;
+}
+.rf-mobile-panel__nav img {
+	display: none;
+}
+.rf-mobile-panel__nav a {
+	display: block;
+	padding: 0.75rem 0;
+	font-size: 1.1rem;
+	color: var(--rf-color-text);
+	text-decoration: none;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-mobile-panel__nav a:hover {
+	color: var(--rf-color-primary, var(--rf-color-text));
+	text-decoration: none;
+}
+.rf-mobile-panel__body {
+	padding: 1rem 1.5rem;
+}
+
+@media (max-width: 768px) {
+	.rf-mobile-menu-btn {
+		display: block;
+	}
+	.rf-mobile-panel {
+		display: block;
+	}
+}

package/styles/runes/bento.css

@@ -4,6 +4,8 @@
 }
 .rf-bento__grid {
 	display: grid;
+	grid-template-columns: repeat(var(--bento-columns, 4), 1fr);
+	gap: var(--bento-gap, 1rem);
 }
 .rf-bento-cell {
 	border: 1px solid var(--rf-color-border);

package/styles/runes/codegroup.css

@@ -31,6 +31,11 @@
 	font-size: 0.8rem;
 	opacity: 0.7;
 }
+.rf-codegroup ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
 .rf-codegroup__tabs {
 	display: flex;
 	background: rgba(255, 255, 255, 0.03);
@@ -58,7 +63,7 @@
 	color: rgba(255, 255, 255, 0.95);
 	border-bottom-color: var(--rf-color-primary);
 }
-.rf-codegroup__content pre {
+.rf-codegroup pre {
 	margin: 0;
 	padding: 1rem 1.25rem;
 	overflow-x: auto;
@@ -66,7 +71,7 @@
 	border: none;
 	border-radius: 0;
 }
-.rf-codegroup__content code {
+.rf-codegroup code {
 	font-family: var(--rf-font-mono);
 	font-size: 0.85rem;
 }