feat: add version history drawer with release notes
Introduce a footer-triggered Version History drawer with categorized release notes, hardcoded release data, and semver tracking at v0.3.0. Also ships blog blockquote/table styling, site-wide typography, home page image updates, header refinements, and related bug fixes. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
alirez.br
+295
-32
@@ -80,8 +80,10 @@
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-sans: "IRANSansX", "system-ui", "Avenir", "Helvetica", "Arial",
|
||||
"sans-serif";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
||||
monospace;
|
||||
--font-iran-sans: "IRANSansX", "system-ui", "Avenir", "Helvetica", "Arial",
|
||||
"sans-serif";
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
@@ -117,11 +119,13 @@
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-blog: var(--radius-blog);
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-iran-sans: "IRANSansX", var(--font-geist-sans);
|
||||
--font-iran-sans: "IRANSansX", system-ui, sans-serif;
|
||||
--radius: 0.625rem;
|
||||
--radius-blog: 0.9375rem;
|
||||
--card: oklch(1 0.006 175);
|
||||
--card-foreground: oklch(0.145 0.02 175);
|
||||
--popover: oklch(1 0.006 175);
|
||||
@@ -233,46 +237,98 @@
|
||||
}
|
||||
|
||||
|
||||
/* WordPress table block (figure.wp-block-table > table) */
|
||||
.wp-block-table {
|
||||
margin: 1.5rem 0;
|
||||
overflow-x: auto;
|
||||
border-radius: var(--radius);
|
||||
/* Blog table blocks (figure.blog-table) */
|
||||
.blog-table {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-inline: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wp-block-table table {
|
||||
.blog-table__scroll {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.blog-table__grid {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9375rem;
|
||||
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wp-block-table table.has-fixed-layout {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.wp-block-table th,
|
||||
.wp-block-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
.blog-table__grid th,
|
||||
.blog-table__grid td {
|
||||
padding: 0.875rem 1rem;
|
||||
text-align: right;
|
||||
min-width: 850px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wp-block-table tbody tr:first-child th,
|
||||
.wp-block-table tbody tr:first-child td {
|
||||
background: var(--muted);
|
||||
font-weight: 600;
|
||||
.blog-table__grid th p,
|
||||
.blog-table__grid td p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog-table__caption {
|
||||
margin-top: 0.75rem;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.blog-table__grid a {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.blog-table__grid a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Variant one (green) & two (yellow) — glass layout aligned with HeroHeader */
|
||||
.blog-table--one {
|
||||
--table-tone: var(--primary);
|
||||
}
|
||||
|
||||
.blog-table--two {
|
||||
--table-tone: var(--accent);
|
||||
}
|
||||
|
||||
.blog-table--one .blog-table__grid thead th,
|
||||
.blog-table--two .blog-table__grid thead th {
|
||||
background: color-mix(in srgb, var(--table-tone) 35%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.wp-block-table tbody tr:not(:first-child):hover td {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.wp-block-table thead th {
|
||||
background: var(--muted);
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--border) 10%, transparent);
|
||||
}
|
||||
|
||||
.blog-table--one .blog-table__grid tbody tr,
|
||||
.blog-table--two .blog-table__grid tbody tr {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.blog-table--one .blog-table__grid tbody tr:nth-child(even) td,
|
||||
.blog-table--two .blog-table__grid tbody tr:nth-child(even) td {
|
||||
background: color-mix(in srgb, var(--background) 20%, transparent);
|
||||
}
|
||||
|
||||
.blog-table--one .blog-table__grid tbody tr:hover td,
|
||||
.blog-table--two .blog-table__grid tbody tr:hover td {
|
||||
background: color-mix(in srgb, var(--table-tone) 12%, transparent);
|
||||
}
|
||||
|
||||
.blog-table--one .blog-table__grid tbody td,
|
||||
.blog-table--two .blog-table__grid tbody td {
|
||||
border-top: 1px solid color-mix(in srgb, var(--border) 10%, transparent);
|
||||
}
|
||||
|
||||
.blog-table--one .blog-table__grid tbody td:first-child,
|
||||
.blog-table--two .blog-table__grid tbody td:first-child {
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
@@ -294,10 +350,217 @@
|
||||
}
|
||||
|
||||
.wp-block-image {
|
||||
@apply rounded-md overflow-hidden shadow-sm;
|
||||
@apply rounded-blog overflow-hidden shadow-sm;
|
||||
}
|
||||
|
||||
.blog-content .wp-block-image {
|
||||
@apply my-6;
|
||||
}
|
||||
|
||||
.blog-content img {
|
||||
@apply w-full h-auto;
|
||||
image-rendering: auto;
|
||||
}
|
||||
|
||||
/* Blog prose typography — single source of truth */
|
||||
.blog-content {
|
||||
@apply space-y-6 text-foreground;
|
||||
}
|
||||
|
||||
.blog-content h2 {
|
||||
@apply mt-8 mb-4 text-2xl font-semibold leading-snug tracking-normal scroll-mt-24;
|
||||
}
|
||||
|
||||
.blog-content h3 {
|
||||
@apply mt-6 mb-3 text-xl font-semibold leading-snug tracking-normal scroll-mt-24;
|
||||
}
|
||||
|
||||
.blog-content h4 {
|
||||
@apply mt-4 mb-2 text-lg font-semibold leading-snug tracking-normal scroll-mt-24;
|
||||
}
|
||||
|
||||
.blog-content p {
|
||||
@apply leading-relaxed tracking-normal text-muted-foreground;
|
||||
}
|
||||
|
||||
.blog-content a {
|
||||
@apply text-primary no-underline hover:underline;
|
||||
}
|
||||
|
||||
.blog-content ul {
|
||||
@apply list-disc pr-6;
|
||||
}
|
||||
|
||||
.blog-content ol {
|
||||
@apply list-decimal pr-6;
|
||||
}
|
||||
|
||||
.blog-content li {
|
||||
@apply my-1;
|
||||
}
|
||||
|
||||
/* Blog blockquote variants */
|
||||
.blog-blockquote {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-blog);
|
||||
border: 1px solid;
|
||||
padding-block: 1.5rem;
|
||||
padding-inline-end: 1.75rem;
|
||||
padding-inline-start: 4rem;
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
|
||||
}
|
||||
|
||||
.blog-blockquote::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-block: 1rem;
|
||||
inset-inline-start: 0;
|
||||
width: 4px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.blog-blockquote--yellow {
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
|
||||
background: color-mix(in srgb, var(--accent) 18%, var(--background));
|
||||
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 14%, transparent);
|
||||
}
|
||||
|
||||
.blog-blockquote--yellow::before {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.blog-blockquote--yellow .blog-blockquote__icon {
|
||||
color: color-mix(in srgb, var(--accent) 55%, transparent);
|
||||
}
|
||||
|
||||
.blog-blockquote--yellow .blog-blockquote__footer {
|
||||
border-top-color: color-mix(in srgb, var(--accent) 28%, var(--border));
|
||||
}
|
||||
|
||||
.blog-blockquote--green {
|
||||
border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
|
||||
background: color-mix(in srgb, var(--primary) 12%, var(--background));
|
||||
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 12%, transparent);
|
||||
}
|
||||
|
||||
.blog-blockquote--green::before {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.blog-blockquote--green .blog-blockquote__icon {
|
||||
color: color-mix(in srgb, var(--primary) 50%, transparent);
|
||||
}
|
||||
|
||||
.blog-blockquote--green .blog-blockquote__footer {
|
||||
border-top-color: color-mix(in srgb, var(--primary) 28%, var(--border));
|
||||
}
|
||||
|
||||
.blog-blockquote--gray {
|
||||
border-color: var(--border);
|
||||
background: color-mix(in srgb, var(--muted) 65%, var(--background));
|
||||
}
|
||||
|
||||
.blog-blockquote--gray::before {
|
||||
background: color-mix(in srgb, var(--muted-foreground) 38%, transparent);
|
||||
}
|
||||
|
||||
.blog-blockquote--gray .blog-blockquote__icon {
|
||||
color: color-mix(in srgb, var(--muted-foreground) 42%, transparent);
|
||||
}
|
||||
|
||||
.blog-blockquote--gray .blog-blockquote__footer {
|
||||
border-top-color: color-mix(in srgb, var(--border) 80%, transparent);
|
||||
}
|
||||
|
||||
.blog-blockquote__icon {
|
||||
position: absolute;
|
||||
inset-inline-start: 1.25rem;
|
||||
top: 1.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
flex-shrink: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.blog-blockquote__decorations {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.15;
|
||||
/* Keep decorative shapes out of the quote-icon corner (inline-start). */
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
calc(100% - 4.75rem) 0,
|
||||
calc(100% - 4.75rem) 4.75rem,
|
||||
100% 4.75rem,
|
||||
100% 100%,
|
||||
0 100%
|
||||
);
|
||||
}
|
||||
|
||||
:dir(ltr) .blog-blockquote__decorations {
|
||||
clip-path: polygon(
|
||||
4.75rem 0,
|
||||
100% 0,
|
||||
100% 100%,
|
||||
0 100%,
|
||||
0 4.75rem,
|
||||
4.75rem 4.75rem
|
||||
);
|
||||
}
|
||||
|
||||
.blog-pullquote .blog-blockquote__decorations {
|
||||
clip-path: none;
|
||||
}
|
||||
|
||||
.blog-blockquote__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
isolation: isolate;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.blog-blockquote__content p {
|
||||
margin-block: 0.5rem;
|
||||
}
|
||||
|
||||
.blog-blockquote__content a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.blog-blockquote__content a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.blog-blockquote__footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
.blog-pullquote {
|
||||
text-align: center;
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-pullquote .blog-blockquote__icon {
|
||||
position: static;
|
||||
margin-inline: auto;
|
||||
margin-bottom: 0.75rem;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.blog-pullquote .blog-blockquote__content {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
Reference in New Issue
Block a user