remove old svelte web source

styles/input.css

@@ -0,0 +1,268 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @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%;
+  }
+}
+
+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 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 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 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;
+  }
+
+  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 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);
+  }
+}