Better single post display

This commit is contained in:
kbe
2025-08-20 15:45:42 +02:00
parent 41805da339
commit f926c7fcf6
3 changed files with 317 additions and 45 deletions

View File

@@ -49,6 +49,7 @@
--color-white: #fff;
--spacing: 0.25rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--text-xs: 0.75rem;
@@ -75,6 +76,7 @@
--font-weight-semibold: 600;
--font-weight-bold: 700;
--leading-relaxed: 1.625;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -368,6 +370,9 @@
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mt-12 {
margin-top: calc(var(--spacing) * 12);
}
.mr-1 {
margin-right: calc(var(--spacing) * 1);
}
@@ -428,6 +433,12 @@
.inline-flex {
display: inline-flex;
}
.h-5 {
height: calc(var(--spacing) * 5);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
@@ -458,6 +469,15 @@
.min-h-screen {
min-height: 100vh;
}
.w-0 {
width: calc(var(--spacing) * 0);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-10 {
width: calc(var(--spacing) * 10);
}
@@ -470,6 +490,9 @@
.w-full {
width: 100%;
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-3xl {
max-width: var(--container-3xl);
}
@@ -485,6 +508,9 @@
.max-w-xl {
max-width: var(--container-xl);
}
.flex-1 {
flex: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
@@ -505,6 +531,9 @@
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-not-allowed {
cursor: not-allowed;
}
.list-inside {
list-style-position: inside;
}
@@ -538,6 +567,9 @@
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
@@ -616,6 +648,9 @@
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-xl {
border-radius: var(--radius-xl);
}
@@ -852,6 +887,12 @@
.uppercase {
text-transform: uppercase;
}
.underline {
text-decoration-line: underline;
}
.decoration-blue-600 {
text-decoration-color: var(--color-blue-600);
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -898,6 +939,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-150 {
--tw-duration: 150ms;
transition-duration: 150ms;
@@ -906,6 +952,10 @@
--tw-duration: 200ms;
transition-duration: 200ms;
}
.duration-300 {
--tw-duration: 300ms;
transition-duration: 300ms;
}
.ease-in {
--tw-ease: var(--ease-in);
transition-timing-function: var(--ease-in);
@@ -995,6 +1045,20 @@
}
}
}
.hover\:underline {
&:hover {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
.hover\:decoration-blue-800 {
&:hover {
@media (hover: hover) {
text-decoration-color: var(--color-blue-800);
}
}
}
.hover\:shadow-lg {
&:hover {
@media (hover: hover) {
@@ -1315,6 +1379,235 @@
border-radius: 4px;
cursor: pointer;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-weight: 700;
line-height: 1.25;
margin-top: 2em;
margin-bottom: 1em;
color: var(--gray-900);
}
.prose h1 {
font-size: 2.5em;
}
.prose h2 {
font-size: 2em;
}
.prose h3 {
font-size: 1.75em;
}
.prose h4 {
font-size: 1.5em;
}
.prose h5 {
font-size: 1.25em;
}
.prose h6 {
font-size: 1em;
color: var(--gray-600);
}
.prose p {
margin-bottom: 1.5em;
line-height: 1.75;
color: var(--gray-700);
}
.prose ul,
.prose ol {
margin-bottom: 1.5em;
padding-left: 2em;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
.prose li {
margin-bottom: 0.5em;
line-height: 1.75;
color: var(--gray-700);
}
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
margin-bottom: 0;
margin-top: 0.5em;
}
.prose a {
color: var(--primary-blue);
text-decoration: underline;
text-decoration-color: var(--primary-blue);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.prose a:hover {
color: var(--primary-blue-dark);
text-decoration-color: var(--primary-blue-dark);
}
.prose img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.prose figure {
margin: 2em 0;
text-align: center;
}
.prose figcaption {
font-size: 0.875em;
color: var(--gray-600);
margin-top: 0.5em;
text-align: center;
font-style: italic;
}
.prose table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5em;
border: 1px solid var(--gray-300);
}
.prose th,
.prose td {
padding: 0.75em 1em;
text-align: left;
border-bottom: 1px solid var(--gray-300);
}
.prose th {
background-color: var(--gray-100);
font-weight: 600;
color: var(--gray-900);
}
.prose tbody tr:nth-child(even) {
background-color: var(--gray-50);
}
.prose blockquote {
border-left: 4px solid var(--primary-blue);
padding-left: 1.5rem;
margin: 2em 0;
font-style: italic;
color: var(--gray-600);
background-color: var(--gray-50);
padding: 1.5rem;
border-radius: 0.25rem;
}
.prose blockquote p:last-child {
margin-bottom: 0;
}
.prose code {
background-color: var(--gray-100);
color: var(--gray-800);
padding: 0.25em 0.5em;
border-radius: 0.25rem;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 0.875em;
}
.prose pre {
background-color: var(--gray-900);
color: var(--gray-50);
padding: 1.5em;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1.5em;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 0.875em;
}
.prose pre code {
background-color: transparent;
color: inherit;
padding: 0;
border-radius: 0;
}
.prose iframe,
.prose video,
.prose audio {
max-width: 100%;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.prose .wp-block-embed {
margin: 2em 0;
}
.prose hr {
border: none;
height: 1px;
background-color: var(--gray-300);
margin: 2em 0;
}
.prose .wp-caption {
background-color: var(--gray-50);
border: 1px solid var(--gray-200);
padding: 1em;
border-radius: 0.5rem;
text-align: center;
}
.prose .wp-caption-text {
font-size: 0.875em;
color: var(--gray-600);
margin-top: 0.5em;
font-style: italic;
}
.prose .alignleft {
float: left;
margin: 0.5em 1.5em 0.5em 0;
}
.prose .alignright {
float: right;
margin: 0.5em 0 0.5em 1.5em;
}
.prose .aligncenter {
display: block;
margin: 1.5em auto;
}
@media (max-width: 768px) {
.prose .alignleft,
.prose .alignright {
float: none;
display: block;
margin: 1.5em auto;
clear: both;
}
}
.prose .wp-block-gallery {
margin: 2em 0;
}
.prose .wp-block-gallery .blocks-gallery-item {
margin: 0.5em;
}
.prose .wp-block-quote {
border-left: 4px solid var(--primary-blue);
padding-left: 1.5rem;
margin: 2em 0;
font-style: italic;
color: var(--gray-600);
background-color: var(--gray-50);
padding: 1.5rem;
border-radius: 0.25rem;
}
.prose .wp-block-pullquote {
border-top: 4px solid var(--primary-blue);
border-bottom: 4px solid var(--primary-blue);
padding: 2em;
margin: 2em 0;
text-align: center;
font-style: italic;
color: var(--gray-700);
}
.prose .wp-block-code {
background-color: var(--gray-900);
color: var(--gray-50);
padding: 1.5em;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1.5em;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 0.875em;
}
:root {
--primary-blue: #3b82f6;
--primary-blue-dark: #2563eb;