113 lines
1.8 KiB
CSS
113 lines
1.8 KiB
CSS
.articleDetail {
|
|
}
|
|
.article {
|
|
@apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;
|
|
|
|
:global(.dark) & {
|
|
@apply bg-gray-800;
|
|
}
|
|
& > header {
|
|
@apply my-8 mx-4;
|
|
h1 {
|
|
@apply text-2xl font-medium;
|
|
|
|
:global(.dark) & {
|
|
@apply text-gray-200;
|
|
}
|
|
}
|
|
time {
|
|
@apply text-sm text-gray-500;
|
|
:global(.dark) & {
|
|
@apply text-gray-400;
|
|
}
|
|
}
|
|
}
|
|
& > div {
|
|
@apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
@apply text-red-400;
|
|
|
|
:global(.dark) & {
|
|
@apply text-white;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
@apply hidden;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-2xl mt-8 mb-4 font-semibold border-b border-red-500 leading-10;
|
|
|
|
:global(.dark) & {
|
|
@apply border-green-700;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@apply text-xl mt-6 mb-2 font-light;
|
|
}
|
|
|
|
h4 {
|
|
@apply mt-4 font-medium;
|
|
}
|
|
|
|
p {
|
|
@apply my-4;
|
|
}
|
|
|
|
ul {
|
|
@apply pl-4;
|
|
|
|
li {
|
|
@apply list-disc;
|
|
}
|
|
}
|
|
ol {
|
|
@apply pl-4;
|
|
|
|
li {
|
|
@apply list-decimal;
|
|
}
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
@apply font-mono rounded;
|
|
}
|
|
|
|
code {
|
|
@apply p-1 text-red-500 bg-red-100;
|
|
:global(.dark) & {
|
|
@apply bg-green-800 bg-opacity-20 text-green-400;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
@apply px-2 py-1 bg-yellow-900 bg-opacity-5 overflow-x-auto;
|
|
:global(.dark) & {
|
|
@apply bg-green-800 bg-opacity-20;
|
|
}
|
|
code {
|
|
@apply text-current bg-transparent;
|
|
|
|
:global(.dark) & {
|
|
@apply text-current bg-transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.articleEnd {
|
|
@apply text-center text-gray-400 text-sm my-6;
|
|
|
|
&:before, &:after {
|
|
content: '※';
|
|
@apply mx-4 text-xs align-text-top;
|
|
}
|
|
} |