144 lines
3.4 KiB
CSS
144 lines
3.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: 'Comfortaa';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 300;
|
|
src:
|
|
local('Comfortaa Light'),
|
|
local('Comfortaa'),
|
|
url(/fonts/comfortaa/Comfortaa-Light.woff2) format('woff2'),
|
|
url(/fonts/comfortaa/Comfortaa-Light.ttf) format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Comfortaa';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
src:
|
|
local('Comfortaa Regular'),
|
|
local('Comfortaa'),
|
|
url(/fonts/comfortaa/Comfortaa-Regular.woff2) format('woff2'),
|
|
url(/fonts/comfortaa/Comfortaa-Regular.ttf) format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Comfortaa';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 500;
|
|
src:
|
|
local('Comfortaa Medium'),
|
|
local('Comfortaa'),
|
|
url(/fonts/comfortaa/Comfortaa-Medium.woff2) format('woff2'),
|
|
url(/fonts/comfortaa/Comfortaa-Medium.ttf) format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Comfortaa';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 600;
|
|
src:
|
|
local('Comfortaa SemiBold'),
|
|
local('Comfortaa'),
|
|
url(/fonts/comfortaa/Comfortaa-SemiBold.woff2) format('woff2'),
|
|
url(/fonts/comfortaa/Comfortaa-SemiBold.ttf) format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Comfortaa';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 700;
|
|
src:
|
|
local('Comfortaa Bold'),
|
|
local('Comfortaa'),
|
|
url(/fonts/comfortaa/Comfortaa-Bold.woff2) format('woff2'),
|
|
url(/fonts/comfortaa/Comfortaa-Bold.ttf) format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Baloo2';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src:
|
|
local('Baloo2'),
|
|
url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
|
|
}
|
|
}
|
|
|
|
a {
|
|
@apply text-pink-600 underline underline-offset-2;
|
|
|
|
&:hover {
|
|
@apply transition text-blue-400;
|
|
}
|
|
}
|
|
|
|
.article-body {
|
|
h1 {
|
|
@apply px-4 text-2xl text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
|
|
}
|
|
h2 {
|
|
@apply px-4 text-xl text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
|
|
}
|
|
p {
|
|
@apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-2xl;
|
|
}
|
|
pre {
|
|
@apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
|
|
}
|
|
figure {
|
|
@apply p-4;
|
|
|
|
img {
|
|
@apply rounded shadow-md mx-auto max-w-image;
|
|
}
|
|
}
|
|
figcaption {
|
|
@apply mt-2 text-center text-sm italic text-blue-800 md:text-base lg:text-lg;
|
|
}
|
|
|
|
table {
|
|
@apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-gray-200 rounded md:text-base lg:text-xl lg:my-8;
|
|
}
|
|
|
|
thead {
|
|
@apply bg-blue-100;
|
|
}
|
|
|
|
tbody {
|
|
@apply bg-slate-50;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
@apply py-0.5 px-2 border-b md:py-2 md:px-5;
|
|
}
|
|
|
|
tr {
|
|
@apply even:bg-slate-100;
|
|
}
|
|
|
|
blockquote {
|
|
@apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-500;
|
|
|
|
p {
|
|
@apply my-2 md:my-4 text-slate-600 max-w-note;
|
|
}
|
|
}
|
|
|
|
:not(pre) code {
|
|
@apply text-pink-950 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
|
|
}
|
|
|
|
pre code pre {
|
|
@apply mx-2 rounded lg:mx-auto lg:text-lg shadow-sm lg:max-w-note;
|
|
}
|
|
}
|
|
|
|
.video-embed {
|
|
@apply m-4 mx-auto max-w-image aspect-video;
|
|
}
|