@noxion/renderer 0.0.2 → 0.1.0

package/src/styles/noxion.css

@@ -0,0 +1,669 @@
+:root {
+  --noxion-primary: #2563eb;
+  --noxion-primaryForeground: #ffffff;
+  --noxion-background: #ffffff;
+  --noxion-foreground: #171717;
+  --noxion-muted: #f5f5f5;
+  --noxion-mutedForeground: #737373;
+  --noxion-border: #e5e5e5;
+  --noxion-accent: #f5f5f5;
+  --noxion-accentForeground: #171717;
+  --noxion-card: #ffffff;
+  --noxion-cardForeground: #171717;
+
+  --noxion-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --noxion-font-serif: Georgia, "Times New Roman", serif;
+  --noxion-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+
+  --noxion-spacing-content: 720px;
+  --noxion-spacing-sidebar: 260px;
+  --noxion-border-radius: 0.5rem;
+
+  --noxion-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --noxion-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
+  --noxion-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
+
+  --noxion-transition-fast: 120ms ease;
+  --noxion-transition-normal: 200ms ease;
+  --noxion-transition-slow: 300ms ease;
+
+  --noxion-breakpoint-sm: 640px;
+  --noxion-breakpoint-md: 768px;
+  --noxion-breakpoint-lg: 1024px;
+  --noxion-breakpoint-xl: 1280px;
+}
+
+[data-theme="dark"] {
+  --noxion-primary: #3b82f6;
+  --noxion-primaryForeground: #ffffff;
+  --noxion-background: #0a0a0a;
+  --noxion-foreground: #ededed;
+  --noxion-muted: #1a1a1a;
+  --noxion-mutedForeground: #888888;
+  --noxion-border: #1f1f1f;
+  --noxion-accent: #1a1a1a;
+  --noxion-accentForeground: #ededed;
+  --noxion-card: #111111;
+  --noxion-cardForeground: #ededed;
+
+  --noxion-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --noxion-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --noxion-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--noxion-font-sans);
+  color: var(--noxion-foreground);
+  background-color: var(--noxion-background);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background-color: var(--noxion-primary);
+  color: var(--noxion-primaryForeground);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* ============================================
+   Header
+   ============================================ */
+
+.noxion-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+  padding: 0 1.5rem;
+  border-bottom: 1px solid var(--noxion-border);
+  background-color: color-mix(in srgb, var(--noxion-background) 80%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+@media (max-width: 640px) {
+  .noxion-header {
+    height: 56px;
+    padding: 0 1rem;
+  }
+}
+
+.noxion-header__logo {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--noxion-foreground);
+  text-decoration: none;
+  letter-spacing: -0.02em;
+  transition: opacity var(--noxion-transition-fast);
+}
+
+.noxion-header__logo:hover {
+  opacity: 0.7;
+}
+
+.noxion-header__nav {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+@media (max-width: 640px) {
+  .noxion-header__nav {
+    gap: 1.25rem;
+  }
+}
+
+.noxion-header__nav-link {
+  position: relative;
+  font-size: 0.875rem;
+  color: var(--noxion-mutedForeground);
+  text-decoration: none;
+  transition: color var(--noxion-transition-fast);
+}
+
+.noxion-header__nav-link:hover {
+  color: var(--noxion-foreground);
+}
+
+.noxion-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* ============================================
+   Footer
+   ============================================ */
+
+.noxion-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 1.5rem;
+  border-top: 1px solid var(--noxion-border);
+  font-size: 0.8125rem;
+  color: var(--noxion-mutedForeground);
+}
+
+@media (max-width: 640px) {
+  .noxion-footer {
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: center;
+    padding: 1.5rem 1rem;
+  }
+}
+
+.noxion-footer__copyright {
+  color: inherit;
+}
+
+.noxion-footer__powered-by {
+  color: var(--noxion-mutedForeground);
+  text-decoration: none;
+  transition: color var(--noxion-transition-fast);
+}
+
+.noxion-footer__powered-by:hover {
+  color: var(--noxion-foreground);
+}
+
+/* ============================================
+   PostCard
+   ============================================ */
+
+.noxion-post-card {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  border-radius: var(--noxion-border-radius);
+  overflow: hidden;
+  background-color: var(--noxion-card);
+  border: 1px solid var(--noxion-border);
+  transition:
+    border-color var(--noxion-transition-normal),
+    box-shadow var(--noxion-transition-normal),
+    transform var(--noxion-transition-normal);
+}
+
+.noxion-post-card:hover {
+  border-color: var(--noxion-mutedForeground);
+  box-shadow: var(--noxion-shadow-md);
+  transform: translateY(-2px);
+}
+
+.noxion-post-card--text-only {
+  border: none;
+  border-bottom: 1px solid var(--noxion-border);
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.noxion-post-card--text-only:hover {
+  border-color: var(--noxion-mutedForeground);
+  box-shadow: none;
+  transform: none;
+}
+
+.noxion-post-card__cover {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background-color: var(--noxion-muted);
+}
+
+.noxion-post-card__cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  transition: transform var(--noxion-transition-slow);
+}
+
+.noxion-post-card:hover .noxion-post-card__cover-image {
+  transform: scale(1.03);
+}
+
+.noxion-post-card__body {
+  padding: 1.25rem;
+}
+
+.noxion-post-card--text-only .noxion-post-card__body {
+  padding: 1.25rem 0;
+}
+
+.noxion-post-card__category {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--noxion-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.375rem;
+}
+
+.noxion-post-card__title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--noxion-cardForeground);
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.noxion-post-card--text-only .noxion-post-card__title {
+  font-size: 1.25rem;
+  letter-spacing: -0.02em;
+}
+
+.noxion-post-card__description {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  color: var(--noxion-mutedForeground);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.noxion-post-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+.noxion-post-card__date {
+  font-size: 0.8125rem;
+  color: var(--noxion-mutedForeground);
+}
+
+.noxion-post-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.noxion-post-card__tag {
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background-color: var(--noxion-muted);
+  color: var(--noxion-mutedForeground);
+  transition: color var(--noxion-transition-fast);
+}
+
+.noxion-post-card:hover .noxion-post-card__tag {
+  color: var(--noxion-foreground);
+}
+
+/* ============================================
+   PostList
+   ============================================ */
+
+.noxion-post-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.5rem;
+  width: 100%;
+}
+
+@media (max-width: 640px) {
+  .noxion-post-list {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+}
+
+.noxion-post-list--list {
+  grid-template-columns: 1fr;
+  gap: 0;
+}
+
+.noxion-post-list--list .noxion-post-card {
+  border: none;
+  border-bottom: 1px solid var(--noxion-border);
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.noxion-post-list--list .noxion-post-card:hover {
+  box-shadow: none;
+  transform: none;
+  border-color: var(--noxion-mutedForeground);
+}
+
+.noxion-post-list--list .noxion-post-card__body {
+  padding: 1.25rem 0;
+}
+
+/* ============================================
+   Search
+   ============================================ */
+
+.noxion-search {
+  position: relative;
+  width: 100%;
+  max-width: 320px;
+}
+
+.noxion-search__input {
+  width: 100%;
+  padding: 0.5rem 0.875rem;
+  padding-right: 3.5rem;
+  border-radius: var(--noxion-border-radius);
+  border: 1px solid var(--noxion-border);
+  background-color: var(--noxion-muted);
+  color: var(--noxion-foreground);
+  font-size: 0.875rem;
+  font-family: inherit;
+  outline: none;
+  transition:
+    border-color var(--noxion-transition-fast),
+    background-color var(--noxion-transition-fast),
+    box-shadow var(--noxion-transition-fast);
+}
+
+.noxion-search__input::placeholder {
+  color: var(--noxion-mutedForeground);
+}
+
+.noxion-search__input:hover {
+  border-color: var(--noxion-mutedForeground);
+}
+
+.noxion-search__input:focus {
+  border-color: var(--noxion-primary);
+  background-color: var(--noxion-background);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--noxion-primary) 15%, transparent);
+}
+
+.noxion-search__kbd {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: var(--noxion-font-sans);
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--noxion-border);
+  background-color: var(--noxion-background);
+  color: var(--noxion-mutedForeground);
+  pointer-events: none;
+  line-height: 1;
+}
+
+/* ============================================
+   TagFilter
+   ============================================ */
+
+.noxion-tag-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.noxion-tag-filter__tag {
+  padding: 0.3125rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--noxion-border);
+  background-color: transparent;
+  color: var(--noxion-mutedForeground);
+  font-size: 0.8125rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    color var(--noxion-transition-fast),
+    border-color var(--noxion-transition-fast),
+    background-color var(--noxion-transition-fast);
+  outline: none;
+}
+
+.noxion-tag-filter__tag:hover {
+  color: var(--noxion-foreground);
+  border-color: var(--noxion-foreground);
+}
+
+.noxion-tag-filter__tag:focus-visible {
+  box-shadow: 0 0 0 2px var(--noxion-primary);
+}
+
+.noxion-tag-filter__tag--selected {
+  background-color: var(--noxion-foreground);
+  color: var(--noxion-background);
+  border-color: var(--noxion-foreground);
+}
+
+.noxion-tag-filter__tag--selected:hover {
+  opacity: 0.85;
+  color: var(--noxion-background);
+  border-color: var(--noxion-foreground);
+}
+
+/* ============================================
+   TOC
+   ============================================ */
+
+.noxion-toc {
+  padding: 1rem 0;
+  font-size: 0.8125rem;
+}
+
+.noxion-toc__heading {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--noxion-mutedForeground);
+  margin-bottom: 0.875rem;
+}
+
+.noxion-toc__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-left: 1px solid var(--noxion-border);
+}
+
+.noxion-toc__item {
+  margin-bottom: 0.125rem;
+}
+
+.noxion-toc__link {
+  display: block;
+  padding: 0.25rem 0 0.25rem 0.875rem;
+  margin-left: -1px;
+  border-left: 2px solid transparent;
+  color: var(--noxion-mutedForeground);
+  text-decoration: none;
+  line-height: 1.4;
+  transition:
+    color var(--noxion-transition-fast),
+    border-color var(--noxion-transition-fast);
+}
+
+.noxion-toc__link:hover {
+  color: var(--noxion-foreground);
+}
+
+.noxion-toc__item--active > .noxion-toc__link {
+  color: var(--noxion-foreground);
+  border-left-color: var(--noxion-foreground);
+  font-weight: 500;
+}
+
+/* ============================================
+   ThemeToggle
+   ============================================ */
+
+.noxion-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--noxion-border-radius);
+  border: 1px solid var(--noxion-border);
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--noxion-mutedForeground);
+  transition:
+    color var(--noxion-transition-fast),
+    border-color var(--noxion-transition-fast),
+    background-color var(--noxion-transition-fast);
+  outline: none;
+}
+
+.noxion-theme-toggle:hover {
+  color: var(--noxion-foreground);
+  border-color: var(--noxion-foreground);
+  background-color: var(--noxion-muted);
+}
+
+.noxion-theme-toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--noxion-primary);
+}
+
+/* ============================================
+   EmptyState
+   ============================================ */
+
+.noxion-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem 1rem;
+  text-align: center;
+}
+
+.noxion-empty-state__title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--noxion-foreground);
+  margin: 0 0 0.375rem;
+  letter-spacing: -0.01em;
+}
+
+.noxion-empty-state__message {
+  font-size: 0.9375rem;
+  color: var(--noxion-mutedForeground);
+  margin: 0;
+  max-width: 360px;
+}
+
+/* ============================================
+   Layout
+   ============================================ */
+
+.noxion-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: var(--noxion-background);
+}
+
+.noxion-layout__header {
+  flex-shrink: 0;
+}
+
+.noxion-layout__content {
+  flex: 1;
+  width: 100%;
+  max-width: var(--noxion-spacing-content);
+  margin: 0 auto;
+  padding: 2.5rem 1.5rem;
+}
+
+@media (max-width: 640px) {
+  .noxion-layout__content {
+    padding: 1.5rem 1rem;
+  }
+}
+
+.noxion-layout__footer {
+  flex-shrink: 0;
+  margin-top: auto;
+}
+
+.noxion-layout__sidebar {
+  width: var(--noxion-spacing-sidebar);
+  flex-shrink: 0;
+  padding: 2.5rem 1.5rem;
+  border-right: 1px solid var(--noxion-border);
+}
+
+.noxion-layout__hero {
+  width: 100%;
+}
+
+.noxion-layout--single-column {
+  flex-direction: column;
+}
+
+.noxion-layout--sidebar-left > .noxion-layout__main {
+  display: flex;
+  flex: 1;
+}
+
+.noxion-layout--sidebar-left > .noxion-layout__main > .noxion-layout__sidebar {
+  order: -1;
+  border-right: 1px solid var(--noxion-border);
+  border-left: none;
+}
+
+.noxion-layout--sidebar-right > .noxion-layout__main {
+  display: flex;
+  flex: 1;
+}
+
+.noxion-layout--sidebar-right > .noxion-layout__main > .noxion-layout__sidebar {
+  border-left: 1px solid var(--noxion-border);
+  border-right: none;
+}
+
+@media (max-width: 768px) {
+  .noxion-layout__sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--noxion-border);
+    padding: 1.5rem 1rem;
+  }
+
+  .noxion-layout--sidebar-left > .noxion-layout__main,
+  .noxion-layout--sidebar-right > .noxion-layout__main {
+    flex-direction: column;
+  }
+
+  .noxion-layout--sidebar-left > .noxion-layout__main > .noxion-layout__sidebar,
+  .noxion-layout--sidebar-right > .noxion-layout__main > .noxion-layout__sidebar {
+    border-left: none;
+    border-right: none;
+  }
+}