335 lines
7.3 KiB
CSS
335 lines
7.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-sans: "Baloo2", "Baloo2 Noto Fallback", "Baloo2 Fallback", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
|
|
--text-readxl: 1.75rem;
|
|
--text-readxl--line-height: 2.25rem;
|
|
--text-readxl--letter-spacing: -0.015rem;
|
|
--text-readxl--font-weight: 400;
|
|
|
|
--spacing-note: 60rem;
|
|
--spacing-read: 64rem;
|
|
--spacing-image: min(70rem, 95vw);
|
|
--spacing-maxindex: 100rem;
|
|
|
|
--color-blue-50: #f1f7fe;
|
|
--color-blue-100: #e1effd;
|
|
--color-blue-200: #bddefa;
|
|
--color-blue-300: #82c3f7;
|
|
--color-blue-400: #42a6f0;
|
|
--color-blue-500: #1789e0;
|
|
--color-blue-600: #0a6cbf;
|
|
--color-blue-700: #0a569a;
|
|
--color-blue-800: #0c4980;
|
|
--color-blue-900: #103e6a;
|
|
--color-blue-950: #0b2746;
|
|
|
|
--color-pink-50: #fff4fd;
|
|
--color-pink-100: #ffe7fb;
|
|
--color-pink-200: #ffcff7;
|
|
--color-pink-300: #fea6eb;
|
|
--color-pink-400: #fc76dd;
|
|
--color-pink-500: #f342ca;
|
|
--color-pink-600: #d722a9;
|
|
--color-pink-700: #b31889;
|
|
--color-pink-800: #92166e;
|
|
--color-pink-900: #771859;
|
|
--color-pink-950: #500238;
|
|
|
|
--color-purple-50: #F8F5FC;
|
|
--color-purple-100: #D5C2ED;
|
|
--color-purple-200: #B28EDE;
|
|
--color-purple-300: #8F5BCF;
|
|
--color-purple-400: #6D30B9;
|
|
--color-purple-500: #5F2AA2;
|
|
--color-purple-600: #52248A;
|
|
--color-purple-700: #441E73;
|
|
--color-purple-800: #36185C;
|
|
--color-purple-900: #281244;
|
|
--color-purple-950: #1A0C2D;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Baloo2';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src:
|
|
local('Baloo2'),
|
|
url(/fonts/baloo2/Baloo2-Latin-Variable-wght.woff2) format('woff2');
|
|
}
|
|
|
|
/* latin-ext */
|
|
@font-face {
|
|
font-family: 'Baloo 2';
|
|
font-style: normal;
|
|
font-weight: 400 800;
|
|
font-display: swap;
|
|
src: url(/fonts/baloo2/Baloo2-Latin-Variable-ext-wght.woff2) format('woff2');
|
|
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
|
|
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Baloo2 Fallback';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Helvetica Neue'),
|
|
local('Arial');
|
|
ascent-override: 111.2%;
|
|
descent-override: 54.05%;
|
|
line-gap-override: 0%;
|
|
size-adjust: 96.95%;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Baloo2 Noto Fallback';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Noto Sans');
|
|
ascent-override: 88%;
|
|
descent-override: none;
|
|
line-gap-override: 0%;
|
|
size-adjust: 92%;
|
|
}
|
|
|
|
@layer base {
|
|
a {
|
|
@apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
|
|
}
|
|
|
|
strong {
|
|
@apply font-medium;
|
|
}
|
|
}
|
|
|
|
.article-body {
|
|
h1 {
|
|
@apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
|
|
}
|
|
|
|
h2 {
|
|
@apply px-4 text-xl font-semibold 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;
|
|
}
|
|
|
|
h3 {
|
|
@apply px-4 text-lg font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
|
|
}
|
|
|
|
h4 {
|
|
@apply px-4 text-lg font-medium text-blue-900 mb-2 mt-3 max-w-read mx-auto md:text-lg md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
|
|
}
|
|
|
|
p {
|
|
@apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
|
|
}
|
|
|
|
pre {
|
|
@apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
|
|
}
|
|
|
|
figure {
|
|
@apply p-4;
|
|
|
|
img {
|
|
@apply rounded-sm shadow-md mx-auto lg: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-slate-200 rounded-sm 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-600;
|
|
|
|
p {
|
|
@apply my-2 md:my-4 text-slate-600 max-w-note;
|
|
}
|
|
}
|
|
|
|
:not(pre) code {
|
|
@apply text-pink-900 rounded-sm 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-sm lg:mx-auto lg:text-lg shadow-xs lg:max-w-note;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
@apply pl-10 pr-6 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl lg:pl-14;
|
|
|
|
& p {
|
|
@apply px-2;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
@apply list-disc;
|
|
}
|
|
|
|
ol {
|
|
@apply list-decimal;
|
|
}
|
|
|
|
iframe {
|
|
@apply rounded-sm shadow-md mx-auto lg:max-w-image;
|
|
}
|
|
}
|
|
|
|
article a {
|
|
@apply visited:text-purple-700;
|
|
}
|
|
|
|
.video-embed {
|
|
@apply m-4 mx-auto max-w-image aspect-video;
|
|
}
|
|
|
|
.social-card-twitch:hover {
|
|
transform: translate3d(0.6rem, -0.6rem, 0px);
|
|
box-shadow: -3px 3px 0px 3px #6441a5;
|
|
transition-delay: 75ms;
|
|
}
|
|
|
|
.social-card-youtube:hover {
|
|
@apply rounded-none;
|
|
transform: scale(1.02);
|
|
transition-delay: 100ms;
|
|
}
|
|
|
|
.social-card-instagram:hover {
|
|
filter: brightness(84%);
|
|
transition-delay: 100ms;
|
|
}
|
|
|
|
.social-card-tiktok {
|
|
position: relative;
|
|
|
|
&:hover {
|
|
animation: tiktok-glitch 1.5s infinite;
|
|
animation-delay: 200ms;
|
|
}
|
|
}
|
|
|
|
@keyframes tiktok-glitch {
|
|
0% {
|
|
box-shadow:
|
|
0px 0px 0 rgba(0, 255, 255, 0),
|
|
0px 0px 0 rgba(255, 0, 255, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
10% {
|
|
box-shadow:
|
|
-3px -3px 0 rgba(0, 255, 255, 0.8),
|
|
3px 3px 0 rgba(255, 0, 255, 0.8);
|
|
transform: translate(-1px, -1px);
|
|
}
|
|
|
|
15% {
|
|
box-shadow:
|
|
2px -2px 0 rgba(0, 255, 255, 0.6),
|
|
-2px 2px 0 rgba(255, 0, 255, 0.6);
|
|
transform: translate(2px, -2px);
|
|
}
|
|
|
|
20% {
|
|
box-shadow:
|
|
-1px 1px 0 rgba(0, 255, 255, 0.4),
|
|
1px -1px 0 rgba(255, 0, 255, 0.4);
|
|
transform: translate(1px, 1px);
|
|
}
|
|
|
|
25% {
|
|
box-shadow:
|
|
-4px 4px 0 rgba(0, 255, 255, 1),
|
|
4px -4px 0 rgba(255, 0, 255, 1);
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
|
|
30% {
|
|
box-shadow:
|
|
3px -3px 0 rgba(0, 255, 255, 0.5),
|
|
-3px 3px 0 rgba(255, 0, 255, 0.5);
|
|
transform: translate(3px, -3px);
|
|
}
|
|
|
|
40% {
|
|
box-shadow:
|
|
-2px 2px 0 rgba(0, 255, 255, 0.9),
|
|
2px -2px 0 rgba(255, 0, 255, 0.9);
|
|
transform: translate(-1px, 1px);
|
|
}
|
|
|
|
50% {
|
|
box-shadow:
|
|
-1px -2px 0 rgba(0, 255, 255, 0.7),
|
|
2px -1px 0 rgba(255, 0, 255, 0.7);
|
|
transform: translate(1px, -1px);
|
|
}
|
|
|
|
60% {
|
|
box-shadow:
|
|
2px -2px 0 rgba(0, 255, 255, 0.3),
|
|
-2px 2px 0 rgba(255, 0, 255, 0.3);
|
|
transform: translate(2px, -2px);
|
|
}
|
|
|
|
75% {
|
|
box-shadow:
|
|
-3px 3px 0 rgba(0, 255, 255, 1),
|
|
3px -3px 0 rgba(255, 0, 255, 1);
|
|
transform: translate(-3px, 3px);
|
|
}
|
|
|
|
85% {
|
|
box-shadow:
|
|
-2px -2px 0 rgba(0, 255, 255, 0.2),
|
|
2px 2px 0 rgba(255, 0, 255, 0.2);
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
|
|
100% {
|
|
box-shadow:
|
|
0px 0px 0 rgba(0, 255, 255, 0),
|
|
0px 0px 0 rgba(255, 0, 255, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
/* Define the animation for persistent elements (like the header and title) */
|
|
/* ::view-transition-group(*) { */
|
|
/* transition: transform 3.4s ease-in-out; */
|
|
/* } */
|
|
|
|
/* ::view-transition-group(blog_post_preview) { */
|
|
/* animation-duration: 5.5s; */
|
|
/* transition: transform 5.4s ease-in-out; */
|
|
/* opacity: 1; */
|
|
/* } */ |