Better single post display
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user