138 lines
3 KiB
CSS
138 lines
3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: NotoEmoji;
|
|
font-weight: 400;
|
|
src: url("/static/fonts/NotoEmoji-Regular.ttf") format("truetype");
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
|
|
section {
|
|
@apply my-8;
|
|
}
|
|
|
|
.emoji {
|
|
font-family: NotoEmoji;
|
|
}
|
|
|
|
a {
|
|
@apply border-klavender border-b-4;
|
|
}
|
|
|
|
a[href^="#"]::before {
|
|
@apply hover:visible;
|
|
content: "#";
|
|
display: inline-block;
|
|
font-size: 0.9em;
|
|
line-height: 1;
|
|
margin-left: -0.8em;
|
|
text-decoration: none;
|
|
visibility: hidden;
|
|
width: 0.8em;
|
|
}
|
|
|
|
h1 {
|
|
@apply mt-8 mb-6 text-2xl sm:text-4xl lg:text-4xl leading-none font-extrabold tracking-tight text-black dark:text-white;
|
|
}
|
|
|
|
h2 {
|
|
@apply mt-6 mb-4 text-xl sm:text-3xl lg:text-3xl leading-none font-extrabold tracking-tight text-black dark:text-white;
|
|
}
|
|
|
|
h3 {
|
|
@apply mt-10 mb-3 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
|
|
}
|
|
|
|
h4 {
|
|
@apply mt-2 mb-1 text-lg sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
|
|
}
|
|
|
|
p {
|
|
@apply my-2 mb-3 text-lg leading-relaxed;
|
|
}
|
|
|
|
li {
|
|
@apply my-2 text-lg;
|
|
}
|
|
|
|
.blog-content ul, .home-content ul {
|
|
@apply list-none list-inside;
|
|
}
|
|
|
|
.blog-content ul li::before, .home-content ul li::before {
|
|
content: "👉";
|
|
font-family: NotoEmoji;
|
|
@apply inline-block mr-2 py-1;
|
|
}
|
|
|
|
img.blog {
|
|
@apply inset-0 h-full w-full rounded-2xl bg-gray-50 object-contain shadow-lg;
|
|
}
|
|
|
|
.blog-content img {
|
|
@apply bg-gray-50 object-contain rounded-2xl shadow-lg max-h-[650px] mx-auto w-auto my-6;
|
|
}
|
|
|
|
|
|
@media print {
|
|
h1 {
|
|
@apply mt-6 mb-4 text-xl;
|
|
}
|
|
|
|
h2 {
|
|
@apply mt-4 mb-2 text-base;
|
|
}
|
|
|
|
h3 {
|
|
@apply text-base;
|
|
}
|
|
|
|
p {
|
|
@apply text-sm my-1;
|
|
}
|
|
|
|
.ppb {
|
|
page-break-before: always;
|
|
}
|
|
}
|
|
|
|
.primary-button {
|
|
@apply rounded-full bg-klavender cursor-pointer px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
|
|
}
|
|
|
|
code[class*="language-"], pre[class*="language-"] {
|
|
white-space: pre-wrap !important;
|
|
word-break: break-word !important;
|
|
}
|
|
|
|
blockquote {
|
|
@apply border-l-4 border-klavender p-4 my-4 text-xl italic;
|
|
}
|
|
}
|
|
|
|
.tags ul {
|
|
@apply flex space-x-4 text-center text-sm;
|
|
}
|
|
|
|
.tags li {
|
|
@apply p-4 inline-flex items-center rounded-2xl bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
|
|
}
|
|
|
|
.tags ul li::before {
|
|
content: "";
|
|
@apply py-0 mr-0;
|
|
}
|
|
|
|
.tags a {
|
|
@apply border-b-0 w-full;
|
|
}
|
|
|
|
.blog-pages a {
|
|
@apply border-b-0;
|
|
}
|
|
|