next-blogpanel 1.0.0

package/dist/styles/prose.css

@@ -0,0 +1,299 @@
+/* Next BlogPanel — Blog Content Typography (Prose) */
+
+.nbp-post-content {
+  font-family: var(--nbp-font-body);
+  color: #374151;
+  line-height: 1.9;
+  font-size: 1.25rem;
+  letter-spacing: 0.025em;
+}
+
+.nbp-post-content > * + * {
+  margin-top: 1.5rem;
+}
+
+/* Headings */
+.nbp-post-content h2 {
+  font-family: var(--nbp-font-heading);
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1.3;
+  margin-top: 3.5rem;
+  margin-bottom: 1.5rem;
+  letter-spacing: -0.025em;
+  color: var(--nbp-text);
+  scroll-margin-top: 8rem;
+}
+
+.nbp-post-content h3 {
+  font-family: var(--nbp-font-heading);
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.4;
+  margin-top: 2.5rem;
+  margin-bottom: 1.25rem;
+  color: var(--nbp-text);
+  scroll-margin-top: 8rem;
+}
+
+.nbp-post-content h4 {
+  font-family: var(--nbp-font-heading);
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.4;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+  color: var(--nbp-text);
+  scroll-margin-top: 8rem;
+}
+
+/* Paragraphs */
+.nbp-post-content p {
+  margin: 0 0 2rem;
+  text-align: justify;
+}
+
+/* Drop cap — first paragraph only */
+.nbp-post-content > p:first-of-type::first-letter {
+  font-size: 3.5em;
+  float: left;
+  line-height: 0.8;
+  color: var(--nbp-primary);
+  font-weight: 700;
+  margin-right: 0.1em;
+  margin-top: 0.05em;
+}
+
+/* Links */
+.nbp-post-content a {
+  color: var(--nbp-primary);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s var(--nbp-transition);
+}
+
+.nbp-post-content a:hover {
+  color: var(--nbp-primary-hover);
+  border-bottom-color: var(--nbp-primary);
+}
+
+.nbp-post-content strong {
+  font-weight: 600;
+}
+
+/* Inline code */
+.nbp-post-content code {
+  font-family: var(--nbp-font-code);
+  font-size: 0.875em;
+  background: #f3f4f6;
+  color: #e11d48;
+  padding: 0.125em 0.375em;
+  border-radius: 0.25rem;
+}
+
+/* Code blocks */
+.nbp-post-content pre {
+  background: #0f172a;
+  color: #86efac;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  overflow-x: auto;
+  font-family: var(--nbp-font-code);
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.nbp-post-content pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* Blockquotes */
+.nbp-post-content blockquote {
+  border-left: 4px solid var(--nbp-primary);
+  padding: 1rem 2rem;
+  margin-left: 0;
+  margin-right: 0;
+  color: var(--nbp-text-muted);
+  background: rgba(37, 99, 235, 0.03);
+  border-radius: 0 0.75rem 0.75rem 0;
+  font-style: italic;
+  font-size: 1.5rem;
+  line-height: 1.7;
+}
+
+.nbp-post-content blockquote p {
+  margin-bottom: 0;
+  text-align: left;
+}
+
+/* Lists */
+.nbp-post-content ul,
+.nbp-post-content ol {
+  padding-left: 1.75rem;
+  font-size: 1.25rem;
+  line-height: 1.8;
+}
+
+.nbp-post-content li {
+  margin-top: 0.75rem;
+}
+
+.nbp-post-content li::marker {
+  color: var(--nbp-text-muted);
+}
+
+/* Images */
+.nbp-post-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+  cursor: zoom-in;
+  transition: box-shadow 0.3s var(--nbp-transition);
+}
+
+.nbp-post-content img:hover {
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.nbp-post-content figure {
+  margin: 2rem 0;
+}
+
+.nbp-post-content figcaption {
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--nbp-text-muted);
+  margin-top: 0.75rem;
+}
+
+.nbp-post-content hr {
+  border: none;
+  border-top: 1px solid var(--nbp-border);
+  margin: 2.5rem 0;
+}
+
+/* Tables */
+.nbp-post-content table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.9375rem;
+  border: 1px solid var(--nbp-border);
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.nbp-post-content th,
+.nbp-post-content td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--nbp-border);
+}
+
+.nbp-post-content th {
+  background: #f9fafb;
+  font-weight: 600;
+}
+
+.nbp-post-content tr:hover td {
+  background: #f9fafb;
+}
+
+.nbp-post-content tr:nth-child(even) td {
+  background: rgba(249, 250, 251, 0.5);
+}
+
+.nbp-post-content tr:last-child td {
+  border-bottom: none;
+}
+
+.nbp-post-content mark {
+  background: #fef08a;
+  padding: 0 0.125rem;
+}
+
+/* Callouts in rendered content */
+.nbp-post-content .nbp-callout {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  margin: 1.5rem 0;
+}
+
+.nbp-post-content .nbp-callout-info { background: #eff6ff; border-left: 4px solid #3b82f6; }
+.nbp-post-content .nbp-callout-warning { background: #fffbeb; border-left: 4px solid #f59e0b; }
+.nbp-post-content .nbp-callout-tip { background: #f0fdf4; border-left: 4px solid #22c55e; }
+.nbp-post-content .nbp-callout-danger { background: #fef2f2; border-left: 4px solid #ef4444; }
+
+/* FAQ in rendered content */
+.nbp-post-content .nbp-faq-item {
+  border: 1px solid var(--nbp-border);
+  border-radius: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.nbp-post-content .nbp-faq-item h3 {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  background: var(--nbp-bg-secondary);
+  font-size: 1rem;
+  cursor: pointer;
+  scroll-margin-top: 8rem;
+}
+
+.nbp-post-content .nbp-faq-item [itemprop="text"] {
+  padding: 0.75rem 1rem;
+}
+
+/* Task list in rendered content */
+.nbp-post-content .nbp-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.nbp-post-content .nbp-task-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.nbp-post-content .nbp-task-item input[type="checkbox"] {
+  margin-top: 0.375rem;
+}
+
+/* Embed */
+.nbp-post-content .nbp-embed {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  margin: 1.5rem 0;
+}
+
+.nbp-post-content .nbp-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Code block header */
+.nbp-post-content .nbp-code-header {
+  background: #0f172a;
+  color: #94a3b8;
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  font-family: var(--nbp-font-code);
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+
+.nbp-post-content .nbp-code-header + pre {
+  border-radius: 0 0 0.75rem 0.75rem;
+  margin-top: 0;
+}